本文详细介绍了HTML5中的一些新增元素，包括结构化元素如details和summary，语义化元素figure和figcaption，表单元素如datalist和input的新类型，以及多媒体元素video和audio的使用，强调了语义化和交互性的增强。
H5是指第5代HTML（超文本标记语言），也指用H5语言制作的一切数字产品。H5具体分为HTML（结构）、CSS（样式）和JavaScript（行为）。
一、结构化元素
| 名称 | 含义 | 性质 |
|---|---|---|
| header | 定义文档或节的页眉。 | 块级元素 |
| nav | 定义文档内的导航链接。 | 块级元素 |
| section | 定义文档中的节。 | 块级元素 |
| aritcle | 定义文档内的文章。 | 块级元素 |
| footer | 定义文档或节的页脚。 | 块级元素 |
| aside | 定义页面内容之外的内容。 | 块级元素 |
二、语义化元素
| 名称 | 含义 | 性质 |
|---|---|---|
| details | 定义元素的细节 | 块级元素 |
| summary | 和 details 配合使用，应该是 details 元素的第一个子元素，定义可见的标题 | 块级元素 |
| figure | 定义自包含内容，比如图示、图表、照片、代码清单等等。 | 块级元素 |
| figcaption | 和 figure 配合使用，定义标题。figcaption 应位于 figure 的第一个或最后一个子元素的位置。 | 块级元素 |
| menu | 定义文本菜单，工具条和命令列表选项。 | |
| menuitem | 定义用户能够从弹出菜单调用的命令/菜单项（菜单项） | |
| meter | 定义已知范围内的标量测量。（类似占比） | 行内元素 |
| progress | 定义任务的进度。 | 行内元素 |
| cite | 定义引用的文字（斜体的）。 | 行内元素 |
| mark | 定义有记号的内容。（定义黄色背景高亮的内容） | 行内元素 |
| time | 定义时间 | 行内元素 |
1. details 和 summary
<body>
<details>
<summary>红旗渠</summary>
<p>红旗渠是20世纪60年代，林县人民在极其艰难的条件下</p>
</details>
结果：
2. figure 和 figcaption
<body>
<figure>
<p><figcaption>少林寺</figcaption></p>
<img src="sl.jpg" width="320" height="200" />
</figure>
结果：
3. menu和 menuitem
menu元素呈现了一组用户可执行或激活的命令。这既包含了可能出现在屏幕顶端的列表菜单，也包含了那些隐藏在按钮之下、当点击按钮后显示出来的文本菜单。
menu 和 ul 元素区别是： ul主要是为了展示选项，而 menu 是为了交互。
menu 和 nav的区别： nav是导航，一般包含一个链接集合，允许用户跳转。menu是一系列菜单命令的集合，跟桌面有点相似。桌面应用通常使用工具条菜单或者上下文菜单展现各种任务，让用户执行特定的任务。
menu属性：
最低0.47元/天 解锁文章
3211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
