有哪些被低估未被廣泛使用的有用的HTML標(biāo)簽?
以本人多年前端經(jīng)驗(yàn),給你分享一下我的總結(jié)。
metadata 類標(biāo)簽
HTML <base> 元素
指定用于一個文檔中包含的所有相對 URL 的根 URL。一份中只能有一個 <base> 元素。
包含屬性href 和
target 可以指定a 標(biāo)簽的默認(rèn)窗口打開行為
<base target="_banlk"></base>
默認(rèn)就打開新的窗口
<a href="aaa">123</a>
使用
<base ></base>
<img src="bd_logo1.png?where=super"></img>
雖然在codepen 的代碼上編寫的但是能夠正確的通過base url + img 的src 定位顯示出圖片
content 類標(biāo)簽
HTML <aside> 元素
表示一個和其余頁面內(nèi)容幾乎無關(guān)的部分,被認(rèn)為是獨(dú)立于該內(nèi)容的一部分并且可以被單獨(dú)的拆分出來而不會使整體受影響。
Text 類標(biāo)簽
HTML <blockquote> 元素
(或者 HTML 塊級引用元素),代表其中的文字是引用內(nèi)容。通常在渲染時,這部分的內(nèi)容會有一定的縮進(jìn)(注 中說明了如何更改)。若引文來源于網(wǎng)絡(luò),則可以將原內(nèi)容的出處 URL 地址設(shè)置到 cite 特性上,若要以文本的形式告知讀者引文的出處時,可以通過 <cite> 元素。
HTML <figure> 元素
代表一段獨(dú)立的內(nèi)容, 經(jīng)常與說明(caption) <figcaption> 配合使用, 并且作為一個獨(dú)立的引用單元。當(dāng)它屬于主內(nèi)容流(main flow)時,它的位置獨(dú)立于主體。這個標(biāo)簽經(jīng)常是在主文中引用的圖片,插圖,表格,代碼段等等,當(dāng)這部分轉(zhuǎn)移到附錄中或者其他頁面時不會影響到主體。
Inline text semantics
HTML 縮寫元素(<abbr>)
用于展示縮寫,并且可以通過可選的 title 屬性提供完整的描述。
ps: 完整描述樣式貌似不能自定義
HTML鍵盤輸入元素(<kbd>)
用于表示用戶輸入,它將產(chǎn)生一個行內(nèi)元素,以瀏覽器的默認(rèn)monospace字體顯示。
HTML標(biāo)記文本元素(< Mark >)
表示為引用或符號目的而標(biāo)記或突出顯示的文本,這是由于標(biāo)記的段落在封閉上下文中的相關(guān)性或重要性造成的。
ps:項(xiàng)目中大量使用span 標(biāo)記的做法不符合html5 的語義化
HTML Ruby Base(<rb>)
元素用于分隔<ruby>注釋的基本文本組件(即正在注釋的文本)。一個<rb>元素應(yīng)該包裝基本文本的每個單獨(dú)的原子段。
ps: 拼音注解
<samp> 元素
用于標(biāo)識計算機(jī)程序輸出,通常使用覽器缺省的 monotype 字體(例如 Lucida Console)。
HTML 中的<small>元素
使文本的字體變小一號。(例如從大變成中等,從中等變成小,從小變成超小)。在HTML5中,除了它的樣式含義,這個元素被重新定義為表示邊注釋和附屬細(xì)則,包括版權(quán)和法律文本。
HTML <sub> 元素
定義了一個文本區(qū)域,出于排版的原因,與主要的文本相比,應(yīng)該展示得更低并且更小。
ps: 下腳標(biāo)
HTML <sup> 元素
定義了一個文本區(qū)域,出于排版的原因,與主要的文本相比,應(yīng)該展示得更高并且更小。
ps: 上腳標(biāo)
HTML <u> 元素
使文本在其內(nèi)容的基線下的一行呈現(xiàn)下劃線。在HTML5中, 此元素表示具有未標(biāo)注的文本跨度,顯示渲染,非文本注釋,例如將文本標(biāo)記為中文文本中的專有名稱(一個正確的中文標(biāo)記), 或 將文本標(biāo)記為拼寫錯誤
HTML <map>
與 <area> 屬性一起使用來定義一個圖像映射(一個可點(diǎn)擊的鏈接區(qū)域).
HTML <track> 元素
被當(dāng)作媒體元素—<audio> 和 <video>的子元素來使用。它允許指定計時字幕(或者基于時間的數(shù)據(jù)),例如自動處理字幕。
HTML <object> 元素
(或者稱作 HTML 嵌入對象元素)表示引入一個外部資源,這個資源可能是一張圖片,一個嵌入的瀏覽上下文,亦或是一個插件所使用的資源
ps: 支持引入的資源類型
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types
關(guān)于支持資源類型的測試
http://joliclic.free.fr/html/object-tag/en/index.php