HTML 初識(shí)
1. 定義
- HTML 指的是超文本標(biāo)記語(yǔ)言是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言。
- HTML 不是一種編程語(yǔ)言而是一種標(biāo)記語(yǔ)言
- 標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽
所謂超文本，有2層含義：
- 因?yàn)樗梢约尤雸D片、聲音、動(dòng)畫、多媒體等內(nèi)容（超越文本限制）
- 不僅如此，它還可以從一個(gè)文件跳到另一個(gè)文件，與世界各地主機(jī)的文件連接（超級(jí)鏈接文本）
總結(jié)
- html 是超文本標(biāo)記（標(biāo)簽）語(yǔ)言
- 我們學(xué)習(xí)html主要學(xué)習(xí)html標(biāo)簽
- 我們用html標(biāo)簽描述網(wǎng)頁(yè)元素。比如圖片標(biāo)簽、文字標(biāo)簽、鏈接標(biāo)簽等等
- 標(biāo)簽有自己的語(yǔ)法規(guī)范，所有的html標(biāo)簽都是用<>表示的
1.1 HTML骨架標(biāo)簽
- 語(yǔ)法規(guī)范
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
| 標(biāo)簽名 | 定義 | 說(shuō)明 |
|---|---|---|
| <html></heml> | HTML標(biāo)簽 | 頁(yè)面中最大的標(biāo)簽，我們成為 根標(biāo)簽 |
| <head></head> | 文檔的頭部 | 注意在head標(biāo)簽中我們必須要設(shè)置的標(biāo)簽是title |
| <title></title> | 文檔的標(biāo)題 | 讓頁(yè)面擁有一個(gè)屬于自己的網(wǎng)頁(yè)標(biāo)題 |
| <body></body> | 文檔的主題 | 元素包含文檔的所有內(nèi)容，頁(yè)面內(nèi)容 基本都是放到body里面的 |
例
<head>
<title>00我的頁(yè)面00</title>
</head>
<body>
窗前明月光，疑是地上霜。
</body>
</html>
1.2HTML元素標(biāo)簽分類
標(biāo)簽：
帶<>符號(hào)的的元素被稱為HTML標(biāo)簽。
分類：
- 常規(guī)元素（雙標(biāo)簽）
<標(biāo)簽名>內(nèi)容</標(biāo)簽名> 比如<body> 我是神</body>
2.空標(biāo)簽（單標(biāo)簽）
<標(biāo)簽名 /> 比如<br />
1.3 HTML標(biāo)簽關(guān)系
主要針對(duì)于雙標(biāo)簽的相互關(guān)系分為兩種：請(qǐng)大家務(wù)必熟悉記住這種標(biāo)簽關(guān)系。
，因?yàn)楹竺嫖覀儤?biāo)簽嵌套不叫多，很容易弄混他們的關(guān)系。
- 嵌套關(guān)系
<head>
<body>
</body>
</head>
- 并列關(guān)系
<head> </head>
<body> </body>
2. 代碼開發(fā)工具
sublime生成html骨架小技巧
- 雙擊打開軟件
- 新建文件（ctrl+n）
- 保存（ctrl+s）,保存為：文件名.html （ 注意 后綴名必須是 .html )
- 放大縮小代碼 按住 ctrl 在 滾動(dòng)鼠標(biāo)滾輪 或者 ctrl+ 加號(hào) 鍵 和 ctrl + 減號(hào)鍵
- 生成頁(yè)面骨架結(jié)構(gòu)
- html: 5 按下tab鍵 或者
- ! 按下tab鍵
- 在瀏覽器中預(yù)覽頁(yè)面
- 右鍵在 瀏覽器中打開
3. 文檔類型<!DOCTYPE>
用法：
<!DOCTYPE html>
作用：
<!DOCTYPE> 聲明位于文檔中的最前面的位置，處于 <html> 標(biāo)簽之前。此標(biāo)簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。
HTML文件必須加上 DOCTYPE 聲明，并統(tǒng)一使用 HTML5 的文檔聲明
4. 頁(yè)面語(yǔ)言lang
<html lang="en"> 指定html 語(yǔ)言種類
最常見的2個(gè)：
-
en定義語(yǔ)言為英語(yǔ) -
zh-CN定義語(yǔ)言為中文
<html lang="zh-CN"> 指定該html標(biāo)簽 內(nèi)容 所用的語(yǔ)言為中文
考慮瀏覽器和操作系統(tǒng)的兼容性，目前仍然使用 zh-CN 屬性值
簡(jiǎn)單來(lái)說(shuō)，可能對(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í)別
等等
5. 字符集
<meta charset="UTF-8" />
字符集(Character set)是多個(gè)字符的集合。
計(jì)算機(jī)要準(zhǔn)確的處理各種字符集文字，需要進(jìn)行字符編碼，以便計(jì)算機(jī)能夠識(shí)別和存儲(chǔ)各種文字。
utf-8是目前最常用的字符集編碼方式，常用的字符集編碼方式還有g(shù)bk和gb2312。
- gb2312 簡(jiǎn)單中文 包括6763個(gè)漢字 GUO BIAO
- BIG5 繁體中文 港澳臺(tái)等用
- GBK包含全部中文字符 是GB2312的擴(kuò)展，加入對(duì)繁體字的支持，兼容GB2312
- UTF-8則基本包含全世界所有國(guó)家需要用到的字符
- 這句代碼非常關(guān)鍵， 是必須要寫的代碼，否則可能引起亂碼的情況。
這句話是讓 html 文件是以 UTF-8 編碼保存的， 瀏覽器根據(jù)編碼去解碼對(duì)應(yīng)的html內(nèi)容。
一般情況下統(tǒng)一使用 "UTF-8" 編碼, 請(qǐng)盡量統(tǒng)一寫成標(biāo)準(zhǔn)的 "UTF-8"，不要寫成 "utf-8" 或 "utf8" 或 "UTF8"。
6. HTML標(biāo)簽的語(yǔ)義化
白話： 所謂標(biāo)簽語(yǔ)義化，就是指標(biāo)簽的含義。
語(yǔ)義化目的:
根據(jù)標(biāo)簽的語(yǔ)義，在合適的地方給一個(gè)最為合理的標(biāo)簽，讓結(jié)構(gòu)更清晰。
- 方便代碼的閱讀和維護(hù)
- 同時(shí)讓瀏覽器或是網(wǎng)絡(luò)爬蟲可以很好地解析，從而更好分析其中的內(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。所以，我們接下來(lái)學(xué)習(xí)html標(biāo)簽，要根據(jù)語(yǔ)義去記憶。 HTML網(wǎng)頁(yè)中任何元素的實(shí)現(xiàn)都要依靠HTML標(biāo)簽。
