2018-08-13 day01 HTML基礎(chǔ)

web基礎(chǔ):

1.web標準(萬維網(wǎng)-w3c):

結(jié)構(gòu)標準:HTML → 決定網(wǎng)頁上有什么東西(能夠顯示什么內(nèi)容)
表現(xiàn)標準:CSS → 決定內(nèi)容的布局和顯示方式
行為標準:Javascript(JS) → 決定網(wǎng)頁上的動態(tài)效果

2.HTML認識

HTML是超文本標記語言(可以用來標記文本、圖片忠怖、視頻包归、音頻崔兴、flash、按鈕、輸入框等)

HTML不是編程語言,不會編譯執(zhí)行,語法錯誤也不會報錯

3.HTML版本

廣義H5:HTML5 + CSS3 + Js
狹義H5:HTML5

4.HTML編程

a.HTML標記語言對應(yīng)的文件后綴,一般是html
b.HTML的結(jié)構(gòu):整個HTML是通過不同的標記來組成

5.標簽/標記

a.雙標簽(常規(guī)標簽)
<標簽名屬性=屬性值>標簽內(nèi)容</標簽名>
b單標簽(自閉合標簽)
<標簽名屬性 = 屬性值/(/可寫可不寫)>
說明:標簽名:HTML固定
屬性:屬性和標簽名之間用空格隔開,以屬性=屬性值的形式存在,多個屬性之間也用空格隔開(屬性可以是HTML標準中的屬性,也可以是自定義屬性)
標簽內(nèi)容:是指開始標簽和結(jié)束標簽之間的內(nèi)容,標簽的內(nèi)容可以是任何內(nèi)容

<a></a> → a標簽
<p></P> → p標簽
<input> → input標簽

補充:HTML大小寫不敏感

6.網(wǎng)頁結(jié)構(gòu)

head標簽中的內(nèi)容一般都是看不見埂陆，并且里面的子標簽是固定的：
title標簽 → 設(shè)置標題
meta標簽
link標簽
style標簽
script標簽
base標簽

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--設(shè)置網(wǎng)頁標題（可見）-->
    <title>Page Title</title>
    <!--charset：設(shè)置編碼方式-->
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link />
    <script ></script>
</head>
<!--body標簽中的內(nèi)容，負責(zé)整個網(wǎng)頁的顯示部分-->
<body>
    
</body>
</html>

文本標簽

1.標題標簽(h1-h6)

<h1>我是標題1</h1>
<h2>我是標題2</h2>
<h3>我是標題3</h3>
<h4>我是標題4</h4>
<h5>我是標題4</h5>
<h6>我是標題4</h6>
<h7>我是錯誤的標題格式</h7>

效果:
<h1>我是標題1</h1>
<h2>我是標題2</h2>
<h3>我是標題3</h3>
<h4>我是標題4</h4>
<h5>我是標題4</h5>
<h6>我是標題4</h6>

2.段落標簽(p)

a.一個p標簽對應(yīng)一個段落

b.p標簽的內(nèi)容結(jié)束后會和其他的內(nèi)容之間默認有一個空行

<p>
    世界經(jīng)濟長遠發(fā)展的動力源自創(chuàng)新娃豹》偈總結(jié)歷史經(jīng)驗，
我們會發(fā)現(xiàn)懂版，體制機制變革釋放出的活力和創(chuàng)造力鹃栽，科技進步造就的新產(chǎn)業(yè)和新產(chǎn)品，
是歷次重大危機后世界經(jīng)濟走出困境躯畴、實現(xiàn)復(fù)蘇的根本民鼓。

</p>
<p >
    面向未來，增強自主創(chuàng)新能力蓬抄，最重要       的就是要堅定不移走中國特色自主創(chuàng)新道路丰嘉，
堅持自主創(chuàng)新、重點跨越倡鲸、支撐發(fā)展供嚎、引領(lǐng)未來的方針，
加快創(chuàng)新型國家建設(shè)步伐峭状。&frac12;</p>

3.文本符號

  --- 空格
其他的查手冊

<p>
&nbsp;&nbsp;&nbsp;&nbsp;世界經(jīng)濟長遠發(fā)展的動力源自創(chuàng)新克滴。總結(jié)歷史經(jīng)驗优床，
我們會發(fā)現(xiàn)劝赔，體制機制變革釋放出的活力和創(chuàng)造力，科技進步造就的新產(chǎn)業(yè)和新產(chǎn)品胆敞，
是歷次重大危機后世界經(jīng)濟走出困境着帽、實現(xiàn)復(fù)蘇的根本。

</p>

4.換行標簽(br)

<p>
&nbsp;&nbsp;&nbsp;&nbsp;世界經(jīng)濟長遠發(fā)展的動力源自創(chuàng)新移层∪院玻總結(jié)歷史經(jīng)驗，<br />
我們會發(fā)現(xiàn)观话，體制機制變革釋放出的活力和創(chuàng)造力予借，科技進步造就的新產(chǎn)業(yè)和新產(chǎn)品，<br />
是歷次重大危機后世界經(jīng)濟走出困境、實現(xiàn)復(fù)蘇的根本灵迫。
</p>

5.超鏈接(a)

<a >百度一下</a>

6.文字加粗(b/strong)

<b>加粗文字</b>
<strong>加粗文字</strong> → 有強調(diào)的作用(首選)

<p>
&nbsp;&nbsp;&nbsp;&nbsp;世界經(jīng)濟長遠發(fā)展的動力源自創(chuàng)新秦叛。<hr />總結(jié)歷史經(jīng)驗，<br />
我們會發(fā)現(xiàn)瀑粥，<b>體制機制</b>變革釋放出的活力和<strong>創(chuàng)造力</strong>挣跋，科技進步造就的新產(chǎn)業(yè)和新產(chǎn)品，<br />
是歷次重大危機后世界經(jīng)濟走出困境狞换、實現(xiàn)復(fù)蘇的根本避咆。
</p>
<hr />

7.文字傾斜(i/em)

<i>傾斜文字</i>
<em>傾斜文字</em> → 有強調(diào)的作用(首選)

<p>
&nbsp;&nbsp;&nbsp;&nbsp;世界經(jīng)濟<i>長遠發(fā)展</i>的動力源自創(chuàng)新⌒拊耄總結(jié)<em>歷史</em>經(jīng)驗牌借，<br />
我們會發(fā)現(xiàn)，<b><i>體制機制</i></b>變革釋放出的活力和<strong>創(chuàng)造力</strong>割按，科技進步造就的新產(chǎn)業(yè)和新產(chǎn)品，<br />
是歷次重大危機后世界經(jīng)濟走出困境磷籍、實現(xiàn)復(fù)蘇的根本适荣。
</p>

8.水平線

<hr />

列表

有序列表

<ol>
    <li>語文</li>
    <li>數(shù)學(xué)</li>
    <li>英語</li>
</ol>

無序列表

<ul>
    <li>成都</li>
    <li>重慶</li>
    <li>北京</li>
</ul>

自定義列表

<dl>
    <dt>城市:</dt>
    <dd>成都</dd>
    <dd>重慶</dd>
    <dd>合肥</dd>
    <dt>省份:</dt>
    <dd>四川</dd>
    <dd>安徽</dd>
    <dd>湖南</dd>
</dl>

圖片和超鏈接

1.圖片標簽(img)

a.src屬性:圖片的地址(本地地址、網(wǎng)絡(luò)地址)

本地地址:相對路徑(相對于工程目錄)
注意:本地圖片需要放到工程目錄下的img文件夾下

b.title屬性：圖片的標題(鼠標停留在圖片上院领，隔一段時間才顯示出來)

c.alt屬性：圖片加載失敗后顯示的提示信息

<h1>圖片1</h1>
<img src="img/luffy.png"/>
<img id="image1" alt="圖片加載失敗" title="山治" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534152944837&di=6f15150dbd694d66d199f66c6b0c6612&imgtype=0&src=http%3A%2F%2Fp6.qhimg.com%2Ft01764dfada8dc1af26.jpg"/>

<h1 id="imge2">圖片2</h1>
<img src="img/luffy.png"/>
<h1>圖片3</h1>
<img src="img/luffy.png"/>

2.超鏈接（a）

網(wǎng)頁上點擊后可以跳轉(zhuǎn)的標簽都是超鏈接

href屬性:

跳轉(zhuǎn)地址(本地地址弛矛，網(wǎng)絡(luò)地址)

網(wǎng)絡(luò)地址：跳轉(zhuǎn)到對應(yīng)的網(wǎng)頁

本地地址: 當(dāng)前工程的其他的html文件路徑

空串/#: 刷新頁面回到網(wǎng)頁的頂部

選擇器：讓網(wǎng)頁滾動到網(wǎng)頁上的任意的位置

target屬性：

_self(默認的): 在當(dāng)前頁面中打開href的地址

_blank: 在新的頁面中打開href的地址

a. 點擊文字跳轉(zhuǎn)

<a href="#">百度一下</a>
<a href="03-列表.html" target="_blank">列表</a>
<a href="#imge2">圖片2</a>
<a href="#image1">圖片11111</a>

b.點擊圖片跳轉(zhuǎn)

<a >
    <img src="img/luffy2.png"/>
</a>

表格

table -- 標簽代表這個表格

tr -- 代表的是一行
td -- 代表的是列（一個td對應(yīng)一個單元格）

一個表格中可以有多行，一行有多列

table屬性:

1.border:設(shè)置整個表格中邊框的寬度
2.width:設(shè)置整個表格的寬度
3.heigt:設(shè)置整個表格的高度（每一行的高度是一樣的）
4.align：center -- 讓整個表在其父標簽中居中
5.bgcolor: 背景顏色
6.cellpadding="100": 設(shè)置內(nèi)容和單元格之間的間距(了解)
7.cellspacing: 設(shè)置單元格和單元格之間的間隙

tr屬性:

1.height: 設(shè)置單獨的某一行的高度
2.align:center -- 讓當(dāng)前行里面的所有的單元格中的內(nèi)容居中
3.bgcolor: 背景顏色

td屬性:

1.width：設(shè)置某一列的寬度
2.align:center -- 讓某一個單元格中的內(nèi)容居中
3.bgcolor: 背景顏色

注意:所有的屬性的值都要用雙引號括起來
創(chuàng)建一個2*3的表格

<table border="1"  bgcolor='pink' cellspacing="0" bordercolor='purple'>
    <!--第一行-->
    <tr height="50" align="center">
        <!--第一行的第一列-->
        <td width="80">姓名</td> 
        <!--第一行的第二列-->
        <td width="120">成績</td>
        <!--第一行的第三列-->
        <td width="120">是否留級</td>
    </tr>
    <!--第二行-->
    <tr height="100">
        <td align="center">古雙全</td>
        <td bgcolor="brown">90</td>
        <td>否</td>
    </tr>
    <!--第三行-->
    <tr height="100" bgcolor='bisque'>
        <td>100</td>
        <td>200</td>
        <td>300</td>
    </tr>
    
</table>

設(shè)置表格間距

<table border="" cellspacing="" cellpadding="100">
    
    <tr>
        <td>Data</td>
        <td>100</td>
    </tr>
</table>

復(fù)雜表格

rowspan:合并行

<!--表格1-->
<table border="1" width="300"  height="200">
    <tr>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
    </tr>
    
    <tr>
        <td></td>
        <td></td>
    </tr>
    
</table>

colspan:合并列

<table border="1" width="400" height="300">
    <tr>
        <td rowspan="3"></td>
        <td></td>
        <td></td>
    </tr>
    
    <tr>
        <td rowspan="2"></td>
        <td></td>
    </tr>
    
    <tr>
        <td></td>
    </tr>
    
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    
    <tr>
        <td></td>
        <td colspan="2"></td>
    </tr>
    
</table>

作業(yè)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>個人簡歷表</title>
    <style>
        tr {
            text-align: center
        }
    </style>
</head>

<body>
    <h2 align="center">個人簡歷表</h2>
    <table border="2" align="center">
        <tr>
            <td>求職意向</td>
            <td colspan="6">666</td>
        </tr>
        <tr bgcolor="limegreen">
            <td colspan="7">
                <strong>基本信息</strong>
            </td>
        </tr>
        <tr>
            <td>姓名</td>
            <td>信</td>
            <td>性別</td>
            <td>男</td>
            <td>民族</td>
            <td>漢</td>
            <td rowspan="4">
                <img src="http://pic.365j.com/file/201607/07/461a5709b8.jpg" alt="就是我" width="80"> </td>
        </tr>
        <tr>
            <td>出生日期</td>
            <td>1973.05.14</td>
            <td>政治面貌</td>
            <td>群眾</td>
            <td>婚否</td>
            <td>未婚</td>
        </tr>
        <tr>
            <td>籍貫</td>
            <td>臺灣</td>
            <td>現(xiàn)所在地</td>
            <td>臺灣</td>
            <td>學(xué)歷</td>
            <td>尡热唬科</td>
        </tr>
        <tr>
            <td>畢業(yè)院校</td>
            <td colspan="2">華岡藝校</td>
            <td>所學(xué)專業(yè)</td>
            <td colspan="2">舞美燈光</td>
        </tr>
        <tr>
            <td>電子郵箱</td>
            <td colspan="2">KrisShin5014@Outlook.com</td>
            <td>手機號碼</td>
            <td colspan="3">無</td>
        </tr>
        <tr bgcolor="limegreen">
            <td colspan="7">
                <strong>教育經(jīng)歷</strong>
            </td>
        </tr>
        <tr>
            <td colspan="2">起止時間</td>
            <td colspan="2">畢業(yè)院校/教育機構(gòu)</td>
            <td colspan="3">專業(yè)/課程</td>
        </tr>
        <tr>
            <td colspan="2">1980-1986</td>
            <td colspan="2">
                <a >臺北國小</a>
            </td>
            <td colspan="3">多的很</td>
        </tr>
        <tr>
            <td colspan="2">1987-1993</td>
            <td colspan="2">
                <a >臺北國中</a>
            </td>
            <td colspan="3">多的很</td>
        </tr>
        <tr>
            <td colspan="2">1994-1996</td>
            <td colspan="2">
                <a >華岡藝校</a>
            </td>
            <td colspan="3">舞美燈光</td>
        </tr>
        <tr height="25">
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td colspan="3"></td>
        </tr>
        <tr height="25">
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td colspan="3"></td>
        </tr>
        <tr bgcolor="limegreen">
            <td colspan="7">
                <strong>工作經(jīng)歷</strong>
            </td>
        </tr>
        <tr>
            <td colspan="2">起止時間</td>
            <td colspan="2">公司名稱及職位</td>
            <td colspan="3">工作內(nèi)容</td>
        </tr>
        <tr>
            <td colspan="2">2003-2007</td>
            <td colspan="2">艾回唱片音樂公司</td>
            <td colspan="3">樂隊主唱</td>
        </tr>
        <tr>
            <td colspan="2">2008-2013</td>
            <td colspan="2">愛貝克斯音樂公司</td>
            <td colspan="3">歌手</td>
        </tr>
        <tr>
            <td colspan="2">2014-2016</td>
            <td colspan="2">華研國際音樂公司</td>
            <td colspan="3">歌手</td>
        </tr>
        <tr height="50">
            <td>技能/愛好</td>
            <td colspan="6">長得賊高,吃的賊多,喜歡睡覺,擅長現(xiàn)場live</td>
        </tr>
        <tr height="50">
            <td>自我評價</td>
            <td colspan="6">帥的一批</td>
        </tr>
    </table>
</body>

</html>

image.png

最后編輯于：2018.08.13 20:32:49

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末丈氓，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子强法，更是在濱河造成了極大的恐慌万俗，老刑警劉巖，帶你破解...
沈念sama閱讀 206,013評論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件饮怯，死亡現(xiàn)場離奇詭異闰歪，居然都是意外死亡，警方通過查閱死者的電腦和手機蓖墅，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,205評論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門库倘，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人论矾，你說我怎么就攤上這事教翩。” “怎么了贪壳？”我有些...
開封第一講書人閱讀 152,370評論 0贊 342
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵饱亿，是天一觀的道長。經(jīng)常有香客問我，道長路捧，這世上最難降的妖魔是什么关霸？我笑而不...
開封第一講書人閱讀 55,168評論 1贊 278
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮杰扫，結(jié)果婚禮上队寇，老公的妹妹穿的比我還像新娘。我一直安慰自己章姓，他們只是感情好佳遣，可當(dāng)我...
茶點故事閱讀 64,153評論 5贊 371
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著凡伊，像睡著了一般零渐。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上系忙，一...
開封第一講書人閱讀 48,954評論 1贊 283
城市分裂傳說
那天诵盼，我揣著相機與錄音，去河邊找鬼银还。笑死风宁，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的蛹疯。我是一名探鬼主播戒财，決...
沈念sama閱讀 38,271評論 3贊 399
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼捺弦！你這毒婦竟也來了饮寞？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 36,916評論 0贊 259
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤列吼，失蹤者是張志新（化名）和其女友劉穎幽崩，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體冈欢，經(jīng)...
沈念sama閱讀 43,382評論 1贊 300
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡歉铝，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 35,877評論 2贊 323
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了凑耻。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片太示。...
茶點故事閱讀 37,989評論 1贊 333
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖香浩，靈堂內(nèi)的尸體忽然破棺而出类缤，到底是詐尸還是另有隱情，我是刑警寧澤邻吭，帶...
沈念sama閱讀 33,624評論 4贊 322
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布餐弱，位于F島的核電站，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏膏蚓。R本人自食惡果不足惜瓢谢，卻給世界環(huán)境...
茶點故事閱讀 39,209評論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望驮瞧。院中可真熱鬧氓扛，春花似錦、人聲如沸论笔。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,199評論 0贊 19
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽狂魔。三九已至蒜埋，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間最楷，已是汗流浹背整份。一陣腳步聲響...
開封第一講書人閱讀 31,418評論 1贊 260
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留籽孙，地道東北人皂林。一個月前我還...
沈念sama閱讀 45,401評論 2贊 352
代替公主和親
正文我出身青樓，卻偏偏與公主長得像蚯撩，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子烛占，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 42,700評論 2贊 345