一. HTML 初識(shí)
- HTML 指的是超文本標(biāo)記語(yǔ)言 (Hyper Text Markup Language)是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言。
- HTML 不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言 (markup language)
- 標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽 (markup tag)
網(wǎng)頁(yè)是由網(wǎng)頁(yè)元素組成的 ， 這些元素是利用html標(biāo)簽描述出來(lái)，然后通過(guò)瀏覽器解析，就可以顯示給用戶了。
所謂 超文本，有2層含義：
- 因?yàn)樗梢约尤雸D片、聲音、動(dòng)畫(huà)、多媒體等內(nèi)容（超越文本限制 ）
- 不僅如此，它還可以從一個(gè)文件跳轉(zhuǎn)到另一個(gè)文件，與世界各地主機(jī)的文件連接（超級(jí)鏈接文本 ）。
二、HTML骨架標(biāo)簽總結(jié)
| 標(biāo)簽名 | 定義 | 說(shuō)明 |
|---|---|---|
| <html></html> | HTML標(biāo)簽 | 頁(yè)面中最大的標(biāo)簽，我們成為 根標(biāo)簽 |
| <head></head> | 文檔的頭部 | 注意在head標(biāo)簽中我們必須要設(shè)置的標(biāo)簽是title |
| <titile></title> | 文檔的標(biāo)題 | 讓頁(yè)面擁有一個(gè)屬于自己的網(wǎng)頁(yè)標(biāo)題 |
| <body></body> | 文檔的主體 | 元素包含文檔的所有內(nèi)容，頁(yè)面內(nèi)容基本都是放到body里面 |
<html>
<head>
<title>我的第一個(gè)頁(yè)面</title>
</head>
<body>
這是body，文檔的主體，頁(yè)面內(nèi)容基本都是放到body里面
</body>
</html>
團(tuán)隊(duì)約定大小寫(xiě):
HTML標(biāo)簽名、類名、標(biāo)簽屬性和大部分屬性值統(tǒng)一用 小寫(xiě)
三、HTML元素標(biāo)簽分類
- 常規(guī)元素（雙標(biāo)簽）
<標(biāo)簽名> 內(nèi)容 </標(biāo)簽名> 比如 <body> 我是文字 </body>
- 空元素（單標(biāo)簽）
<標(biāo)簽名 /> 比如 <br /> <hr/> <img/>
四、HTML標(biāo)簽關(guān)系
- 嵌套關(guān)系
<head>
<title>title</title>
</head>
- 并列關(guān)系
<head></head>
<body></body>
五、文檔類型<!DOCTYPE>
<!DOCTYPE html>
作用：
<!DOCTYPE> 聲明位于文檔中的最前面的位置，處于 <html> 標(biāo)簽之前。此標(biāo)簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。<!DOCTYPE html> 就是告訴瀏覽器按照HTML5 規(guī)范解析頁(yè)面.
六、頁(yè)面語(yǔ)言lang
<html lang="en"> 指定該html標(biāo)簽內(nèi)容所用的語(yǔ)言
最常見(jiàn)的2個(gè)：
- en定義語(yǔ)言為英語(yǔ)
- zh-CN定義語(yǔ)言為中文
團(tuán)隊(duì)約定：
考慮瀏覽器和操作系統(tǒng)的兼容性，目前仍然使用 zh-CN 屬性值
拓展：
可能對(duì)于程序來(lái)說(shuō)沒(méi)有太大的作用，但是它可以告訴瀏覽器，搜索引擎，一些處理HTML的程序?qū)?yè)面語(yǔ)言內(nèi)容來(lái)做一些對(duì)應(yīng)的處理或者事情。
比如可以:
- 根據(jù)根據(jù)lang屬性來(lái)設(shè)定不同語(yǔ)言的css樣式，或者字體
- 告訴搜索引擎做精確的識(shí)別
- 讓語(yǔ)法檢查程序做語(yǔ)言識(shí)別
- 幫助翻譯工具做識(shí)別
- 幫助網(wǎng)頁(yè)閱讀程序做識(shí)別
等等
七、字符集
<meta charset="UTF-8" />
utf-8是目前最常用的字符集編碼方式，常用的字符集編碼方式還有 gbk 和 gb2312。
- gb2312 簡(jiǎn)單中文 包括6763個(gè)漢字 GUO BIAO
- BIG5 繁體中文 港澳臺(tái)等用
- GBK 包含全部中文字符 是GB2312的擴(kuò)展，加入對(duì)繁體字的支持，兼容GB2312
- UTF-8 則基本包含全世界所有國(guó)家需要用到的字符
- 這句代碼非常關(guān)鍵， 是必須要寫(xiě)的代碼，否則可能引起亂碼的情況。
- 這句話是讓 html 文件是以 UTF-8 編碼保存的， 瀏覽器根據(jù)編碼去解碼對(duì)應(yīng)的html內(nèi)容。
團(tuán)隊(duì)約定：
一般情況下統(tǒng)一使用 "UTF-8" 編碼, 請(qǐng)盡量統(tǒng)一寫(xiě)成標(biāo)準(zhǔn)的 "UTF-8"，不要寫(xiě)成 "utf-8" 或 "utf8" 或 "UTF8"。
八、HTML標(biāo)簽的語(yǔ)義化
根據(jù)標(biāo)簽的語(yǔ)義，在合適的地方給一個(gè)最為合理的標(biāo)簽，讓結(jié)構(gòu)更清晰。
標(biāo)簽語(yǔ)義化可以：
- 方便代碼的閱讀和維護(hù)
- 同時(shí)讓瀏覽器或是網(wǎng)絡(luò)爬蟲(chóng)可以很好地解析，從而更好分析其中的內(nèi)容
- 使用語(yǔ)義化標(biāo)簽會(huì)具有更好地搜索引擎優(yōu)化
語(yǔ)義是否良好： 當(dāng)我們?nèi)サ鬋SS之后，網(wǎng)頁(yè)結(jié)構(gòu)依然組織有序，并且有良好的可讀性。( 裸奔起來(lái)一樣好看 )
遵循的原則：先確定語(yǔ)義的HTML ，再選合適的CSS。
例如：段落我們一般用 <p></p> 標(biāo)簽,標(biāo)題一般用 <hx></hx> 標(biāo)簽。
