HTML常用标签深度实战：语义化、表单与可访问性避坑指南
2026/10/16 3:51:20
网站建设
项目流程
写过几年页面，我一直有个感受：HTML标签看起来是最入门的东西，真正上手项目之后，反而是最容易被低估的一环。刚接触前端的人，对着教程敲几遍<div>、<p>、<img>，觉得“这不就是几个标签吗”；等真去维护一个内容还不错的站点、或者给一个表单页面做无障碍改造，才发现很多常用标签的细节自己根本没吃透。这篇就专门聊HTML常用标签，不是把标签清单念一遍，而是从实际开发角度讲清楚每个高频标签什么时候用、为什么用、怎么用才能少踩坑。
1. 搭建页面骨架：从文档声明到内容分块
1.1 DOCTYPE、语言和编码：三个最容易被忽略的标签
先看一个几乎每个页面都必须写、但很多人并不完全理解的部分。<!DOCTYPE html>出现在文档最顶部，好多同学知道要写，却不清楚它到底解决什么问题。DOCTYPE的核心作用是告诉浏览器“接下来请用标准模式解析我这份文档”。如果不写或者写错，旧版浏览器可能进入怪异模式，盒模型的计算方式都不一样，一个width: 100%都可能表现得让你怀疑人生。
如果你打开一个老项目，发现页面在浏览器里总差那么几个像素，第一步就去看看DOCTYPE。现在基本统一写<!DOCTYPE html>，没有版本参数，干净利落。接下来是<html>标签，我建议把lang属性养成习惯写掉：<html lang="zh-CN">。这个属性影响屏幕阅读器的发音、浏览器的翻译建议、还有页面的语言元信息。始终记得一件事：标签不只是给浏览器看的，也是给机器和辅助工具看的。
<head>区域里，<meta charset="UTF-8">属于“不写一定会出事”的标签。早年有些页面用的是gb2312，一旦服务器和页面编码不一致，中文直接变乱码。现在统一UTF-8，还要把<meta charset="UTF-8">放在<head>靠前的位置，编码声明越早，解析器越早进入正确状态。
`标签也属于页面结构的关键一环，它影响搜索结果标题和浏览器标签页显示，很多后台系统干脆不写或者直接写死成项目名，其实对SEO和可访问性都不友好。</p> <h3>1.2 标题、段落与列表：把文字内容组织起来</h3> <p>标题标签<code><h1></code>到<code><h6></code>是页面信息层级的主干。一个页面通常只保留一个<code><h1></code>，放站点名称或者页面核心标题，下面的区块标题用<code><h2></code>、<code><h3></code>逐层降级。我见过很多新手为了调字号方便，把<code><h2></code>当<code><h4></code>用，或者反过来，折腾样式时可能没感觉，搜索引擎和屏幕阅读器对页面结构的判断会乱掉，大纲里跳级得非常明显。标题标签该承载的是“层级”，不是“视觉效果”。如果你觉得默认字号太大，去改CSS，不要选一个错误的标签将就。</p> <p>段落标签<code><p></code>也是高频标签。很多人的误用是用<code><br></code>去制造段落间距，一个回车不够就多个<code><br></code>叠加。<code><br></code>的语义是“在同一个段落里强制换行”，而不是“制造两个段落”。真正的段落分隔应该用<code><p></code>，段落间距用CSS的<code>margin</code>控制。在一块内容里连用<code><br></code>其实是在告诉辅助技术“这还是一条连续内容”，对阅读体验和SEO都没有好处。</p> <p>列表构建信息结构同样常用：无序列表<code><ul></code>适合导航菜单、功能列表；有序列表<code><ol></code>适合步骤、排行榜这类顺序敏感的内容；每一项都用<code><li></code>包裹。写导航时最常见的做法就是<code><nav><ul><li><a></code>全套组合，这样既方便CSS定位，也符合语义。要特别提醒：<code><ul></code>和<code><ol></code>的直接子元素只能是<code><li></code>，如果你在中间塞一个<code><div></code>包一层，看起来没报错，HTML结构已经不算规范了。列表嵌套是可以的，比如多级菜单里在某个<code><li></code>内部再放一个<code><ul></code>，这种结构合理。</p> <h3>1.3 用对 div、section、article：块级容器的选择逻辑</h3> <p><code><div></code>是整个HTML里最常见的容器，但它也是语义最弱的标签。所谓“无语义”，就是它只负责把内容包成一个块，方便你布局、写样式、挂事件。一个人如果整个页面全部用<code><div></code>，结构能跑通吗？能。但对于阅读代码的人来说，导航和正文没有任何区别，找起来全靠硬记。这个项目如果只有你写，问题还不大；一旦交接或者协作，别人想快速理解页面分区就很难。</p> <p>常规做法是：先根据内容性质选择语义化标签，找不到合适的再用<code><div></code>兜底。比如一篇博客的一篇文章，外面可以用<code><article></code>；一个独立的内容区块，比如侧边栏的一个推荐模块，可以用<code><section></code>；页面页脚用<code><footer></code>；顶部用<code><header></code>；主导航用<code><nav></code>。这样划分完，剩下的纯粹用来排版包装的块，再交给<code><div></code>。</p> <p><code><section></code>和<code><article></code>的区别很多新手容易搞混。我的理解是这样：<code><article></code>强调“独立成篇”，单独拿出来也成立，比如一篇文章、一个评论、一个产品卡片；<code><section></code>强调“按主题分组”，它是一页里有主题意义的一部分内容，一般会有自己的标题。实际项目里，一个<code><article></code>里可以包含多个<code><section></code>，比如一篇技术文章的“背景”“实现”“总结”章节。反过来，一个<code><section></code>也可以包含若干<code><article></code>，比如首页的“最新文章”区域里放了五篇文章。重点是选择时先想内容关系，再落到标签上。</p> <h3>2. 链接、图片与多媒体标签：日常开发的高频操作</h3> <h3>2.1 a 标签的完整参数与安全细节</h3> <p><code><a></code>标签最常见的形式是<code><a href="https://example.com">链接文字</a></code>。<code>href</code>是跳转地址，写法有不少讲究。站内链接尽量用相对路径，比如<code>/about.html</code>，这样换域名不用改链接；站外链接用完整URL。还有一个很多人忽略的点：<code>href</code>也可以指向<code>mailto:</code>和<code>tel:</code>，比如<code><a href="tel:12345678">联系电话</a></code>，在手机上可以直接唤起拨号界面，这在很多活动页和联系页面里相当实用。</p> <p><code>target="_blank"</code>也是高频但容易被误解的属性。它的作用是让链接在新标签页打开。这里有个绝大多数教程不会专门讲的安全细节：加了<code>target="_blank"</code>的链接，最好同时加上<code>rel="noopener noreferrer"</code>。原因是新打开的页面通过<code>window.opener</code>能反向操作原始页面，加上<code>noopener</code>之后这种能力被切断。我在实际项目里遇到过因为漏掉这个属性，被安全扫描工具标出来的情况，后来就形成了习惯：所有新窗口打开的链接，一律带上<code>rel="noopener noreferrer"</code>。</p> <p><code><a></code>标签还有个容易被忽略的功能：页内锚点。<code><a href="#section-name">跳到指定区块</a></code>配合带<code>id</code>的元素使用。注意<code>id</code>在页面里必须唯一，否则浏览器只会跳到第一个匹配的位置。有些前端单页应用会用<code><a href="#"></code>来占位防止跳转，但这样会让URL多一个<code>#</code>，而且点击后可能跳到页顶。更好一点的做法是用<code><a href="javascript:void(0)"></code>或者干脆用<code><button></code>，这取决于点击行为到底是“跳转”还是“触发交互”。</p> <h3>2.2 img 标签的响应式与懒加载参数</h3> <p><code><img></code>标签的属性比很多人以为的多。最基本的<code>src</code>是图片地址，<code>alt</code>是图片无法显示时的替代文字，也是屏幕阅读器的重要输入。<code>alt</code>不是随便写几个字就行，关键是要描述图片传达的信息。图片是一张产品图，<code>alt</code>写产品名和关键特征；图片是纯装饰，<code>alt</code>可以留空<code>alt=""</code>，这样辅助工具会跳过它，而不是读出一堆无意义的文件名。有人喜欢把<code>alt</code>当成SEO关键词堆砌位，这种操作风险很大，搜索引擎对过度堆砌已经识别得比较好了。</p> <p>响应式图片有两个主流属性：<code>srcset</code>和<code>sizes</code>。它们的组合方式是：<code>srcset</code>列出多个图片地址及各自宽度描述，比如<code>image-480.jpg 480w, image-800.jpg 800w</code>；<code>sizes</code>告诉浏览器这个图片在页面上大概占多少宽度，比如<code>(max-width: 600px) 100vw, 600px</code>。浏览器根据这两项信息自行决定加载哪张图。这个机制本身不复杂，但实际测试时要留意：浏览器还会考虑设备像素比和网络状况，选图逻辑不一定完全符合你的预期，所以关键图片建议自己多测几种视口。</p> <p>懒加载属性<code>loading="lazy"</code>是提升首屏性能的简单手段。给首屏以下的图片加上它，浏览器会在图片接近视口时才加载资源。注意别给首屏的<code><h1></code>旁边的那张关键图加<code>lazy</code>，否则会影响LCP指标，反而对性能不利。现在主流浏览器都支持原生懒加载，比早期的JS方案可靠得多。宽高属性<code>width</code>和<code>height</code>也建议写上，浏览器可以通过它们预先占位，减少图片加载完成后的布局跳动。</p> <h3>2.3 audio / video / figure：媒体内容的标签化写法</h3> <p><code><audio></code>和<code><video></code>在HTML5时代已经不算新鲜。基本的写法是<code><video src="movie.mp4" controls></video></code>，加上<code>controls</code>才会显示播放控制条。我记得音频和视频标签以前还要靠第三方插件，现在已经变成纯浏览器能力，但要注意编码格式兼容性。视频为了兼容不同浏览器，可以写多个<code><source></code>标签，浏览器会依次尝试，直到找到能播放的格式。</p> <p><code><video></code>还有两个常用属性：<code>poster</code>指定视频封面的图片地址；<code>preload</code>控制预加载策略，可选<code>none</code>、<code>metadata</code>、<code>auto</code>。对内容页来说，视频最好用<code>preload="metadata"</code>，只加载第一帧或元数据，避免一打开页面就下载整个视频文件，流量消耗非常可观。考虑到移动端用户流量，这个细节值得关注。</p> <p><code><figure></code>和<code><figcaption></code>是图片、代码片段、图表这类“独立内容”的好搭档。我常用它的场景是博客配图：<code><figure><img src="photo.jpg" alt="某截图"><figcaption>图1：运行结果示意</figcaption></figure></code>。这样做的好处是，图片和说明文字在结构上绑定在一起，页面排版和SEO都能更好地理解两者关系。以前很多人直接用<code><p></code>包图片加一行说明文字，标签语义不够清晰，用<code><figure></code>之后会更明确。</p> <h3>3. 表格与表单标签：踩坑率最高的两个大类</h3> <h3>3.1 表格结构：thead、tbody、th、scope 一个都不能少</h3> <p>早年很多页面用<code><table></code>做布局，一个页面的结构全在表格里嵌套，维护难度极高，现在已经不推荐了。但表格标签本身用在数据展示领域完全正当，它依然是表达二维数据语义最佳的标签。标准结构是<code><table></code>包着<code><caption></code>、<code><thead></code>、<code><tbody></code>、<code><tfoot></code>。<code><thead></code>里放列标题，用<code><th></code>而不是<code><td></code>；<code><tbody></code>里放数据行，用<code><td></code>；<code><tfoot></code>放汇总行。这样分块以后，表格很长时阅读也清晰，而且方便单独设置表头样式。</p> <p><code><th></code>的<code>scope</code>属性很有用：<code>scope="col"</code>表示该单元格是列的表头，<code>scope="row"</code>表示是行的表头。比如学生成绩表里，第一列是学生姓名，每个姓名格子就可以写<code><th scope="row"></code>。屏幕阅读器拿到这个信息后，就能把数据项和对应的表头关联起来，朗读时不会让人分不清这一格到底是什么。这个属性写成习惯之后，表格的可访问性会明显提升。</p> <p>关于表格，这里有一个查代码的习惯可以分享：如果表格在前端框架里渲染出来行数不对，或者表头和数据列对不齐，优先检查<code>colspan</code>和<code>rowspan</code>。这两个属性负责单元格合并，单个数字写错经常导致整列错位，而且这种问题在视觉效果上可能非常隐蔽，要逐个单元格检视才能定位。</p> <h3>3.2 form、input、label：表单的基本构成</h3> <p><code><form></code>标签是表单的根容器，<code>action</code>指定提交地址，<code>method</code>指定提交方式。实际开发里，很多页面是SPA，提交逻辑由JavaScript接管，于是有人干脆不写<code>action</code>。我不建议完全省略，至少保留一个合理的<code>action</code>地址，一方面语义完整，另一方面也方便未来的SEO和无障碍适配。</p> <p><code><label></code>标签的重要性常常被低估。它可以通过<code>for</code>属性关联到对应控件，比如<code><label for="username">用户名</label><input id="username" type="text"></code>。点击label文字时，焦点会自动落到输入框，这个交互在单选和复选框上尤其明显，点中文字就能选中选项，操作面积一下子大了很多。<code>for</code>和控件的<code>id</code>必须完全一致，否则关联失效。还有一种写法更简洁：直接让<code><label></code>包裹<code><input></code>，比如<code><label>用户名<input type="text"></label></code>，效果一样，写法更少，但在复杂布局中可能不够灵活。</p> <p><code><input></code>的类型选择是表单开发的核心环节。<code>type="email"</code>、<code>type="number"</code>、<code>type="tel"</code>、<code>type="url"</code>这些类型会启用浏览器原生校验和不同的移动端键盘。比如<code>type="email"</code>在手机端会弹出带<code>@</code>和<code>.com</code>的键盘，用户体验明显好过普通文本键盘。<code>type="password"</code>会隐藏输入内容，<code>type="checkbox"</code>是复选框，<code>type="radio"</code>是单选按钮，<code>type="file"</code>是文件选择框。<code>placeholder</code>只是输入提示，不是替代<code>label</code>的方案，从无障碍和可用性角度，<code>label</code>仍然建议保留。</p> <h3>3.3 select、textarea、fieldset：高级表单控件与分组</h3> <p><code><select></code>下拉选择框由<code><select></code>和多个<code><option></code>构成。如果选项很多，可以加<code><optgroup label="分组名"></code>把选项分成一组一组，比如地区选择时按省份分组，视觉效果和操作体验都会提升。<code><select></code>默认是单选，加上<code>multiple</code>属性后可以多选，但操作体验一般，一般不建议移动端用多选下拉，改成一排复选框可能更直观。</p> <p><code><textarea></code>是多行文本输入框。它和<code><input></code>不一样，不是自闭合标签，内容写在开始和结束标签之间。需要注意它的默认样式在不同浏览器里略有差异，实际项目中通常需要重置<code>resize</code>属性，比如<code>resize: vertical</code>。<code>rows</code>和<code>cols</code>属性可以控制默认行数和列数，但现在更推荐用CSS控制宽高。</p> <p><code><fieldset></code>和<code><legend></code>负责给表单控件分组。比如一页里有“收货人信息”“支付方式”两个区块，用<code><fieldset></code>包起来，再用<code><legend></code>说明这组信息的名字。对屏幕阅读器来说，它会把这组控件和<code><legend></code>内容一起朗读，用户更容易明白哪些选项属于同一组。早年大家觉得<code><fieldset></code>默认样式太丑，很少用；现在配合CSS重置，完全没有问题。分组逻辑清晰的表单，看似小的细节，实际对整个表单理解成本影响很大。</p> <h3>4. 语义化与可访问性：让标签服务用户而不只是浏览器</h3> <h3>4.1 语义化标签速查与适配场景</h3> <p>语义化是HTML标签使用中最值得花时间的一块。平时最常用的语义标签可以列一个简单清单。<code><header></code>：页头、区块头部；<code><footer></code>：页脚、区块底部；<code><main></code>：页面主体内容区域，一个页面一般只有一个；<code><nav></code>：导航部分；<code><aside></code>：侧边栏、与主体内容关系不太直接的补充信息；<code><article></code>：独立内容单元；<code><section></code>：主题分组。<code><main></code>尤其建议每个页面都明确标出来，它可以帮助屏幕阅读器等辅助工具快速跳到页面核心内容，是很多无障碍优化里的关键一步。</p> <p>实际页面里，区块嵌套的语义讲究的是“符合内容逻辑”，不是“套标签越多越好”。你完全可以在<code><header></code>里再放一个<code><nav></code>，在<code><article></code>里再放一个<code><header></code>，这是允许的。关键是区分边界：最外层的<code><header></code>是页头，文章内部的<code><header></code>是文章头部。如果拿不准，就退后一步看内容：“这个部分抽出来之后，它在语义上是一个完整的单元吗？是的话用<code><article></code>；它只是整体的一部分且有自己的主题，就考虑<code><section></code>。”</p> <p><code><details></code>和<code><summary></code>是“折叠面板”的原生实现，我越用越觉得顺手。<code><details></code>定义可展开区域，<code><summary></code>作为可见的标题，点击后会展开里面的内容。过去要实现一个“展开更多”的效果，通常要写JS控制<code>display</code>，现在原生标签就能完成，而且对键盘操作和辅助工具的支持都很稳定。如果希望默认展开，加一个<code>open</code>属性即可。这个标签适合FAQ、操作说明、查看更多信息这类场景。</p> <h3>4.2 属性级别的无障碍细节：alt、label、aria</h3> <p>上面讲过的<code>alt</code>、<code>label</code>其实是无障碍体系里的重要组成部分，这里再展开说几个属性级的细节。按钮<code><button></code>默认就是键盘可聚焦、可点击的，不需要额外加<code>tabindex</code>或鼠标事件；但如果你为了样式方便，把一个<code><div></code>加上<code>onclick</code>当按钮用，就需要自行管理焦点和键盘事件。我的建议很简单：能用<code><button></code>就绝不换别的标签。</p> <p><code>aria-label</code>可以为元素提供无障碍名称。比如一个关闭按钮只有<code>×</code>符号，屏幕阅读器读出来可能就是“乘号”或者“关闭按钮”都读不出来。这时候在按钮上加<code>aria-label="关闭弹窗"</code>，设备就会清楚朗读这个按钮的作用。注意<code>aria-label</code>主要用于没有可见文字但语义需要说明的控件，不要滥用。如果一个元素本来就有可见的<code><button></code>文字，就没必要重复加<code>aria-label</code>。</p> <p><code>aria-hidden="true"</code>用于把装饰性的内容从无障碍树中移除。典型场景是图标字体里的装饰性图标，如果图标本身不传达额外信息，就可以加这个属性，避免屏幕阅读器朗读无意义的字符。还有一个实用建议是表单校验出错时，用<code>aria-describedby</code>指向错误提示文本的<code>id</code>。这样输入框获得焦点时，辅助工具会自动朗读相关错误描述，对复杂表单很有价值。</p> <h3>4.3 容易被忽略的细节：title、lang、focus</h3> <p>看到标题可能有人觉得奇怪，title标签不是已经讲过了吗？这里说的是另一层意思。在标签体系里，<code>title</code>属性可以加在很多元素上，比如图片上悬停显示说明，或者链接上显示完整地址。但要注意：<code>title</code>属性在触屏设备上不起作用，所以如果某个信息很重要，不要只放在<code>title</code>里，它只能作为辅助性提示。</p> <p><code>lang</code>属性的作用也不局限于<code><html></code>。如果页面大部分内容是中文，但文章中引了一段英文，可以在外层加<code>lang="en"</code>，这样屏幕阅读器会用对应的语言规则朗读这段英文。这个细节很少人在意，但对特殊用户群体来说影响实实在在。同理，不同语言的文本混杂时，<code>lang</code>的标记越准确，自动翻译工具的效果也越好。</p> <p>焦点管理是标签使用中有点进阶的话题，但很值得提一下。页面弹出一个模态框时，焦点应该移入弹窗内部，关闭后再回到触发按钮，这是完整键盘操作体验的一部分。原生<code><dialog></code>标签支持一部分焦点管理，但兼容性不如老项目里手动实现。如果你用自定义组件做弹窗，起码要做到：弹窗打开后焦点进入弹窗，弹窗关闭后焦点回落到原按钮位置，用Tab键循环时不跑到页面背景里。这些看起来不是“常用标签”的问题，但全部由标签和属性配合实现。</p> <h3>5. 完整示例：把常用标签拼成一个真实页面</h3> <h3>5.1 页面结构与头部导航的实现</h3> <p>用一个实际例子把前面讲的内容串起来，这也是我给团队做演示时常用的一套模板。假设要做一个小型内容站页面，包含顶部导航、文章列表、侧边栏和一个简单联系表单。页面最先写文档声明和头部。</p> <pre><code class="language-html"><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>常用标签示例页</title> </head> <body> <header class="site-header"> <h1>示例内容站</h1> <nav aria-label="主导航"> <ul> <li><a href="/">首页</a></li> <li><a href="/articles/">文章</a></li> <li><a href="/about/">关于</a></li> <li><a href="/contact/">联系</a></li> </ul> </nav> </header> </code></pre> <p>这个头部就体现了几个点。<code><h1></code>只保留一个，就是站名；<code><nav></code>里放导航，用<code>aria-label="主导航"</code>让辅助工具识别出这是主要导航；<code><ul><li><a></code>的三层结构完整。很多项目喜欢在<code><nav></code>外面再包一层<code><div></code>用来做样式，这是完全可以的，因为那层<code><div></code>只承担样式包装职责，语义归属由<code><nav></code>来表达。</p> <h3>5.2 主体内容区：文章列表、侧边栏、表单区</h3> <p>接下来是主体区。这里用<code><main></code>明确标识页面的核心内容，里面放文章列表；侧边栏独立出来用<code><aside></code>。</p> <pre><code class="language-html"> <main class="main-area"> <section class="article-list" aria-labelledby="recent-title"> <h2 id="recent-title">最近更新</h2> <ul> <li> <article> <h3><a href="/articles/1">如何管理表单状态</a></h3> <p>分享表单状态管理的几种常见思路，以及各自适合的场景。</p> </article> </li> <li> <article> <h3><a href="/articles/2">图片加载优化实践</a></h3> <p>从懒加载到响应式图片，梳理图片加载的关键参数。</p> </article> </li> </ul> </section> <aside class="sidebar"> <h2>关于本站</h2> <p>整理前端与Web开发中的常用技术与实践心得。</p> </aside> </main> </code></pre> <p>这里的标签关系可以看得出层次。文章列表是一个<code><ul></code>，每篇文章用<code><article></code>包起来，文章标题又是<code><h3></code>。<code><main></code>里包含<code><section></code>和<code><aside></code>是允许的，因为它们在语义上属于主体内容区域。有一点建议：<code><article></code>里如果没有标题，辅助工具判断时容易出错，所以文章卡片尽量保留一个<code><h3></code>或更高层级标题，而不是只放一段说明文字。</p> <p>表单区写在页面底部，结构按前面讲的方式组织。</p> <pre><code class="language-html"> <section class="contact-section" aria-labelledby="contact-title"> <h2 id="contact-title">给我们留言</h2> <form action="/contact" method="post"> <div class="form-group"> <label for="contact-name">称呼</label> <input type="text" id="contact-name" name="name" required> </div> <div class="form-group"> <label for="contact-email">邮箱</label> <input type="email" id="contact-email" name="email" required> </div> <div class="form-group"> <label for="contact-message">留言内容</label> <textarea id="contact-message" name="message" rows="5" required></textarea> </div> <button type="submit">提交留言</button> </form> </section> <footer class="site-footer"> <p>本页面由纯HTML标签示例构成，样式部分可自行扩展。</p> </footer> </body> </html> </code></pre> <p>这里把之前讲过的点全部落了一遍。<code>label</code>和控件<code>id</code>一一对应；邮箱输入用<code>type="email"</code>；留言用<code><textarea></code>；提交按钮用<code><button type="submit"></code>，这是语义最准确的提交控件。<code><footer></code>放在页面底部，里面只放版权信息和简短说明，不要再塞一堆没有结构的<code><div></code>。</p> <h3>5.3 验收清单：从标签角度检查页面质量</h3> <p>示例写完，顺手分享一个我日常走查页面时习惯对照的验收清单。第一栏是标签的语义。页面上是否只有一个<code><h1></code>？标题层级是否跳级？导航是否用了<code><nav></code>？正文内容是否用<code><p></code>而不用<code><br></code>撑间距？第二栏是媒体与链接。所有<code><img></code>是否都有<code>alt</code>，装饰性图片的<code>alt</code>是否为空？<code>target="_blank"</code>的链接是否全部带<code>rel="noopener noreferrer"</code>？第三栏是表单与可访问性。每个表单控件是否都有对应的<code>label</code>？<code>required</code>字段是否配置了合理的校验提示？<code><fieldset></code>是否把一组相关的<code>checkbox</code>或<code>radio</code>包了起来？第四栏是页面完整性和编码。<code>DOCTYPE</code>、<code>lang</code>、<code>meta charset</code>是否都齐全，<code>title</code>是否针对页面写了有意义的标题。</p> <p>这份清单不需要背下来，但每次写完页面，花三分钟过一遍，能省下后面查问题的大量时间。我自己在实际开发中最常被自己坑到的地方，一是图片忘记写<code>alt</code>，二是表单控件忘记关联<code>label</code>，三是为了快速还原设计稿，把不该用<code><br></code>的地方全用<code><br></code>顶上。这些问题只要养成走查习惯，都能提前发现，而不是等测试人员或用户反馈才回头改。</p> <p>HTML常用标签其实就这么多，真正拉开差距的不是背熟多少标签，而是知道每个标签背后的语义边界和使用场景。写页面时多问一句“这个内容用这个标签合适吗”，慢慢就会形成肌肉记忆。标签选对了，后面的样式、脚本、无障碍、SEO都会省力很多。</p>