1.2 HTML5的基本結(jié)構(gòu)和語法規(guī)則

每個網(wǎng)頁都有其基本的結(jié)構(gòu)，包括HTML的語法結(jié)構(gòu)、文檔結(jié)構(gòu)、標(biāo)簽的格式以及代碼的編寫規(guī)范等。

1.2.1 HTML5文檔的基本結(jié)構(gòu)

HTML 5文檔的基本結(jié)構(gòu)如下：

HTML文檔可分為文檔頭（Head）和文檔體（Body）兩部分。文檔頭的內(nèi)容包括網(wǎng)頁語言、關(guān)鍵字和字符集的定義等；文檔體中的內(nèi)容就是頁面要顯示的信息。

HTML文檔的基本結(jié)構(gòu)由3對標(biāo)簽負(fù)責(zé)組織，即﹤html﹥、﹤head﹥和﹤body﹥。其中﹤html﹥標(biāo)簽標(biāo)識HTML文檔，﹤head﹥標(biāo)簽標(biāo)識頭部區(qū)域，﹤body﹥標(biāo)簽標(biāo)識主體區(qū)域。

圖1-1所示是一個可視化的HTML頁面結(jié)構(gòu)，只有﹤body﹥與﹤/body﹥之間的白色區(qū)域才會在瀏覽器中顯示。

1.﹤！DOCTYPE html﹥標(biāo)簽

﹤！DOCTYPE﹥標(biāo)簽位于文檔的最前面，用于向瀏覽器說明當(dāng)前文檔使用哪種HTML標(biāo)準(zhǔn)規(guī)范。只有開頭處使用﹤！DOCTYPE﹥聲明，瀏覽器才能將該頁面作為有效的HTML文檔，并按指定的文檔類型進(jìn)行解析。文檔類型聲明的語法格式如下：

﹤!DOCTYPE html﹥

這行代碼稱為DOCTYPE（DOCument Type，文檔類型）聲明。要建立符合標(biāo)準(zhǔn)的網(wǎng)頁，DOCTYPE聲明是必不可少的關(guān)鍵組成部分。﹤！DOCTYPE html﹥聲明必須放在每一個HTML文檔的最頂部，在所有代碼和標(biāo)簽之前。

2.﹤html﹥…﹤/html﹥標(biāo)簽

﹤html﹥標(biāo)簽位于﹤！DOCTYPE html﹥標(biāo)簽之后，稱為HTML文檔標(biāo)簽，也被稱為根標(biāo)簽，用于告訴瀏覽器其自身是一個HTML文檔。HTML文檔標(biāo)簽的語法格式為：

﹤html﹥處于文檔的最前面，表示HTML文檔的開始，即瀏覽器從﹤html﹥開始解釋，直到遇到﹤/html﹥?yōu)橹埂Ｃ總€HTML文檔均以﹤html﹥開始，以﹤/html﹥結(jié)束。lang屬性為文檔設(shè)置語言，對于簡體中文，設(shè)置為“zh-CN”。

3.﹤head﹥…﹤/head﹥標(biāo)簽

HTML文檔包括文檔頭和文檔體。﹤head﹥標(biāo)簽用于定義HTML文檔的頭部信息，也稱為頭部標(biāo)簽，緊跟在﹤html﹥標(biāo)簽之后，主要用來封裝其他位于文檔頭部的標(biāo)簽。HTML文檔頭標(biāo)簽的語法格式為：

文檔頭部內(nèi)容在開始標(biāo)簽﹤html﹥和結(jié)束標(biāo)簽﹤/html﹥之間定義，一個HTML文檔只能含有一對﹤head﹥…﹤/head﹥標(biāo)簽。網(wǎng)頁中經(jīng)常設(shè)置頁面的基本信息，如頁面的標(biāo)題、作者、和其他文檔的關(guān)系等。為此HTML提供了一系列的標(biāo)簽，這些標(biāo)簽通常都寫在﹤head﹥標(biāo)簽內(nèi)，因此被稱為頭部相關(guān)標(biāo)簽。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示在頁面中。

4.﹤meta charset﹥標(biāo)簽

﹤head﹥…﹤/head﹥標(biāo)簽中的﹤meta charset﹥指定網(wǎng)頁文檔中的字符集，稱為HTML文檔編碼，HTML5文檔直接使用meta元素的charset屬性指定文檔編碼，語法格式如下：

﹤meta charset="UTF-8"﹥

為了被瀏覽器正確解釋和通過W3C代碼校驗，所有的HTML文檔都必須聲明所使用的編碼語言。文檔聲明的編碼應(yīng)該與實際的編碼一致，否則就會呈現(xiàn)為亂碼。對于中文網(wǎng)頁的設(shè)計者來說，指定代碼的字符集為“UTF-8”。

5.﹤title﹥…﹤/title﹥標(biāo)簽

HTML文件的標(biāo)題顯示在瀏覽器的標(biāo)題欄中，用以說明文件的用途。標(biāo)題文字位于﹤title﹥和﹤/title﹥標(biāo)簽之間，其語法格式如下：

﹤title﹥網(wǎng)頁標(biāo)題﹤/title﹥

每個HTML文檔都應(yīng)該有標(biāo)題，在HTML文檔中，﹤title﹥和﹤/title﹥標(biāo)簽位于HTML文檔的頭部，即﹤head﹥和﹤/head﹥標(biāo)簽之間。例如，﹤title﹥嗶哩嗶哩（゜-゜）つロ干杯～-bilibili﹤/title﹥，如圖1-2所示（在Google Chrome瀏覽器中，單擊地址欄右端的“更多”按鈕，在彈出的下拉列表中選擇“更多工具”→“開發(fā)者工具”，單擊“Elements”標(biāo)簽，再單擊元素前的箭頭，展開該元素）。

6.﹤body﹥…﹤/body﹥標(biāo)簽

﹤body﹥標(biāo)簽定義HTML文檔要顯示的內(nèi)容，也稱為主體標(biāo)簽。瀏覽器中顯示的所有文本、圖像、表單與多媒體元素等信息都必須位于﹤body﹥…﹤/body﹥標(biāo)簽內(nèi)，﹤body﹥標(biāo)簽內(nèi)的信息才是最終展示給用戶看的。HTML文檔主體標(biāo)簽的語法格式為：

文檔體位于文檔頭之后，以﹤body﹥?yōu)殚_始標(biāo)簽，﹤/body﹥?yōu)榻Y(jié)束標(biāo)簽。一個HTML文檔只能含有一對﹤body﹥…﹤/body﹥標(biāo)簽，且﹤body﹥…﹤/body﹥標(biāo)簽必須在﹤html﹥…﹤/html﹥標(biāo)簽內(nèi)，位于﹤head﹥頭部標(biāo)簽之后，與﹤head﹥標(biāo)簽是并列關(guān)系。﹤body﹥標(biāo)簽定義網(wǎng)頁上顯示的主要內(nèi)容與顯示格式，是整個網(wǎng)頁的核心，網(wǎng)頁中要真正顯示的內(nèi)容都包含在主體中。

瀏覽器在解釋HTML文檔時是按照層次順序進(jìn)行解釋的，其順序為：document→html→body→div父元素→input子元素。document是最上層祖先元素，input是最下層后代元素。

1.2.2 HTML5的基本語法

HTML文檔由元素構(gòu)成，元素由開始標(biāo)簽、結(jié)束標(biāo)簽、屬性及元素的內(nèi)容4部分組成。

1.標(biāo)簽（Tag）

HTML用標(biāo)簽來規(guī)定網(wǎng)頁元素在文檔中的功能。標(biāo)簽是用一對尖括號“﹤﹥”括起來的單詞或單詞縮寫。標(biāo)簽有兩種形式：雙標(biāo)簽和單標(biāo)簽。

（1）雙標(biāo)簽

雙標(biāo)簽包括開始標(biāo)簽和結(jié)束標(biāo)簽，其格式為：

﹤標(biāo)簽﹥受標(biāo)簽影響的內(nèi)容﹤/標(biāo)簽﹥

開始標(biāo)簽標(biāo)志一段內(nèi)容的開始，結(jié)束標(biāo)簽是指與開始標(biāo)簽相對的標(biāo)簽。結(jié)束標(biāo)簽比開始標(biāo)簽多一個斜杠“/”。雙標(biāo)簽也稱閉合標(biāo)簽。

例如，HTML文檔從﹤html﹥開始，到﹤/html﹥結(jié)束。﹤head﹥和﹤/head﹥標(biāo)簽描述HTML文檔的相關(guān)信息，之間的內(nèi)容不會在瀏覽器窗口上顯示出來。﹤body﹥和﹤/body﹥標(biāo)簽包含所有要在瀏覽器窗口上顯示的內(nèi)容，也就是HTML文檔的主體部分。

（2）單標(biāo)簽

單標(biāo)簽沒有相應(yīng)的結(jié)束標(biāo)簽的標(biāo)簽，也稱空標(biāo)簽。其格式為：

﹤標(biāo)簽﹥ 或 ﹤標(biāo)簽/﹥

例如，換行標(biāo)簽﹤br﹥或﹤br/﹥。

其他沒有相應(yīng)結(jié)束標(biāo)簽的標(biāo)簽有﹤area﹥、﹤base﹥、﹤basefont﹥、﹤br﹥、﹤col﹥、﹤hr﹥、﹤img﹥、﹤input﹥、﹤param﹥、﹤link﹥、﹤meta﹥等。

（3）標(biāo)簽的嵌套

標(biāo)簽可以放在另外一個標(biāo)簽所能影響的片段中，以實現(xiàn)對某一段文檔的多重標(biāo)簽效果，但是要注意必須要正確嵌套。例如，下面的嵌套是錯誤的：

﹤p﹥﹤em﹥Hello Word!﹤/p﹥﹤/em﹥

改正如下：

﹤p﹥﹤em﹥Hello World!﹤/em﹥﹤/p﹥

需要注意以下兩點。

1）每個標(biāo)簽都要用一對尖括號“﹤ ﹥”括起來，如﹤p﹥、﹤table﹥，以表示這是HTML代碼而非普通文本。注意，“﹤”“﹥”與標(biāo)簽名之間不能留有空格或其他字符。

2）在標(biāo)簽名前加上符號“/”便是其結(jié)束標(biāo)簽，表示該標(biāo)簽內(nèi)容的結(jié)束，如﹤/h1﹥。標(biāo)簽也有不用﹤/標(biāo)簽﹥結(jié)尾的，稱之為單標(biāo)簽。例如，換行標(biāo)簽﹤br/﹥。

2.元素（Element）

HTML文檔中的元素是指從開始標(biāo)簽到結(jié)束標(biāo)簽的所有代碼。HTML元素分為有內(nèi)容的元素和空元素兩種。

（1）有內(nèi)容的元素

有內(nèi)容的元素是由開始標(biāo)簽、結(jié)束標(biāo)簽以及兩者之間的元素內(nèi)容組成的，其中元素內(nèi)容既可以是需要顯示在網(wǎng)頁中的文字內(nèi)容，也可以是其他元素。例如，﹤title﹥和﹤/title﹥是標(biāo)簽，下面的代碼是一個title元素：

﹤title﹥淘寶網(wǎng)-淘！我喜歡﹤/title﹥

（2）空元素

空元素只有開始標(biāo)簽而沒有結(jié)束標(biāo)簽，也沒有元素內(nèi)容。例如，br、hr（橫線）元素就是空元素。

（3）元素的嵌套

除了HTML文檔元素﹤html﹥外，其他的HTML元素都是被嵌套在另一個元素之內(nèi)的。在HTML文檔中，html是最外層元素，也稱為根元素。head、body元素是嵌套在html元素內(nèi)的。body元素內(nèi)又嵌套許多元素。HTML中的元素可以多級嵌套，但是不能互相交叉。例如，下面的代碼對于﹤head﹥和﹤/head﹥標(biāo)簽來說，是一個head元素：

﹤head﹥﹤title﹥淘寶網(wǎng)-淘！我喜歡﹤/title﹥﹤/head﹥

同時，這個title元素又是嵌套在head元素中的另一個元素。

例如，下面是不正確的嵌套寫法，p元素的開始標(biāo)簽在b元素的外層，但它的結(jié)束標(biāo)簽卻放在了b元素結(jié)束標(biāo)簽內(nèi)。

﹤p﹥這是﹤b﹥第一段﹤/p﹥文字﹤/b﹥

正確的HTML寫法如下：

﹤p﹥這是﹤b﹥第一段﹤/b﹥文字﹤/p﹥

為了防止出現(xiàn)錯誤的HTML元素嵌套，在編寫HTML文檔時，建議先寫外層的一對標(biāo)簽，然后逐漸往里寫，這樣既不容易忘記寫HTML元素的結(jié)束標(biāo)簽，也可以減少HTML元素的嵌套錯誤。例如，在編寫HTML文檔時，可以像下面這樣寫。

第1步：

第2步：

第3步：

3.屬性

屬性用來說明元素的特征，借助于元素屬性，HTML網(wǎng)頁才會展現(xiàn)豐富多彩且格式美觀的內(nèi)容。

元素的屬性放置在元素的開始標(biāo)簽內(nèi)，每個屬性對應(yīng)一個屬性值，通常以“屬性名="值"”的形式來表示，出現(xiàn)在元素開始標(biāo)簽的“﹥”之前，用空格隔開后，可以指定多個屬性，并且在指定多個屬性時不用區(qū)分順序。屬性的使用格式如下：

﹤標(biāo)簽 屬性1="屬性值1" 屬性2="屬性值2"…﹥受標(biāo)簽影響的內(nèi)容﹤/標(biāo)簽﹥

例如，下面代碼中的“style="color:#ff0000;font-size:30px"”就是p元素的屬性：

﹤p style="color:#ff0000;font-size:30px"﹥第一段內(nèi)容﹤/p﹥

定義屬性值時注意以下幾點。

1）不定義屬性值。HTML規(guī)定屬性也可以沒有值，例如：

﹤dl compact﹥

瀏覽器會使用compact屬性的默認(rèn)值。但對于沒有默認(rèn)值的屬性，不能省略屬性值。

2）屬性中的屬性值可以包含空格，但是這種情況下必須使用引號。例如，下面的代碼正確定義了方法：

﹤img src="C:/Documents and Settings/test.jpg"width=1024 height=36/﹥

下面的代碼則是錯誤的：

﹤img src=C:/Documents and Settings/test.jpg width=1024 height=36/﹥

也就是說，屬性值一定是連續(xù)字符序列，如果不是連續(xù)序列，則要加引號標(biāo)注。

3）單引號和雙引號都可以作為屬性值。當(dāng)屬性值中含有單引號時，不能再用單引號來包括屬性值，要用雙引號來包括屬性值。但是，當(dāng)屬性值中有雙引號時，屬性值中的雙引號就要用數(shù)字字符引用（＆＃39）或者字符實體引用（＆quot；）來代替雙引號。例如，下面的代碼是錯誤的：

﹤p title="歡迎游覽"迪士尼""﹥樂園﹤/p﹥

4）HTML要求屬性和屬性值使用小寫，雖然屬性和屬性值對大小寫不敏感。

1.2.3 HTML的全局屬性

1.HTML的全局標(biāo)準(zhǔn)屬性

全局屬性是指可用于大多數(shù)HTML元素的屬性。在HTML和HTML5規(guī)范中規(guī)定的全局標(biāo)準(zhǔn)屬性，見表1-2。后續(xù)章節(jié)將介紹這些屬性。

2.HTML的全局事件屬性

事件是針對某個元素的可識別的動作。例如，針對“確定”按鈕的單擊事件，文本框內(nèi)容變化事件、復(fù)選框的選中或取消選中事件等。

HTML有使事件在瀏覽器中觸發(fā)動作的能力，例如，當(dāng)用戶單擊某個元素時執(zhí)行JavaScript程序。在HTML中，事件既可以通過JavaScript直接觸發(fā)，也可以通過全局事件屬性觸發(fā)。所謂全局事件屬性是指可用于大多數(shù)HTML元素的事件屬性。有關(guān)事件編程的知識，將在第9章 JavaScript事件處理中介紹。

1.2.4 元素的分類

依據(jù)元素的作用不同，可將元素分為元信息元素、語義元素和無語義元素。

1.元信息元素

元信息（Meta-information）或稱元數(shù)據(jù)（Metadata）類元素是指用于描述文檔自身信息的一類元素。meta元素定義元信息，包含頁面的描述、關(guān)鍵字、最后的修改日期、作者及其他元信息。﹤meta﹥標(biāo)簽寫在﹤head﹥…﹤/head﹥標(biāo)簽中。元信息元素提供給瀏覽器、搜索引擎（關(guān)鍵字）以及其他Web服務(wù)調(diào)用，一般不會顯示給用戶。對于樣式和腳本的元數(shù)據(jù)，可以直接在網(wǎng)頁里定義，也可以鏈接到包含相關(guān)信息的外部文件。

meta元素是元信息元素，在HTML中是一個單標(biāo)簽的空元素。該元素可重復(fù)出現(xiàn)在頭部元素中，用來指明本頁的作者、制作工具、所包含的關(guān)鍵字，以及其他一些描述網(wǎng)頁的信息。

meta元素的常用屬性如下。

1）charset：定義文檔的字符編碼，常用的是UTF-8。

2）content：定義與name和http-equiv相關(guān)的元信息。

3）name：關(guān)聯(lián)content的名稱（常用的有keywords關(guān)鍵字、author作者名、description頁面描述）。

不同的屬性又有不同的參數(shù)值，這些不同的參數(shù)值就實現(xiàn)了不同的網(wǎng)頁功能。本節(jié)主要介紹name屬性，用于設(shè)置搜索關(guān)鍵字和描述。meta元素的name屬性的語法格式為：

﹤meta name="參數(shù)"content="參數(shù)值"﹥

name屬性主要用于描述網(wǎng)頁摘要信息，與之對應(yīng)的屬性值為content。content中的內(nèi)容主要用于搜索引擎查找信息和分類信息。

name屬性主要有以下兩個參數(shù)：keywords和description。其中，keywords用來告訴搜索引擎網(wǎng)頁使用的關(guān)鍵字；description用來告訴搜索引擎網(wǎng)站主要的內(nèi)容。

例如，嗶哩嗶哩網(wǎng)站主頁的關(guān)鍵字信息如圖1-3所示。打開方法是單擊Google Chrome瀏覽器地址欄右端的“更多”按鈕，選擇“更多工具”→“開發(fā)者工具”選項。選擇“Elements”選項卡，再單擊選項卡前的箭頭展開該元素。當(dāng)瀏覽者通過百度搜索引擎搜索“嗶哩嗶哩”時，就可以看到搜索結(jié)果中顯示出網(wǎng)站主頁的標(biāo)題、關(guān)鍵字和內(nèi)容描述，如圖1-4所示。

2.語義元素

語義元素是指清楚地向瀏覽器和開發(fā)者描述其意義的元素，如標(biāo)題元素、段落元素、列表元素等。有些語義元素在網(wǎng)頁中可以呈現(xiàn)顯示效果，有些沒有顯示效果。

元素的語義化能夠呈現(xiàn)出很好的內(nèi)容結(jié)構(gòu)，語義化使得代碼更具有可讀性，讓其他開發(fā)人員更加理解HTML結(jié)構(gòu)，減少差異化；方便其他設(shè)備解析，如屏幕閱讀器、盲人閱讀器、移動設(shè)備等，以有意義的方式來渲染網(wǎng)頁。爬蟲依賴標(biāo)簽來確定關(guān)鍵字的權(quán)重，幫助爬蟲抓取更多的有效信息。

大約有100多個HTML語義元素可供選擇。語義元素分為塊級元素、行內(nèi)（內(nèi)聯(lián)）元素、行內(nèi)塊元素等。

（1）塊級元素（block）

塊級元素是指本身屬性為display：block的元素。因為它自身的特點，通常使用塊級元素進(jìn)行大布局（大結(jié)構(gòu)）的搭建。塊級元素的特性如下。

1）每個塊級元素總是獨占一行，表現(xiàn)為另起一行開始，而且其后的元素也必須另起一行顯示。

2）塊級元素可以直接控制寬度（width）、高度（height）以及盒子模型的相關(guān)CSS屬性，內(nèi)邊距（padding）和外邊距（margin）等都可控制。

3）在不設(shè)置寬度的情況下，塊級元素的寬度是它父級元素內(nèi)容的寬度。

4）在不設(shè)置高度的情況下，塊級元素的高度是它本身內(nèi)容的高度。

常用的塊級元素主要有p、div、ul、ol、li、dl、dt、dd、h1～h6、hr、form、address、pre、table、blockquote、center、dir、fieldset、isindex、menu、noframes、noscript等。

（2）行內(nèi)元素（inline）

行內(nèi)元素也稱內(nèi)聯(lián)元素，是指本身屬性為display：inline的元素，行內(nèi)元素可以和相鄰的行內(nèi)元素在同一行，對寬、高屬性值不生效，完全靠內(nèi)容撐開寬、高。因為它自身的特點，通常使用塊級元素來進(jìn)行文字、小圖標(biāo)（小結(jié)構(gòu)）的搭建。行內(nèi)元素的特性如下。

1）行內(nèi)元素會與其他內(nèi)聯(lián)元素從左到右在一行顯示。

2）行內(nèi)元素不能直接控制寬度、高度以及盒子模型的相關(guān)CSS屬性，例如內(nèi)邊距的top、bottom（padding-top、padding-bottom）和外邊距的top、bottom（margin-top、margin-bottom）都不可改變。但是可以設(shè)置內(nèi)外邊距水平方向的值。也就是說，對于行內(nèi)元素的margin和padding，只有margin-left/margin-right和padding-left/padding-right是有效的，但是豎直方向的margin和padding無效。

3）行內(nèi)元素的寬高是由本身內(nèi)容的大小決定（文字、圖片等）。

4）行內(nèi)元素只能容納文本或者其他內(nèi)聯(lián)元素（不能在行內(nèi)元素中嵌套塊級元素）。

常用的行內(nèi)元素主要有a、span、em、strong、b、i、u、label、br、abbr、acronym、bdo、big、br、cite、code、dfn、em、font、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、textarea、tt、var等。

利用CSS可以擺脫上面HTML標(biāo)簽歸類的限制，自由地在不同標(biāo)簽或元素上應(yīng)用需要的屬性。常用的CSS樣式有以下三個。

display：block：顯示為塊級元素。

display：inline：顯示為內(nèi)聯(lián)元素。

display：inline-block：顯示為內(nèi)聯(lián)塊元素。表現(xiàn)為同行顯示并可修改寬、高、內(nèi)外邊距等屬性。例如，將﹤ul﹥元素加上display：inline-block樣式，原本垂直的列表就可以水平顯示了。

（3）行內(nèi)塊元素

還有一種元素結(jié)合行內(nèi)元素和塊級元素，不僅可以對寬和高的屬性值生效，還可以多個元素在一行顯示，這種元素被稱為行內(nèi)塊元素。行內(nèi)塊元素能和其他元素待在一行，能設(shè)置寬和高。常用的行內(nèi)塊元素有img、input、textarea等。行內(nèi)塊元素的特點是結(jié)合行內(nèi)元素和塊級元素的優(yōu)點，不僅可以對寬和高的屬性值生效，還可以多個標(biāo)簽在一行顯示。

塊級元素可以嵌套行內(nèi)元素，行內(nèi)元素不可以嵌套塊級元素。

（4）可變元素

可變元素根據(jù)上下文關(guān)系確定該元素是塊元素還是內(nèi)聯(lián)元素。常用的可變元素有applet、button、del、iframe、ins、map、object、script等。

（5）HTML5中新增的結(jié)構(gòu)語義元素

在HTML5之前，頁面只能用div元素作為結(jié)構(gòu)元素來分隔不同的區(qū)域，由于div元素?zé)o任何語義，給代碼設(shè)計者和閱讀者帶來困擾，所以在HTML5中增加了結(jié)構(gòu)語義元素。HTML5增加的結(jié)構(gòu)語義元素明確了一個Web頁面的不同部分，如圖1-5所示。

HTML5常用的結(jié)構(gòu)語義元素如下。

1）header元素。用于定義文檔的頭部區(qū)域，為文檔或節(jié)規(guī)定頁眉，常被用作介紹性內(nèi)容的容器，可以包含標(biāo)題元素、Logo、搜索框等。一個文檔中可以有多個header元素。

2）nav元素用于定義頁面的導(dǎo)航鏈接部分區(qū)域，導(dǎo)航有頂部導(dǎo)航、底部導(dǎo)航和側(cè)邊導(dǎo)航等。

3）article元素用于定義文檔內(nèi)獨立的文章，可以是新聞、條件、用戶評論等。

4）section元素用于定義文檔中的一個區(qū)域或節(jié)。節(jié)是指有主題的內(nèi)容組，通常有標(biāo)題。可以將網(wǎng)站首頁劃分為簡介、內(nèi)容、聯(lián)系信息等節(jié)。

5）aside元素用于定義頁面主區(qū)域內(nèi)容之外的內(nèi)容（比如側(cè)邊欄）。﹤aside﹥標(biāo)簽的內(nèi)容是獨立的，與主區(qū)域的內(nèi)容無關(guān)。

6）footer元素用于定義文檔的底部區(qū)域。一個頁腳通常包含文檔的作者、著作權(quán)信息、鏈接的使用條款鏈接、聯(lián)系信息等，文檔中可以使用多個footer元素。

7）figure元素用于定義一段獨立的引用內(nèi)容，經(jīng)常與figcaption元素配合使用，通常用在主文本的圖片、代碼、表格等中。如果這部分內(nèi)容被轉(zhuǎn)移或刪掉，不會影響到主體。

8）figcaption元素用于表示與其相關(guān)聯(lián)的引用的說明或標(biāo)題，描述其父節(jié)點figure元素中的其他內(nèi)容。figcaption元素應(yīng)該被置于figure元素的第一個或最后一個子元素的位置。

9）main元素用于規(guī)定文檔的主內(nèi)容。

10）mark元素用于定義重要的或強(qiáng)調(diào)的文本。

11）details元素用于定義用戶能夠查看或隱藏的額外細(xì)節(jié)。12）summary元素用于定義details元素的可見標(biāo)題。

13）time元素用于定義日期或時間。

以上的元素除了figcaption外，都是塊級元素。

3.無語義元素

無語義元素?zé)o須考慮其內(nèi)容，有div和span兩個無語義元素。div是塊級元素，span是行內(nèi)元素。

常用div元素劃分區(qū)域或者節(jié)，div元素可以用作組織工具，而不使用任何格式。所謂Div+CSS的網(wǎng)頁布局，就是用div元素組織要顯示的數(shù)據(jù)（文字、圖、表等）結(jié)構(gòu)，用CSS顯示數(shù)據(jù)的樣式，從而做到結(jié)構(gòu)與樣式的分離，這種布局代碼簡單，易于維護(hù)。

1.2.5 HTML的字符實體和顏色表示

1.字符實體

一些字符在HTML中擁有特殊的含義，例如，尖括號“﹥”“﹤”已作為HTML的語法符號。因此，如果希望在瀏覽器顯示這些特殊字符，就需要在HTML源代碼中插入相應(yīng)的HTML代碼，這些特殊符號對應(yīng)的HTML代碼被稱為字符實體。

字符實體由三部分組成：以一個符號（＆）開頭，中間是一個實體名稱，以一個分號（；）結(jié)束。例如，要在HTML文檔中顯示小于號，輸入“＆lt；”。需要強(qiáng)調(diào)的是，實體書寫對大小寫是敏感的。常用的特殊符號及對應(yīng)的字符實體見表1-3。

空格是HTML中最常用的字符實體。通常情況下，在HTML源代碼中，如果通過按〈Space〉鍵輸入了多個連續(xù)空格，瀏覽器會只保留一個空格，刪除其他空格。在需要添加多個空格的位置，使用多個“＆nbsp；”就可以在文檔中增加空格。

2.HTML的顏色表示

在HTML中，顏色有兩種表示方式。一種是用顏色的英文名稱表示，比如blue表示藍(lán)色，red表示紅色；另外一種是用十六進(jìn)制的數(shù)值表示RGB的顏色值。

RGB顏色的表示方式為＃rrggbb。其中，rr、gg、bb三色對應(yīng)的取值范圍都是00～FF，如白色的RGB值是（255，255，255），用＃ffffff表示；黑色的RGB值是（0，0，0），用＃000000表示。

1.2.6 HTML5開發(fā)人員編碼規(guī)范

HTML5作為前端網(wǎng)頁結(jié)構(gòu)的超文本標(biāo)記語言，網(wǎng)頁的HTML代碼必須符合HTML5書寫規(guī)范。規(guī)范目的是提高團(tuán)隊協(xié)作效率，使HTML5代碼風(fēng)格保持一致，容易被理解、維護(hù)和升級。

1.HTML書寫規(guī)范

1）文檔第一行添加HTML5的聲明類型﹤！DOCTYPE html﹥。

2）建議為﹤html﹥根標(biāo)簽指定lang屬性，從而為文檔設(shè)置正確的語言lang="zh-CN"。

3）編碼統(tǒng)一為﹤meta charset="utf-8"/﹥。

4）﹤title﹥標(biāo)簽必須設(shè)置為﹤head﹥的直接子元素，并緊隨﹤meta charset﹥聲明之后。

5）文檔中除了開頭的DOCTYPE、utf-8（或UTF-8）和zh-CN或者﹤head﹥幾種特殊情況可以大寫外，其他HTML標(biāo)簽名必須使用小寫字母。

6）標(biāo)簽的閉合要符合HTML5的規(guī)定。

7）必須遵守標(biāo)簽的嵌套規(guī)則，例如，div不得置于p中，tbody必須置于table中。

8）屬性名必須使用小寫字母，其屬性值必須用雙引號包圍。布爾類型的屬性建議不添加屬性值。自定義屬性推薦使用data-。

2.標(biāo)簽的規(guī)范

1）標(biāo)簽分單標(biāo)簽和雙標(biāo)簽，雙標(biāo)簽往往是成對出現(xiàn)，所有標(biāo)簽（包括空標(biāo)簽）都必須關(guān)閉，如﹤br/﹥、﹤img/﹥、﹤p﹥…﹤/p﹥等。

2）標(biāo)簽名和屬性建議都用小寫字母。

3）多數(shù)HTML標(biāo)簽可以嵌套，但不允許交叉。

4）HTML文檔中一行可以寫多個標(biāo)簽，但標(biāo)簽中的一個單詞不能分兩行寫。

3.屬性的規(guī)范

1）根據(jù)需要可以使用該標(biāo)簽的所有屬性，也可以只用其中的幾個屬性。在使用時，屬性之間沒有順序。

2）屬性值都要用雙引號括起來。

3）并不是所有的標(biāo)簽都有屬性，如換行標(biāo)簽就沒有。

4.元素的嵌套

1）塊級元素可以包含行內(nèi)元素或其他塊級元素，但行內(nèi)元素卻不能包含塊級元素，它只能包含其他的行內(nèi)元素。

2）有幾個特殊的塊級元素只能包含內(nèi)行元素，不能再包含塊級元素，這幾個特殊的塊級元素是h1、h2、h3、h4、h5、h6、p、dt。

5.代碼的縮進(jìn)

HTML5代碼并不要求在書寫時縮進(jìn)，但為了文檔的結(jié)構(gòu)性和層次性，建議代碼縮進(jìn)設(shè)置為4個空格，即使用4個空格作為一個縮進(jìn)層級，標(biāo)簽首尾對齊，每層的內(nèi)容向右縮進(jìn)4個空格。