你知道卻不經常使用的HTML標籤（一）

做爲了一個前端 帥小夥/靚姑娘，開發的時候老是會和 HTML 標籤打交道。一來二往的就熟悉的開始使用 div + css 的佈局了，今天介紹一篇很早之前就出現，可是沒有太多人（我認識的人使用的不是不少）使用的HTML的其它標籤，趕快來認識它們吧。

一、pre 標籤

HTML <pre> 元素表示預約義格式文本。在該元素中的文本一般按照原文件中的編排，以等寬字體的形式展示出來，文本中的空白符（好比空格和換行符）都會顯示出來。

例如：

<pre>
    < Hello World >                          我      就是   想
      ---------------------------                    亂    七   
            \   ^__^                            八       遭
              \  (oo)\_______
                (__)\       )\/\        的                     定位  寫
                    ||----w |
                    ||     ||                      出來 ~
</pre>
複製代碼

效果圖：

二、figure 與 figcaption

HTML <figure> 元素表明一段獨立的內容, 常常與說明（caption）<figcaption>配合使用, 而且做爲一個獨立的引用單元。當它屬於主內容流（main flow）時，它的位置獨立於主體。這個標籤常常是在主文中引用的圖片，插圖，表格，代碼段等等.

<figure>
    <img style="width: 300px" src="https://github.com/quhongqiang/quhongqiang.github.io/blob/master/img/_posts/17.png?raw=true" alt="Elephant at sunset">
    <figcaption>這是的我微信公衆號，快來掃碼認識我吧~</figcaption>
</figure>
複製代碼

效果圖：

三、em 標籤 與 strong 標籤

HTML 着重元素 (<em>) 標記出須要用戶着重閱讀的內容， <em> 元素是能夠嵌套的，嵌套層次越深，則其包含的內容被認定爲越須要着重閱讀,通常顯示爲 " 傾斜字體 "。

Strong 元素 (<strong>)表示文本十分重要，通常用粗體顯示。

四、del 標籤 與 ins 標籤

HTML的 <del> 標籤表示一些被從文檔中刪除的文字內容。好比能夠在須要顯示修改記錄或者源代碼差別的狀況使用這個標籤。

<p><del>這段文本已被刪除。 </del>, 請瀏覽其它部分</p>
複製代碼

效果圖：

HTML <ins> 元素定義已經被插入文檔中的文本。

<ins>這一段文本是新插入至文檔的。</ins>
複製代碼

效果圖：

五、sub 標籤 與 sup 標籤

HTML <sub> 元素定義了一個文本區域，出於排版的緣由，與主要的文本相比，應該展現得更低而且更小。

<p>水的化學公式: H<sub>2</sub>O</p>
複製代碼

效果圖：

HTML <sup> 元素定義了一個文本區域，出於排版的緣由，與主要的文本相比，</sup> 中的內容將會以當前文本流中字符高度的一半來顯示。

<p>2 + 3<sup>2</sup>= 11</p>
複製代碼

效果圖：

六、ruby 標籤

HTML <ruby> 元素 被用來展現東亞文字註音或字符註釋。

<ruby>
  曲 <rp>(</rp><rt>qu</rt><rp>)</rp>
  小 <rp>(</rp><rt>xiao</rt><rp>)</rp>
  強 <rp>(</rp><rt>qiang</rt><rp>)</rp>
</ruby>
複製代碼

效果圖：

七、bdo 標籤

指定子元素的文本方向 ，顯式地覆蓋默認的文本方向。

<bdo> 元素 ( HTML雙向覆蓋元素 )用於覆蓋當前文本的朝向，它使得字符按給定的方向排列。

<p>這段文本是從左到右的</p>
<p><bdo dir="rtl">這段文本是從右到左的</bdo></p>
複製代碼

效果圖：

當你用css 寫大量的樣式的時候，有沒有想過，有一個標籤能夠代替大量的樣式屬性呢。

謝謝觀賞~~~

微 信 掃 碼 關 注 我 吧 ~

你知道卻不經常使用的HTML標籤（二）