企业官网建设流程全解析

在搜索框敲下“HTML5 语义标签学习笔记”这行字，联想结果里往往跟着“超级玛丽同人复刻版”“格斗游戏”“产品图册设计网站源码”“动画”这些词。刚开始我觉得它们是干扰项，后来越发觉得这是好事：语义标签这东西，靠背标签清单根本学不会，只有在真实的网页设计作业、游戏页面、图册站里反复踩坑，才能真正理解。这篇笔记，就是我从这些热门实践里提炼出来的一套语义标签学法，适合正在做网页设计作业的学生、准备重构老页面的前端，以及所有被div套div折磨过的同行。

1. 先搞清楚语义标签到底在解决什么问题

1.1 语义化不是“换类名”，是给浏览器和协作队友一份契约

很多朋友第一次接触语义标签，第一反应是：把<div id="header">换成<header>，把<div class="nav">换成<nav>，这就是语义化。答案对了一半。真正的语义化，核心不是“标签长得像什么”，而是“标签表达什么”。<div>之所以叫无语义标签，不是因为它没有用，而是因为它对内容是什么、和其他内容有什么关系，一句话都不说。你在<div>上写个class="article-title"，浏览器和搜索引擎还得靠猜，才能知道这段文字是标题。

语义标签等于是一份写在HTML里的契约：<nav>明确告诉你“这里面是导航”，<article>明确告诉你“这段内容可以独立成篇”，<aside>明确告诉你“这是和主体相关但不是主线的补充信息”。浏览器拿到这份契约，能做无障碍读屏导航；搜索引擎拿到这份契约，能更准确地提取正文和链接关系；你同事拿到这份契约，不用翻CSS就能知道页面结构。说白了，语义化是给代码“长一张看得懂的脸”。

我在练习超级玛丽同人复刻版页面的时候，原版源码里基本是<div>套<div>，从stage-wrap到stage-inner再到stage-content，光看类名根本分不清哪个是关卡列表，哪个是角色说明。把结构换成<main>、<section>、<article>之后，哪怕不看CSS，也知道这个页面先讲关卡、再讲角色、最后是排行。这才是语义标签真正的价值。

1.2 搜索热词里的三个典型场景，恰好是语义化的三张考卷

你去看“html5 超级玛丽 同人复刻版”“html5 格斗游戏”“html5实现好看的产品图册设计网站源码”这些热词，会发现一个共同点：它们都是“内容结构比较复杂”的页面。游戏页面里有说明、有操作面板、有排行；产品图册里有组图、有标题、有说明文字。复杂内容一旦只用<div>堆，就会变成“标签地狱”。

以马里奥复刻版为例：角色的跳跃说明、关卡列表、排行榜、游戏画布，谁先谁后、谁嵌套谁，在语义标签体系里非常明确。游戏画布用<canvas>表示实际渲染区域，操作说明和角色介绍用<article>或<section>区分，排行榜用<aside>放成侧边内容。格斗游戏更典型，血条、连招记录、计时器，可以分别用<section>和<progress>表达。

产品图册则是另一种考法：很多组图页面习惯用<div class="goods-item">，但<figure>加<figcaption>才是专门为“图片加说明”这组关系设计的。语义标签不是让你不用<div>，而是把“哪些内容属于同一组”“哪句话是图片的说明”“哪个区块是页面主体”这些关系，用最直接的标签表达出来。这三张考卷，基本覆盖了网页设计里最常遇到的内容组织问题。

1.3 我建议的学习路线：先骨架、再血肉、最后排坑

语义标签看起来是几十个标签，真正高频使用的其实不超过20个。别一上来就背列表，容易晕。我推荐的路线分三步走。

第一步，先掌握文档骨架级标签：<header>、<footer>、<nav>、<main>、<article>、<section>、<aside>。这7个标签能搭出90%页面的整体结构，就像房子的承重墙和房间划分。

第二步，再学内容描述级标签：<figure>、<figcaption>、<time>、<mark>、<details>、<summary>、<progress>、<meter>。这些标签负责解释内容细节，比如图片说明、时间信息、临时标记、展开折叠、进度状态。它们不会影响整体布局，却能让内容关系更精确。

第三步，才是踩坑。我强烈建议你找一个真实项目练手，最好是现成的、能跑起来的页面，比如网上常见的HTML5游戏复刻版脚本。把它的<div>改成语义标签，一边改一边看布局有没有“跳变”。这个过程会逼你理解浏览器默认样式、标签嵌套规则、以及“无语义标签”在某些场景下确实更有优势。理论学习一天就能完成，踩坑记录才是你真正吃透语义化的开始。

2. 核心标签逐个拆解与实操要点

2.1 文档骨架级：header/nav/main/article/section/aside/footer

这组标签是所有页面结构的底座。我用一个表格把它们的用途、出现位置和注意事项理一遍。

我用一个实际结构来说明它们的嵌套关系。以“HTML5格斗游戏”的说明页为例：

<header> <h1>像素格斗游戏手册</h1> <nav aria-label="主菜单"> <a href="#intro">游戏介绍</a> <a href="#guide">出招表</a> <a href="#rank">排行榜</a> </nav> </header> <main> <article id="intro"> <h2>游戏介绍</h2> <p>这是一款基于Canvas渲染的像素格斗演示项目。</p> </article> <section id="guide"> <h2>出招表</h2> <p>方向键控制移动，J键拳击，K键踢腿。</p> </section> <aside id="rank"> <h2>本周排行榜</h2> <ol> <li>Player_A - 9800分</li> <li>Player_B - 8520分</li> </ol> </aside> </main> <footer> <p>© 练习项目，素材仅用于学习。</p> </footer>

实际操作中，最容易犯的错误是把<article>和<section>用反。判断标准很简单：如果这段内容单独拿出去发一条朋友圈或一篇博客，意思依然完整，就用<article>；如果只是大主题下的一个章节，离不开上下文，就用<section>。比如“出招表”虽然单独看也完整，但它属于游戏手册这个大主题的一部分，用<section>更合适；而“某位角色的攻略文章”可以独立分发，就该用<article>。

另外要特别注意<main>的唯一性。很多人喜欢在多个页面都放<main>，或者在一个页面放两三个<main>，这是不合格的。<main>代表页面主体内容，只应出现一次。在超级玛丽同人复刻版这类单页应用里，<main>外面是<header>和<footer>，里面是各个<section>，这样屏幕阅读器跳转正文时可以直接定位。

2.2 内容描述级：figure/figcaption/time/mark/details与progress的实战姿势

骨架标签负责“分房间”，内容描述级标签负责“贴标签”。这一组标签虽然不影响大布局，但最能体现一个前端对语义化的理解深度。

<figure>和<figcaption>是我在看完一堆产品图册源码后最想强调的一组。很多图册页面的HTML长这样：

<div class="product"> <img src="mario-stand.png" alt="站立状态"> <p>角色默认站立姿态，可用于待机动画。</p> </div>

问题在于，<p>和图片之间没有“绑定关系”。如果用<figure>包住图片和说明，再用<figcaption>专门写说明，浏览器就知道这段文字是在描述图片：

<figure> <img src="mario-stand.png" alt="角色默认站立姿态"> <figcaption>角色默认站立姿态，可用于待机动画。</figcaption> </figure>

<figure>里的内容未必是图片，还可以是代码块、音频、视频，甚至一组表格。但核心规则是：<figcaption>如果想用，必须是<figure>内部的第一个或最后一个元素，不能乱放。

再看<time>标签。它在页面上默认样式没有任何变化，但价值在于机器可读的时间格式。比如关卡计时：

<p>本关最佳纪录：<time datetime="PT1M32S">1分32秒</time></p>

datetime属性里用的是ISO 8601格式，机器能解析，浏览器插件能直接把它标记到日历或提醒事项里。做网页设计作业时写“2025年6月1日上线”，不如写成<time datetime="2025-06-01">2025年6月1日</time>，这属于一眼就能看出的专业细节。

<mark>是用来做“高亮标记”的，语义是“因为与当前上下文相关，所以标出来”，不是单纯的黄色背景。比如在格斗游戏攻略里，玩家搜索“必杀技”关键词后，命中位置可以用<mark>包裹：<p>当对手血量低于30%时，<mark>必杀技</mark>可以造成额外伤害。</p>。如果只是想画个黄颜色背景，用CSS更合适。

<details>和<summary>是原生折叠面板。很多人在图册站里做“商品参数”折叠，习惯堆div + JavaScript，其实两个标签就够了：

<details> <summary>查看关卡攻略</summary> <p>第一关隐藏砖块在第三个水管右侧第二块砖。</p> </details>

点击<summary>就能展开和收起，默认样式自带箭头。如果觉得箭头不好看，可以通过CSS的::-webkit-details-marker调整，但对作业和学习项目来说，原生交互已经够用。

<progress>和<meter>也建议成对理解。先看代码：

<p>当前关卡进度：<progress value="6" max="10">60%</progress></p> <p>角色攻击力：<meter value="0.7">70%</meter></p>

<progress>表示任务完成的进度，强调“进行中”；<meter>表示某种度量值，比如磁盘使用量、评分、攻击力，强调“当前状态”。在格斗游戏页里，血条用<meter>更贴切，关卡加载进度用<progress>更贴切。拿不准时就直接看语境：是“还要多久”，还是“目前多少”。

2.3 语义标签最常见的三个误区

第一个误区是“所有div都要替换成语义标签”。这是新手最容易走偏的地方。语义化不等于消灭<div>。很多纯粹用来布局的容器，比如图片轮播的轨道、网格系统的列、弹窗遮罩，都是纯功能性容器，没有独立语义，强行改成<section>或<article>反而会让阅读器读出一堆无意义的标题和分组。正确的做法是：先想这个容器在“内容语义”上到底代表什么，如果什么都不代表，就安心用<div>。

第二个误区是“section里必须放h1到h6，否则不合格”。规范确实建议<section>需要标题，但现实里很多<section>只是用来给CSS做主题分区，强行加标题会让页面结构显得生硬。我的做法是：如果这个<section>有明确主题词，就加标题，同时用aria-labelledby指向它；如果确实没有标题，那就用<div>，别硬塞。

第三个误区是“语义标签会自动提升SEO排名”。这是我在排查网页设计作业时反复听到的说法。准确讲，语义标签不直接提权，但它能帮助搜索引擎建立更准确的内容结构。比如<article>中的正文，会比<aside>里的内容更容易被判定为页面核心内容；<nav>里的链接，会被识别为站点导航而不参与正文关键词密度计算。间接价值确实存在，但别指望换个标签就能冲排名。

2.4 30秒选出合适标签的实用判断顺序

找一个一眼能用的判断顺序，能省掉大量纠结时间。我把自己的判断流程写出来，你在实战中照这个顺序走，基本不会跑偏。

第一步，问自己：这个元素是不是页面里独一无二的主内容容器？是就用<main>。

第二步，问自己：它是不是一组互相关联的独立内容，可以单独分享或复用？是就用<article>。

第三步，问自己：它是不是一个话题下的子章节，需要和兄弟节点一起才能构成完整主题？是就用<section>。

第四步，问自己：它是不是页面主体的补充、解释、关联信息，删掉也不影响理解？是就用<aside>。

第五步，问自己：它是不是导航链接集合？是就用<nav>。

第六步，都没有明确语义，它就是一个布局容器或包裹器，用<div>既不丢人，也符合规范。

这组判断顺序我贴在公司内部前端群里后，反馈是“至少能解决80%纠结”。剩下20%，基本是边界情况，比如一个既像独立文章、又像章节的内容，那你就看它会被放在哪个场景里复用。如果在列表页里被复用，就用<article>；如果只是书里的一个章节，就用<section>。

3. 从“玛丽奥复刻版”到“产品图册”，两个练手项目的语义化改造实录

3.1 超级玛丽同人复刻版：游戏页面的语义化重构

我拿一个经典的超级玛丽同人复刻版页面来演示，这类项目在网上很火，源码也容易找到，但大部分实现都是<div>堆到底。学语义标签，最高效的练习就是把它重构一遍。

改造前，典型结构是这样的：

<div class="page"> <div class="header"> <div class="nav"> <a href="#stage">关卡选择</a> <a href="#guide">操作指南</a> <a href="#rank">排行榜</a> </div> </div> <div class="main"> <div class="stage-list"> <div class="stage-item"> <div class="stage-name">1-1 蘑菇王国</div> </div> <div class="stage-item"> <div class="stage-name">1-2 地下水道</div> </div> </div> <div class="guide"> <div class="guide-title">操作说明</div> <div class="guide-desc">方向键移动，空格跳跃</div> </div> </div> <div class="footer">© 复刻版练习项目</div> </div>

这个结构有两个明显问题：一是guide里的guide-title和guide-desc没有层级关系；二是stage-item是不是独立内容，语义上很模糊。重构后：

<header class="site-header"> <nav aria-label="主导航"> <a href="#stage">关卡选择</a> <a href="#guide">操作指南</a> <a href="#rank">排行榜</a> </nav> </header> <main> <section id="stage" aria-labelledby="stage-title"> <h2 id="stage-title">关卡选择</h2> <article class="level-card"> <h3>1-1 蘑菇王国</h3> <p>难度：入门，金币较多，适合熟悉操作。</p> </article> <article class="level-card"> <h3>1-2 地下水道</h3> <p>难度：进阶，注意水管处敌人刷新节奏。</p> </article> </section> <section id="guide" aria-labelledby="guide-title"> <h2 id="guide-title">操作指南</h2> <p>方向键移动，空格跳跃，Shift加速。</p> </section> <aside id="rank" aria-labelledby="rank-title"> <h2 id="rank-title">排行榜</h2> <ol> <li>Player_A：12500分</li> <li>Player_B：9800分</li> </ol> </aside> </main> <footer> <p>© 复刻版练习项目，素材仅用于学习交流。</p> </footer>

改造的核心变化点有三个：把顶层div换成了header/main/footer，页面骨架清晰；每个关卡卡片用article包裹，因为它在列表场景里可以被独立理解；操作指南和排行榜分别放进section和aside，阅读器能够区分“主线内容”和“侧边信息”。

这里要注意，游戏画布本身用什么标签？Canvas动画是实际渲染区域，它的语义标签是<canvas>加上role="img"，并且配一个aria-label或fallback内容。如果你在改造游戏页面，记得给<canvas>加aria-label，比如“游戏画面：马里奥在蘑菇王国中奔跑”，否则屏幕阅读器会把整块画布当空白区域。

3.2 产品图册设计网站：figure与figcaption的正确姿势

“html5实现好看的产品图册设计网站源码”这个热词下，不少源码的结构是满屏<div class="img-box">。这种写法最大的问题是：图片和图片标题、描述之间的关系完全依赖CSS类名，机器看不懂。我用一个三张图的图册示例来说明正确结构。

<main> <section class="album" aria-labelledby="album-title"> <h1 id="album-title">角色设定图集</h1> <article class="album-item"> <figure> <img src="mario-idle.png" alt="马里奥待机动作设定图"> <figcaption>待机动作：呼吸节奏为1.2秒循环，适用于菜单界面。</figcaption> </figure> </article> <article class="album-item"> <figure> <img src="mario-jump.png" alt="马里奥跳跃动作设定图"> <figcaption>跳跃动作：上升阶段0.3秒，下落阶段0.5秒。</figcaption> </figure> </article> <article class="album-item"> <figure> <img src="stage-map.png" alt="第一关地图规划图"> <figcaption>地图规划：总长度约3200像素，包含3个隐藏砖块。</figcaption> </figure> </article> </section> </main>

为什么每个图册项还要再包一层<article>？因为单个图册项“图 + 标题 + 说明”本身是独立的可复用内容，完全可以在首页、详情页、分享片段里单独出现。用<article>包<figure>，既能独立分发，又不破坏<figure>对图文关系的表达。

如果你在做一个规模较大的产品图册，可以用JavaScript循环生成上面这段结构，但要注意生成过程中保证alt和figcaption不是同一句话。alt描述图片内容本身，figcaption可以补充背景信息或使用场景。比如上面第一张图，alt强调“待机动作设定图”，figcaption补充“呼吸节奏1.2秒循环”。两者重复度太高时，阅读器会重复播报，体验反而不好。

3.3 动画与格斗游戏场景：状态和信息如何用语义化表达

“html5动画”和“html5格斗游戏”这两个热词，暴露了一个实际问题：很多人做动画或游戏页面时，以为只要<canvas>就够了。但真正完整的游戏页面，除了画布，还有操作说明、状态条、提示信息、更新日志。这些内容如果全是<div>，那画布里的世界再酷，页面结构依旧是一团浆糊。

以格斗游戏为例，血条、倒计时、连击数都是典型的“状态信息”。血条表示当前角色的生命度量，用<meter>非常合适；倒计时是“剩余时间”，本质还是进度类，用<progress>更好，虽然它不一定是“任务完成进度”，但也可以表达“时间消耗进度”。

<section aria-label="对战状态"> <p>玩家1血量：<meter id="p1-hp" min="0" max="100" value="63">63%</meter></p> <p>本局剩余时间：<progress id="round-timer" value="72" max="99">剩余72秒</progress></p> <p>连击段数：<output id="combo-count">12</output> 段</p> </section>

这里我特意用了<output>标签，它是HTML5里表示“程序计算输出结果”的语义标签，适合展示连击数这类实时变化的计算结果。配合JavaScript更新textContent，比用<span>更符合语义。

动画场景里的另一类内容是“时间线”或“逐帧说明”。比如马里奥跳跃动画的关键帧，可以用<ol>加<time>来表示每一帧的时间点：

<h2>跳跃动画关键帧</h2> <ol class="timeline"> <li> <time datetime="PT0S">0.0s</time> 起跳：后腿蹬地。 </li> <li> <time datetime="PT0.3S">0.3s</time> 上升段：角色上升至最高点。 </li> <li> <time datetime="PT0.8S">0.8s</time> 下落段：角色开始下落并准备落地。 </li> </ol>

datetime="PT0.3S"是ISO 8601里的“时间段”写法，PT表示时间段，0.3S表示0.3秒。机器能读，普通用户看到的是“0.3s”。这在小游戏、动画演示、图册展示里都很实用。

如果你在做动画页面时使用了Web Animations API或者requestAnimationFrame，别忘了把动画状态“说”出来。比如动画播放中，可以给按钮加aria-pressed，给进度区域加aria-live="polite"；这些不是HTML标签，但和语义标签搭配使用，无障碍体验立刻上一个台阶。

4. 排坑实录：语义标签跳变、兼容性与作业得分点

4.1 网上常提的“语义标签跳变”到底是什么问题

“语义标签跳变”是搜索热词，也是我刚开始改版时最头痛的现象。明明把<div id="header">改成<header>，其他什么都没动，页面布局突然“跳”了一下，类似高度瞬间塌陷或闪动。遇到这种情况，先别急着怀疑是自己代码写错了，大概率是浏览器默认样式和现代CSS之间的老问题。

原因一：HTML5新元素在老旧浏览器里默认是display: inline。<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>这些标签，在HTML5之前并没有被浏览器默认定义。旧浏览器遇到未知标签，会把它当作行内元素处理。行内元素不能设置宽高、margin上下边距，于是容器高度塌陷，看起来就像页面“跳变”。解决方法是给这些标签显式设置display: block。

原因二：页面加载过程中的FOUC（Flash of Unstyled Content）。CSS文件还没加载完，页面先用默认样式渲染了一遍，等CSS加载之后再渲染一遍，视觉上就是一次跳变。语义标签本身不制造FOUC，但如果你用语义标签重写了结构，而CSS里又用display: block修正了默认样式，这种“两段式渲染”会更明显。

原因三：CSS reset不彻底。不同浏览器对h1、p、ul这些元素的默认margin/padding不同。当你把<div>改成<section>后，<section>里的h1的默认外边距会被保留，而之前div里面h1的margin可能已经被reset覆盖。于是改版前后段落间距出现差异，看起来就像“跳变”。

下面是在我自己项目里稳定起效的修正方案：

html, body, header, nav, main, article, section, aside, footer, figure, figcaption, details, summary, mark, progress, meter, time { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } header, nav, main, article, section, aside, footer, figure, figcaption, details, summary, mark, progress, meter { display: block; }

这一套“reset + block化”写在CSS最前面。如果你的目标浏览器是近五年的Chrome、Edge、Firefox、Safari，第二条甚至都可以省掉，因为它们已经正确实现了默认样式。但做网页设计作业时，老师可能用旧版浏览器打开检查，所以保留这一段更稳。

4.2 浏览器默认样式的兼容策略与现代实践

语义标签的兼容性问题，在2025年的今天已经不那么严重，但并没有完全消失。如果你还在维护老项目，或者作业环境要求兼容旧系统，请记住下面这组策略。

策略一：重置默认显示模式。把header/nav/main/article/section/aside/footer/figure/figcaption/details/summary统一设置为display: block。这是兼容性最基础的一步，代码见上面。

策略二：针对更老的浏览器，使用JavaScript补齐元素创建。原理是，旧浏览器遇到未知标签时，只要通过document.createElement('header')先“注册”一下，就能正确解析。现在基本不需要手动写，可以直接引入html5shiv这类补丁。不过在2025年，主流项目基本已经不需要它，只在特定系统环境里才会遇到。

策略三：善用CSS特性查询。如果你用了<template>、<dialog>这种更新一点的语义或交互标签，可以用@supports判断：

@supports (display: grid) { .album { display: grid; grid-template-columns: repeat(3, 1fr); } }

这样即使旧浏览器不支持新特性，也不会出现整体布局崩坏。

还有一个容易忽略的点：移动端浏览器对<input type="date"><progress><meter>的默认样式差异非常大。语义标签选择没问题，但在移动端请务必加自定义样式。我在产品图册页里用<meter>显示角色攻击力时，机型一换，颜色和位置全不一样，最后是自己重新写了一套-webkit-appearance: none样式才统一。这类“跨端样式差异”才是排坑的重点。

4.3 SEO与无障碍自查清单

语义标签不会直接让网站排名飙升，但它能显著改善搜索时对内容结构的理解。我整理了一份自查清单，每次页面发布前，按顺序过一遍，比临时百度“如何优化SEO”高效得多。

• 页面是否只有一个<main>？检查方法：DevTools里搜索main标签，出现一次才正常。
• 是否只有一个<h1>？通常一个页面只保留一个h1作为核心标题，其他标题从h2开始逐级递减。
• nav是否清晰？有多个导航时，是否用aria-label区分了“主导航”“页脚导航”？读屏用户需要靠它跳转。
• 所有图片是否都有恰当的alt？不仅仅是装饰性图片；纯装饰图建议用alt=""跳过读屏。
• figure是否配了figcaption？如果figure里只有一张图，确实不强制；但只要图片有说明文字，就必须用figcaption建立关联。
• 表单控件是否与<label>绑定？特别是游戏设置、筛选器这类交互元素，for和id要对得上。
• 是否用了<time datetime>标注时间？这是很多网页设计作业里被忽略的加分项。
• 文本是否避免在<div>里塞标题？标题应该使用h1到h6，不要用span加CSS模拟。

这些点我全踩过。最典型的是在格斗游戏页面里，我把整个操作面板塞进<aside>，结果操作说明在搜索摘要里被当成了次要内容。后来才意识到，操作说明是游戏页面的核心功能，不应该放在aside里，应该放到<main>下的<section>中。语义化不是“用了标签就完事”，还要思考内容在整张页面中的权重。

4.4 网页设计作业里如何用语义标签拿高分

如果你正在找“html5网页设计作业”相关素材，这篇笔记绝对对你有用。老师布置HTML5作业时，通常希望看到两件事：一是你会用HTML5的新能力（canvas、video、audio、语义标签），二是页面结构有逻辑、有可访问性。仅凭<div>和<span>，这两个目标一个都达不成。

想在作业里体现语义标签的功力，不要堆砌标签数量，而要体现“选得对”。我建议至少做到以下四点：页面结构使用header/nav/main/section/footer，让老师一眼看到语义化骨架；图册或角色展示使用figure/figcaption，显示图文关系；时间、进度、标注等小细节使用time/progress/mark；表单里给每个输入控件关联label，体现无障碍意识。

如果作业允许自选主题，别再做千篇一律的静态介绍页。你可以做一个“角色测评页”，左侧用aside展示角色属性，右侧用main里的section展示技能介绍，再放一段canvas动画演示技能效果。既炫技，又自然用上了语义标签。老师看到你能把aside和main的主次关系理清楚，分基本不会低。

另外，提交作业前一定要用W3C的HTML验证器跑一遍。常见问题包括：section里没有标题、figcaption放错了位置、main重复出现、time的datetime格式错误。这些错误在语义化作业里非常扎眼，一旦出现，会抵消掉前面所有加分项。

最后再分享一个我一直沿用的检查技巧：打开浏览器DevTools，在Console里粘贴下面这行代码，能快速列出当前页面的语义标签全景：

[...document.querySelectorAll('header, nav, main, article, section, aside, footer, figure, figcaption, time, mark, details, summary, progress, meter')].map(el => el.tagName.toLowerCase()).join(' > ')

把页面从头到尾扫一眼，语义结构合理不合理、哪里嵌套太深、哪里主体不明确，全都清楚。我每次重构完别人的游戏复刻或者图册源码，都会先用这段代码确认结构，再微调标签位置。语义标签的学习没有终点，但只要你每次写页面都“多想一层这个容器到底在表达什么”，用不了多久，你就能从一堆div里看出别人看不出的结构层次。