我们在做前端开发的时候总是会和HTML标签打交道，比较熟悉的head、body、table、form等标签是我们在HTML标签中经常使用的标签。除此之外，要知道HTML标签的类型数量是惊人的，即使是前端开发的老手也有很多标签是不曾见过的。下面我们就来介绍不怎么用到的7个HTML标签。

1.pre 标签

HTML <pre> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。

例如：

<pre>
    < Hello World >                          
      ---------------------------                     
            \   ^__^                          
              \  (oo)\_______
                (__)\       )\/\                         
                    ||----w |
                    ||     ||                      ~
</pre>

2.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>

3.em 标签 与 strong 标签

HTML 着重元素 (<em>) 标记出需要用户着重阅读的内容， <em> 元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读,一般显示为 " 倾斜字体 "。

Strong 元素 (<strong>)表示文本十分重要，一般用粗体显示。

4.del 标签 与 ins 标签

HTML的 <del> 标签表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。

<p><del>这段文本已被删除。 </del>, 请浏览其它部分</p>复制代码

HTML <ins> 元素定义已经被插入文档中的文本。

<ins>这一段文本是新插入至文档的。</ins>复制代码

5.sub 标签 与 sup 标签

HTML <sub> 元素定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更低并且更小。

<p>水的化学公式: H₂O</p>复制代码

HTML ^{元素定义了一个文本区域，出于排版的原因，与主要的文本相比，} 中的内容将会以当前文本流中字符高度的一半来显示。

<p>2 + 3²= 11</p>复制代码

6.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>复制代码

7.bdo 标签

指定子元素的文本方向 ，显式地覆盖默认的文本方向。

<bdo> 元素 ( HTML双向覆盖元素 )用于覆盖当前文本的朝向，它使得字符按给定的方向排列。

<p>这段文本是从左到右的</p><p><bdo dir="rtl">这段文本是从右到左的</bdo></p>复制代码

当你用CSS写大量的样式的时候，有没有想过，有一个标签可以代替大量的样式属性呢。

HTML标签作为HTML结构和属性中最重要的部分，一直是我们学习HTML的重中之重。即使是不常见的HTML标签，我们即使做不到熟练掌握用法，也应该掌握其基本的作用和名称，这会在我们的实际开发中起到见微知著的作用。