慕少3449830 ·HTML5 語義化元素
本章節我們來介紹一個抽象的知識點-語義化。什么是語義化，淺顯的來說就是使用合適的語法來實現相應的功能，這里說的合適并非是從性能、數據結構、算法等深度層面，而是從閱讀和維護方式等層面。
編程過程中實現一個相同的功能，往往可以使用多種不同的方式，選擇一個合適的方式需要綜合考慮可維護性、擴展性、性能等幾種不同的維度，而可維護性是其中比較重要的一個因素。可維護性就是指書寫的代碼是否通俗易懂方便閱讀，當大家都遵守一種統一的書寫標準時，團隊的開發效率、協調能力就能得到很大的提升。
1. HTML 的語義化
HTML 語義化是指使用恰當語義的 html 標簽、class 類名、ID、屬性名稱 等內容，讓頁面具有良好的結構與含義，從而讓人和機器都能快速理解網頁內容。語義化的 HTML 頁面一方面可以讓搜索引擎高效的理解和搜集網頁內容；另一方面方便開發維護人員讀懂代碼。總結起來就是：正確的標簽做正確的事情，頁面內容結構化方便開發人員閱讀，便于瀏覽器搜索引擎解析。
2. 常用語義化標簽
- header 定義某一部分段落或者文本的頭部信息
- nav 導航信息
- main 呈現網頁的主體結構
- article 用于文本分段
- section 用于對主題相關的內容分組
- footer 定義網頁底部
- h1-h6 定義標題欄
- div 定義塊
- title 頁面標題
- ul 無序列表
- ol 有序列表
- aside 表示與當前內容無關的內容
- small 小號字體
- em 斜體字體
- Mark 黃色突出字體
- figure 獨立的流內容
- figcaption 定義 figure 元素的標題
- cite 表示文本是對參考文獻的引用
- blockquote 定義塊引用
- q 短引述
- time 定義合法的日期或時間格式
- dfn 定義術語元素
- abbr 簡稱或縮寫
- del 定義刪除的內容
- ins 添加的內容
- code 標記代碼
- meter 定義標量測量
- progress 定義運行中的進度
上述羅列了包含明確語義內容的標簽，實際項目中應當根據實際場景選擇對應的語義標簽。
2.1 small
small 標簽屬于 HTML 中的格式元素，用于顯示較小的文本，例如：
2.2 em
em 用于顯示斜體，它和 i 標簽的效果類似， 不同的是 em 是語義化元素，用于強調斜體，例如：
2.3 Mark
Mark 標簽用于顯示黃色背景的文本，例如：
2.4 figure
figure 標簽用于在文檔中插入圖片、圖標、照片、代碼等流內容，例如：
2.5 figcaption
figcaption 標簽用于 figure 標簽的標題，它必須定義在 figure 內部，一個 figure 只能放一個 figcaption ，例如：
<figure>
<img src="actShare.png" alt="這是一張用于演示的圖片">
<figcaption>演示</figcaption>
</figure>
2.6 cite
cite 標簽用于表示對某個文獻引用的文本定義，例如書籍、雜志等內容，它所展示的是斜體文本，是一個典型的語義化標簽，例如：
<cite>語義化標簽</cite>已經遠遠超過了改變它所包含的文本外觀的作用，它使瀏覽器能夠以各種實用的方式來向用戶表達文檔的內容
2.7 blockquote
blockquote 用于定義源于另一個塊內容的引用，它的默認展示方式是左右兩側縮進，例如：
2.8 q
q 標簽用于定義短引用，瀏覽器默認會為它左右顯示引號，例如：
2.9 time
time 標簽用于表示 24 小時制時間或者公歷日期，如果表示日期也可以包含時間和時區，這個標簽用于搜索引擎的友好型，目前所有主流瀏覽器都不完全支持 time 標簽，例如：
2.10 dfn
dfn 標簽用于首次定義術語，僅僅包含術語，不必包含術語的定義，再次出現術語時可 abbr 元素表示，例如：
<p>The <dfn>GDO</dfn>is a device that allows off-world teams to open the iris.</p>
2.11 abbr
abbr 標簽用于定義一個縮寫內容，當鼠標停留在內容上時，瀏覽器會展示 title 屬性的內容，例如：
2.12 del
del 標簽用于定義帶有刪除線（下劃線）的文本，例如：
2.13 ins
ins 類似于 del，不同的是這個標簽是用于插入新的內容，展現形式是文本下邊加上下劃線，例如：
2.14 code
code 標簽用于展示計算機編程代碼或者偽代碼，專為軟件開發人員設計的，文本將用等寬、類似電傳打字機樣式的字體（Courier）顯示出來，例如：
2.15 meter
meter 元素用于度量給定范圍內的數據，例如：
2.16 progress
progress 標簽是用于定義進度條，HTML5 之前的版本都是需要用 div 或者其他標簽配合 css 以及 JavaScript 才能實現出來滾動條效果，現在只要定義一個標簽就可以了，例如：
max 屬性用于表示滾動條的最大長度，value 值表示當前完成了多少。
3. 語義化延伸
實際項目中應盡量按照如下標準，做到代碼易擴展、易維護：
- 盡量做到標簽語義化，少量使用沒有語義的標簽，例如 div、span；
- 熟悉每個標簽的屬性規范，屬性值命名應當淺顯易懂；
- 網頁盡量使用結構化，例如區分頭部、內容、尾部；
- 樣式與內容分離，樣式應盡力放到 css 文件中；
- 腳本 JavaScript 盡量與內容分離，包含到 JavaScript 引用中；
- 復雜的代碼需要使用注釋；
- 盡量使用 w3c 定義的標準語法，避免出現瀏覽器兼容性問題
4. 舉例
如下 div 布局及結構標簽布局兩個例子，在網頁中展現一模一樣。明顯結構標簽布局語義行更強，便于開發者理解和閱讀：
<html lang="zh-cn">
<head>
<title>Insert a title</title>
<meta charset="utf-8">
</head>
<body>
<div id="header">頂部</div>
<div id="nav">導航</div>
<div id="banner">內容</div>
<div id="main">
<div id="left_side">左邊欄</div>
頁面主體
</div>
<div id="footer">頁面底部</div>
</body></html>
<html lang="zh-cn">
<head>
<title>Insert a title</title>
<meta charset="utf-8">
</head>
<body>
<header>頂部</header>
<nav>導航</nav>
<div>內容</div>
<section>
<aside>左邊欄</aside>
頁面主體
</section>
<footer>頁面底部</footer>
</body></html>
雖然使用 div 通過使用 css 樣式可以實現大部分標簽的效果，但是并不建議這樣使用
5. 小結
本章介紹了 HTML 的語義化概念，羅列出了一部分有明確定義的語義化標簽，總結了在項目開發中使用語義化有什么優點，以及通過語義化的概念進一步延伸到了實際項目開發中需要注意到的擴展性、可維護性等問題，最后通過實際舉例來對比語義化和非語義化的實際代碼差別。
2025 imooc.com All Rights Reserved |