? ? ? ? ? ? ? ?第二章? ?HTML5基礎(chǔ)標(biāo)簽和語法
?
? ? ? ?本章將詳細(xì)講解HTML的語法，以及常用的HTML標(biāo)簽。經(jīng)過本章的學(xué)習(xí)鲫售，將學(xué)會怎樣在網(wǎng)頁上顯示圖片硝拧、鏈接径筏、以及不同類型的文本葛假。
? ? ? ?本章所有的案例都要求動手練習(xí)搀矫，切勿只當(dāng)一個單純的旁觀者编丘。單純的閱讀絕對沒辦法學(xué)會寫一個頁面拗引，切實地把案例都敲出來并在瀏覽器上得到正確的效果毕荐，才能確保正確使用標(biāo)簽和它的屬性欠肾，并在本章學(xué)習(xí)結(jié)束后沒有阻礙地寫出本章任務(wù)舶沿。
? ? ? ?本章任務(wù)：學(xué)習(xí)HTML中的最基礎(chǔ)的元素席噩。這些元素足夠完成下面的“咖啡館介紹頁面”挑秉。需要注意的是勋拟，HTML的主要功能是使網(wǎng)頁結(jié)構(gòu)化勋磕。HTML無法控制網(wǎng)頁的樣式，所以本章案例大多不夠美觀敢靡，但別急挂滓，在之后的章節(jié)中，將使用CSS來解決這個問題啸胧。
? ? ? ?要求：
? ? ?（1）點擊圖2.1下面的‘查看菜單’的時候赶站，頁面會滾動到‘咖啡館菜單’置頂?shù)臓顟B(tài)，如下圖2.2所示
? ? ?（2）咖啡館菜單請按照圖中所示的順序進行百分百還原吓揪，如圖2.2所示
? ? ?（3）請使用兩種瀏覽器打開你的頁面亲怠，檢查是否與下圖所示一致
? ? ?（4）請把圖片資料和文件放在一個文件夾中
? ? ? ?2.1 ?寫HTML標(biāo)簽要遵循的規(guī)則
?? ? ? ?經(jīng)過前面的學(xué)習(xí)，已經(jīng)完整體驗過怎樣寫出一個HTML頁面了柠辞，如圖2.3所示团秽。HTML頁面由不同元素經(jīng)過嵌套組成，下面講解HTML頁面所遵循的語法規(guī)則叭首。
? ? ? ?2.1.1 HTML語法規(guī)則
? ? ? ?簡單地來說习勤，HTML的語法就是給文本加上表明文本含義的標(biāo)簽(Tag)，讓人和瀏覽器能夠更好地理解文本焙格。本小節(jié)主要講解概念图毕，建立語法體系，案例較少眷唉。如果讀起來感到困惑予颤，可以先快速地過完這一部分內(nèi)容，之后遇到問題時再返回查看冬阳。
? ? ? 1.HTML文檔
? ? ? ?HTML文檔以 .html或.htm為文件后綴,來告知瀏覽器該文件的類型蛤虐。
? ? ? ?HTML文檔的打開方式：雙擊.html文檔即可在瀏覽器打開文件，如圖2.4所示肝陪。
? ? ? ?如何在打開時選擇瀏覽器：
? ? ? ?在XXX.html上單擊右鍵驳庭，在“打開方式”中選擇想要使用的瀏覽器，如圖2.5所示。
? ? ? ?2.元素
? ? ? ?標(biāo)簽：HTML 標(biāo)簽是由尖括號包圍的關(guān)鍵詞饲常，如：“p”是一個表明段落的關(guān)鍵詞蹲堂，給“p”加上標(biāo)簽，成為
標(biāo)簽贝淤。??元素：一個元素通常是由一個開始標(biāo)簽柒竞、內(nèi)容，以及一個結(jié)束標(biāo)簽組成霹娄。結(jié)束標(biāo)簽中要寫一個“/”來表示元素的結(jié)束能犯，如圖2.6所示。
? ? ? ?3.屬性
? ? ? ?屬性用來指定元素的附加信息犬耻，使元素個性化如圖2.7踩晶、2.8所示，屬性添加在開始標(biāo)簽中枕磁。屬性由屬性名和用雙引號括起來的屬性值組成渡蜻，它們之間使用等號連接：?<元素名 屬性名="值1" 屬性名="值2"></元素名>??
? ? ? ? ?大多數(shù)元素都可以使用的屬性?
? ? ? ? ? ? ? ? ? ? ? ?id???? ? id名，唯一標(biāo)識?
? ? ? ? ? ? ? ? ? ? ? ?class??? 類名计济，?標(biāo)識一類元素?
? ? ? ? ? ? ? ? ? ? ? style?? ?樣式?
? ? ? ? ? ? ? ? ? ? ?title?? ?描述信息??
? ? ? ?元素名和屬性名都不區(qū)分大小寫茸苇，一般習(xí)慣采用小寫。
? ? ? ?當(dāng)元素?fù)碛胁恢挂粋€屬性的時候沦寂，屬性之間用空格隔開学密，如圖2.9所示。
? ? ? ?2.1.2頁面的結(jié)構(gòu)以及根元素
??? ? ? ? ? ?下面是一個最簡單的HTML文檔传藏，如圖2.10所示腻暮。
? ? ? ?<!DOCTYPE html>聲明版本和文檔類型
? ? ? ?<html>元素是頁面的根元素，所有的HTML文檔都應(yīng)該有一個元素毯侦。<html>元素可以包含兩個部分:<head>和<body>哭靖。
? ? ? ?<head>元素用于包含整個網(wǎng)頁的信息。
? ? ? ?<title>元素里面寫文檔的名字侈离，通常出現(xiàn)在瀏覽器最上面的窗口中试幽。
? ? ? ?<meta> 通常用于指定網(wǎng)頁的描述，及其他元數(shù)據(jù)卦碾。<meta>元素的charset屬性告知瀏覽器此頁面屬于什么字符編碼格式铺坞。如：charset=“UTF-8”表示此頁面遵循unicode(萬國碼)的編碼標(biāo)準(zhǔn)。
? ? ? ?<body>元素用來存放文檔的具體內(nèi)容洲胖。
? ? ? ?<p>標(biāo)簽是文檔的內(nèi)容康震，表示一個段落。
2.1.3 元素的嵌套
? ? ? ?1.什么是嵌套
? ? ? ? 把一個元素放入另一個元素中宾濒，稱為元素的嵌套。如圖2.11“<head>元素嵌套在<html>元素中”屏箍，“<p>元素嵌套在<body>元素中”绘梦，嵌套是HTML頁面構(gòu)建的方式橘忱。
? ? ? ? ? 2.將上面的頁面轉(zhuǎn)換為樹形圖的形式來幫助理解如圖2.12所示。
? ? ? ?3.使用元素的嵌套保證你的標(biāo)簽匹配
? ? ? ?嵌套的一個重要作用就是保證你的標(biāo)記正確匹配卸奉。
? ? ? ?正確的標(biāo)簽匹配情況是：一個元素完全包含于另一個元素钝诚，如圖2.13、2.14所示榄棵。
? ? ? ?Tips:<em>標(biāo)簽的作用是強調(diào)內(nèi)容
? ? ? ?當(dāng)兩個元素互相交叉的時候凝颇，標(biāo)簽的匹配出現(xiàn)錯誤，如圖2.15疹鳄、2.16所示拧略。
? ? ? ?錯誤的嵌套可能導(dǎo)致網(wǎng)頁無法在瀏覽器上使用瘪弓。謹(jǐn)記嵌套垫蛆，可以避免標(biāo)簽不匹配。
2.2文本元素
2.2.1.標(biāo)題——<h1>到<h6>元素
? ? ? ?HTML標(biāo)題是通過 <h1> - <h6> 標(biāo)簽進行定義的,<h1> 定義最大的標(biāo)題腺怯， <h6> 定義最小的標(biāo)題袱饭，如圖2.17、2.18所示呛占。
? ? ? ?Tips:瀏覽器會自動地在標(biāo)題的前后添加空行虑乖。
? ? ? ?請確保將<h1>到<h6>標(biāo)簽只用于標(biāo)題，不要僅僅是為了生成粗體或大號的文本而使用標(biāo)題標(biāo)簽晾虑。用戶可以通過標(biāo)題來快速瀏覽網(wǎng)頁疹味，所以用標(biāo)題來呈現(xiàn)文檔結(jié)構(gòu)是很重要的。
? ? ? ?應(yīng)該將<h1>用作主標(biāo)題（最重要的）走贪，其后是 <h2>（次重要的）佛猛，再其次是 <h3>，以此類推至<h6>坠狡。這和一本書的結(jié)構(gòu)是一樣的继找，有章，有節(jié)逃沿，還有小節(jié)婴渡，其實h1到h6就是這個意思。
? 2.2.2?段落——<p>元素
? ? ? ?在一篇文章中凯亮，一般會使用分段的形式劃分不同的內(nèi)容边臼，使文章易于閱讀。<p>標(biāo)簽可以在網(wǎng)頁中實現(xiàn)分段的效果假消。每個段落都另起一行并且段落之間會有一些垂直的距離柠并。
? ? ? ?接下來通過一首古詩來了解p標(biāo)簽的樣式 如圖2.19、2.20所示。
? ? ? ?由上面例子可以看到,瀏覽器會自動忽略了標(biāo)簽內(nèi)部的換行臼予。請記住鸣戴，瀏覽器不會介意換行、回車和大多數(shù)的空格粘拾。因此窄锅，標(biāo)簽中的內(nèi)容可以在任意一行開始，同一行或者任意一行結(jié)束缰雇。只需要確認(rèn)元素是以開始標(biāo)簽開始入偷，以結(jié)束標(biāo)簽結(jié)束就夠了。
2.2.3?HTML 折行---<br/>元素
? ? ? ?如果您希望在不產(chǎn)生一個新段落的情況下進行換行（新行）械哟，請使用標(biāo)簽疏之，如圖2.21、2.22所示戒良。
? ? ? ?<br>沒有任何內(nèi)容的元素体捏，也沒有結(jié)束標(biāo)簽，因為它只代表換行糯崎。這類沒有標(biāo)記文本和結(jié)束標(biāo)簽的元素稱為‘空元素’几缭。
? ? ? ?Tpis:
? ? ? ?一般來說，html元素都需要開始標(biāo)簽和結(jié)束標(biāo)簽沃呢。但是空元素例外年栓，這一類html元素沒有內(nèi)容，所以不需要閉合薄霜。
? ? ? ?常見空標(biāo)簽： <br> ??換行
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<hr> ????分隔線
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<input> ??文本框等
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <img> ???圖片
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<meta> 常用于指定網(wǎng)頁的描述某抓，關(guān)鍵詞，文件的最后修改時間惰瓜，作者及其他元數(shù)據(jù)否副。
? ? ? ?元素的注釋
? ? ? ?在閱讀一本書的時候，通常會在旁邊寫批注幫助理解崎坊。在代碼的世界同樣如此备禀，通過寫注釋可以標(biāo)注某一部分代碼的功能，使代碼易于閱讀奈揍。
? ? ? ?如果用<!--和-->這兩個標(biāo)記把內(nèi)容括起來曲尸，瀏覽器就會把它們通通都忽略掉。
? ? ? ?例如：在古詩最前面男翰，加入“這是一首王維的古詩”這樣的注釋另患，且不顯示在瀏覽器的頁面中，如圖2.23和2.24所示蛾绎。
2.2.4?文本格式化
? ? ? ?文本格式化標(biāo)簽可以實現(xiàn)文本的不同樣式和意義昆箕，如<em>標(biāo)簽表示強調(diào)鸦列，<i>標(biāo)簽表示斜體，<strong>標(biāo)
簽表示加粗等为严。如圖2.25敛熬、2.26所示。
? ? ? ?格式化文本的效果完全可以使用字體的樣式來代替第股，之后的CSS基礎(chǔ)中我們會詳細(xì)講解這部分內(nèi)容。所以格式文本并不常用话原，我們只需了解即可夕吻。
2.2.5?HTML 超鏈接--<a>元素
? ? ? ?超鏈接<a>元素可以說是最重要的文本元素，先來認(rèn)識一下網(wǎng)頁中都在哪些地方使用<a>元素繁仁。
? ? ? ?在瀏覽器的地址欄中輸入baidu.com進入百度首頁涉馅，在搜索欄中輸入“超鏈接”。如圖2.27所示黄虱。
? ? ? ?點擊第一個詞條“超鏈接百度百科”稚矿，會跳轉(zhuǎn)到另一個頁面，如圖2.28所示捻浦。
? ? ? ?這一步操作中的跳轉(zhuǎn)功能晤揣，就是通過超鏈接<a>元素來實現(xiàn)的。超鏈接在本質(zhì)上屬于一個網(wǎng)頁的一部分朱灿，它是一種允許我們同其他網(wǎng)頁或站點之間進行連接的元素昧识。各個網(wǎng)頁鏈接在一起后，才能真正構(gòu)成一個網(wǎng)站盗扒。
? ? ? ?在圖2.28頁面的“目錄”中跪楞，點擊最后一條“動態(tài)靜態(tài)”，可以看到侣灶，頁面跳轉(zhuǎn)到了同一頁面的最下部甸祭，也就是“目錄”中“動態(tài)靜態(tài)”的位置。如圖2.29所示褥影。
? ? ? ?從這一步操作中可以了解到池户，超鏈接還可以從一個網(wǎng)頁跳轉(zhuǎn)到相同頁面的不同位置。
? ? ? ?Tips:
? ? ? ?所謂超鏈接伪阶，是指從一個網(wǎng)頁指向一個目標(biāo)的連接關(guān)系煞檩。這個目標(biāo)可以是另一個網(wǎng)頁，也可以是相同網(wǎng)頁上的不同位置栅贴，還可以是一個圖片斟湃，一個電子郵件地址，一個文件檐薯，甚至是一個應(yīng)用程序凝赛。
? ? ? ?案例1：從一個頁面跳轉(zhuǎn)到另一個頁面
? ? ? ?準(zhǔn)備好兩個頁面作為素材注暗。新建文件夾“超鏈接”，在文件夾內(nèi)新建兩個文件夾墓猎，命名為“超鏈接1.html”和“超鏈接2.html”捆昏，如圖2.30所示。
? ? ? ?目標(biāo)：使用<a>標(biāo)簽毙沾，“從超鏈接.html”跳轉(zhuǎn)到“目標(biāo).html”骗卜。
? ? ? ?首先，使用之前學(xué)過的元素左胞，在目標(biāo)頁面中寫任意內(nèi)容,代碼如圖2.31所示寇仓。在瀏覽器運行測試頁面是否能正常顯示，結(jié)果如圖2.32所示烤宙。
? ? ? ?在“超鏈接.html”中寫入一個<a>元素遍烦，在標(biāo)簽內(nèi)寫入文本“跳轉(zhuǎn)到目標(biāo)頁面”并且指定<a>元素的href屬性為目標(biāo)鏈接的地址，代碼如圖2.33所示,在瀏覽器打開如圖2.34所示躺枕。
? ? ? ?這樣服猪，就在頁面上成功寫入了一個超鏈接，點擊“跳轉(zhuǎn)到目標(biāo)頁面”拐云，頁面跳轉(zhuǎn)到“目標(biāo).html”罢猪。
? ? ? ?成功跳轉(zhuǎn)之后，來了解超鏈接中的屬性和語法慨丐。
? ? ? ?超鏈接的href屬性
? ? ? ?語法及介紹
? ? ? ?<a> 標(biāo)簽的 href 屬性用于指定超鏈接目標(biāo)的 URL坡脐，比如“baidu.com”，如圖2.35所示房揭。
? ? ? ?href屬性的值可以是任何有效文檔的相對路徑或絕對路徑备闲。
? ? ? ?2.2.6什么是絕對路徑和相對路徑？
? ? ? ? 1.絕對路徑
? ? ? ?平時要找到需要的文件就必須知道文件的位置捅暴，而表示文件的位置的方式就是路徑恬砂。例如一張圖片的路徑：C:/website/img/photo.jpg。只要看到這個路徑蓬痒，不需要其他信息泻骤，就知道photo.jpg文件是在C盤的website目錄下的img子目錄中。
? ? ? ? 類似于這樣完整的描述文件位置的路徑就是絕對路徑梧奢。
? ? ? ?怎樣查看文件的絕對路徑：
? ? ? ? 在文件上單擊右鍵狱掂，選擇屬性即可查看文件的路徑信息，如圖2.36所示亲轨。
? ? ? ? 2.相對路徑
? ? ? ?相對路徑趋惨，顧名思義就是自己相對于目標(biāo)位置，案例1中使用的就是相對路徑惦蚊。 例如：將文件夾1視為根目
錄器虾，文件1.html通過<a>元素鏈接到文件2.html讯嫂。
? ? ? ?在圖2.37中，文件2.html的絕對路徑是：文件夾1/網(wǎng)頁文件/文件2.html兆沙，相對路徑是：文件2.html欧芽。
? ? ? ?將文件夾“網(wǎng)頁文件”，從文件夾1移動到文件夾2葛圃，如圖2.38所示千扔。此時，文件2.html的絕對路徑是：文件夾1/文件夾2/網(wǎng)頁文件/文件2.html装悲，相對路徑是：文件2.html昏鹃。
? ? ? ?我們在寫一個網(wǎng)站的時候，一般把多個頁面放在一個文件夾下诀诊。當(dāng)移動項目文件夾時，文件的絕對路徑發(fā)生變化阅嘶，相對路徑不變属瓣。所以，如果一個文件夾里面有多個頁面互相跳轉(zhuǎn)的時候讯柔，請使用相對路徑抡蛙，避免因為文件夾的移動等因素造成的路徑變化。
? ? ? ?Tips:
? ? ? ?url的寫法
? ? ? ?每使用一次”.. ”魂迄，就上溯一層父目錄粗截，如果你想上溯兩層父目錄，你可以這樣寫:“../..”
? ? ? ?請嚴(yán)格的使用HTML語言中的符號捣炬，所有字符應(yīng)該是英文字符熊昌，也不可以用”\”來代替”/”
? ? ? ?小練習(xí)：
? ? ? ?1.請把案例1中的相對路徑改為絕對路徑，嘗試是否能夠正常跳轉(zhuǎn)湿酸。
? ? ? ?2.以文件夾1為根目錄婿屹，請寫出下面文件的路徑
? ? ??（1）在文件1.html中，寫出文件3.html的絕對路徑和相對路徑
? ? ? （2）在文件5.html中推溃，寫出文件3.html的絕對路徑和相對路徑
? ? ? ? ?案例2：從一個頁面跳轉(zhuǎn)到另一個頁面的固定位置
? ? ? ? 本案例依然使用案例1中的兩個頁面作為素材昂利，如圖2.40? 2.41所示。
? ? ? ?頁面中的某一位置夾了一個書簽铁坎，通過書簽來直接找到頁面中這個被標(biāo)記的位置蜂奸。這個功能一般在目標(biāo)頁面的篇幅較長，出現(xiàn)滾動條的時候使用硬萍。
? ? ? ?為了有明確的視覺效果扩所，將目標(biāo)頁面中的小節(jié)內(nèi)容復(fù)制二十次，并將小標(biāo)題從一到二十排開襟铭。使頁面變長碌奉，內(nèi)容變多短曾，如圖2.42、2.43赐劣、2.44所示嫉拐。
? ? ? ?本案例的目標(biāo)是：點擊超鏈接，直接跳轉(zhuǎn)到目標(biāo)頁面上第十二小節(jié)魁兼。
? ? ? ?實現(xiàn)目標(biāo)的思路是：給目標(biāo)頁面的第十二小節(jié)做標(biāo)記婉徘，在超鏈接的href中添加這個標(biāo)記，實現(xiàn)跳轉(zhuǎn)到某一頁面的標(biāo)記位置咐汞。
? ? ? ?1.在目標(biāo)頁面的十二小節(jié)處做標(biāo)記盖呼。
? ? ? ?Id屬性會在文檔中放置一個標(biāo)志，id名是獨一無二的化撕。在一個html文檔中几晤，一個id不可以出現(xiàn)多次，如圖2.45所示植阴。
? ? ? ?在html4之前蟹瘾，這個功能需要使用name屬性來建立錨點，后被id屬性代替掠手。Html5已經(jīng)不再支持name屬性憾朴。
? ? ? ?2.在超鏈接中添加這個標(biāo)記
? ? ? ?使用“#”+id名稱的方式來尋找id標(biāo)志，如圖2.46所示喷鸽。
? ? ? ?此時众雷，點擊超鏈接，頁面就會跳轉(zhuǎn)到用id標(biāo)記過的位置做祝，如圖2.47所示砾省。
? ?2.3??HTML圖像——<img>元素? ? ??
? ? ? ?在 HTML 中，圖像由 <img> 標(biāo)簽定義剖淀。
? ? ? ?<img> 是空標(biāo)簽纯蛾，意思是說，它只包含屬性纵隔，并且沒有閉合標(biāo)簽翻诉。
? ? ? ?要在頁面上顯示圖像，你需要使用src屬性捌刮，它的值是圖像的地址碰煌，定義圖像的標(biāo)簽如圖2.48所示。
? ? ? ?src屬性
? ? ? ?<img> 標(biāo)簽的 src 屬性是必需的绅作。它的值是圖像文件的 URL芦圾，也就是引用該圖像的文件的絕對路徑或相對路徑。
? ? ? ?Tips:
? ? ? ?為了整理文檔的存儲俄认，創(chuàng)作者通常會把圖像文件存放在一個單獨的文件夾中个少，而且通常會將這些目錄命名為"pics" 或者 "images" 之類的名稱洪乍。
? ? ? ?width寬度和height高度
? ? ? ?Width控制圖片的寬度,height控制圖片的高度。
? ? ? ?如果沒有設(shè)置寬高的話夜焦，瀏覽器上會顯示圖片原本的尺寸壳澳。
? ? ? ?alt屬性
? ? ? ?當(dāng)圖片地址有誤的時候，顯示alt里面的文字內(nèi)容茫经。
? ? ? 小案例：設(shè)置圖片的寬度和高度巷波，并且在圖片地址錯誤的時候用文字標(biāo)注圖片信息如圖2.49、2.50卸伞、2.51所示抹镊。
? ? ? ?一個超鏈接圖片
? ? ? ?把圖片標(biāo)簽嵌套在超鏈接標(biāo)簽里面，得到一個超鏈接圖片荤傲，如圖2.52所示垮耳。點擊圖片，可以跳轉(zhuǎn)到鏈接的地址遂黍，如圖2.53氨菇、2.54所示。
? 2.4 列表
? ? ? ?列表是一種常用的將內(nèi)容分類的方法妓湘。
? ? ? ?1.無序列表
? ? ? ?當(dāng)列表中的順序不重要，更改次序不影響表達(dá)的時候乌询，通常使用無序列表<ul>元素榜贴。無序列表的子項是且只
能是<li>元素，不可以在<ul>元素中嵌套其他元素妹田。
? ? ? ?不規(guī)定樣式的時候唬党，無序列表使用粗體圓點標(biāo)識它的每一個子項，如圖2.55鬼佣、2.56所示驶拱。
? ? ? ?2、有序列表
? ? ? ?當(dāng)列表的順序有意義并且不能隨意更改的時候晶衷，要使用有序列表<ul>蓝纲。同樣的，有序列表的子項同樣只能是<li>元素晌纫。
? ? ? ?不規(guī)定樣式的時候税迷，有序列表使用阿拉伯?dāng)?shù)字標(biāo)識它的每一個子項，如圖2.57锹漱、2.58所示箭养。
? ? ? ?3.自定義列表
? ? ? ?自定義列表不僅僅是一列項目，而是項目及其注釋的組合哥牍。
? ? ? ?自定義列表以 <dl> 標(biāo)簽開始毕泌。每個自定義列表項以 <dt> 開始喝检。每個自定義列表項的定義以 <dd> 開始，如圖2.59撼泛、2.60所示挠说。
? ? ? ?4.列表的嵌套
? ? ? ?列表之間可以相互嵌套如圖2.61、2.62所示坎弯。
? ? ? ?列表嵌套的注意事項
? ? ? ?首先來觀察一位同學(xué)提交的小練習(xí)是否有問題纺涤，如圖2.63菇晃、2.64所示表制。
? ? ? ?從渲染結(jié)構(gòu)上看，并不能發(fā)現(xiàn)問題所在留夜。但是HTML的目的并不是為了表現(xiàn)外觀崎脉，HTML使用不同標(biāo)簽的目的是構(gòu)建合理的結(jié)構(gòu)拧咳。從結(jié)構(gòu)上分析，很容易找到上述案例的錯誤囚灼，如圖2.65所示：
? ? ? ?列表是一種表示順序的文本形式骆膝，嵌套可以表現(xiàn)內(nèi)容之前的包含關(guān)系。分析本案例的語義灶体，可以得知這是一
個對飲料的分類阅签，即飲料分為咖啡、茶蝎抽、果汁政钟、雪碧、可樂幾種類型樟结。其中养交，咖啡又包括意式濃縮、拿鐵瓢宦、卡布
奇諾三種碎连，茶包括紅茶、綠茶驮履、果茶三種鱼辙。
? ? ? ?在上述案例中，1.將咖啡的具體種類與飲料種類放在了同一個級別疲吸，引起了結(jié)構(gòu)的混淆座每。2.違反了<ul>元
素只能有<li>這一種元素作為子項。
本章作業(yè)：請完成本章開頭的“本章任務(wù)”
