每天一个前端小知识 Day 1
语义化 HTML（Semantic HTML）
1. 什么是语义化 HTML？
语义化 HTML 指的是使用符合内容含义的标签，而不仅仅为了布局或样式。例如：
<article>…</article>
<nav>…</nav>
<header>…</header>
这些标签本身就能表达内容的结构和用途，有助于语义表达、可读性、SEO 和无障碍能力 。
2. 为什么面试官关注语义化 HTML？
- 可访问性（Accessibility）：屏幕阅读器基于标签结构提供导航，使用正确语义标签更友好。
- SEO：搜索引擎抓取结构化页面更高效。
- 可维护性：可读、易理解，团队协作效率更高 。
- 标准兼容：现代浏览器更倾向于支持语义标签，减少兼容问题。
3. 常见语义标签及用途
| 标签 | 描述 |
|---|---|
<header> | 文档或内容的头部区域，通常包含 logo、导航或标题 |
<nav> | 导航链接区域 |
<main> | 页面主要内容区域，每页只应包含一个 |
<section> | 分区模块，用于主题内容分组 |
<article> | 独立、可分发或重用的内容，如新闻、博客贴子 |
<aside> | 侧边栏内容，如广告、相关文章 |
<footer> | 底部信息，如作者、版权、联系方式 |
<figure> + <figcaption> | 图文块，如图片配上说明 |
<time> | 时间/日期信息，支持 datetime 属性以格式化日期 |
4. 示例：用语义标签构建文章结构
<article><header><h1>理解语义化 HTML</h1><time datetime="2025-06-14">2025‑06‑14</time></header><section><h2>为何使用语义标签？</h2><p>提高 SEO、无障碍、可维护性。</p></section><figure><img src="diagram.png" alt="示意图"><figcaption>页面结构示意图</figcaption></figure><aside><h3>相关阅读</h3><ul><li><a href="...">HTML5 新特性</a></li></ul></aside><footer><p>作者：前端达人</p></footer>
</article>
5. 面试常见考题 & 回答建议
-
问：什么是语义化 HTML？它的作用是什么？
答：语义化 HTML 是使用与内容意义相符的标签，便于阅读、SEO、可访问性和维护。 -
问：HTML5 里新增了哪些语义标签？
答：如<article>,<section>,<header>,<footer>,<nav>,<aside>,<figure>等。 -
问：
<div>和语义标签相比，有什么区别？
答：<div>仅用于布局，无语义；语义标签表明其用途，对机器、无障碍工具更友好。 -
问：何时使用
<section>vs<article>？
答：<article>用于可以独立发布的内容，如新闻贴；<section>用于内容内的组织分组 。 -
问：讲一下
<time>的用法？
答：用于标记时间/日期，datetime属性支持 ISO 8601，方便解析和索引。
6. 实战建议
- 从最基础的布局结构开始：先用
<header>,<nav>,<main>,<footer>，再逐步拆分细节模块。 - 语义先于样式：HTML 不要为了样式滥用标签，用 CSS 控制展示。
- 结合无障碍检测工具：例如 Lighthouse 或 axe-core，检测和优化结构。
- 阅读 WCAG 和 ARIA 指南：提升面试中对可访问性的认识。
✅ 总结
语义化 HTML 是前端工程师必备的基础技能。从面试角度来看，面试官会关注你对标签结构、可访问性、SEO 以及技术选型的意识。掌握这些知识有助于你在面试中脱颖而出。