1.<ruby>標簽
顯示東亞字符的發音(如中文,日文等),與<rp>,<rt>標簽搭配,
//<ruby>為單個發音字符的容器,<rp>為不支持<ruby>標簽時顯示的內容,
//<rt>為字符的發音
<ruby>
中 <rp>(</rp> <rt>zhong</rt> <rp>)</rp>
文 <rp>(</rp> <rt>wen</rt> <rp>)</rp>
</ruby>
2.<em>標簽
表示區域內容的強調,表現為斜體字,與<i>標簽效果相同,
//強調小貓,強調的是哪種動物可愛
<em>小貓<em>是可愛的動物
//強調事實,強調“小貓是可愛的動物”這一事實
小貓<em>是<em>可愛的動物
盡管,標簽與標簽效果一致,但兩者是有區別的,前者表示italic(斜體),后者表示emphasis(強調),從語意化的角度來說,不建議使用標簽,
3. <strong>標簽
表示全域內容的強調,表現為粗體字,與<b>標簽效果相同,
//`第一章`只是參考,“歷史起源”才是文章的主題
第一章 <strong>歷史起源</strong>
//有時候,也用來暗示用戶優先查看內容
第一章 歷史起源 <strong>第二章 文明起源<strong> 第三章 科技起源
雖然,<b>標簽與<strong>標簽效果一致,但兩者是有卻別的,前者表示bold(粗體),后者表示stronger emphasis(更強烈的強調),從語意化的角度來說,不建議使用<b>標簽,
4. <ins>標簽
表示插入內容,表現為下劃線,與<u>標簽效果相同,
//表示插入內容
滾滾長江東逝水,浪花<ins>淘盡</ins>英雄
盡管,<ins>標簽與<u>標簽效果一致,但兩者是有區別的,前者表示underline(下劃線),后者表示insert(插入),從語意化的角度來說,不建議使用<i>標簽,
5. <del>標簽
表示洗掉內容,表現為中劃線,與<s>標簽效果相同,
//表示洗掉內容
青山<del>仍舊</del>依舊在,幾度夕陽紅
盡管,<del>標簽與<s>標簽效果一致,但兩者是有區別的,前者表示underline(下劃線),后者表示delete(洗掉),從語意化的角度來說,不建議使用<u>標簽,
6. <bdo>標簽
表示文字方向,如同把文字鏡像后再顯示;與<bdi>相對,雖也表示文字方向,但如同把內容分塊再鏡像顯示,
//正常文字顯示
<p>123 456 789<p>
//bdo從右往左
<bdo dir="rtl">123 456 789</bdo>
//bdi從右往左
<bdi dir="rtl">123 456 789</bdi>
7.<sup>標簽
表示上標文本;與標簽相對,后者表示下標文本,
//上標文本
2020<sup>2</sup> - 2019<sup>2</sup> = 4076362
//下標文本
Mg + ZnSO<sub>4</sub> = MgSO<sub>4</sub> + Zn
8. <small>標簽
表示旁注資訊,如免責宣告、注意事項、法律限制或著作權宣告等,
//表示某些輔助性的資訊
康師傅酸菜牛肉面,酸爽好回味! <small>圖片僅供參考,請以實物為準</small>
9. <mark>標簽
表示文本的標記,表現為黃色背景,突出強調的文本,
//突出顯示某部分文本
絕彈博客,記錄<mark>前端</mark>學習的個人博客
10. <hr>標簽(單標簽)
表示分隔符(獨占一行),表現為一條橫線;而<br>標簽(單標簽)表示換行符,<wbr>標簽(單標簽)表示另一種換行符,
//如果第一行詩句末尾不加<br>標簽,文本不會換行
題臨安邸
<hr>
山外青山樓外樓,西湖歌舞幾時休? <br>
暖風熏得游人醉,直把杭州作汴州,
//<wbr>標簽適用于英文文本,當某個英文單詞過長時,用來決定在哪處地方換行
this is verrrrrrrry <wbr> looooooooooooooong <wbr> text
11. <abbr>標簽
表示詞句的縮寫,表現為圓點下劃線,滑鼠懸浮時顯示完整的名稱;<dfn>標簽表示特殊術語或短語,表現為略微傾斜的文本,
//使用title屬性表示完整的名稱
<abbr title="HyperText Markup Language">HTML</abbr>是一門標記語言,
//不太作為口語出現的內容或有特定內涵的詞語
<dfn title="深圳市騰訊科技有限公司">騰訊</dfn>是一家互聯網公司,
12. <blockquote>標簽
表示較長的參考,表現為左右兩側縮進的文本;<q>標簽表示較短的參考,用cite屬性表明參考來源(URL形式);<cite>標簽表示作品(比如書籍、歌曲、電影、電視節目、繪畫、雕塑等等)的標題,
//cite屬性標注參考的來源(URL形式)
<blockquote cite="http://theoldmanandthesea.com">人生來就不是為了被打敗的,人能
夠被毀滅,但是不能夠被打敗,man is not made for defeat, a man can be destoryed
but not defeated.--老人與海</blockquote>
//cite屬性標注參考的來源(URL形式)
人生不過匆匆數十載,<q cite="http://litletime.com">一寸光陰一寸金<q>,珍惜當下,
不負青春不負年華,
//表示作品標題
<cite>中國神話史<cite>是袁珂先生的著作,
13. <code>標簽
表示代碼;<samp>標簽表示計算機樣本;<kbd>標簽表示鍵盤輸入;<var>標簽表示變數,表現為斜體;<tt>標簽表示列印文本;
//代碼
<code>console.log('hello,world')</code>
//計算機樣本
字符序列 <samp>ae</samp> 可能會被轉換為 æ 連字字符,
//鍵盤輸入
按<kbd>ESC</kbd>鍵即可退出游戲,
//變數
let <var>countity</var> = <var>num</var> + 1;
//列印文本
<tt>列印文本</tt>
14. <time>標簽
表示時間,datetime屬性表示時間,pubdate屬性表示檔案或<article>元素的發布時間,
//表示節榷訓特殊事件的日期都可以
<time datetime="2019-12-25">今年圣誕節</time>公司發了福利,
//表示文章的發布事件,使用pubdate屬性(布爾屬性)
標題:HTML的通用行內標簽有哪些? <time datetime="2019-12-22" pubdate>發布時間:
2019-12-22</time>
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/31397.html
標籤:Html/Css
上一篇:[01]HTML基礎之簡單介紹
下一篇:[04]HTML基礎之塊級標簽
