引入HTML5规范时,它带来了许多新的语义标记,这些标记赋予HTML标记更多的含义。对于网页设计师而言,这是个好消息,他们不再需要制作<div>标签的样本来构建网站结构。

尽管诸如<header>,<footer>和<nav>之类的基本语义HTML标签是不言自明的,但Web设计人员也需要使用大量的更新HTML标签。在本文中,我们总结了您需要使用的八个基本HTML标记,并说明了如何实现。为了平衡起见,我们还选择了五个标记,这些标记需要放到网络历史记录的范围内。

01. <picture>

所述<picture>标记类似于<img> ,则<picture>元件通过允许多个提供灵活性<source>对于相同的资源,其可以适应基于媒体的查询或图像类型的支撑元件。例如,它可以将WebP图像提供给支持更新的较小文件大小的浏览器。

02. <datalist>

所述<datalist>标签提供了一种用于自动填充接口的<input>元素。每个列表包含一组具有相关值的<option>元素。当使用“ list”属性链接到<input>时,它可以提供一个下拉列表,甚至在用户键入时显示建议。

03. <dl>
此描述列表或<dl>标记元素用作一组已定义术语的容器。在内部,将每个术语(<dt>)和定义(<dd>)组合在一起以形成类似词汇表的结构。虽然默认情况下它应用基本格式,但语义HTML使屏幕阅读器和其他自动工具(例如搜寻器)受益。

04. <details>

当需要一次显示大量数据(例如问题页面)时,手风琴是一种常见的设计模式。通过在<summary>旁边使用<details>元素,无需JavaScript就可以达到相同的效果。单击摘要将切换其余内容。

05. <dfn>
复杂的术语或缩写通常需要为不熟悉的术语定义。包装在<dfn>标记中的术语将由其周围的文本定义。这是一个内联元素,旨在突出显示人类语言中的定义。

06. <figure>

图形定义为内容的单位,通常出现在文档的主要流程中,但也可以单独解释。所述<figure>元件包装的图像或其他参考内容,并且还可以包括其内容与描述<figcaption> 。

07. <code>

使用技术写作,从视觉上将计算机代码与句子的其余部分分开可能会很有用。通过将每个匹配项包装在<code>标记中,浏览器可以应用一些默认格式来更适当地显示它。与<pre>组合使用更大的代码块。

08. <time>

我们可以根据上下文或语言来不同地编写时间值。通过使用<time>标签标记这些值,搜索引擎和其他自动化工具可以快速提取此信息。使用“ datetime”属性以对机器更友好的格式提供特定时间。