不经常使用但很好用的标签

虽然 html5 出了不少新标签，可是本身工做中用到的除了 nav，header 等跟 div 相似的标签之外，其余的并没怎么用过，因此看了下菜鸟教程里面，大致浏览的一下已有的标签，发现不少有趣的标签，如今总结一下，部分支持性比较差的就不介绍了，好比 <details> 标签，看起来很不错，可是显示只有 Chrome 支持，因此就不介绍了，有兴趣的能够去看看。由于不知道怎么在文章里展现代码效果，因此点这里看看连接描述

---

标识类

abbr

<abbr>标签指示简称或缩写，好比 "WWW" 或 "NATO"。经过对缩写进行标记，您可以为浏览器、拼写检查和搜索引擎提供有用的信息。全称写在 title 属性里，在悬浮时便可显示内容。title 是 html 的全局属性，这意味着你用别的标签，而后添加 title 属性，也会有一样效果，不过既然出了此标签，而且浏览器和搜索引擎对此进行处理，因此遇到时，用它仍是不错的。

<p> <abbr title="投币，点赞，转发">素质三连</abbr> 是每位读者应有的态度</p>

area 和 map

当初在 DW 里看到过这个功能，不过本身没用过，能够设置图片可点击区域，而后进行连接。好比点击下图的中间区域。会跳转新的图片。

<img src="https://s2.ax1x.com/2019/04/17/AzwvnK.png" width="500px" alt="AzwvnK.png" border="0" usemap="#eye"/>
<map name="eye" id="eye">
<area shape="circle" target="_blank" coords="250,150,50" href ="https://s2.ax1x.com/2019/04/17/Azwz7D.jpg" alt="Venus" />
</map>

bdo

<bdo>标签用来指示文本的顺序，从左到右 dir="ltr"）仍是右往左（dir="rtl"），这样就不用去处理字符串颠倒了。

<bdo dir="ltr">上海自来</bdo>，水，<bdo dir="rtl">上海自来</bdo>

hr

<hr> 标签在 HTML 页面中建立一条水平线。这没什么可说的，不过如今都不怎么推荐了，可是各浏览器还都是支持的，比用 div 的边框仍是能省很多代码的

---

mark

<mark> 标签订义带有记号的文本。

五千六百万啊，四舍五入就是 <mark>一个亿</mark>啊

meter 和 progress

<meter> 标签订义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。
例子：磁盘用量、查询结果的相关性，等等。
<progress> 标签不适合用来表示度量衡（例如，磁盘空间使用状况或查询结果）。
个人理解就是<meter>用来表示那些有计量单位的，好比温度，剩余空间。而<progress>是用来那些任务的进度，好比下载上传等。
value 属性若是不设置 max 值得话，则最大值为 1

c:盘<meter value="10" max="50">10G</meter><br />
迅雷下载<progress value="0.999">99.9%</progress>

ruby rt rp

ruby 元素由一个或多个字符（须要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。
个人理解是 ruby 是字，rt 是注音，rp 是浏览器不支持时显示的内容。

<ruby>福<rt>hu</rt></ruby
>建人

sub 和 sup

包含在 <sub>和 <sup>标签和其结束标签中的内容将会以当前文本流中字符高度的一半来显示，可是与当前文本流中文字的字体和字号都是同样的。在数学等式、科学符号、化学公式和脚注等比较好用，sup 也能够用来写通知的小红点。

H<sub>2</sub>O是水，log<sub>5</sub><sup>25</sup>=2
<span style="border:1px solid ">赞<sup style="background:red;">22</sup></span>

wbr

若是单词太长，或者您担忧浏览器会在错误的位置换行，那么您可使用 <wbr> 元素来添加 Word Break Opportunity（单词换行时机）。能够看到有 wbr 标签包围的 http 会换行。

<p style="width:100px;border:1px solid">ssssssssssssssss<wbr />Http<wbr /></p>
<p style="width:100px;border:1px solid">ssssssssssssssssHttp</p>

---

表格类

表格里面不经常使用但好用的应该数 col 和 colgroun 标签，他们能够用来定义对应列的属性。再此我把表格相关的元素写在一块儿。col 的 align 属性支持比较差，因此推荐用 css 处理
thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您建立某个表格时，您也许但愿拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。
这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

caption、col、colgroup、thead、tbody、tfoot 和 table

<table>
  <caption>九宫</caption>
  <colgroup>
    <col></col>
    <col span="2" width="100px"></col>
  </colgroup>
  <thead>
    <tr><th>1</th><th>2</th><th>3</th></tr>
  </thead>
  <tbody>
    <tr><td>4</td><td>5</td><td>6</td></tr>
  </tbody>
  <tfoot>
    <tr><td>7</td><td>8</td><td>9</td>
    </tr>
  </tfoot>
</table>

---

表单类

表单这也有许多标签，可是项目中应该多数都不会用浏览器所展现的样式，不过有个 output 标签比较有趣，下面只作一些简单的结构展现

<form
  oninput="x.value=parseInt(a.value)*10000/(parseInt(b.value)*parseInt(b.value))"
>
  <figure>
    <figcaption>莫得感情莫得钱的杀手</figcaption>
    <img
      src="https://s2.ax1x.com/2019/04/17/Azl7Y8.jpg"
      width="350"
      height="234"
    />
  </figure>
  <fieldset>
    <legend>健康信息</legend>
    体重(kg)：0<input type="range" id="a" value="75" max="250" />250 <br />
    身高(cm)：<input type="number" id="b" value="160" max="250" /><br />
    体重指数：<output name="x" for="a b"></output>
  </fieldset>
</form>

结语

还有一些标签没写里面，好比 iframe 相关的，我的感受用的不是特别多，可能之后会加上吧。