引入了许多新元素,以增强网页的语义和功能。这些新元素大致可以按以下几类进行分类和介绍。
下面是对各标签的详解,section、header、footer、nav、article、aside、figure、code、dialog、meter、time、progress、video、audio、details、atagrid、menu、command等。
一、语义元素(Semantic Elements)
这些元素旨在提供更清晰的文档结构和语义信息。
html
<article>:定义独立的内容区域,如博客文章或新闻文章。
<aside>: 表示页面内容之外的辅助内容,如侧边栏。
<details>:用于描述文档或应用中的某个部分的详细信息,用户可点击查看。
<figcaption>:定义 <figure> 元素的标题。
<figure>:用于包含图像、图表、照片、代码块等,通常与 <figcaption> 搭配使用。
<footer>:定义页面或章节的页脚内容。
<header>:定义页面或章节的页眉内容。
<main>: 表示文档的主要内容。
<mark>: 表示需要突出显示的文本。
<nav>: 定义导航链接的部分。
<section>:表示文档中的一个独立章节。
二、媒体元素(Media Elements)
这些元素用于更好地处理多媒体内容。
html
<audio>: 定义声音内容,如音乐或其他音频流。
<video>: 定义视频内容。
<source>: 为 <audio> 和 <video> 元素定义多种媒体资源。
<track>: 为 <video> 和 <audio> 元素提供字幕文件
三、 表单元素(Form Elements)
这些元素增强了表单的功能和用户体验。
html
<datalist>:提供输入建议的列表。
<keygen>: 用于生成密钥对(现已弃用)。
<output>: 表示计算或用户操作的结果。
<progress>:表示任务的进度。
<meter>: 表示预定义范围内的标量测量。
<input> 类型扩展:如 email, url, number, range, date, time, datetime-local, month, week, search。
四、图形元素(Graphics Elements)
这些元素用于绘制图形和定义矢量图形。
html
<canvas>:用于绘制图形,通常通过 JavaScript。
<svg>: 定义可缩放矢量图形。
五、元数据元素(Metadata Elements)
这些元素提供文档的元数据。
html
<base>: 设置所有相对 URL 的基准 URL。
<meta charset="UTF-8">:定义文档的字符编码。
<link>: 定义文档与外部资源的关系。
<style>:在文档中嵌入 CSS 样式。
六、交互元素(Interactive Elements)
这些元素用于增强用户和网页的互动。
html
<details>:用于描述文档或应用中的某个部分的详细信息,用户可点击查看。
<summary>:为 <details> 元素定义一个可见标题。
七、脚本元素(Scripting Elements)
这些元素用于嵌入或引用脚本。
html
<script>:定义客户端脚本,如 JavaScript。
八、其他元素(Miscellaneous Elements)
其他一些新增元素,用于特定的功能和用途。
html
<embed>:嵌入外部内容,如插件。
<time>:表示24小时的时间,或者纪元时间。
这些新元素不仅丰富了 HTML 的功能,还大大提升了网页的语义和可读性。通过合理使用这些元素,开发者可以创建更结构化、更易于理解和维护的网页。