2、HTML5语义化标签：文档结构标签、文本级标签、分组标签、交互元素、表单增强
说实话，我刚入行那会儿，HTML 标签用得特别随意。满屏的 <div> 和 <span>，自己看着都头疼。后来做项目被老前辈怼了一次，才真正重视起语义化。今天咱们就聊聊 HTML5 里那些「有灵魂」的标签。
2.1 文档结构标签：给页面搭骨架
以前做页面结构，全靠 <div id="header"> 这种写法。现在不一样了，HTML5 给了我们更清晰的标签。我个人习惯，拿到设计稿第一件事，就是先用结构标签把页面骨架搭出来。
核心结构标签一览：
<header>—— 页眉，通常放 logo、导航、搜索框<nav>—— 导航区域，别啥都往里塞<main>—— 页面主体内容，一个页面只能用一次<article>—— 独立的内容块，比如一篇博客、一条新闻<section>—— 有主题的分区，一般带个标题<aside>—— 侧边栏，放广告、相关链接啥的<footer>—— 页脚，版权信息、友情链接
我在项目中遇到过一个问题：有人把 <section> 当万能容器用，里面啥都装。其实 <section> 应该有一个明确的主题，比如「产品特性」、「团队成员」。如果只是为了样式分组，用 <div> 就够了。
<body>
<header>
<h1>我的博客</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>HTML5 语义化实战</h2>
<p>发布于 2024-01-15</p>
<section>
<h3>为什么需要语义化？</h3>
<p>可读性、SEO、无障碍访问...</p>
</section>
</article>
<aside>
<h3>相关文章</h3>
<ul>
<li>CSS Grid 布局入门</li>
</ul>
</aside>
</main>
<footer>
<p>© 2024 版权所有</p>
</footer>
</body>小技巧：用 <main> 包裹核心内容，屏幕阅读器可以直接跳到这里。我每次做项目都会检查一下，确保 <main> 只出现一次。
2.2 文本级标签：让文字更有意义
文本标签看着简单，但用对地方真不容易。你想想看，<b> 和 <strong> 有啥区别？<i> 和 <em> 呢？
| 标签 | 含义 | 使用场景 |
|---|---|---|
<strong> |
重要内容（语义加粗） | 警告、关键数据 |
<b> |
视觉加粗（无语义） | 产品名称、关键词 |
<em> |
强调语气（语义斜体） | 重读的词语 |
<i> |
视觉斜体（无语义） | 外来语、技术术语 |
<mark> |
高亮标记 | 搜索结果、重点段落 |
<time> |
日期/时间 | 发布时间、活动日期 |
嗯，这里要注意：<time> 标签的 datetime 属性一定要写机器可读的格式。我曾经见过有人写 <time>明天</time>，这语义化了个寂寞。
<p>
会议将于 <time datetime="2024-03-15T14:00:00+08:00">
2024年3月15日下午2点</time> 举行。
<mark>请务必准时参加！</mark>
</p>2.3 分组标签：把内容组织起来
分组标签说白了就是「收纳盒」。除了常见的 <ul>、<ol>、<dl>，HTML5 还加了几个好用的。
常用分组标签：
<figure>+<figcaption>—— 配图+图注，天生一对<details>+<summary>—— 折叠面板，原生交互<blockquote>—— 长引用，记得加cite属性
我个人特别喜欢 <details> 这个标签。以前做 FAQ 页面，得写一堆 JS 控制展开收起。现在原生就支持，省心多了。
<details>
<summary>什么是响应式设计？</summary>
<p>响应式设计就是让页面在不同设备上都能好好显示。</p>
</details>
<figure>
<img src="responsive-example.png" alt="响应式设计示例">
<figcaption>图1：同一页面在手机、平板、电脑上的效果</figcaption>
</figure>避坑指南：我曾经在 <details> 里嵌套了另一个 <details>，结果样式乱成一团。嵌套使用时，记得检查浏览器兼容性，尤其是移动端。
2.4 交互元素：少写点 JavaScript
HTML5 新增的交互元素，说白了就是让浏览器帮我们干活。我刚开始也不信，觉得原生控件太丑。后来发现，它们在某些场景下真香。
<dialog>—— 原生弹窗，不用再写模态框了<details>—— 折叠面板，上面刚说过<menu>+<menuitem>—— 上下文菜单（不过支持度一般）
<dialog id="myDialog">
<p>这是一个原生弹窗</p>
<button onclick="this.closest('dialog').close()">关闭</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">
打开弹窗
</button>你想想看，以前写个弹窗得多少代码？现在三行 HTML 加一行 JS 就搞定了。不过要注意，<dialog> 的样式在不同浏览器里差别挺大，记得统一重置一下。
2.5 表单增强：用户体验的细节
表单是用户和网站交互最多的地方。HTML5 给表单加了不少好东西，我每次做注册页、搜索框都会用上。
| 新特性 | 作用 | 示例 |
|---|---|---|
type="email" |
自动校验邮箱格式 | 手机端弹出 @ 键盘 |
type="url" |
校验 URL 格式 | 自动补全 http:// |
type="number" |
数字输入，带步进按钮 | 设置 min/max/step |
type="range" |
滑块选择 | 音量、亮度调节 |
type="date" |
日期选择器 | 原生日历控件 |
placeholder |
输入提示 | 「请输入用户名」 |
required |
必填校验 | 提交时自动检查 |
pattern |
正则校验 | 自定义格式验证 |
<form>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email"
placeholder="example@domain.com" required>
<label for="age">年龄：</label>
<input type="number" id="age" name="age"
min="1" max="150" step="1">
<label for="volume">音量：</label>
<input type="range" id="volume" name="volume"
min="0" max="100" value="50">
<label for="birthday">生日：</label>
<input type="date" id="birthday" name="birthday">
<label for="phone">手机号：</label>
<input type="tel" id="phone" name="phone"
pattern="[0-9]{11}"
placeholder="11位手机号">
<button type="submit">提交</button>
</form>我的经验：用 type="tel" 而不是 type="text" 输手机号，移动端会自动弹出数字键盘。这个小细节，用户能感受到你的用心。
说白了，HTML5 语义化标签不是为了炫技。它让代码更清晰，让搜索引擎更懂你，让屏幕阅读器能准确朗读。我每次重构老项目，第一件事就是把 <div id="header"> 改成 <header>，感觉整个页面都清爽了。
最后说一句：别为了语义化而语义化。如果一个 <div> 就能解决问题，硬套个 <article> 反而奇怪。合适才是最好的。