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