[03]HTML基礎之行內標籤

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> 可能會被轉換爲 &aelig; 連字字符。

//鍵盤輸入
按<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>