在 HTML 當中,有很多標籤是用來表達其內容代表的意義是什麼,例如當遇到一段文字描述的是聯絡方式的時候,我們可以利用<address>
標籤將這段內容標起來,代表這段內容是個地址。
這類標籤非常多,原本的用途應該是讓瀏覽器可以根據不同種類的內容可以做相對應的事情,例如上述利用<address>
標籤標起來後,可能瀏覽器就可以提供你將這段內容給備註成聯絡方式之類的。但由於目前瀏覽器並沒有特別為這類標籤提供特殊的功能,故其實也沒有很多人真的活用這類標籤,再加上其內容繁多,真的要在寫網頁的時候想到有哪個可以用也是蠻困難的一件事情。
雖然如此,這裡還是整理一下有哪些標籤,以便真的在做網站的時候可以稍微想到可以用哪些標籤,不過內容可能還會新增或有遺漏,有看到我會慢慢再更新。另外,大部分的標籤沒有預設樣式,相關樣式的設計可以另外撰寫 CSS 來做。
標籤 | 含義 | 用法 | 簡易範例 |
---|---|---|---|
<abbr> |
縮寫 | 將縮寫部分包起來,可利用 title 屬性撰寫全稱。 |
<abbr title="World Wide Web">WWW</abbr> |
<address> |
聯絡方式 | 將聯絡方式包起來。 | <address>可寄信至台北市新生北路X段X號,或是寄信至<a href="mailto:xxx@xxx.xxx">xxx@xxx.xxx</a></address> |
<b> |
關鍵字或專有名詞等之類文字內容 | 可將關鍵字或專有名詞包起來去凸顯出來,預設樣式為粗體。 | <b>索尼克力量</b>是個不錯的遊戲。 |
<bdi> |
閱讀方向未知的文字 | 將閱讀方向不知道的文字包起來。 | |
<bdo> |
需覆蓋目前閱讀方向的文字 | 將閱讀方向不一樣的文字直接包起來,用 dir 屬性可以強制覆蓋其閱讀相反是左到右還是右到左。 |
|
<blockquote> |
多行引用內容 | 將引用到的別人的多行內容包起來,另外可用 cite 屬性來描述從哪裡引用過來的。(單行內容利用 <q> ) |
|
<cite> |
其他相關內容的資訊 | 將與本文章相關內容的標題或連結等等資訊包起來。 | |
<code> |
程式碼 | 可將程式碼包起來。 | |
<data> |
資料名稱 | 將資料名稱利用此標籤包起來,再利用 value 屬性來標示此資料的值為何。 |
|
<del> |
文章編輯內容上標明已被刪除的資料 | 將文章中已被刪除的資料標出來,預設樣式會有刪除線。 | |
<details> & <summary> |
具有詳細資料的內容與摘要 | 詳細用法:#HTML(HTML5):具有摘要與詳細兩種資訊的折疊呈現 | |
<dfn> |
被詮釋的資料名稱 | 將被解釋的資料名稱包起來,其被解釋的內容會與其同在同一個文章結構標籤內或解釋清單中,並且在其附近。 | <p><dfn>Sonic the Hedgehog</dfn>是 SEGA 著名的動作跑酷遊戲,主角為索尼克,設定上是一隻刺蝟。</p> |
<em> |
想要強調的文字內容 | 將文句中特別想強調的地方標示出來的標籤,預設樣式為斜體。 | <em>努力不懈的精神</em>正是那個人成功的關鍵。 |
<ins> |
文章編輯內容上標明加入的文字內容 | 將被加入的文字內容標示出來用的標籤。 | |
<kbd> |
鍵盤上的按鍵名稱 | 將文章中出現的鍵盤上的按鍵標示出來,字體會變成 monospace 的字體。 | 複製的快捷鍵是 <kbd>Ctrl</kbd> + <kbd>C</kbd> |
<mark> |
特別標明的文字內容,通常代表具相關性 | 將相關內容標示出來,例如搜尋引擎搜完會在搜尋到的文章中將你打的關鍵字利用此標籤標註出來。 | |
<meter> |
已知範圍內的數量值 | 將已知範圍內的數量值標示出來,利用 min 和 max 屬性表明範圍,再利用 value 屬性表示大小,預設會用長條來代替被包住的內容。 |
|
<progress> |
進度值 | 將進度標明出來,最小固定為 0 ,最大值可利用 max 屬性表明,進度值可利用 value 屬性,預設會用進度條來代替被包住的內容。 (像是 <meter> 但含義不同。) |
目前進度:<progress max="100" value="85">85%</progress> |
<q> |
短引用內容 | 將引用到的別人的單行內容包起來,另外可用 cite 屬性來描述從哪裡引用過來的。(多行內容利用 <blockquote> ) |
|
<s> |
不再正確的內容 | 將不再正確的內容標明出來,例如東西售完了就將項目利用 <s> 標起來,預設樣式為刪除線。 |
<s>學院制服</s> 已售完! |
<samp> |
電腦程式的範例輸出 | 將電腦程式跑出來的範例輸出標注出來,字體會變成 monospace 的字體。 | |
<small> |
小註解或是印刷品的版權聲明或是法律條文 | 將小註解或是印刷品的版權聲明或是法律條文表明出來。 | |
<strong> |
重要性高的文章內容 | 將非常重要的內容標示出來,預設樣式為粗體。 | 明天開會,<strong>千萬不可以遲到!</strong> |
<sub> |
下標文字 | 表示文字內容會位於下標位置。 | 水的化學式是 H<sub>2</sub>O |
<sup> |
上標文字 | 表示文字內容會位於上標位置。 | 3 的 2 次方是 3<sup>2</sup> |
<time> |
時間或是日期內容 | 將時間或是日期內容標示出來,可用 datetime 放入電腦可解讀的時間格式。 |
<time datetime="2017-12-23T01:42">今天</time>我撰寫了這篇文章。 |
<u> |
文章上會用底線裝飾的內容 | 將實際文章上會用底線裝飾的內容標示出來,例如中文的人名或是拼錯的文字。 | <u>曹又霖</u>就是<u>灆洢</u> |
<var> |
數學上的代數或是程式上的變數 | 可用來標示數學上的代數或是程式上的變數。 | <var>a</var> = <var>b</var> + 20 |
參考資料
- DevDocs:http://devdocs.io/html/
- How to use the Meter & Progress Elements – Treehouse Blog:http://blog.teamtreehouse.com/use-meter-progress-elements