不常用但很好用的标签

2019年9月10日 143次阅读 来源: chow

虽然 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 相关的，个人感觉用的不是特别多，可能以后会加上吧。

    原文作者：chow
    原文地址: https://segmentfault.com/a/1190000018905890
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞