10 个你不知道你须要的 HTML 元素

阿里云最近在作活动，低至2折，有兴趣能够看看：
https://promotion.aliyun.com/...

---

为了保证的可读性，本文采用意译而非直译。

我听过 “HTML很容易” 这种情绪的次数比我想象的要多。 虽然我赞成 HTML 可能比其余编程语言更容易学习，但你不该该认为它是理所固然的。

HTML 是一种功能强大的标记语言，可用于为咱们的 web 应用程序提供结构并提供强大的可访问性优点，但只有在适当使用时才能使用。

所以，今天咱们将发觉 10 个你可能不知道存在的 HTML 元素，但愿你能够建立易访问、结构更健全的 web 应用程序。

若是你想了解更多关于 HTML 的知识，能够访问W3Schools以得到更多的 HTML 元素。

Audio

<audio>标签能够播放一个音频，例如音乐或其余音频流。目前支持三种文件格式:MP三、WAV 和 OGG。

运行效果：

查看示例

Blockquote

<blockquote> 标签指定从另外一个源引用的部分。

运行效果：

查看示例

Output

<output> 标签表示一个计算的结果。你可使用加号和等号来指定应该将第一个和第二个输入值输出到输出标记;可使用包含要合并的两个元素的 ID 的 for 属性来表示这一点。

运行效果：

查看示例

Picture

<picture> 经过包含零或多个 <source> 元素和一个 <img> 元素来为不一样的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <source> 元素，若是没有匹配的，就选择 <img> 元素的 src 属性中的URL。而后，所选图像呈如今<img>元素占据的空间中。

source 元素具备如下属性：

• srcset(必填)：定义要显示的图像的URL
• media：media 属性容许你提供一个用于给用户代理做为选择 <source> 元素的依据的媒体条件(media condition)（相似于媒体查询）。若是这个媒体条件匹配结果为 false，那么这个 <source> 元素会被跳过。
• sizes： 定义单个宽度值，具备宽度值的单个媒体查询，或具备宽度值的逗号分隔的媒体查询列表
• type: type 属性容许你为 <source> 元素的 srcset 属性指向的资源指定一个 MIME 类型。若是用户代理不支持指定的类型，那么这个 <source> 元素会被跳过。

若是浏览器不支持该元素，或者全部<source>标签都不匹配，则使用<img>标签提供向后兼容性。

Progress

<progress> 标签表示任务的进度。

<progress> 标签不能替代<meter>标签，所以指示磁盘空间使用状况或查询结果相关性的组件应该使用<meter>标签。

运行效果：

查看示例

Meter

<meter>标签订义了一个定义范围内的标量度量，或者一个分数值。你还能够经过名称gauge引用此标记。

你可使用<meter>标签来显示磁盘使用状况统计数据，或者指示搜索结果的相关性。

不该该使用<meter>标签来指示任务的进度;这些类型的组件应该由<progress>元素定义。

运行效果：

查看示例

Template

HTML内容模板（<template>）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后能够在运行时使用JavaScript实例化。

使用 JavaScript，你可使用cloneNode()方法渲染此内容。

Time

<time>标签订义了人类可读的日期或时间。 这能够用于以机器可读方式编码日期和时间，以便用户代理能够将生日提醒或预约事件添加到用户的日历。 此外，这容许搜索引擎产生“更智能”的搜索结果。

运行效果：

查看示例

Video

<video> 标签指定一个影片剪辑或视频流。支持的格式包括MP四、WebM和Ogg。

运行效果：

查看示例

Word Break Opportunity

若是你有一个很长的文本块，或者一个很长的单词，你可使用<wbr>标签来指定文本主体中最理想的分割位置。这是一种确保浏览器在调整大小时不会在奇怪的位置中断文本的方法。

运行效果：

查看示例

但愿这十个HTML元素为你提供了一些构建出色应用程序的新工具。

你的点赞是我持续分享好东西的动力，欢迎点赞！

交流

干货系列文章汇总以下，以为不错点个Star，欢迎 加群 互相学习。

https://github.com/qq44924588...

我是小智，公众号「大迁世界」做者，对前端技术保持学习爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，便可看到福利，你懂的。