还在用div的span打天下吗：你应该了解的HTML标签

说起HTML，很多人觉得它非常简单，确实，从本质上来说，它都算不上一种语言，只是一种描述型的标签。所以，在写业务的时候，大多数人都是全屏的div和span，完全满足要求，完美实现效果。但HTML仍然提供了很多其它标签，那些都没有用吗？

嗯…

当然不是。

• 合理使用语义话的标签可以增强代码的可读性，在没有进行class命名标识的情况下也可以清晰的看懂页面结构。
• 同时也十分利于机器识别。更加适合搜索引擎检索。对于有seo需求的站点来说，合适使用html标签尤为重要。

但，很多同学在项目中仍然很少使用，主要是因为HTML的标签实在太多了，很多标签语义近似，容易用错，反而造成负面的影响。

之前winter的《重学前端》专栏里也单独写了一节来聊div、span以及其它标签。他认为：”用对“比”不用“好，”不用“比”用错“好，但有理想的前端工程师还是应该去追求”用对“它们。

所以，作为有理想的前端程序员，今天我们来介绍一些你也许还不知道，但真的应该在项目中用而且用对的HTML标签。

audio

audio用于在文档中表示用品内容，比如音乐。<audio>可以包含多个音频资源，使用src或者source属性进行描述，浏览器会选择最合适的来用。当前它只支持三种音频格式：MP3, WAV, and OGG。

<audio controls>
  <!-- Won't play because the mp3 doesn't exist -->
  <source src="cat.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

Video

Video用来处理电影或者视频流。这个可能是大家最熟悉的标签之一了。它现在支持的视频格式包括： MP4, WebM, and Ogg。

<video>
  <source src="./cat.mp4" type="video/mp4">
  <source src="./dog.ogg" type="video/ogg">
  你的浏览器不支持video属性
</video>

Blockquote

Blockquote表示这段内容是从哪别的地方引用过来的。通常渲染是这部分内容会有一定的缩紧。可以是用cite属性标注引用来源的url。

<blockquote cite="www.frontnotebook.com">
  很多人觉得它非常简单，确实，从本质上来说，它都算不上一中语言，只是一种描述型的标签。所以，在写业务的时候，大多数人都是全屏的div和span，完全满足要求，实现效果完美。但html仍然提供了很多其它标签，那些都有什么用呢？
</blockquote>

Output

Output标签表示一个计算或者用户操作结果。

• for：其它影响计算结果的id，可以有多个，用空格分开
• form：与当前标签有关联的form（从属的biaodan）。该id必须时当前文档内的表单元素。如为指明，那么output标签必须包含在一个form表单之内。
• name：name属性

<form oninput="total.value = parseInt(a.value) + parseInt(b.value)">0
  <input type="range" id="a" value="50">100
  +<input type="number" id="b" value="50">
  =<output name="total" for="a b"></output>
</form>

Picture

Picture通过包含0个或者多个<source>元素和一个<img>标签来为显示场景提供不同像素的图像。浏览器会选择最匹配的元素，如果没有匹配上的就会选择标签的src属性指定的url。

useragent会检查每个的srcset、media和type属性来匹配符合当前布局、设备显示特征的图片。

它包括几个属性：

• srcset这是必填的属性，是指引用图片的url
• media允许你提供一个用于媒体查询的条件
• sizes定义图片的宽度值，或者一些媒体查询的值
• type定义MIME类型

<picture>
  <source media="(min-width: 700px)" src="./big.png">
  <source media="(min-width: 400px)" src="./small.png">
  <img src="./alter.png" alt="前端记事本" tyle="width: auto">
</picture>

Progress

Progress进度条的形式，表示任务的进度。

progress并不是meter的替代品，因此，表示磁盘空间使用情况或者查询结果相关性的组件应该使用meter属性。

<progress value="43" max="100"></progress>

Meter

meter标签表示在一个定义好的范围内的度量值。你也可以理解为“度量尺”。

可以用来表示内存空间的使用情况，或者搜索结果的关联性。

但它不应该用来表示某项任务的进度，这种情况下应该使用progress。

<meter value="4" min="0" max="10"></meter>
<meter value="0.3"></meter>

Template

Template用来包含一些在页面加载时不会呈现的内容，但随后可以在运行时使用javascript进行实例化。

可以用来存储一段后续要用到的内容片段，减少了在JavaScript实例化节点时创建模版内容的过程。

<template>
  <h2>前端记事本</h2>
  <p>前端记事本前端记事本前端记事本前端记事本前端记事本前端记事本前端记事本</p>
</template>

在javascript中可以使用这部分模版来实例化节点

function createNewNode() {
  const node = document.querySelector('template');
  const template = node.content.cloneNode(true);
  document.body.appendChild(template);
}

Time

time用来标签定义日期或者时间。这个元素的目的是以机器可读的格式表示时间和力气。所以，当用户在日历中定义提醒时间或者日程表时，就可以用它来编码机器可以识别的时间格式。另外，使用这种标签还可以使搜索引擎有更加智能的搜索结果。

<p>前端记事本更新时间<time>7:00</time></p>
<p>
  我希望公众号的文章在每天早上
  <time dateTiem="6:30">6:30</time>
  自动发布
</p>

wbr

wbr表示文本中的一个位置浏览器可以选择在这个位置折行。和<br>不同，<br>表示必须折行。而wbr的意思是在宽度足够的情况下不换行，当宽度不足的时候，在wbr处主动换行。
所以，如果你有一段很长的文本，其中有一个英文单词，你不希望在文本自适应宽度时，单词因为折行被分割成两个部分，那么可以使用wbr标签保证这个单词不会被折行。

注意：这个这种特性在UTF-8编码的页面中，也就是中文文本不会有效果。

<p>在文本中使用这个属性，可以在页面宽度变小时，在这个英文单词<wbr>front<wbr>处折行，保证单词不会被分割<p>

在宽度足够的时候，文本是完全展开的。

当宽度变小，可以看到图中还有空间，但front已经到了第二行，保证了front不会被分割。

details

details可以创建一个挂件，仅在被切换成展开状态时才会显示内容信息。可以在其中嵌入<summary>标签，为该部件提供概要。

<details>
  <summary>概要</summary>
  details可以创建一个挂件，仅在被切换成展开状态时才会显示内容信息。可以在其中嵌入`<summary>`标签，为该部件提供概要。
</details>

ok，今天就介绍这些，希望大家可以在看到这些标签的强大之处，并在项目中尝试使用。