html5的新增标签

HTML5新增结构标签

HTML5引入了多个语义化标签，用于更清晰地描述网页结构：

• <header>：定义文档或节的页眉
• <footer>：定义文档或节的页脚
• <nav>：定义导航链接
• <article>：定义独立的内容块
• <section>：定义文档中的节
• <aside>：定义页面内容之外的内容（如侧栏）

HTML5新增多媒体标签

为支持原生多媒体内容，新增以下标签：

• <audio>：嵌入音频内容
• <video>：嵌入视频内容
• <source>：为多媒体元素定义多种媒体资源
• <track>：为视频添加字幕或章节

1<video controls width="250">
2    <source src="video.mp4" type="video/mp4">
3    <track kind="subtitles" src="subtitles.vtt" srclang="en">
4</video>
5

HTML5新增表单元素和属性

新增表单控件和输入类型：

• <datalist>：定义输入控件的预定义选项
• <output>：表示计算结果
• <meter>：定义度量衡
• <progress>：显示任务进度

新增输入类型：

• email、url、number、range
• date、time、datetime-local
• search、color、tel

HTML5新增图形和嵌入标签

• <canvas>：通过脚本绘制图形
• <svg>：定义矢量图形容器
• <embed>：定义外部应用程序容器
• <figure>和<figcaption>：定义图像及标题

1<canvas id="myCanvas" width="200" height="100"></canvas>
2<script>
3    const canvas = document.getElementById("myCanvas");
4    const ctx = canvas.getContext("2d");
5    ctx.fillStyle = "#FF0000";
6    ctx.fillRect(0, 0, 80, 80);
7</script>
8

HTML5其他重要标签

• <details>和<summary>：创建可展开/折叠的内容
• <mark>：高亮显示文本
• <time>：定义日期/时间
• <main>：定义文档主要内容
• <template>：定义可重复使用的HTML模板

这些新增标签提升了网页的语义化程度，减少了对div的依赖，并增强了原生多媒体支持能力。

《html5的新增标签》 是转载文章，点击查看原文。