HTML5 新增元素

HTML5 引入了大量新元素，这些元素使文档结构更加清晰、语义化，同时提升了搜索引擎和辅助技术对内容的理解能力。

语义元素

语义元素（Semantic Elements）使用有意义的标签来描述内容，使HTML文档结构更加清晰。

<header> 元素

定义页面或章节的头部区域，通常包含标题、导航链接、logo等。

header 示例

<header>
    <h1>网站标题</h1>
    <nav>
        <a href="/">首页</a>
        <a href="/about">关于</a>
    </nav>
</header>

<nav> 元素

定义导航链接区域，用于主要导航菜单。

nav 示例

<nav>
    <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/products">产品</a></li>
        <li><a href="/contact">联系</a></li>
    </ul>
</nav>

<main> 元素

定义页面的主要内容区域，一个页面只能有一个 main 元素。

main 示例

<main>
    <h1>欢迎访问</h1>
    <article>
        <h2>最新文章</h2>
        <p>文章内容...</p>
    </article>
</main>

<article> 元素

定义独立的、可分发的内容块，如博客文章、新闻报道等。

<section> 元素

定义文档中的章节或节，通常配合标题使用。

<aside> 元素

定义与主内容相关但可独立的侧边栏内容。

表单元素

HTML5 新增的表单元素提供了更强大的表单功能。

<datalist> - 定义输入控件的预定义选项列表
<output> - 定义计算结果的输出

媒体元素

HTML5 为多媒体内容提供了原生支持。

<audio> - 嵌入音频内容
<video> - 嵌入视频内容
<source> - 为媒体元素指定多个媒体源
<track> - 为视频或音频定义字幕轨道

图形元素

HTML5 支持两种强大的图形绘制技术。

<canvas> - 通过JavaScript绘制2D图形
<svg> - 定义可缩放矢量图形

其他新元素

<details> - 创建可展开/折叠的详情部件
<summary> - 定义 details 元素的可见标题
<progress> - 定义任务进度条
<meter> - 定义已知范围内的测量值
<time> - 定义日期/时间
<mark> - 标记重要的文本
<figure> - 定义独立的媒体内容及其标题
<figcaption> - 定义 figure 元素的标题

完整示例

下面是一个使用HTML5新元素的完整页面结构示例：

💻 在线代码编辑器

👁️ 预览效果

浏览器支持

所有现代浏览器（Chrome、Firefox、Safari、Edge）都完全支持HTML5新元素。IE9及以下版本不支持这些元素，可以使用JavaScript polyfill或回退方案来解决兼容性问题。