[译] 可用但最不常见的 HTML5 标签

时间 2019-11-07

原文原文链接

原文地址：The most uncommon HTML5 tags you can use right now

原文做者：Pedro M. S. Duarte

译文出自：掘金翻译计划

本文永久连接：github.com/xitu/gold-m…

译者：lsvih

校对者：sophiayang1997

<!DOCTYPE html> HMLT5 于 2014 年 10 月由万维网联盟（W3C）发布，旨在经过改进 HTML 语言来支持最新的多媒体设备，在保证计算机与设备（如 Web 浏览器，解析器等）可解析的前提下加强对人类的可读性。html

HTML 教程：www.geekchamp.com前端

我能够肯定大家都已经在使用 HTML5 作网页了，而且会使用一些常见的标签，如 <header>、<section>、<article> 和 <footer> 等等，除此以外，还有一些不经常使用的标签是有助于正确使用 HTML5 的语义化开发。html5

在此我将其中一些最重要的标签列出来，但愿能帮助你遵循 HTML5 语义进行开发。android

`<details>`

<details> 标签指定了用户能够按需查看或隐藏的内容，能够用它来建立能被用户关闭与打开的小工具。在语义上，你能够在其中使用任何类型的内容，不过若是没有对它设置 open 属性，内容将不可见。ios

<details open><p>在预约时须要信用卡</p></details>git

`<dialog>`

<dialog> 定义了一个对话框元素或窗口。github

<dialog open><p>欢迎来到咱们的酒店</p></dialog>后端

`<mark>`

<mark> 标签订义了被标记的文本，能够用于将你文本中的一部分高亮。浏览器

<p>在<mark>预约</mark>时须要信用卡</p>工具

`<summary>`

<summary> 标签为 <details> 定义了一个可见的标题。点击这个标题能够显示或隐藏 <details> 内容。

<details><summary>支付条件</summary><p>在预约时须要信用卡</p></details>

`<time>` 与 `<datetime>`

<time> 标签订义了一我的类可读的日期或者时间。这个元素还能用以机器可读的方式对日期或时间进行编码，以便用户的工具或软件将生日提醒、计划事件之类的时间添加到用户的日历中。此外，还能让搜索引擎产生更智能的搜索结果。

<p>自助早餐于 <time>7.00 AM</time> 在餐厅开始</p>

<p><time datetime="2018-06-20T19:00">6 月 20 日晚上 7 点</time>在大厅举行音乐会</p>

`<small>`

<small> 标签的规范解释，这个标签能够用于下降文本或信息的重要性。浏览器将经过缩小字体以减小视觉影响。

<p>取消预约必须提早 48 小时，<small>以避免每房每夜的额外扣款</small></p>

`<datalist>`

你能够用 <datalist> 元素来定义 <input> 标签中用于有效选择的列表。这个组件在各个浏览器中的样子略有不一样，但相同的是在字段右边显示一个小下拉箭头，提示此字段能够进行选择。点这儿查看效果。

<datalist><option value="Master Card"><option value="Visa"><option value="American Express"></datalist>

`<progress>`

<progress> HTML 元素会显示一个指示器，用于显示某个任务的完成进度，一般显示为进度条。

<progress value="70" max="100">70 %</progress>

掘金翻译计划是一个翻译优质互联网技术文章的社区，文章来源为掘金上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注掘金翻译计划、官方微博、知乎专栏。

[译] 可用但最不常见的 HTML5 标签

<details>

<dialog>

<mark>

<summary>

<time> 与 <datetime>

<small>

<datalist>

<progress>