【前端小站】HTML 标签：网页骨架，从空白到惊艳，全靠这些 HTML 标签搞事情
HTML 标签就像积木，不同的组合方式决定了你能搭出什么样的房子。
下面这张图是目前（2025–2026）最常用、最有语义价值、实际项目中出现频率最高的标签分类速览表：
| 层级 | 主要职责 | 核心标签（按重要性排序） | 2025–2026 高频使用场景 | 语义分值（SEO/无障碍） |
|---|---|---|---|---|
| 文档根 | 声明 + 语言 + 根元素 | <!DOCTYPE html> <html lang="zh-CN"> | 几乎所有页面 | ★★★★★ |
| 元信息 | 不显示但极其重要 | <meta charset="UTF-8"> <meta name="viewport"> <title> <meta name="description"> <link rel="stylesheet/icon/preload"> | 移动适配、SEO、Favicon、性能优化 | ★★★★★ |
| 页面布局 | 大结构（骨架） | <header> <nav> <main> <article> <section> <aside> <footer> | 现代语义化布局（几乎取代了以前的 div 大法） | ★★★★★ |
| 内容区块 | 独立可分发的完整内容 | <article> <section>（必须带标题） <div>（无语义时用） | 博客文章、卡片、评论区、商品详情 | ★★★★☆ |
| 标题与文本 | 内容层级与强调 | <h1>～<h6> <p> <strong> <em> <mark> <small> <del> <ins> | 文章结构、价格划线、重点标注 | ★★★★☆ |
| 列表 | 有序/无序/定义 | <ul> <ol> <li> <dl> <dt> <dd> | 导航、菜单、规格参数、FAQ | ★★★★ |
| 超链接 | 跳转 | <a href="" target="_blank" rel="noopener noreferrer"> | 所有站内外跳转（永远别忘了 rel） | ★★★★ |
| 媒体 | 图片/视频/音频 | <img src="" alt="" loading="lazy" width height> <picture> <source> <video> <audio> | 响应式图片、懒加载、视频播放器 | ★★★★ |
| 表单 | 用户输入 | <form> <input type="…"> <label for=""> <select> <button type="submit"> | 登录、搜索、留言、筛选 | ★★★★ |
| 表格 | 结构化数据 | <table> <thead> <tbody> <tr> <th scope="col/row"> <td> <caption> | 数据报表、对比表、课表 | ★★★☆ |
| 交互增强 | 原生组件（无需 JS） | <details> <summary> <dialog> <progress> <meter> <output> | FAQ 折叠、原生弹窗、进度条 | ★★★☆ |
| 其他语义 | 补充性强但不常单独用 | <figure> <figcaption> <time datetime=""> <address> <cite> <q> | 图文说明、发表时间、联系信息、引用 | ★★★ |
现代网页最常见的骨架写法（2025–2026 风格）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="这里写 120–160 字页面摘要">
<title>页面标题 | 网站名称</title>
<!-- 性能优化常用 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preload" as="style" href="critical.css">
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- 可选：PWA / 主题色 -->
<meta name="theme-color" content="#3a86ff">
</head>
<body>
<header>
<nav aria-label="主导航">
<!-- logo + 菜单 -->
</nav>
</header>
<main>
<article>
<header>
<h1>文章/页面主标题</h1>
<p class="meta">
<time datetime="2026-02-01">2026年2月1日</time> ·
作者：重阳
</p>
</header>
<section>
<h2>第一部分</h2>
<p>内容...</p>
<figure>
<img src="image.webp" alt="描述性强的 alt" loading="lazy" width="800" height="450">
<figcaption>图片说明文字</figcaption>
</figure>
</section>
<aside aria-label="相关内容">
<h3>你可能还喜欢</h3>
<!-- 相关文章卡片 -->
</aside>
</article>
</main>
<footer>
<p>© 2026 重阳的前端小站</p>
<nav aria-label="底部导航">
<!-- 备案号、友情链接、隐私政策等 -->
</nav>
</footer>
<!-- 脚本通常放最后，或使用 defer -->
<script defer src="app.js"></script>
</body>
</html>快速进阶标签使用技巧（2025–2026 真实项目常用）
- 响应式图片（必会）
<picture>
<source media="(min-width: 800px)" srcset="large.webp">
<source media="(min-width: 400px)" srcset="medium.webp">
<img src="small.webp" alt="产品图" loading="lazy" width="600" height="400">
</picture>- 原生折叠内容（取代一堆 JS）
<details>
<summary>问题：什么是 Web Vitals？</summary>
<p>Core Web Vitals 是 Google 衡量网页体验的三大指标……</p>
</details>- 原生对话框（未来会更流行）
<dialog id="login">
<form method="dialog">
<h3>登录</h3>
<input type="text" placeholder="用户名">
<button type="submit">确定</button>
<button type="button" onclick="document.getElementById('login').close()">取消</button>
</form>
</dialog>- 语义化时间（对搜索引擎友好）
<time datetime="2026-02-01T01:08:00-08:00">刚刚更新</time>一句话总结给初学者：
先把 语义化布局（header/nav/main/article/section/aside/footer）搭好，
再把 内容标签（h1~h6、p、strong、ul/ol、figure/img）填进去，
最后用 meta/link/script 做性能、SEO、无障碍优化。
你现在最想深入哪个部分？
- 表单标签全家桶（input各种type + 验证）
- 响应式图片与 写法细节
- 语义标签在实际SEO中的真实影响
- 如何用最少的div写出现代页面布局
- 无障碍（a11y）相关标签与属性
随时告诉我～
