HTML語義中使用的標簽摘錄

前言

記錄在《重學(xué)前端 - 04 | HTML語義:如何運用語義類標簽來呈現(xiàn)Wiki網(wǎng)頁厂抽?》使用到的標簽羡蛾,發(fā)現(xiàn)許多標簽是自己一次都沒使用過的评架,從MDN上摘錄一遍眷茁。對于語義化引用winter的觀點:

“用對”語義標簽 > “不用”語義標簽(使用 div, span 代替) > “用錯”語義標簽

你可以盡量只用自己熟悉的語義標簽,并且只在有把握的場景引入語義標簽 纵诞。

aside

aside 元素表示一個和其余頁面內(nèi)容幾乎無關(guān)的部分上祈,被認為是獨立于該內(nèi)容的一部分并且可以被單獨的拆分出來而不會使整體受影響。其通常表現(xiàn)為側(cè)邊欄或者嵌入內(nèi)容浙芙。

article

article 元素表示文檔登刺、頁面、應(yīng)用或網(wǎng)站中的獨立結(jié)構(gòu)嗡呼,其意在成為可獨立分配的或可復(fù)用的結(jié)構(gòu)纸俭,如在發(fā)布中,它可能是論壇帖子南窗、雜志或新聞文章揍很、博客、用戶提交的評論万伤、交互式組件窒悔,或者其他獨立的內(nèi)容項目。

hgroup, h1, h2

The HTML <hgroup> element represents a multi-level heading for a section of a document. It groups a set of <h1>–<h6> elements.

<hgroup>
    <h1>Calculus I</h1>
    <h2>Fundamentals</h2>
</hgroup>

abbr

abbr 元素表示縮寫壕翩,并可選擇提供一個完整的描述(title)蛉迹。

<abbr title="World of Warcraft">WOW</abbr>

hr

在頁面中經(jīng)常存在很長的橫線傅寡,橫線是不應(yīng)該使用 hr 元素的放妈。hr 元素表示段落級元素之間的主題轉(zhuǎn)換(例如北救,一個故事中的場景的改變,或一個章節(jié)的主題的改變)芜抒。

p

p 元素表示段落珍策。p 元素是塊級元素。

strong

strong 元素表示文本十分重要宅倒,用粗體顯示攘宙。

blockquote, q, cite

blockquote 元素(或者 HTML 塊級引用元素),代表其中的文字是引用內(nèi)容拐迁。通常在渲染時蹭劈,這部分的內(nèi)容會有一定的縮進。若引文來源于網(wǎng)絡(luò)线召,則可以將原內(nèi)容的出處 URL 地址設(shè)置到 cite 特性上铺韧,若要以文本的形式告知讀者引文的出處時,可以通過 cite 元素缓淹。

q 元素表示一個封閉的并且是短的行內(nèi)引用的文本. 這個標簽是用來引用短的文本哈打,所以請不要引入換行符。

cite 元素表示一個作品的引用讯壶。它必須包含引用作品的符合簡寫格式的標題或者URL料仗,它可能是一個根據(jù)添加引用元數(shù)據(jù)的約定的簡寫形式。

<blockquote cite="https://www.huxley.net/bnw/four.html">
    <p>Words can be like X-rays, if you use them properly – they'll go through anything. You read and you're pierced.</p>
</blockquote>

<cite>– Aldous Huxley, Brave New World</cite>

time

time 元素用來表示24小時制時間或者公歷日期伏蚊,若表示日期則也可包含時間和時區(qū)立轧。

figure, figcaption

figure代表一段獨立的內(nèi)容,經(jīng)常與 figcaption 元素配合使用,并且作為一個獨立的引用單元丙挽。當它屬于主體(main flow)時肺孵,它的位置獨立于主體。這個標簽經(jīng)常是在主文中引用的圖片颜阐,插圖平窘,表格,代碼段等等凳怨,當這部分轉(zhuǎn)移到附錄中或者其他頁面時不會影響到主體瑰艘。

figcaption 元素是與其相關(guān)聯(lián)的圖片的說明/標題,用于描述其父節(jié)點 figure 元素里的其他數(shù)據(jù)肤舞。

<figure>
 <img src="https://.....440px-NeXTcube_first_webserver.JPG"/>
 <figcaption>The NeXT Computer used by Tim Berners-Lee at CERN.</figcaption>
</figure>

dfn

dfn 元素表示術(shù)語的一個定義紫新。

<!-- Define "The Internet" -->
<p><dfn id="def-internet">The Internet</dfn> is a global system of interconnected networks that use the Internet Protocol Suite (TCP/IP) to serve billions of users worldwide.</p>

nav, ol, ul

nav 元素表示描繪一個含有多個超鏈接的區(qū)域,這個區(qū)域包含轉(zhuǎn)到其他頁面李剖,或者頁面內(nèi)部其他部分的鏈接列表芒率。

ol 有序列表。

ul 無序列表篙顺。

pre, samp, code

pre 元素表示預(yù)定義格式文本偶芍。在該元素中的文本通常按照原文件中的編排充择,以等寬字體的形式展現(xiàn)出來,文本中的空白符(比如空格和換行符)都會顯示出來匪蟀。(緊跟在 pre 開始標簽后的換行符也會被省略)椎麦。

samp 元素用于標識計算機程序輸出。通常使用瀏覽器缺省的 monotype 字體材彪。

code 元素呈現(xiàn)一段計算機代碼观挎。 默認情況下, 它以瀏覽器的默認等寬字體顯示。

參考資料

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末段化,一起剝皮案震驚了整個濱河市嘁捷,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌显熏,老刑警劉巖普气,帶你破解...
    沈念sama閱讀 212,884評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異佃延,居然都是意外死亡现诀,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,755評論 3 385
  • 文/潘曉璐 我一進店門履肃,熙熙樓的掌柜王于貴愁眉苦臉地迎上來仔沿,“玉大人,你說我怎么就攤上這事尺棋》怙保” “怎么了?”我有些...
    開封第一講書人閱讀 158,369評論 0 348
  • 文/不壞的土叔 我叫張陵膘螟,是天一觀的道長成福。 經(jīng)常有香客問我,道長荆残,這世上最難降的妖魔是什么奴艾? 我笑而不...
    開封第一講書人閱讀 56,799評論 1 285
  • 正文 為了忘掉前任,我火速辦了婚禮内斯,結(jié)果婚禮上蕴潦,老公的妹妹穿的比我還像新娘。我一直安慰自己俘闯,他們只是感情好潭苞,可當我...
    茶點故事閱讀 65,910評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著真朗,像睡著了一般此疹。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 50,096評論 1 291
  • 那天蝗碎,我揣著相機與錄音振诬,去河邊找鬼。 笑死衍菱,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的肩豁。 我是一名探鬼主播脊串,決...
    沈念sama閱讀 39,159評論 3 411
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼清钥!你這毒婦竟也來了琼锋?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,917評論 0 268
  • 序言:老撾萬榮一對情侶失蹤祟昭,失蹤者是張志新(化名)和其女友劉穎缕坎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體篡悟,經(jīng)...
    沈念sama閱讀 44,360評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡谜叹,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,673評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了搬葬。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片荷腊。...
    茶點故事閱讀 38,814評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖急凰,靈堂內(nèi)的尸體忽然破棺而出女仰,到底是詐尸還是另有隱情,我是刑警寧澤抡锈,帶...
    沈念sama閱讀 34,509評論 4 334
  • 正文 年R本政府宣布疾忍,位于F島的核電站,受9級特大地震影響床三,放射性物質(zhì)發(fā)生泄漏一罩。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,156評論 3 317
  • 文/蒙蒙 一撇簿、第九天 我趴在偏房一處隱蔽的房頂上張望擒抛。 院中可真熱鬧,春花似錦补疑、人聲如沸歧沪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽诊胞。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間撵孤,已是汗流浹背迈着。 一陣腳步聲響...
    開封第一講書人閱讀 32,123評論 1 267
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留邪码,地道東北人裕菠。 一個月前我還...
    沈念sama閱讀 46,641評論 2 362
  • 正文 我出身青樓,卻偏偏與公主長得像闭专,于是被迫代替她去往敵國和親奴潘。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,728評論 2 351

推薦閱讀更多精彩內(nèi)容

  • HTML5< !--...--> 標簽 comment 注釋標簽用于在源文檔中插入注釋影钉。注釋內(nèi)容不會被瀏覽器顯示画髓。...
    野小寶閱讀 1,322評論 0 10
  • HTML5 標簽comment 注釋標簽用于在源文檔中插入注釋。注釋內(nèi)容不會被瀏覽器顯示平委。為代碼編寫注釋的好處是...
    才気莮孒閱讀 4,051評論 1 25
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的奈虾,因此網(wǎng)頁是網(wǎng)絡(luò)信息傳遞的載體。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 3,875評論 0 0
  • 1. 瀏覽器頁面有哪三層構(gòu)成廉赔,分別是什么肉微,作用是什么? 構(gòu)成:結(jié)構(gòu)層、表示層蜡塌、行為層分別是:HTML浪册、CSS、Ja...
    程序猿人王小賤閱讀 1,869評論 1 11
  • HTML是超文本標記(Hyper Text Markup Language)的縮寫岗照,在網(wǎng)頁設(shè)計中又把它稱為網(wǎng)頁的結(jié)...
    destiny0904閱讀 345評論 0 1