1. 什么是HTML語義化HTML語義化指用具有明確含義的標(biāo)簽定義頁面結(jié)構(gòu)摒棄單純靠 div、span 堆砌布局的寫法讓標(biāo)簽自帶語義瀏覽器、搜索引擎、開發(fā)者都能清晰識(shí)別頁面模塊的作用。核心價(jià)值提升SEO搜索引擎優(yōu)化、增強(qiáng)代碼可讀性、方便團(tuán)隊(duì)維護(hù)、適配屏幕閱讀器無障礙訪問、利于移動(dòng)端適配。2. 常用語義化標(biāo)簽分類詳解1頁面結(jié)構(gòu)類標(biāo)簽頁面骨架header頁面/區(qū)塊頭部用于存放導(dǎo)航、logo、標(biāo)題一個(gè)頁面可出現(xiàn)多次局部區(qū)塊頭部nav導(dǎo)航區(qū)域?qū)ｉT存放頁面主導(dǎo)航、側(cè)邊導(dǎo)航、面包屑導(dǎo)航僅用于核心導(dǎo)航鏈接main頁面主體內(nèi)容一個(gè)頁面僅允許出現(xiàn)一次存放頁面核心業(yè)務(wù)內(nèi)容排除側(cè)邊欄、頁腳、導(dǎo)航section通用區(qū)塊用于主題相近的內(nèi)容分組需搭配標(biāo)題使用不可單獨(dú)無意義嵌套article獨(dú)立內(nèi)容區(qū)塊內(nèi)容可獨(dú)立復(fù)用、單獨(dú)發(fā)布如文章、帖子、商品卡片、新聞資訊aside側(cè)邊輔助內(nèi)容如側(cè)邊欄、推薦列表、注釋、廣告、關(guān)聯(lián)內(nèi)容footer頁面/區(qū)塊底部存放版權(quán)信息、備案號(hào)、聯(lián)系方式、友情鏈接2文本內(nèi)容類標(biāo)簽lt;h1-h6gt;標(biāo)題層級(jí)h1唯一頁面主標(biāo)題逐級(jí)遞減不可跳級(jí)使用p段落文本專門用于正文段落獨(dú)占段落語義strong強(qiáng)調(diào)重要文本搜索引擎可識(shí)別權(quán)重區(qū)別于單純樣式加粗em語氣強(qiáng)調(diào)文本默認(rèn)斜體用于語義側(cè)重而非樣式修飾blockquote引用大段文本用于文章引用、語錄cite標(biāo)注引用來源、作品名稱3列表與數(shù)據(jù)標(biāo)簽ulli無序列表用于導(dǎo)航、菜單、列表展示olli有序列表用于步驟、排名、序號(hào)清單dldtdd定義列表用于術(shù)語解釋、圖文介紹、鍵值對(duì)說明3. 實(shí)戰(zhàn)使用場(chǎng)景與避坑正確實(shí)戰(zhàn)結(jié)構(gòu)模板!-- 頁面頭部 -- header logo/logo nav主導(dǎo)航鏈接/nav /header !-- 頁面主體 -- main section h2文章列表區(qū)塊/h2 article單篇文章內(nèi)容/article /section aside側(cè)邊推薦內(nèi)容/aside /main !-- 頁面底部 -- footer版權(quán)、備案信息/footer避坑要點(diǎn)禁止用語義化標(biāo)簽單純做樣式main 唯一不可重復(fù)section 必須搭配標(biāo)題article 用于獨(dú)立可拆分內(nèi)容。