HTML5 标签语法详解：从文档结构到多媒体标签

小飞兽 HTML/CSS 243 次阅读 2026-05-05

Introduction

HTML5 是 HyperText Markup Language 的第五个主要版本，由 WHATWG（Web Hypertext Application Technology Working Group）在 2004 年提出，2014 年正式成为 W3C 推荐标准。相比 HTML4，HTML5 引入了大量语义化标签、多媒体原生支持（audio/video/canvas）以及 Web 应用相关的新 API。本文系统讲解 HTML5 核心标签的语法、使用场景及注意事项，帮助你从零建立规范的 HTML5 页面结构。

基本文档结构

一个完整的 HTML5 页面由声明、html 根元素、head 元数据区和 body 内容区三部分组成：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
    <meta name="description" content="页面描述">
    <link rel="stylesheet" href="style.css">
    <script src="app.js" defer></script>
</head>
<body>
    <header>页头导航区</header>
    <main>
        <article>
            <h1>文章标题</h1>
            <section>
                <p>正文内容段落...</p>
            </section>
        </article>
    </main>
    <footer>页脚信息</footer>
</body>
</html>

HTML5 语义化标签详解

HTML5 最重要的改进之一是引入语义化标签，让开发者无需大量 div + class 即可表达文档结构：

<!-- 文档结构标签 -->
<header> <!-- 页面或区块的顶部区域 -->
<nav>     <!-- 导航链接区域 -->
<main>    <!-- 主内容区，每个页面唯一 -->
<article> <!-- 独立完整的内容块（博客文章/新闻） -->
<section> <!-- 文档的章节，通常带标题 -->
<aside>   <!-- 侧边栏，与主内容相关但可独立 -->
<footer>  <!-- 页面或区块的底部区域 -->
<figure>  <!-- 插图及其 caption 配文 -->
<figcaption>图片说明文字</figcaption>

表单新属性与输入类型

HTML5 大幅增强了表单功能，原生支持多种数据类型验证：

<form action="/submit" method="POST" novalidate>
    <!-- 新增 input 类型 -->
    <input type="email"   name="email"  placeholder="your@email.com" required>
    <input type="url"     name="url"    placeholder="https://example.com">
    <input type="tel"     name="phone"  placeholder="138-0000-0000" pattern="[0-9\-]{10,}">
    <input type="number"  name="age"    min="0" max="120" step="1">
    <input type="range"   name="volume" min="0" max="100" value="50">
    <input type="date"    name="birthday">
    <input type="color"   name="theme" value="#8b4513">
    <input type="search"  name="q" results="5">
    
    <!-- 新增属性 -->
    <input type="text" name="username" autocomplete="username" autofocus>
    <input type="password" name="pwd" pattern="(?=.*\d)(?=.*[a-z]).{8,}" 
           title="至少8位，包含数字和字母">
    
    <button type="submit">提交</button>
</form>

运行效果

在浏览器中打开上述表单页面，你会看到：date 输入框会自动弹出日期选择器；color 输入框会打开颜色选择面板；email 和 url 字段在提交时会自动校验格式；range 会渲染为可拖动的滑块。无需任何 JavaScript 代码，原生支持。

常见问题

旧浏览器兼容：IE8 及以下不支持语义化标签。解决方案：引入 html5shiv.js，或使用 display: block 强制将语义标签渲染为块级元素。

lang 属性：<html lang="zh-CN"> 必须设置正确，搜索引擎和屏幕阅读器依赖此属性进行语言检测。
viewport：移动端适配必须包含 <meta name="viewport" content="width=device-width, initial-scale=1.0">，否则页面默认以桌面宽度渲染，导致缩放异常。

section vs article：section 是文档的 thematic 分组，article 是独立可分发的内容。article 可以包含 section，section 也可以包含 article。