HTML5 新标签概述

七月 12, 2024 6901

HTML5 新标签概述

HTML5 引入了许多新的标签，极大地增强了网页的结构化、语义化和多媒体处理能力。以下是这些新标签的分类和详细介绍。

结构性标签
- <header>
- <nav>
- <section>
- <article>
- <aside>
- <footer>
- <main>
- <figure>
- <figcaption>
多媒体标签
- <audio>
- <video>
- <source>
- <track>
- <embed>
- <canvas>
表单增强标签
- <datalist>
- <keygen>
- <output>
- 新的输入类型
其他功能性标签
- <progress>
- <meter>
- <details> 和 <summary>
- <mark>
- <time>
- <ruby>、<rt>、<rp>

1. 结构性标签

这些标签用于更语义化地定义页面结构，使网页内容更加易读和易维护。

<header>
<nav>
<section>
<article>
<aside>
<footer>
<main>
<figure>
<figcaption>

1.1 `<header>`

<header> 标签定义文档或节的头部，通常包含导航链接、标题、logo 等内容。可以在页面的顶部，也可以在每个章节或文章的开头使用。

<header>
  <h1>网站标题</h1>
  <nav>
    <a href="#home">首页</a>
    <a href="#about">关于我们</a>
    <a href="#contact">联系我们</a>
  </nav>
</header>

1.2 `<nav>`

<nav> 标签定义导航链接的容器，适用于主要导航链接。

<nav>
  <a href="#home">首页</a>
  <a href="#about">关于我们</a>
  <a href="#contact">联系我们</a>
</nav>

1.3 `<section>`

<section> 标签定义文档中的节，可以包含标题、段落等内容。

<section>
  <h2>关于我们</h2>
  <p>我们是一家专注于提供优质服务的公司。</p>
</section>

1.4 `<article>`

<article> 标签定义独立的内容单元，例如文章、博客条目等。

<article>
  <h2>最新文章</h2>
  <p>这是最新的博客文章内容。</p>
</article>

1.5 `<aside>`

<aside> 标签定义与主要内容相关的侧边栏内容，例如广告、推荐链接等。

<aside>
  <h2>侧边栏标题</h2>
  <p>这是一些侧边栏内容。</p>
</aside>

1.6 `<footer>`

<footer> 标签定义文档或节的页脚，通常包含版权信息、联系信息等。

1
2
3

<footer>
  <p>&copy; 2024 公司名称. 保留所有权利。</p>
</footer>

1.7 `<main>`

<main> 标签定义文档的主要内容，一个文档中应包含且仅包含一个 <main> 元素。

<main>
  <h1>主要内容标题</h1>
  <p>这是主要内容。</p>
</main>

1.8 `<figure>` 和 `<figcaption>`

<figure> 标签用于包含图像或图表等媒体内容，<figcaption> 用于提供图像的标题或描述。

<figure>
  <img src="image.jpg" alt="描述图片">
  <figcaption>图片描述</figcaption>
</figure>

2. 多媒体标签

HTML5 增强了对音频和视频内容的支持，使多媒体内容的嵌入更加简单和标准化。

<audio>
<video>
<source>
<track>
<embed>
<canvas>

2.1 `<audio>`

<audio> 标签用于定义音频内容，可以嵌入音频文件，并支持多种格式。

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  您的浏览器不支持音频元素。
</audio>

2.2 `<video>`

<video> 标签用于定义视频内容，支持多种格式和字幕。

<video controls>
  <source src="video.mp4" type="video/mp4">
  您的浏览器不支持视频元素。
</video>

2.3 `<source>`

<source> 标签为 <audio> 和 <video> 元素指定多个媒体资源，浏览器会选择第一个支持的资源。

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  您的浏览器不支持视频元素。
</video>

2.4 `<track>`

<track> 标签为 <video> 和 <audio> 元素提供字幕或文本轨道。

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  您的浏览器不支持视频元素。
</video>

2.5 `<embed>`

<embed> 标签用于嵌入外部内容，例如插件。

1	<embed src="example.pdf" type="application/pdf" width="600" height="400">

2.6 `<canvas>`

<canvas> 标签用于通过脚本（如 JavaScript）绘制图形。

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = '#FF0000';
  ctx.fillRect(0, 0, 150, 75);
</script>

3. 表单增强标签

HTML5 增强了表单的功能，增加了新的输入类型和表单控件。

<datalist>
<keygen>
<output>
新的输入类型

3.1 `<datalist>`

<datalist> 标签提供输入建议的下拉列表。

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Opera">
  <option value="Edge">
</datalist>

3.2 `<keygen>`

<keygen> 标签用于生成公钥的密钥对（不再推荐使用）。

1
2
3

<form>
  <keygen name="name">
</form>

3.3 `<output>`

<output> 标签表示计算或用户操作的结果。

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="a" value="50"> +
  <input type="number" id="b" value="50">
  = <output name="result" for="a b"></output>
</form>

3.4 新的输入类型

HTML5 引入了多种新的输入类型：

email
url
number
range
date
time
datetime-local
month
week
search
color

<form>
  <label for="email">电子邮件：</label>
  <input type="email" id="email" name="email">

  <label for="bday">生日：</label>
  <input type="date" id="bday" name="bday">
  
  <label for="favcolor">选择你喜欢的颜色：</label>
  <input type="color" id="favcolor" name="favcolor" value="#ff0000">
</form>

4. 其他功能性标签

HTML5 还引入了一些其他功能性标签，用于表示特定的语义或功能。

<progress>
<meter>
<details> 和 <summary>
<mark>
<time>
<ruby>、<rt>、<rp>

4.1 `<progress>`

<progress> 标签表示任务的完成进度。

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

4.2 `<meter>`

<meter> 标签表示已知范围内的度量值或分数。

1	<meter value="0.7">70%</meter>

4.3 `<details>` 和 `<summary>`

<details> 标签用于创建可展开/折叠的内容，<summary> 标签用于提供折叠内容的标题。

<details>
  <summary>更多信息</summary>
  <p>这是详细信息，可以展开/折叠。</p>
</details>

4.4 `<mark>`

<mark> 标签表示有意义的文本标记，通常用于突出显示搜索结果。

1	<p>这是一个<mark>重要的</mark>词。</p>

4.5 `<time>`

<time> 标签表示日期和时间。

1	<time datetime="2024-07-12">2024年7月12日</time>

4.6 `<ruby>`、`<rt>`、`<rp>`

这些标签用于表示东亚排版中的注音标记：

<ruby>：定义需要注音的文字。
<rt>：定义注音文字。
<rp>：定义在不支持 ruby 注音的浏览器中显示的替代文本。

<ruby>
  汉 <rt>hàn</rt> 字 <rt>zì</rt>
  <rp>(</rp> <rt>hàn</rt> <rp>)</rp>
  <rp>(</rp> <rt>zì</rt> <rp>)</rp>
</ruby>

总结

HTML5 的新标签极大地增强了网页的结构化、语义化和多媒体处理能力，使得开发人员可以更直观、更语义化地构建网页结构，处理多媒体内容，并提升表单的功能和用户体验。这些新标签使得 HTML5 更加现代化、功能更强大，并为未来的 Web 发展奠定了坚实的基础。

本文作者：scwang90
本文链接：https://blog.scwang90.cn/2024/07/12/html5-new-tags/index.html
版权声明：本分享所有文章均采用 BY-NC-SA 许可协议，转载请注明出处！

HTML5 新标签概述