? ? ? ? ? ? ? ?第二章? ?HTML5基礎(chǔ)標(biāo)簽和語(yǔ)法
?
? ? ? ?本章將詳細(xì)講解HTML的語(yǔ)法，以及常用的HTML標(biāo)簽。經(jīng)過(guò)本章的學(xué)習(xí)，將學(xué)會(huì)怎樣在網(wǎng)頁(yè)上顯示圖片、鏈接、以及不同類(lèi)型的文本。
? ? ? ?本章所有的案例都要求動(dòng)手練習(xí)，切勿只當(dāng)一個(gè)單純的旁觀(guān)者。單純的閱讀絕對(duì)沒(méi)辦法學(xué)會(huì)寫(xiě)一個(gè)頁(yè)面，切實(shí)地把案例都敲出來(lái)并在瀏覽器上得到正確的效果，才能確保正確使用標(biāo)簽和它的屬性，并在本章學(xué)習(xí)結(jié)束后沒(méi)有阻礙地寫(xiě)出本章任務(wù)。
? ? ? ?本章任務(wù)：學(xué)習(xí)HTML中的最基礎(chǔ)的元素。這些元素足夠完成下面的“咖啡館介紹頁(yè)面”。需要注意的是，HTML的主要功能是使網(wǎng)頁(yè)結(jié)構(gòu)化。HTML無(wú)法控制網(wǎng)頁(yè)的樣式，所以本章案例大多不夠美觀(guān)，但別急，在之后的章節(jié)中，將使用CSS來(lái)解決這個(gè)問(wèn)題。
? ? ? ?要求：
? ? ?（1）點(diǎn)擊圖2.1下面的‘查看菜單’的時(shí)候，頁(yè)面會(huì)滾動(dòng)到‘咖啡館菜單’置頂?shù)臓顟B(tài)，如下圖2.2所示
? ? ?（2）咖啡館菜單請(qǐng)按照?qǐng)D中所示的順序進(jìn)行百分百還原，如圖2.2所示
? ? ?（3）請(qǐng)使用兩種瀏覽器打開(kāi)你的頁(yè)面，檢查是否與下圖所示一致
? ? ?（4）請(qǐng)把圖片資料和文件放在一個(gè)文件夾中
? ? ? ?2.1 ?寫(xiě)HTML標(biāo)簽要遵循的規(guī)則
?? ? ? ?經(jīng)過(guò)前面的學(xué)習(xí)，已經(jīng)完整體驗(yàn)過(guò)怎樣寫(xiě)出一個(gè)HTML頁(yè)面了，如圖2.3所示。HTML頁(yè)面由不同元素經(jīng)過(guò)嵌套組成，下面講解HTML頁(yè)面所遵循的語(yǔ)法規(guī)則。
? ? ? ?2.1.1 HTML語(yǔ)法規(guī)則
? ? ? ?簡(jiǎn)單地來(lái)說(shuō)，HTML的語(yǔ)法就是給文本加上表明文本含義的標(biāo)簽(Tag)，讓人和瀏覽器能夠更好地理解文本。本小節(jié)主要講解概念，建立語(yǔ)法體系，案例較少。如果讀起來(lái)感到困惑，可以先快速地過(guò)完這一部分內(nèi)容，之后遇到問(wèn)題時(shí)再返回查看。
? ? ? 1.HTML文檔
? ? ? ?HTML文檔以 .html或.htm為文件后綴,來(lái)告知瀏覽器該文件的類(lèi)型。
? ? ? ?HTML文檔的打開(kāi)方式：雙擊.html文檔即可在瀏覽器打開(kāi)文件，如圖2.4所示。
? ? ? ?如何在打開(kāi)時(shí)選擇瀏覽器：
? ? ? ?在XXX.html上單擊右鍵，在“打開(kāi)方式”中選擇想要使用的瀏覽器，如圖2.5所示。
? ? ? ?2.元素
? ? ? ?標(biāo)簽：HTML 標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，如：“p”是一個(gè)表明段落的關(guān)鍵詞，給“p”加上標(biāo)簽，成為
標(biāo)簽。??元素：一個(gè)元素通常是由一個(gè)開(kāi)始標(biāo)簽、內(nèi)容，以及一個(gè)結(jié)束標(biāo)簽組成。結(jié)束標(biāo)簽中要寫(xiě)一個(gè)“/”來(lái)表示元素的結(jié)束，如圖2.6所示。
? ? ? ?3.屬性
? ? ? ?屬性用來(lái)指定元素的附加信息，使元素個(gè)性化如圖2.7、2.8所示，屬性添加在開(kāi)始標(biāo)簽中。屬性由屬性名和用雙引號(hào)括起來(lái)的屬性值組成，它們之間使用等號(hào)連接：?<元素名 屬性名="值1" 屬性名="值2"></元素名>??
? ? ? ? ?大多數(shù)元素都可以使用的屬性?
? ? ? ? ? ? ? ? ? ? ? ?id???? ? id名，唯一標(biāo)識(shí)?
? ? ? ? ? ? ? ? ? ? ? ?class??? 類(lèi)名，?標(biāo)識(shí)一類(lèi)元素?
? ? ? ? ? ? ? ? ? ? ? style?? ?樣式?
? ? ? ? ? ? ? ? ? ? ?title?? ?描述信息??
? ? ? ?元素名和屬性名都不區(qū)分大小寫(xiě)，一般習(xí)慣采用小寫(xiě)。
? ? ? ?當(dāng)元素?fù)碛胁恢挂粋€(gè)屬性的時(shí)候，屬性之間用空格隔開(kāi)，如圖2.9所示。
? ? ? ?2.1.2頁(yè)面的結(jié)構(gòu)以及根元素
??? ? ? ? ? ?下面是一個(gè)最簡(jiǎn)單的HTML文檔，如圖2.10所示。
? ? ? ?<!DOCTYPE html>聲明版本和文檔類(lèi)型
? ? ? ?<html>元素是頁(yè)面的根元素，所有的HTML文檔都應(yīng)該有一個(gè)元素。<html>元素可以包含兩個(gè)部分:<head>和<body>。
? ? ? ?<head>元素用于包含整個(gè)網(wǎng)頁(yè)的信息。
? ? ? ?<title>元素里面寫(xiě)文檔的名字，通常出現(xiàn)在瀏覽器最上面的窗口中。
? ? ? ?<meta> 通常用于指定網(wǎng)頁(yè)的描述，及其他元數(shù)據(jù)。<meta>元素的charset屬性告知瀏覽器此頁(yè)面屬于什么字符編碼格式。如：charset=“UTF-8”表示此頁(yè)面遵循unicode(萬(wàn)國(guó)碼)的編碼標(biāo)準(zhǔn)。
? ? ? ?<body>元素用來(lái)存放文檔的具體內(nèi)容。
? ? ? ?<p>標(biāo)簽是文檔的內(nèi)容，表示一個(gè)段落。
2.1.3 元素的嵌套
? ? ? ?1.什么是嵌套
? ? ? ? 把一個(gè)元素放入另一個(gè)元素中，稱(chēng)為元素的嵌套。如圖2.11“<head>元素嵌套在<html>元素中”，“<p>元素嵌套在<body>元素中”，嵌套是HTML頁(yè)面構(gòu)建的方式。
? ? ? ? ? 2.將上面的頁(yè)面轉(zhuǎn)換為樹(shù)形圖的形式來(lái)幫助理解如圖2.12所示。
? ? ? ?3.使用元素的嵌套保證你的標(biāo)簽匹配
? ? ? ?嵌套的一個(gè)重要作用就是保證你的標(biāo)記正確匹配。
? ? ? ?正確的標(biāo)簽匹配情況是：一個(gè)元素完全包含于另一個(gè)元素，如圖2.13、2.14所示。
? ? ? ?Tips:<em>標(biāo)簽的作用是強(qiáng)調(diào)內(nèi)容
? ? ? ?當(dāng)兩個(gè)元素互相交叉的時(shí)候，標(biāo)簽的匹配出現(xiàn)錯(cuò)誤，如圖2.15、2.16所示。
? ? ? ?錯(cuò)誤的嵌套可能導(dǎo)致網(wǎng)頁(yè)無(wú)法在瀏覽器上使用。謹(jǐn)記嵌套，可以避免標(biāo)簽不匹配。
2.2文本元素
2.2.1.標(biāo)題——<h1>到<h6>元素
? ? ? ?HTML標(biāo)題是通過(guò) <h1> - <h6> 標(biāo)簽進(jìn)行定義的,<h1> 定義最大的標(biāo)題， <h6> 定義最小的標(biāo)題，如圖2.17、2.18所示。
? ? ? ?Tips:瀏覽器會(huì)自動(dòng)地在標(biāo)題的前后添加空行。
? ? ? ?請(qǐng)確保將<h1>到<h6>標(biāo)簽只用于標(biāo)題，不要僅僅是為了生成粗體或大號(hào)的文本而使用標(biāo)題標(biāo)簽。用戶(hù)可以通過(guò)標(biāo)題來(lái)快速瀏覽網(wǎng)頁(yè)，所以用標(biāo)題來(lái)呈現(xiàn)文檔結(jié)構(gòu)是很重要的。
? ? ? ?應(yīng)該將<h1>用作主標(biāo)題（最重要的），其后是 <h2>（次重要的），再其次是 <h3>，以此類(lèi)推至<h6>。這和一本書(shū)的結(jié)構(gòu)是一樣的，有章，有節(jié)，還有小節(jié)，其實(shí)h1到h6就是這個(gè)意思。
? 2.2.2?段落——<p>元素
? ? ? ?在一篇文章中，一般會(huì)使用分段的形式劃分不同的內(nèi)容，使文章易于閱讀。<p>標(biāo)簽可以在網(wǎng)頁(yè)中實(shí)現(xiàn)分段的效果。每個(gè)段落都另起一行并且段落之間會(huì)有一些垂直的距離。
? ? ? ?接下來(lái)通過(guò)一首古詩(shī)來(lái)了解p標(biāo)簽的樣式 如圖2.19、2.20所示。
? ? ? ?由上面例子可以看到,瀏覽器會(huì)自動(dòng)忽略了標(biāo)簽內(nèi)部的換行。請(qǐng)記住，瀏覽器不會(huì)介意換行、回車(chē)和大多數(shù)的空格。因此，標(biāo)簽中的內(nèi)容可以在任意一行開(kāi)始，同一行或者任意一行結(jié)束。只需要確認(rèn)元素是以開(kāi)始標(biāo)簽開(kāi)始，以結(jié)束標(biāo)簽結(jié)束就夠了。
2.2.3?HTML 折行---<br/>元素
? ? ? ?如果您希望在不產(chǎn)生一個(gè)新段落的情況下進(jìn)行換行（新行），請(qǐng)使用標(biāo)簽，如圖2.21、2.22所示。
? ? ? ?<br>沒(méi)有任何內(nèi)容的元素，也沒(méi)有結(jié)束標(biāo)簽，因?yàn)樗淮頁(yè)Q行。這類(lèi)沒(méi)有標(biāo)記文本和結(jié)束標(biāo)簽的元素稱(chēng)為‘空元素’。
? ? ? ?Tpis:
? ? ? ?一般來(lái)說(shuō)，html元素都需要開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽。但是空元素例外，這一類(lèi)html元素沒(méi)有內(nèi)容，所以不需要閉合。
? ? ? ?常見(jiàn)空標(biāo)簽： <br> ??換行
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<hr> ????分隔線(xiàn)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<input> ??文本框等
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <img> ???圖片
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<meta> 常用于指定網(wǎng)頁(yè)的描述，關(guān)鍵詞，文件的最后修改時(shí)間，作者及其他元數(shù)據(jù)。
? ? ? ?元素的注釋
? ? ? ?在閱讀一本書(shū)的時(shí)候，通常會(huì)在旁邊寫(xiě)批注幫助理解。在代碼的世界同樣如此，通過(guò)寫(xiě)注釋可以標(biāo)注某一部分代碼的功能，使代碼易于閱讀。
? ? ? ?如果用<!--和-->這兩個(gè)標(biāo)記把內(nèi)容括起來(lái)，瀏覽器就會(huì)把它們通通都忽略掉。
? ? ? ?例如：在古詩(shī)最前面，加入“這是一首王維的古詩(shī)”這樣的注釋?zhuān)也伙@示在瀏覽器的頁(yè)面中，如圖2.23和2.24所示。
2.2.4?文本格式化
? ? ? ?文本格式化標(biāo)簽可以實(shí)現(xiàn)文本的不同樣式和意義，如<em>標(biāo)簽表示強(qiáng)調(diào)，<i>標(biāo)簽表示斜體，<strong>標(biāo)
簽表示加粗等。如圖2.25、2.26所示。
? ? ? ?格式化文本的效果完全可以使用字體的樣式來(lái)代替，之后的CSS基礎(chǔ)中我們會(huì)詳細(xì)講解這部分內(nèi)容。所以格式文本并不常用，我們只需了解即可。
2.2.5?HTML 超鏈接--<a>元素
? ? ? ?超鏈接<a>元素可以說(shuō)是最重要的文本元素，先來(lái)認(rèn)識(shí)一下網(wǎng)頁(yè)中都在哪些地方使用<a>元素。
? ? ? ?在瀏覽器的地址欄中輸入baidu.com進(jìn)入百度首頁(yè)，在搜索欄中輸入“超鏈接”。如圖2.27所示。
? ? ? ?點(diǎn)擊第一個(gè)詞條“超鏈接百度百科”，會(huì)跳轉(zhuǎn)到另一個(gè)頁(yè)面，如圖2.28所示。
? ? ? ?這一步操作中的跳轉(zhuǎn)功能，就是通過(guò)超鏈接<a>元素來(lái)實(shí)現(xiàn)的。超鏈接在本質(zhì)上屬于一個(gè)網(wǎng)頁(yè)的一部分，它是一種允許我們同其他網(wǎng)頁(yè)或站點(diǎn)之間進(jìn)行連接的元素。各個(gè)網(wǎng)頁(yè)鏈接在一起后，才能真正構(gòu)成一個(gè)網(wǎng)站。
? ? ? ?在圖2.28頁(yè)面的“目錄”中，點(diǎn)擊最后一條“動(dòng)態(tài)靜態(tài)”，可以看到，頁(yè)面跳轉(zhuǎn)到了同一頁(yè)面的最下部，也就是“目錄”中“動(dòng)態(tài)靜態(tài)”的位置。如圖2.29所示。
? ? ? ?從這一步操作中可以了解到，超鏈接還可以從一個(gè)網(wǎng)頁(yè)跳轉(zhuǎn)到相同頁(yè)面的不同位置。
? ? ? ?Tips:
? ? ? ?所謂超鏈接，是指從一個(gè)網(wǎng)頁(yè)指向一個(gè)目標(biāo)的連接關(guān)系。這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁(yè)，也可以是相同網(wǎng)頁(yè)上的不同位置，還可以是一個(gè)圖片，一個(gè)電子郵件地址，一個(gè)文件，甚至是一個(gè)應(yīng)用程序。
? ? ? ?案例1：從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面
? ? ? ?準(zhǔn)備好兩個(gè)頁(yè)面作為素材。新建文件夾“超鏈接”，在文件夾內(nèi)新建兩個(gè)文件夾，命名為“超鏈接1.html”和“超鏈接2.html”，如圖2.30所示。
? ? ? ?目標(biāo)：使用<a>標(biāo)簽，“從超鏈接.html”跳轉(zhuǎn)到“目標(biāo).html”。
? ? ? ?首先，使用之前學(xué)過(guò)的元素，在目標(biāo)頁(yè)面中寫(xiě)任意內(nèi)容,代碼如圖2.31所示。在瀏覽器運(yùn)行測(cè)試頁(yè)面是否能正常顯示，結(jié)果如圖2.32所示。
? ? ? ?在“超鏈接.html”中寫(xiě)入一個(gè)<a>元素，在標(biāo)簽內(nèi)寫(xiě)入文本“跳轉(zhuǎn)到目標(biāo)頁(yè)面”并且指定<a>元素的href屬性為目標(biāo)鏈接的地址，代碼如圖2.33所示,在瀏覽器打開(kāi)如圖2.34所示。
? ? ? ?這樣，就在頁(yè)面上成功寫(xiě)入了一個(gè)超鏈接，點(diǎn)擊“跳轉(zhuǎn)到目標(biāo)頁(yè)面”，頁(yè)面跳轉(zhuǎn)到“目標(biāo).html”。
? ? ? ?成功跳轉(zhuǎn)之后，來(lái)了解超鏈接中的屬性和語(yǔ)法。
? ? ? ?超鏈接的href屬性
? ? ? ?語(yǔ)法及介紹
? ? ? ?<a> 標(biāo)簽的 href 屬性用于指定超鏈接目標(biāo)的 URL，比如“baidu.com”，如圖2.35所示。
? ? ? ?href屬性的值可以是任何有效文檔的相對(duì)路徑或絕對(duì)路徑。
? ? ? ?2.2.6什么是絕對(duì)路徑和相對(duì)路徑？
? ? ? ? 1.絕對(duì)路徑
? ? ? ?平時(shí)要找到需要的文件就必須知道文件的位置，而表示文件的位置的方式就是路徑。例如一張圖片的路徑：C:/website/img/photo.jpg。只要看到這個(gè)路徑，不需要其他信息，就知道photo.jpg文件是在C盤(pán)的website目錄下的img子目錄中。
? ? ? ? 類(lèi)似于這樣完整的描述文件位置的路徑就是絕對(duì)路徑。
? ? ? ?怎樣查看文件的絕對(duì)路徑：
? ? ? ? 在文件上單擊右鍵，選擇屬性即可查看文件的路徑信息，如圖2.36所示。
? ? ? ? 2.相對(duì)路徑
? ? ? ?相對(duì)路徑，顧名思義就是自己相對(duì)于目標(biāo)位置，案例1中使用的就是相對(duì)路徑。 例如：將文件夾1視為根目
錄，文件1.html通過(guò)<a>元素鏈接到文件2.html。
? ? ? ?在圖2.37中，文件2.html的絕對(duì)路徑是：文件夾1/網(wǎng)頁(yè)文件/文件2.html，相對(duì)路徑是：文件2.html。
? ? ? ?將文件夾“網(wǎng)頁(yè)文件”，從文件夾1移動(dòng)到文件夾2，如圖2.38所示。此時(shí)，文件2.html的絕對(duì)路徑是：文件夾1/文件夾2/網(wǎng)頁(yè)文件/文件2.html，相對(duì)路徑是：文件2.html。
? ? ? ?我們?cè)趯?xiě)一個(gè)網(wǎng)站的時(shí)候，一般把多個(gè)頁(yè)面放在一個(gè)文件夾下。當(dāng)移動(dòng)項(xiàng)目文件夾時(shí)，文件的絕對(duì)路徑發(fā)生變化，相對(duì)路徑不變。所以，如果一個(gè)文件夾里面有多個(gè)頁(yè)面互相跳轉(zhuǎn)的時(shí)候，請(qǐng)使用相對(duì)路徑，避免因?yàn)槲募A的移動(dòng)等因素造成的路徑變化。
? ? ? ?Tips:
? ? ? ?url的寫(xiě)法
? ? ? ?每使用一次”.. ”，就上溯一層父目錄，如果你想上溯兩層父目錄，你可以這樣寫(xiě):“../..”
? ? ? ?請(qǐng)嚴(yán)格的使用HTML語(yǔ)言中的符號(hào)，所有字符應(yīng)該是英文字符，也不可以用”\”來(lái)代替”/”
? ? ? ?小練習(xí)：
? ? ? ?1.請(qǐng)把案例1中的相對(duì)路徑改為絕對(duì)路徑，嘗試是否能夠正常跳轉(zhuǎn)。
? ? ? ?2.以文件夾1為根目錄，請(qǐng)寫(xiě)出下面文件的路徑
? ? ??（1）在文件1.html中，寫(xiě)出文件3.html的絕對(duì)路徑和相對(duì)路徑
? ? ? （2）在文件5.html中，寫(xiě)出文件3.html的絕對(duì)路徑和相對(duì)路徑
? ? ? ? ?案例2：從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面的固定位置
? ? ? ? 本案例依然使用案例1中的兩個(gè)頁(yè)面作為素材，如圖2.40? 2.41所示。
? ? ? ?頁(yè)面中的某一位置夾了一個(gè)書(shū)簽，通過(guò)書(shū)簽來(lái)直接找到頁(yè)面中這個(gè)被標(biāo)記的位置。這個(gè)功能一般在目標(biāo)頁(yè)面的篇幅較長(zhǎng)，出現(xiàn)滾動(dòng)條的時(shí)候使用。
? ? ? ?為了有明確的視覺(jué)效果，將目標(biāo)頁(yè)面中的小節(jié)內(nèi)容復(fù)制二十次，并將小標(biāo)題從一到二十排開(kāi)。使頁(yè)面變長(zhǎng)，內(nèi)容變多，如圖2.42、2.43、2.44所示。
? ? ? ?本案例的目標(biāo)是：點(diǎn)擊超鏈接，直接跳轉(zhuǎn)到目標(biāo)頁(yè)面上第十二小節(jié)。
? ? ? ?實(shí)現(xiàn)目標(biāo)的思路是：給目標(biāo)頁(yè)面的第十二小節(jié)做標(biāo)記，在超鏈接的href中添加這個(gè)標(biāo)記，實(shí)現(xiàn)跳轉(zhuǎn)到某一頁(yè)面的標(biāo)記位置。
? ? ? ?1.在目標(biāo)頁(yè)面的十二小節(jié)處做標(biāo)記。
? ? ? ?Id屬性會(huì)在文檔中放置一個(gè)標(biāo)志，id名是獨(dú)一無(wú)二的。在一個(gè)html文檔中，一個(gè)id不可以出現(xiàn)多次，如圖2.45所示。
? ? ? ?在html4之前，這個(gè)功能需要使用name屬性來(lái)建立錨點(diǎn)，后被id屬性代替。Html5已經(jīng)不再支持name屬性。
? ? ? ?2.在超鏈接中添加這個(gè)標(biāo)記
? ? ? ?使用“#”+id名稱(chēng)的方式來(lái)尋找id標(biāo)志，如圖2.46所示。
? ? ? ?此時(shí)，點(diǎn)擊超鏈接，頁(yè)面就會(huì)跳轉(zhuǎn)到用id標(biāo)記過(guò)的位置，如圖2.47所示。
? ?2.3??HTML圖像——<img>元素? ? ??
? ? ? ?在 HTML 中，圖像由 <img> 標(biāo)簽定義。
? ? ? ?<img> 是空標(biāo)簽，意思是說(shuō)，它只包含屬性，并且沒(méi)有閉合標(biāo)簽。
? ? ? ?要在頁(yè)面上顯示圖像，你需要使用src屬性，它的值是圖像的地址，定義圖像的標(biāo)簽如圖2.48所示。
? ? ? ?src屬性
? ? ? ?<img> 標(biāo)簽的 src 屬性是必需的。它的值是圖像文件的 URL，也就是引用該圖像的文件的絕對(duì)路徑或相對(duì)路徑。
? ? ? ?Tips:
? ? ? ?為了整理文檔的存儲(chǔ)，創(chuàng)作者通常會(huì)把圖像文件存放在一個(gè)單獨(dú)的文件夾中，而且通常會(huì)將這些目錄命名為"pics" 或者 "images" 之類(lèi)的名稱(chēng)。
? ? ? ?width寬度和height高度
? ? ? ?Width控制圖片的寬度,height控制圖片的高度。
? ? ? ?如果沒(méi)有設(shè)置寬高的話(huà)，瀏覽器上會(huì)顯示圖片原本的尺寸。
? ? ? ?alt屬性
? ? ? ?當(dāng)圖片地址有誤的時(shí)候，顯示alt里面的文字內(nèi)容。
? ? ? 小案例：設(shè)置圖片的寬度和高度，并且在圖片地址錯(cuò)誤的時(shí)候用文字標(biāo)注圖片信息如圖2.49、2.50、2.51所示。
? ? ? ?一個(gè)超鏈接圖片
? ? ? ?把圖片標(biāo)簽嵌套在超鏈接標(biāo)簽里面，得到一個(gè)超鏈接圖片，如圖2.52所示。點(diǎn)擊圖片，可以跳轉(zhuǎn)到鏈接的地址，如圖2.53、2.54所示。
? 2.4 列表
? ? ? ?列表是一種常用的將內(nèi)容分類(lèi)的方法。
? ? ? ?1.無(wú)序列表
? ? ? ?當(dāng)列表中的順序不重要，更改次序不影響表達(dá)的時(shí)候，通常使用無(wú)序列表<ul>元素。無(wú)序列表的子項(xiàng)是且只
能是<li>元素，不可以在<ul>元素中嵌套其他元素。
? ? ? ?不規(guī)定樣式的時(shí)候，無(wú)序列表使用粗體圓點(diǎn)標(biāo)識(shí)它的每一個(gè)子項(xiàng)，如圖2.55、2.56所示。
? ? ? ?2、有序列表
? ? ? ?當(dāng)列表的順序有意義并且不能隨意更改的時(shí)候，要使用有序列表<ul>。同樣的，有序列表的子項(xiàng)同樣只能是<li>元素。
? ? ? ?不規(guī)定樣式的時(shí)候，有序列表使用阿拉伯?dāng)?shù)字標(biāo)識(shí)它的每一個(gè)子項(xiàng)，如圖2.57、2.58所示。
? ? ? ?3.自定義列表
? ? ? ?自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。
? ? ? ?自定義列表以 <dl> 標(biāo)簽開(kāi)始。每個(gè)自定義列表項(xiàng)以 <dt> 開(kāi)始。每個(gè)自定義列表項(xiàng)的定義以 <dd> 開(kāi)始，如圖2.59、2.60所示。
? ? ? ?4.列表的嵌套
? ? ? ?列表之間可以相互嵌套如圖2.61、2.62所示。
? ? ? ?列表嵌套的注意事項(xiàng)
? ? ? ?首先來(lái)觀(guān)察一位同學(xué)提交的小練習(xí)是否有問(wèn)題，如圖2.63、2.64所示。
? ? ? ?從渲染結(jié)構(gòu)上看，并不能發(fā)現(xiàn)問(wèn)題所在。但是HTML的目的并不是為了表現(xiàn)外觀(guān)，HTML使用不同標(biāo)簽的目的是構(gòu)建合理的結(jié)構(gòu)。從結(jié)構(gòu)上分析，很容易找到上述案例的錯(cuò)誤，如圖2.65所示：
? ? ? ?列表是一種表示順序的文本形式，嵌套可以表現(xiàn)內(nèi)容之前的包含關(guān)系。分析本案例的語(yǔ)義，可以得知這是一
個(gè)對(duì)飲料的分類(lèi)，即飲料分為咖啡、茶、果汁、雪碧、可樂(lè)幾種類(lèi)型。其中，咖啡又包括意式濃縮、拿鐵、卡布
奇諾三種，茶包括紅茶、綠茶、果茶三種。
? ? ? ?在上述案例中，1.將咖啡的具體種類(lèi)與飲料種類(lèi)放在了同一個(gè)級(jí)別，引起了結(jié)構(gòu)的混淆。2.違反了<ul>元
素只能有<li>這一種元素作為子項(xiàng)。
本章作業(yè)：請(qǐng)完成本章開(kāi)頭的“本章任務(wù)”
