## HTML的概述
### HTML的概念
**HTML** 全稱為 HyperText Markup Language,譯為<font color=#0000ff>**超文本標記語言**</font>。
HTML 不是一種編程語言,是一種描述性的**標記語言**。
**作用**:HTML是負責描述文檔**語義**的語言。
### 概念:超文本
所謂的超文本,有兩層含義:
(1)圖片、音頻、視頻、動畫、多媒體等內容,成為超文本,因為它們超出了文本的限制。
(2)不僅如此,它還可以從一個文件跳轉到另一個文件,與世界各地主機的文件進行連接。即:超級鏈接文本。
### 概念:標記語言
HTML 不是一種編程語言,是一種描述性的**標記語言**。這主要有兩層含義:
(1)**標記語言是一套標記標簽**。比如:標簽`<a>`表示超鏈接、標簽`<img>`表示圖片、標簽`<h1>`表示一級標題等等,它們都是屬于 HTML 標簽。
說的通俗一點就是:網頁是由網頁元素組成的,這些元素是由 HTML 標簽描述出來,然后通過瀏覽器解析,就可以顯示給用戶看了。
(2)編程語言是有編譯過程的,而標記語言沒有編譯過程,HTML標簽是直接由瀏覽器解析執行。
### HTML是負責描述文檔語義的語言
HTML 格式的文件是一個純本文文件(就是用txt文件改名而成),用一些標簽來描述語義,這些標簽在瀏覽器頁面上是無法直觀看到的,所以稱之為“超文本標記語言”。
接下來,我們需要學習 HTML 中的很多“標簽對兒”,這些“標簽對兒”能夠給文本不同的語義。
比如,面試的時候問你,`<h1>` 標簽有什么作用?
- 正確答案:給文本增加主標題的語義。
- 錯誤答案:給文字加粗、加黑、變大。
關乎“語義”的更深刻理解,等接下來我們學習了各種標簽,就明白了。
## HTML的歷史

其中,我們專門來對XHTML做一個介紹。
**XHTML介紹:**
XHTML:Extensible Hypertext Markup Language,可擴展超文本標注語言。
XHTML的主要目的是為了<font color="blue">**取代HTML**</font>,也可以理解為HTML的升級版。
HTML的標記書寫很不規范,會造成其它的設備(ipad、手機、電視等)無法正常顯示。
XHTML與HTML4.0的標記基本上一樣。
XHTML是<font color="blue">**嚴格的、純凈的**</font>HTML。
我們稍后將對XHTML的編寫規范進行介紹。
## HTML的專有名詞
- 網頁 :由各種標記組成的一個頁面就叫網頁。
- 主頁(首頁) : 一個網站的起始頁面或者導航頁面。
- 標記: 比如`<p>`稱為開始標記 ,`</p>`稱為結束標記,也叫標簽。每個標簽都規定好了特殊的含義。
- 元素:比如`<p>內容</p>`稱為元素.
- 屬性:給每一個標簽所做的輔助信息。
- XHTML:符合XML語法標準的HTML。
- DHTML:dynamic,動態的。`javascript + css + html`合起來的頁面就是一個 DHTML。
- HTTP:超文本傳輸協議。用來規定客戶端瀏覽器和服務端交互時數據的一個格式。SMTP:郵件傳輸協議,FTP:文件傳輸協議。
## 書寫第一個 HTML 頁面
我們打開 VS Code 軟件,新建一個文件,名叫`test.html`(注意,文件名是`test`,后綴名是`html`),保存到本地。
緊接著,在文件里,輸入`html:5`,然后按一下鍵盤上的`Tab`鍵,就可以自動生成如下內容:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
```
上面的內容,就是 html 頁面的骨架。我們在此基礎之上,新增幾個標簽,完整代碼如下:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>我是三級標題</h3>
<img src="" alt="">
<a href="https://www.jd.com">我是超鏈接,可以點擊一下</a>
</body>
</html>
```
標簽寫完之后,我們用 chrome 瀏覽器打開上面這個`test.html`文件,看看頁面效果:
到此,第一個簡單的 HTML 頁面就寫完了。是不是很有成就感?
## HTML結構詳解
HTML標簽通常是成對出現的(<font color="blue">**雙邊標記**</font>),比如 `<div>` 和 `</div>`;也有少部分單標簽(<font color="blue">**單邊標記**</font>),如:`<br />`、`<hr />`和`<img src="images/1.jpg" />`等。
屬性與標記之間、各屬性之間需要以空格隔開。屬性值以雙引號括起來。
#### html骨架標簽分類
| 標簽名 | 定義 | 說明 |
| ---------------- | :----: | :----------------------------- |
| `<html></html>` | HTML標簽 | 頁面中最大的標簽,我們成為根標簽 |
| `<head></head>` | 文檔的頭部 | 注意在head標簽中我們必須要設置的標簽是title |
| `<titile></title>` | 文檔的標題 | 讓頁面擁有一個屬于自己的網頁標題 |
| `<body></body>` | 文檔的主體 | 元素包含文檔的所有內容,頁面內容 基本都是放到body里面的 |
### 快速生成 html 的骨架
**方式1**:在 VS Code 中新建 html 文件,輸入`html:5`,按 `Tab`鍵后,自動生成的代碼如下:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
```
**方式2**:在Sublime Text中安裝`Emmet`插件。新建html文件,輸入`html:5`,按`Tab`鍵后,自動生成的代碼如下:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
```
**方式3**:在Sublime Text中安裝`Emmet`插件。新建html文件,輸入`html:xt`,按`Tab`鍵后,自動生成的代碼如下:
```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
```
上面的方式2和方式3中,我們會發現,第一行的內容有些不太一樣,這就是我們接下來要講的**文檔聲明頭**。
### 1、文檔聲明頭
任何一個標準的HTML頁面,第一行一定是一個以`<!DOCTYPE ……>`開頭的語句。這一行,就是文檔聲明頭,即 DocType Declaration,簡稱DTD。
**DTD可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范**。
#### HTML4.01有哪些規范呢?
**HTML4.01**這個版本是IE6開始兼容的。**HTML5是IE9開始兼容的**。如今,手機、移動端的網頁,就可以使用HTML5了,因為其兼容性更高。
說個題外話,html1 至 html3 是美國軍方以及高等研究所用的,并未對外公開。
HTML4.01里面有兩大種規范,每大種規范里面又各有3種小規范。所以一共6種規范(見下圖)。
HTML4.01里面規定了**普通**和**XHTML**兩大種規范。HTML覺得自己有一些規定不嚴謹,比如,標簽是否可以用大寫字母呢?`<H1></H1>`所以,HTML就覺得,把一些規范嚴格的標準,又制定了一個XHTML1.0。在XHTML中的字母X,表示“嚴格的”。
總結一下,HTML4.01一共有6種DTD。說白了,HTML的第一行語句一共有6種情況:

下面對上圖中的三種小規范進行解釋:
**strict**:
表示“嚴格的”,這種模式里面的要求更為嚴格。這種嚴格體現在哪里?有一些標簽不能使用。
比如,u標簽,就是給一個本文加下劃線,但是這和HTML的本質有沖突,因為HTML最好是只負責語義,不要負責樣式,而u這個下劃線是樣式。所以,在strict中是不能使用u標簽的。
那怎么給文本增加下劃線呢?今后將使用css屬性來解決。
XHTML1.0更為嚴格,因為這個體系本身規定比如標簽必須是小寫字母、必須嚴格閉合標簽、必須使用引號引起屬性等等。
**Transitional**:表示“普通的”,這種模式就是沒有一些別的規范。
**Frameset**:表示“框架”,在框架的頁面使用。
在sublime輸入的html:xt,x表示XHTML,t表示transitional。
在HTML5中極大的簡化了DTD,也就是說HTML5中就沒有XHTML了。HTML5的DTD(文檔聲明頭)如下:
```
<!DOCTYPE html>
```
### 2、頁面語言 `lang`
下面這行標簽,用于指定頁面的語言類型:
```html
<html lang="en">
```
最常見的語言類型有兩種:
- en:定義頁面語言為英語。
- zh-CN:定義頁面語言為中文。
### 2、頭標簽 `head`
#### html5 的比較完整的骨架:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="Author" content="">
<meta name="Keywords" content="厲害很厲害" />
<meta name="Description" content="網易是中國領先的互聯網技術公司,為用戶提供免費郵箱、游戲、搜索引擎服務,開設新聞、娛樂、體育等30多個內容頻道,及博客、視頻、論壇等互動交流,網聚人的力量。" />
<title>Document</title>
</head>
<body>
</body>
</html>
```
面試題:
- 問:網頁的head標簽里面,表示的是頁面的配置,有什么配置?
- 答:字符集、關鍵詞、頁面描述、頁面標題、IE適配、視口、iPhone小圖標等等。
頭標簽內部的常見標簽如下:
- `<title>`:指定整個網頁的標題,在瀏覽器最上方顯示。
- `<base>`:為頁面上的所有鏈接規定默認地址或默認目標。
- `<meta>`:提供有關頁面的基本信息
- `<body>`:用于定義HTML文檔所要顯示的內容,也稱為主體標簽。我們所寫的代碼必須放在此標簽內。
- `<link>`:定義文檔與外部資源的關系。
**meta 標簽**:
meta表示“元”。“元”配置,就是表示基本的配置項目。
常見的幾種 meta 標簽如下:
(1)字符集 charset:
```html
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
```
字符集用meta標簽中的`charset`定義,charset就是character set(即“字符集”),即**網頁的編碼方式**。
**字符集**(Character set)是多個字符的集合。計算機要準確的處理各種字符集文字,需要進行字符編碼,以便計算機能夠識別和存儲各種文字。
上面這行代碼非常關鍵, 是必須要寫的代碼,否則可能導致亂碼。比如你保存的時候,meta寫的和聲明的不匹配,那么瀏覽器就是亂碼。
utf-8是目前最常用的字符集編碼方式,常用的字符集編碼方式還有gbk和gb2312等。關于“編碼方式”,我們在下一段會詳細介紹。
(2)視口 viewport:
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
`width=device-width` :表示視口寬度等于屏幕寬度。
viewport 這個知識點,初學者還比較難理解,以后學 Web 移動端的時候會用到。
(3)定義“關鍵詞”:
舉例如下:
```html
<meta name="Keywords" content="網易,郵箱,游戲,新聞,體育,娛樂,女性,亞運,論壇,短信" />
```
這些關鍵詞,就是告訴搜索引擎,這個網頁是干嘛的,能夠提高搜索命中率。讓別人能夠找到你,搜索到你。
(4)定義“頁面描述”:
meta除了可以設置字符集,還可以設置關鍵字和頁面描述。
只要設置Description頁面描述,那么百度搜索結果,就能夠顯示這些語句,這個技術叫做**SEO**(search engine optimization,搜索引擎優化)。
設置頁面描述的舉例:
```html
<meta name="Description" content="網易是中國領先的互聯網技術公司,為用戶提供免費郵箱、游戲、搜索引擎服務,開設新聞、娛樂、體育等30多個內容頻道,及博客、視頻、論壇等互動交流,網聚人的力量。" />
```
效果如下:

上面的幾種`<meta>`標簽都不用記,但是另外還有一個`<meta>`標簽是需要記住的:
```html
<meta http-equiv="refresh" content="3;http://www.baidu.com">
```
上面這個標簽的意思是說,3秒之后,自動跳轉到百度頁面。
**title 標簽**:
用于設置網頁標題:
```html
<title>網頁的標題</title>
```
title標簽也是有助于SEO搜索引擎優化的。
**base標簽**:
```html
<base href="/">
```
base 標簽用于指定基礎的路徑。指定之后,所有的 a 鏈接都是以這個路徑為基準。
### 3、`<body>`標簽
`<body>`標簽的屬性有:
- `bgcolor`:設置整個網頁的背景顏色。
- `background`:設置整個網頁的背景圖片。
- `text`:設置網頁中的文本顏色。
- `leftmargin`:網頁的左邊距。IE瀏覽器默認是8個像素。
- `topmargin`:網頁的上邊距。
- `rightmargin`:網頁的右邊距。
- `bottommargin`:網頁的下邊距。
`<body>`標簽另外還有一些屬性,這里用個例子來解釋:

上方代碼中,當我們對`點我點我`這幾個字使用超鏈時,`link`屬性表示默認顯示的顏色、`alink`屬性表示鼠標點擊但是還沒有松開時的顏色、`vlink`屬性表示點擊完成之后顯示的顏色。效果如下:

## 計算機編碼介紹
計算機,不能直接存儲文字,存儲的是編碼。
計算機只能處理二進制的數據,其它數據,比如:0-9、a-z、A-Z,這些字符,我們可以定義一套規則來表示。假如:A用110表示,B用111表示等。
**ASCII碼:**
美國發布的,用1個字節(8位二進制)來表示一個字符,共可以表示2^8=256個字符。
美國的國家語言是英語,只要能表示0-9、a-z、A-Z、特殊符號。
**ANSI編碼:**
**每個國家為了顯示本國的語言,都對ASCII碼進行了擴展**。用2個字節(16位二進制)來表示一個漢字,共可以表示2^16=65536個漢字。例如:
中國的ANSI編碼是GB2312編碼(簡體),對6763漢字進行編碼,含600多特殊字符。另外還有GBK(簡體)。
日本的ANSI編碼是JIS編碼。
臺灣的ANSI編碼是BIG5編碼(繁體)。
**GBK:**
對GB2312進行了擴展,用來顯示罕見的、古漢語的漢字。現在已經收錄了2.1萬左右。并提供了1890個漢字碼位。K的含義就是“擴展”。
**Unicode編碼(統一編碼):**
用4個字節(32位二進制)來表示一個字符,想法不錯,但效率太低。例如,字母A用ASCII表示的話一個字節就夠,可用Unicode編碼的話,得用4個字節表示,造成了空間的極大浪費。A的Unicode編碼是0000 0000 0000 0000 0000 0000 0100 0000
**UTF-8(Unicode Transform Format)編碼:**
根據字符的不同,選擇其編碼的長度。比如:一個字符A用1個字節表示,一個漢字用2個字節表示。
毫無疑問,開發中,都用**UTF-8**編碼吧,準沒錯。
**中文能夠使用的字符集兩種:**
- 第一種:UTF-8。UTF-8是國際通用字庫,里面涵蓋了所有地球上所有人類的語言文字,比如阿拉伯文、漢語、鳥語……
- 第二種:GBK(對GB2312進行了擴展)。gb2312 是國標,是中國的字庫,里面**僅**涵蓋了漢字和一些常用外文,比如日文片假名,和常見的符號。
字庫規模: UTF-8(字很全) > gb2312(只有漢字)
**重點1:避免亂碼**
我們用meta標簽聲明的當前這個html文檔的字庫,一定要和保存的文件編碼類型一樣,否則亂碼(重點)。
拿 sublime編輯器舉例,當我們不設置的時候,sublime默認類型就是UTF-8。而一旦更改為gb2312的時候,就一定要記得設置一下sublime的保存類型: `文件→ set File Encoding to → Chinese Simplified(GBK)`。VS Code 的道理一樣。
**重點2:UTF-8和gb2312的比較**
保存大小:UTF-8(更臃腫、加載更慢) > gb2312 (更小巧,加載更快)
總結:
- UTF-8:字多,有各種國家的語言,但是保存尺寸大,文件臃腫;
- gb2312:字少,只用中文和少數外語和符號,但是尺寸小,文件小巧。
列出2個使用情形:
1) 你們公司是做日本動漫的,經常出現一些日語動漫的名字,網頁要使用UTF-8。如果用gb2312將無法顯示日語。
2) 你們公司就是中文網頁,極度的追求網頁的顯示速度,要使用gb2312。如果使用UTF-8將每個漢字多一個byte,所以5000個漢字,多5kb。
我們親測:
- qq網、網易、搜狐都是使用gb2312。這些公司,都追求顯示速度。
- 新華網藏語頻道,使用的是UTF-8,保證字符集的數量。
我們是怎么查看網頁的編碼方式的呢?在瀏覽器中打開網頁,右鍵,選擇“查看網頁源代碼”,找到meta標簽中的charset屬性即可。
那么,我們為什么可以查看網頁的源代碼呢?因為這個打開的html網頁已經存到我的臨時文件夾里了,臨時文件夾里的html是純文本文件,純文本文件自然可以查看網頁的源代碼。
## HTML的規范
- HTML不區分大小寫,但HTML的標簽名、類名、標簽屬性、大部分屬性值建議統一用小寫。
- HTML頁面的后綴名是html或者htm(有一些系統不支持后綴名長度超過3個字符,比如dos系統)
### 1、編寫XHTML的規范:
(1)所有標記元素都要正確的嵌套,不能交叉嵌套。正確寫法舉例:`<h1><font></font></h1>`
(2)所有的標記都必須小寫。
(3)所有的標簽都必須閉合。
- 雙標簽:`<span></span>`
- 單標簽:`<br>` 建議寫成 `<br />` `<hr>` 建議轉成 `<hr />`,還有`<img src=“URL” />`
(4)所有的屬性值必須加引號。`<font color="red"></font>`
(5)所有的屬性必須有值。`<hr noshade="noshade">`、`<input type="radio" checked="checked" />`
(6)XHTML文檔開頭必須要有DTD文檔類型定義。
### 2、HTML的基本語法特性
#### (1)HTML對換行不敏感,對tab不敏感
HTML只在乎標簽的嵌套結構,嵌套的關系。誰嵌套了誰,誰被誰嵌套了,和換行、tab無關。換不換行、tab不tab,都不影響頁面的結構。
也就是說,HTML不是依靠縮進來表示嵌套的,而是看標簽的嵌套關系。但是,我們發現有良好的縮進,代碼更易讀。建議大家都正確縮進標簽。
百度為了追求極致的顯示速度,所有HTML標簽都沒有換行、都沒有縮進(tab),HTML和換不換行無關,標簽的層次依然清晰,只不過程序員不可讀了。如下圖所示:

#### (2)空白折疊現象
HTML中所有的**文字之間**,如果有空格、換行、tab都將被折疊為一個空格顯示。
舉例如下:

#### (3)標簽要嚴格封閉
標簽不封閉的結果是災難性的。
標簽不封閉的舉例如下:
