網(wǎng)頁(yè)設(shè)計(jì)與Web前端開發(fā)案例教程第2章HTML常用標(biāo)簽CONTENT目錄HTML5概述01文檔基本結(jié)構(gòu)02文本相關(guān)標(biāo)簽03圖片超鏈接標(biāo)簽04音視頻標(biāo)簽講解05實(shí)踐與提升0601HTML5概述HTML發(fā)展歷程回顧010203HTML版本演進(jìn)HTML從1.0逐步發(fā)展到HTML5，各版本在功能和特性上不斷改進(jìn)，適應(yīng)了不同時(shí)期的網(wǎng)頁(yè)開發(fā)需求。文檔聲明差異HTML4與HTML5的文檔聲明有明顯區(qū)別，如簡(jiǎn)潔且通用，體現(xiàn)了HTML5的標(biāo)準(zhǔn)化進(jìn)步。核心標(biāo)簽結(jié)構(gòu)HTML5文檔包含html、head、body等核心標(biāo)簽，構(gòu)建了網(wǎng)頁(yè)的基本框架，保障了頁(yè)面的規(guī)范性和可讀性。HTML5技術(shù)革新意義010203HTML5核心優(yōu)勢(shì)HTML5相比舊版本，在網(wǎng)頁(yè)結(jié)構(gòu)、多媒體支持及語(yǔ)義化方面有顯著提升，簡(jiǎn)化了文檔聲明，增強(qiáng)了頁(yè)面表現(xiàn)力與可訪問性。技術(shù)革新驅(qū)動(dòng)HTML版本迭代體現(xiàn)需求驅(qū)動(dòng)發(fā)展，HTML5的推出滿足了現(xiàn)代網(wǎng)頁(yè)開發(fā)對(duì)多媒體、移動(dòng)設(shè)備兼容性及SEO優(yōu)化的需求。工匠精神培養(yǎng)通過掌握HTML5標(biāo)簽體系及規(guī)范編碼，培養(yǎng)獨(dú)立構(gòu)建網(wǎng)頁(yè)的能力，同時(shí)強(qiáng)調(diào)代碼規(guī)范與SEO友好，體現(xiàn)工匠精神。02文檔基本結(jié)構(gòu)網(wǎng)頁(yè)結(jié)構(gòu)搭建要點(diǎn)01020304HTML5核心結(jié)構(gòu)HTML5網(wǎng)頁(yè)由doctype聲明、html標(biāo)簽包裹head和body組成，構(gòu)成頁(yè)面基礎(chǔ)框架，確保瀏覽器正確解析。語(yǔ)義化標(biāo)簽應(yīng)用使用header、nav、article等語(yǔ)義標(biāo)簽劃分內(nèi)容區(qū)域，提升代碼可讀性與SEO優(yōu)化效果。文檔類型聲明HTML5采用簡(jiǎn)化聲明，替代HTML4復(fù)雜語(yǔ)法，統(tǒng)一瀏覽器渲染標(biāo)準(zhǔn)。頭部元數(shù)據(jù)配置head標(biāo)簽內(nèi)通過metacharset設(shè)置字符編碼，title定義頁(yè)面標(biāo)題，保障基礎(chǔ)顯示與兼容性。HTML5核心標(biāo)簽介紹01020304HTML5文檔結(jié)構(gòu)HTML5文檔由聲明，及html、head、body三大核心標(biāo)簽組成，構(gòu)建網(wǎng)頁(yè)基本框架。文本與段落標(biāo)簽<p>定義段落，<br>實(shí)現(xiàn)換行，<h#>定義標(biāo)題文字樣式圖片標(biāo)簽要素標(biāo)簽需src（路徑）、alt（替代文本）、width/height（尺寸）四要素，確保圖片完整展示。超鏈接類型支持絕對(duì)路徑（http://）和相對(duì)路徑（文件/目錄），href="#id"實(shí)現(xiàn)頁(yè)面內(nèi)書簽跳轉(zhuǎn)。03文本相關(guān)標(biāo)簽段落、換行、標(biāo)題標(biāo)簽用法段落標(biāo)簽HTML中<p>標(biāo)簽用于定義段落，文本在瀏覽器中會(huì)自動(dòng)換行，常與CSS配合實(shí)現(xiàn)對(duì)齊等樣式。換行標(biāo)簽<br>標(biāo)簽可實(shí)現(xiàn)文本強(qiáng)制換行，在需要特定位置換行時(shí)使用，如詩(shī)歌排版或短句分隔。標(biāo)題標(biāo)簽標(biāo)題文字標(biāo)簽的基本格式為<h#>標(biāo)題文字</h#>#用來指定標(biāo)題文字的大小，#取1～6的整數(shù)值，取1時(shí)文字最大，取6時(shí)文字最小。特殊文字樣式設(shè)置邏輯與物理樣式區(qū)分HTML中特殊文字樣式分邏輯和物理兩類，<strong>和<em>也被稱為邏輯樣式標(biāo)簽，而其它樣式標(biāo)簽則屬于物理樣式標(biāo)簽。標(biāo)簽對(duì)比與應(yīng)用除了外觀上<strong>默認(rèn)為加粗顯示，<em>默認(rèn)為斜體顯示以外，兩者在邏輯上表示強(qiáng)調(diào)時(shí)，<em>的強(qiáng)調(diào)程度<strong>比更大。04圖片超鏈接標(biāo)簽圖片標(biāo)簽四要素講解圖片標(biāo)簽四要素HTML圖片標(biāo)簽有src、alt、width、height四要素，src指定路徑，alt提供替代文本，width和height控制尺寸。超鏈接路徑及書簽超鏈接路徑及書簽介紹HTML中超鏈接的路徑類型，包括絕對(duì)路徑和相對(duì)路徑，以及書簽鏈接實(shí)現(xiàn)頁(yè)面內(nèi)跳轉(zhuǎn)的方法和案例。05音視頻標(biāo)簽講解使用HTML5<audio>標(biāo)簽播放音頻01音頻多格式兼容處理<audio>標(biāo)簽主要用于播放聲音文件或者音頻流的標(biāo)準(zhǔn)。它支持3種音頻格式，分別為Ogg、MP3和WAV。使用HTML5<vedio>標(biāo)簽播放視頻<vedio>標(biāo)簽主要是定義播放視頻文件或者視頻流的標(biāo)準(zhǔn)。它支持3種視頻格式，分別為Ogg、MPEG4和WebM02視頻多格式兼容處理06實(shí)踐與提升互動(dòng)提問案例練習(xí)02030104HTML5核心優(yōu)勢(shì)探討通過互動(dòng)提問，引導(dǎo)學(xué)生思考HTML5相較于舊版本在功能、兼容性及開發(fā)效率等方面的核心優(yōu)勢(shì)。文檔結(jié)構(gòu)補(bǔ)全練習(xí)開展代碼補(bǔ)全互動(dòng)練習(xí)，讓學(xué)生在實(shí)踐中掌握HTML5文檔的基本結(jié)構(gòu)，加深對(duì)四大核心標(biāo)簽的理解與應(yīng)用。特殊文字樣式辨析以互動(dòng)提問形式，探討邏輯樣式（如<strong>）與物理樣式（如<b>）的區(qū)別，引導(dǎo)學(xué)生正確選擇使用場(chǎng)景。圖片替代文本編寫組織互動(dòng)練習(xí)，要求學(xué)生為不可訪問的圖片編寫合適的替代文本，強(qiáng)調(diào)alt屬性在提升網(wǎng)頁(yè)可訪