写过几年页面我一直有个感受HTML标签看起来是最入门的东西真正上手项目之后反而是最容易被低估的一环。刚接触前端的人对着教程敲几遍div、p、img觉得“这不就是几个标签吗”等真去维护一个内容还不错的站点、或者给一个表单页面做无障碍改造才发现很多常用标签的细节自己根本没吃透。这篇就专门聊HTML常用标签不是把标签清单念一遍而是从实际开发角度讲清楚每个高频标签什么时候用、为什么用、怎么用才能少踩坑。1. 搭建页面骨架从文档声明到内容分块1.1 DOCTYPE、语言和编码三个最容易被忽略的标签先看一个几乎每个页面都必须写、但很多人并不完全理解的部分。!DOCTYPE html出现在文档最顶部好多同学知道要写却不清楚它到底解决什么问题。DOCTYPE的核心作用是告诉浏览器“接下来请用标准模式解析我这份文档”。如果不写或者写错旧版浏览器可能进入怪异模式盒模型的计算方式都不一样一个width: 100%都可能表现得让你怀疑人生。如果你打开一个老项目发现页面在浏览器里总差那么几个像素第一步就去看看DOCTYPE。现在基本统一写!DOCTYPE html没有版本参数干净利落。接下来是html标签我建议把lang属性养成习惯写掉html langzh-CN。这个属性影响屏幕阅读器的发音、浏览器的翻译建议、还有页面的语言元信息。始终记得一件事标签不只是给浏览器看的也是给机器和辅助工具看的。head区域里meta charsetUTF-8属于“不写一定会出事”的标签。早年有些页面用的是gb2312一旦服务器和页面编码不一致中文直接变乱码。现在统一UTF-8还要把meta charsetUTF-8放在head靠前的位置编码声明越早解析器越早进入正确状态。标签也属于页面结构的关键一环它影响搜索结果标题和浏览器标签页显示很多后台系统干脆不写或者直接写死成项目名其实对SEO和可访问性都不友好。/p h31.2 标题、段落与列表把文字内容组织起来/h3 p标题标签codeh1/code到codeh6/code是页面信息层级的主干。一个页面通常只保留一个codeh1/code放站点名称或者页面核心标题下面的区块标题用codeh2/code、codeh3/code逐层降级。我见过很多新手为了调字号方便把codeh2/code当codeh4/code用或者反过来折腾样式时可能没感觉搜索引擎和屏幕阅读器对页面结构的判断会乱掉大纲里跳级得非常明显。标题标签该承载的是“层级”不是“视觉效果”。如果你觉得默认字号太大去改CSS不要选一个错误的标签将就。/p p段落标签codep/code也是高频标签。很多人的误用是用codebr/code去制造段落间距一个回车不够就多个codebr/code叠加。codebr/code的语义是“在同一个段落里强制换行”而不是“制造两个段落”。真正的段落分隔应该用codep/code段落间距用CSS的codemargin/code控制。在一块内容里连用codebr/code其实是在告诉辅助技术“这还是一条连续内容”对阅读体验和SEO都没有好处。/p p列表构建信息结构同样常用无序列表codeul/code适合导航菜单、功能列表有序列表codeol/code适合步骤、排行榜这类顺序敏感的内容每一项都用codeli/code包裹。写导航时最常见的做法就是codenavullia/code全套组合这样既方便CSS定位也符合语义。要特别提醒codeul/code和codeol/code的直接子元素只能是codeli/code如果你在中间塞一个codediv/code包一层看起来没报错HTML结构已经不算规范了。列表嵌套是可以的比如多级菜单里在某个codeli/code内部再放一个codeul/code这种结构合理。/p h31.3 用对 div、section、article块级容器的选择逻辑/h3 pcodediv/code是整个HTML里最常见的容器但它也是语义最弱的标签。所谓“无语义”就是它只负责把内容包成一个块方便你布局、写样式、挂事件。一个人如果整个页面全部用codediv/code结构能跑通吗能。但对于阅读代码的人来说导航和正文没有任何区别找起来全靠硬记。这个项目如果只有你写问题还不大一旦交接或者协作别人想快速理解页面分区就很难。/p p常规做法是先根据内容性质选择语义化标签找不到合适的再用codediv/code兜底。比如一篇博客的一篇文章外面可以用codearticle/code一个独立的内容区块比如侧边栏的一个推荐模块可以用codesection/code页面页脚用codefooter/code顶部用codeheader/code主导航用codenav/code。这样划分完剩下的纯粹用来排版包装的块再交给codediv/code。/p pcodesection/code和codearticle/code的区别很多新手容易搞混。我的理解是这样codearticle/code强调“独立成篇”单独拿出来也成立比如一篇文章、一个评论、一个产品卡片codesection/code强调“按主题分组”它是一页里有主题意义的一部分内容一般会有自己的标题。实际项目里一个codearticle/code里可以包含多个codesection/code比如一篇技术文章的“背景”“实现”“总结”章节。反过来一个codesection/code也可以包含若干codearticle/code比如首页的“最新文章”区域里放了五篇文章。重点是选择时先想内容关系再落到标签上。/p h32. 链接、图片与多媒体标签日常开发的高频操作/h3 h32.1 a 标签的完整参数与安全细节/h3 pcodea/code标签最常见的形式是codea hrefhttps://example.com链接文字/a/code。codehref/code是跳转地址写法有不少讲究。站内链接尽量用相对路径比如code/about.html/code这样换域名不用改链接站外链接用完整URL。还有一个很多人忽略的点codehref/code也可以指向codemailto:/code和codetel:/code比如codea hreftel:12345678联系电话/a/code在手机上可以直接唤起拨号界面这在很多活动页和联系页面里相当实用。/p pcodetarget_blank/code也是高频但容易被误解的属性。它的作用是让链接在新标签页打开。这里有个绝大多数教程不会专门讲的安全细节加了codetarget_blank/code的链接最好同时加上coderelnoopener noreferrer/code。原因是新打开的页面通过codewindow.opener/code能反向操作原始页面加上codenoopener/code之后这种能力被切断。我在实际项目里遇到过因为漏掉这个属性被安全扫描工具标出来的情况后来就形成了习惯所有新窗口打开的链接一律带上coderelnoopener noreferrer/code。/p pcodea/code标签还有个容易被忽略的功能页内锚点。codea href#section-name跳到指定区块/a/code配合带codeid/code的元素使用。注意codeid/code在页面里必须唯一否则浏览器只会跳到第一个匹配的位置。有些前端单页应用会用codea href#/code来占位防止跳转但这样会让URL多一个code#/code而且点击后可能跳到页顶。更好一点的做法是用codea hrefjavascript:void(0)/code或者干脆用codebutton/code这取决于点击行为到底是“跳转”还是“触发交互”。/p h32.2 img 标签的响应式与懒加载参数/h3 pcodeimg/code标签的属性比很多人以为的多。最基本的codesrc/code是图片地址codealt/code是图片无法显示时的替代文字也是屏幕阅读器的重要输入。codealt/code不是随便写几个字就行关键是要描述图片传达的信息。图片是一张产品图codealt/code写产品名和关键特征图片是纯装饰codealt/code可以留空codealt/code这样辅助工具会跳过它而不是读出一堆无意义的文件名。有人喜欢把codealt/code当成SEO关键词堆砌位这种操作风险很大搜索引擎对过度堆砌已经识别得比较好了。/p p响应式图片有两个主流属性codesrcset/code和codesizes/code。它们的组合方式是codesrcset/code列出多个图片地址及各自宽度描述比如codeimage-480.jpg 480w, image-800.jpg 800w/codecodesizes/code告诉浏览器这个图片在页面上大概占多少宽度比如code(max-width: 600px) 100vw, 600px/code。浏览器根据这两项信息自行决定加载哪张图。这个机制本身不复杂但实际测试时要留意浏览器还会考虑设备像素比和网络状况选图逻辑不一定完全符合你的预期所以关键图片建议自己多测几种视口。/p p懒加载属性codeloadinglazy/code是提升首屏性能的简单手段。给首屏以下的图片加上它浏览器会在图片接近视口时才加载资源。注意别给首屏的codeh1/code旁边的那张关键图加codelazy/code否则会影响LCP指标反而对性能不利。现在主流浏览器都支持原生懒加载比早期的JS方案可靠得多。宽高属性codewidth/code和codeheight/code也建议写上浏览器可以通过它们预先占位减少图片加载完成后的布局跳动。/p h32.3 audio / video / figure媒体内容的标签化写法/h3 pcodeaudio/code和codevideo/code在HTML5时代已经不算新鲜。基本的写法是codevideo srcmovie.mp4 controls/video/code加上codecontrols/code才会显示播放控制条。我记得音频和视频标签以前还要靠第三方插件现在已经变成纯浏览器能力但要注意编码格式兼容性。视频为了兼容不同浏览器可以写多个codesource/code标签浏览器会依次尝试直到找到能播放的格式。/p pcodevideo/code还有两个常用属性codeposter/code指定视频封面的图片地址codepreload/code控制预加载策略可选codenone/code、codemetadata/code、codeauto/code。对内容页来说视频最好用codepreloadmetadata/code只加载第一帧或元数据避免一打开页面就下载整个视频文件流量消耗非常可观。考虑到移动端用户流量这个细节值得关注。/p pcodefigure/code和codefigcaption/code是图片、代码片段、图表这类“独立内容”的好搭档。我常用它的场景是博客配图codefigureimg srcphoto.jpg alt某截图figcaption图1运行结果示意/figcaption/figure/code。这样做的好处是图片和说明文字在结构上绑定在一起页面排版和SEO都能更好地理解两者关系。以前很多人直接用codep/code包图片加一行说明文字标签语义不够清晰用codefigure/code之后会更明确。/p h33. 表格与表单标签踩坑率最高的两个大类/h3 h33.1 表格结构thead、tbody、th、scope 一个都不能少/h3 p早年很多页面用codetable/code做布局一个页面的结构全在表格里嵌套维护难度极高现在已经不推荐了。但表格标签本身用在数据展示领域完全正当它依然是表达二维数据语义最佳的标签。标准结构是codetable/code包着codecaption/code、codethead/code、codetbody/code、codetfoot/code。codethead/code里放列标题用codeth/code而不是codetd/codecodetbody/code里放数据行用codetd/codecodetfoot/code放汇总行。这样分块以后表格很长时阅读也清晰而且方便单独设置表头样式。/p pcodeth/code的codescope/code属性很有用codescopecol/code表示该单元格是列的表头codescoperow/code表示是行的表头。比如学生成绩表里第一列是学生姓名每个姓名格子就可以写codeth scoperow/code。屏幕阅读器拿到这个信息后就能把数据项和对应的表头关联起来朗读时不会让人分不清这一格到底是什么。这个属性写成习惯之后表格的可访问性会明显提升。/p p关于表格这里有一个查代码的习惯可以分享如果表格在前端框架里渲染出来行数不对或者表头和数据列对不齐优先检查codecolspan/code和coderowspan/code。这两个属性负责单元格合并单个数字写错经常导致整列错位而且这种问题在视觉效果上可能非常隐蔽要逐个单元格检视才能定位。/p h33.2 form、input、label表单的基本构成/h3 pcodeform/code标签是表单的根容器codeaction/code指定提交地址codemethod/code指定提交方式。实际开发里很多页面是SPA提交逻辑由JavaScript接管于是有人干脆不写codeaction/code。我不建议完全省略至少保留一个合理的codeaction/code地址一方面语义完整另一方面也方便未来的SEO和无障碍适配。/p pcodelabel/code标签的重要性常常被低估。它可以通过codefor/code属性关联到对应控件比如codelabel forusername用户名/labelinput idusername typetext/code。点击label文字时焦点会自动落到输入框这个交互在单选和复选框上尤其明显点中文字就能选中选项操作面积一下子大了很多。codefor/code和控件的codeid/code必须完全一致否则关联失效。还有一种写法更简洁直接让codelabel/code包裹codeinput/code比如codelabel用户名input typetext/label/code效果一样写法更少但在复杂布局中可能不够灵活。/p pcodeinput/code的类型选择是表单开发的核心环节。codetypeemail/code、codetypenumber/code、codetypetel/code、codetypeurl/code这些类型会启用浏览器原生校验和不同的移动端键盘。比如codetypeemail/code在手机端会弹出带code/code和code.com/code的键盘用户体验明显好过普通文本键盘。codetypepassword/code会隐藏输入内容codetypecheckbox/code是复选框codetyperadio/code是单选按钮codetypefile/code是文件选择框。codeplaceholder/code只是输入提示不是替代codelabel/code的方案从无障碍和可用性角度codelabel/code仍然建议保留。/p h33.3 select、textarea、fieldset高级表单控件与分组/h3 pcodeselect/code下拉选择框由codeselect/code和多个codeoption/code构成。如果选项很多可以加codeoptgroup label分组名/code把选项分成一组一组比如地区选择时按省份分组视觉效果和操作体验都会提升。codeselect/code默认是单选加上codemultiple/code属性后可以多选但操作体验一般一般不建议移动端用多选下拉改成一排复选框可能更直观。/p pcodetextarea/code是多行文本输入框。它和codeinput/code不一样不是自闭合标签内容写在开始和结束标签之间。需要注意它的默认样式在不同浏览器里略有差异实际项目中通常需要重置coderesize/code属性比如coderesize: vertical/code。coderows/code和codecols/code属性可以控制默认行数和列数但现在更推荐用CSS控制宽高。/p pcodefieldset/code和codelegend/code负责给表单控件分组。比如一页里有“收货人信息”“支付方式”两个区块用codefieldset/code包起来再用codelegend/code说明这组信息的名字。对屏幕阅读器来说它会把这组控件和codelegend/code内容一起朗读用户更容易明白哪些选项属于同一组。早年大家觉得codefieldset/code默认样式太丑很少用现在配合CSS重置完全没有问题。分组逻辑清晰的表单看似小的细节实际对整个表单理解成本影响很大。/p h34. 语义化与可访问性让标签服务用户而不只是浏览器/h3 h34.1 语义化标签速查与适配场景/h3 p语义化是HTML标签使用中最值得花时间的一块。平时最常用的语义标签可以列一个简单清单。codeheader/code页头、区块头部codefooter/code页脚、区块底部codemain/code页面主体内容区域一个页面一般只有一个codenav/code导航部分codeaside/code侧边栏、与主体内容关系不太直接的补充信息codearticle/code独立内容单元codesection/code主题分组。codemain/code尤其建议每个页面都明确标出来它可以帮助屏幕阅读器等辅助工具快速跳到页面核心内容是很多无障碍优化里的关键一步。/p p实际页面里区块嵌套的语义讲究的是“符合内容逻辑”不是“套标签越多越好”。你完全可以在codeheader/code里再放一个codenav/code在codearticle/code里再放一个codeheader/code这是允许的。关键是区分边界最外层的codeheader/code是页头文章内部的codeheader/code是文章头部。如果拿不准就退后一步看内容“这个部分抽出来之后它在语义上是一个完整的单元吗是的话用codearticle/code它只是整体的一部分且有自己的主题就考虑codesection/code。”/p pcodedetails/code和codesummary/code是“折叠面板”的原生实现我越用越觉得顺手。codedetails/code定义可展开区域codesummary/code作为可见的标题点击后会展开里面的内容。过去要实现一个“展开更多”的效果通常要写JS控制codedisplay/code现在原生标签就能完成而且对键盘操作和辅助工具的支持都很稳定。如果希望默认展开加一个codeopen/code属性即可。这个标签适合FAQ、操作说明、查看更多信息这类场景。/p h34.2 属性级别的无障碍细节alt、label、aria/h3 p上面讲过的codealt/code、codelabel/code其实是无障碍体系里的重要组成部分这里再展开说几个属性级的细节。按钮codebutton/code默认就是键盘可聚焦、可点击的不需要额外加codetabindex/code或鼠标事件但如果你为了样式方便把一个codediv/code加上codeonclick/code当按钮用就需要自行管理焦点和键盘事件。我的建议很简单能用codebutton/code就绝不换别的标签。/p pcodearia-label/code可以为元素提供无障碍名称。比如一个关闭按钮只有code×/code符号屏幕阅读器读出来可能就是“乘号”或者“关闭按钮”都读不出来。这时候在按钮上加codearia-label关闭弹窗/code设备就会清楚朗读这个按钮的作用。注意codearia-label/code主要用于没有可见文字但语义需要说明的控件不要滥用。如果一个元素本来就有可见的codebutton/code文字就没必要重复加codearia-label/code。/p pcodearia-hiddentrue/code用于把装饰性的内容从无障碍树中移除。典型场景是图标字体里的装饰性图标如果图标本身不传达额外信息就可以加这个属性避免屏幕阅读器朗读无意义的字符。还有一个实用建议是表单校验出错时用codearia-describedby/code指向错误提示文本的codeid/code。这样输入框获得焦点时辅助工具会自动朗读相关错误描述对复杂表单很有价值。/p h34.3 容易被忽略的细节title、lang、focus/h3 p看到标题可能有人觉得奇怪title标签不是已经讲过了吗这里说的是另一层意思。在标签体系里codetitle/code属性可以加在很多元素上比如图片上悬停显示说明或者链接上显示完整地址。但要注意codetitle/code属性在触屏设备上不起作用所以如果某个信息很重要不要只放在codetitle/code里它只能作为辅助性提示。/p pcodelang/code属性的作用也不局限于codehtml/code。如果页面大部分内容是中文但文章中引了一段英文可以在外层加codelangen/code这样屏幕阅读器会用对应的语言规则朗读这段英文。这个细节很少人在意但对特殊用户群体来说影响实实在在。同理不同语言的文本混杂时codelang/code的标记越准确自动翻译工具的效果也越好。/p p焦点管理是标签使用中有点进阶的话题但很值得提一下。页面弹出一个模态框时焦点应该移入弹窗内部关闭后再回到触发按钮这是完整键盘操作体验的一部分。原生codedialog/code标签支持一部分焦点管理但兼容性不如老项目里手动实现。如果你用自定义组件做弹窗起码要做到弹窗打开后焦点进入弹窗弹窗关闭后焦点回落到原按钮位置用Tab键循环时不跑到页面背景里。这些看起来不是“常用标签”的问题但全部由标签和属性配合实现。/p h35. 完整示例把常用标签拼成一个真实页面/h3 h35.1 页面结构与头部导航的实现/h3 p用一个实际例子把前面讲的内容串起来这也是我给团队做演示时常用的一套模板。假设要做一个小型内容站页面包含顶部导航、文章列表、侧边栏和一个简单联系表单。页面最先写文档声明和头部。/p precode classlanguage-html!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title常用标签示例页/title /head body header classsite-header h1示例内容站/h1 nav aria-label主导航 ul lia href/首页/a/li lia href/articles/文章/a/li lia href/about/关于/a/li lia href/contact/联系/a/li /ul /nav /header /code/pre p这个头部就体现了几个点。codeh1/code只保留一个就是站名codenav/code里放导航用codearia-label主导航/code让辅助工具识别出这是主要导航codeullia/code的三层结构完整。很多项目喜欢在codenav/code外面再包一层codediv/code用来做样式这是完全可以的因为那层codediv/code只承担样式包装职责语义归属由codenav/code来表达。/p h35.2 主体内容区文章列表、侧边栏、表单区/h3 p接下来是主体区。这里用codemain/code明确标识页面的核心内容里面放文章列表侧边栏独立出来用codeaside/code。/p precode classlanguage-html main classmain-area section classarticle-list aria-labelledbyrecent-title h2 idrecent-title最近更新/h2 ul li article h3a href/articles/1如何管理表单状态/a/h3 p分享表单状态管理的几种常见思路以及各自适合的场景。/p /article /li li article h3a href/articles/2图片加载优化实践/a/h3 p从懒加载到响应式图片梳理图片加载的关键参数。/p /article /li /ul /section aside classsidebar h2关于本站/h2 p整理前端与Web开发中的常用技术与实践心得。/p /aside /main /code/pre p这里的标签关系可以看得出层次。文章列表是一个codeul/code每篇文章用codearticle/code包起来文章标题又是codeh3/code。codemain/code里包含codesection/code和codeaside/code是允许的因为它们在语义上属于主体内容区域。有一点建议codearticle/code里如果没有标题辅助工具判断时容易出错所以文章卡片尽量保留一个codeh3/code或更高层级标题而不是只放一段说明文字。/p p表单区写在页面底部结构按前面讲的方式组织。/p precode classlanguage-html section classcontact-section aria-labelledbycontact-title h2 idcontact-title给我们留言/h2 form action/contact methodpost div classform-group label forcontact-name称呼/label input typetext idcontact-name namename required /div div classform-group label forcontact-email邮箱/label input typeemail idcontact-email nameemail required /div div classform-group label forcontact-message留言内容/label textarea idcontact-message namemessage rows5 required/textarea /div button typesubmit提交留言/button /form /section footer classsite-footer p本页面由纯HTML标签示例构成样式部分可自行扩展。/p /footer /body /html /code/pre p这里把之前讲过的点全部落了一遍。codelabel/code和控件codeid/code一一对应邮箱输入用codetypeemail/code留言用codetextarea/code提交按钮用codebutton typesubmit/code这是语义最准确的提交控件。codefooter/code放在页面底部里面只放版权信息和简短说明不要再塞一堆没有结构的codediv/code。/p h35.3 验收清单从标签角度检查页面质量/h3 p示例写完顺手分享一个我日常走查页面时习惯对照的验收清单。第一栏是标签的语义。页面上是否只有一个codeh1/code标题层级是否跳级导航是否用了codenav/code正文内容是否用codep/code而不用codebr/code撑间距第二栏是媒体与链接。所有codeimg/code是否都有codealt/code装饰性图片的codealt/code是否为空codetarget_blank/code的链接是否全部带coderelnoopener noreferrer/code第三栏是表单与可访问性。每个表单控件是否都有对应的codelabel/codecoderequired/code字段是否配置了合理的校验提示codefieldset/code是否把一组相关的codecheckbox/code或coderadio/code包了起来第四栏是页面完整性和编码。codeDOCTYPE/code、codelang/code、codemeta charset/code是否都齐全codetitle/code是否针对页面写了有意义的标题。/p p这份清单不需要背下来但每次写完页面花三分钟过一遍能省下后面查问题的大量时间。我自己在实际开发中最常被自己坑到的地方一是图片忘记写codealt/code二是表单控件忘记关联codelabel/code三是为了快速还原设计稿把不该用codebr/code的地方全用codebr/code顶上。这些问题只要养成走查习惯都能提前发现而不是等测试人员或用户反馈才回头改。/p pHTML常用标签其实就这么多真正拉开差距的不是背熟多少标签而是知道每个标签背后的语义边界和使用场景。写页面时多问一句“这个内容用这个标签合适吗”慢慢就会形成肌肉记忆。标签选对了后面的样式、脚本、无障碍、SEO都会省力很多。/p
写过几年页面我一直有个感受HTML标签看起来是最入门的东西真正上手项目之后反而是最容易被低估的一环。刚接触前端的人对着教程敲几遍div、p、img觉得“这不就是几个标签吗”等真去维护一个内容还不错的站点、或者给一个表单页面做无障碍改造才发现很多常用标签的细节自己根本没吃透。这篇就专门聊HTML常用标签不是把标签清单念一遍而是从实际开发角度讲清楚每个高频标签什么时候用、为什么用、怎么用才能少踩坑。1. 搭建页面骨架从文档声明到内容分块1.1 DOCTYPE、语言和编码三个最容易被忽略的标签先看一个几乎每个页面都必须写、但很多人并不完全理解的部分。!DOCTYPE html出现在文档最顶部好多同学知道要写却不清楚它到底解决什么问题。DOCTYPE的核心作用是告诉浏览器“接下来请用标准模式解析我这份文档”。如果不写或者写错旧版浏览器可能进入怪异模式盒模型的计算方式都不一样一个width: 100%都可能表现得让你怀疑人生。如果你打开一个老项目发现页面在浏览器里总差那么几个像素第一步就去看看DOCTYPE。现在基本统一写!DOCTYPE html没有版本参数干净利落。接下来是html标签我建议把lang属性养成习惯写掉html langzh-CN。这个属性影响屏幕阅读器的发音、浏览器的翻译建议、还有页面的语言元信息。始终记得一件事标签不只是给浏览器看的也是给机器和辅助工具看的。head区域里meta charsetUTF-8属于“不写一定会出事”的标签。早年有些页面用的是gb2312一旦服务器和页面编码不一致中文直接变乱码。现在统一UTF-8还要把meta charsetUTF-8放在head靠前的位置编码声明越早解析器越早进入正确状态。标签也属于页面结构的关键一环它影响搜索结果标题和浏览器标签页显示很多后台系统干脆不写或者直接写死成项目名其实对SEO和可访问性都不友好。/p h31.2 标题、段落与列表把文字内容组织起来/h3 p标题标签codeh1/code到codeh6/code是页面信息层级的主干。一个页面通常只保留一个codeh1/code放站点名称或者页面核心标题下面的区块标题用codeh2/code、codeh3/code逐层降级。我见过很多新手为了调字号方便把codeh2/code当codeh4/code用或者反过来折腾样式时可能没感觉搜索引擎和屏幕阅读器对页面结构的判断会乱掉大纲里跳级得非常明显。标题标签该承载的是“层级”不是“视觉效果”。如果你觉得默认字号太大去改CSS不要选一个错误的标签将就。/p p段落标签codep/code也是高频标签。很多人的误用是用codebr/code去制造段落间距一个回车不够就多个codebr/code叠加。codebr/code的语义是“在同一个段落里强制换行”而不是“制造两个段落”。真正的段落分隔应该用codep/code段落间距用CSS的codemargin/code控制。在一块内容里连用codebr/code其实是在告诉辅助技术“这还是一条连续内容”对阅读体验和SEO都没有好处。/p p列表构建信息结构同样常用无序列表codeul/code适合导航菜单、功能列表有序列表codeol/code适合步骤、排行榜这类顺序敏感的内容每一项都用codeli/code包裹。写导航时最常见的做法就是codenavullia/code全套组合这样既方便CSS定位也符合语义。要特别提醒codeul/code和codeol/code的直接子元素只能是codeli/code如果你在中间塞一个codediv/code包一层看起来没报错HTML结构已经不算规范了。列表嵌套是可以的比如多级菜单里在某个codeli/code内部再放一个codeul/code这种结构合理。/p h31.3 用对 div、section、article块级容器的选择逻辑/h3 pcodediv/code是整个HTML里最常见的容器但它也是语义最弱的标签。所谓“无语义”就是它只负责把内容包成一个块方便你布局、写样式、挂事件。一个人如果整个页面全部用codediv/code结构能跑通吗能。但对于阅读代码的人来说导航和正文没有任何区别找起来全靠硬记。这个项目如果只有你写问题还不大一旦交接或者协作别人想快速理解页面分区就很难。/p p常规做法是先根据内容性质选择语义化标签找不到合适的再用codediv/code兜底。比如一篇博客的一篇文章外面可以用codearticle/code一个独立的内容区块比如侧边栏的一个推荐模块可以用codesection/code页面页脚用codefooter/code顶部用codeheader/code主导航用codenav/code。这样划分完剩下的纯粹用来排版包装的块再交给codediv/code。/p pcodesection/code和codearticle/code的区别很多新手容易搞混。我的理解是这样codearticle/code强调“独立成篇”单独拿出来也成立比如一篇文章、一个评论、一个产品卡片codesection/code强调“按主题分组”它是一页里有主题意义的一部分内容一般会有自己的标题。实际项目里一个codearticle/code里可以包含多个codesection/code比如一篇技术文章的“背景”“实现”“总结”章节。反过来一个codesection/code也可以包含若干codearticle/code比如首页的“最新文章”区域里放了五篇文章。重点是选择时先想内容关系再落到标签上。/p h32. 链接、图片与多媒体标签日常开发的高频操作/h3 h32.1 a 标签的完整参数与安全细节/h3 pcodea/code标签最常见的形式是codea hrefhttps://example.com链接文字/a/code。codehref/code是跳转地址写法有不少讲究。站内链接尽量用相对路径比如code/about.html/code这样换域名不用改链接站外链接用完整URL。还有一个很多人忽略的点codehref/code也可以指向codemailto:/code和codetel:/code比如codea hreftel:12345678联系电话/a/code在手机上可以直接唤起拨号界面这在很多活动页和联系页面里相当实用。/p pcodetarget_blank/code也是高频但容易被误解的属性。它的作用是让链接在新标签页打开。这里有个绝大多数教程不会专门讲的安全细节加了codetarget_blank/code的链接最好同时加上coderelnoopener noreferrer/code。原因是新打开的页面通过codewindow.opener/code能反向操作原始页面加上codenoopener/code之后这种能力被切断。我在实际项目里遇到过因为漏掉这个属性被安全扫描工具标出来的情况后来就形成了习惯所有新窗口打开的链接一律带上coderelnoopener noreferrer/code。/p pcodea/code标签还有个容易被忽略的功能页内锚点。codea href#section-name跳到指定区块/a/code配合带codeid/code的元素使用。注意codeid/code在页面里必须唯一否则浏览器只会跳到第一个匹配的位置。有些前端单页应用会用codea href#/code来占位防止跳转但这样会让URL多一个code#/code而且点击后可能跳到页顶。更好一点的做法是用codea hrefjavascript:void(0)/code或者干脆用codebutton/code这取决于点击行为到底是“跳转”还是“触发交互”。/p h32.2 img 标签的响应式与懒加载参数/h3 pcodeimg/code标签的属性比很多人以为的多。最基本的codesrc/code是图片地址codealt/code是图片无法显示时的替代文字也是屏幕阅读器的重要输入。codealt/code不是随便写几个字就行关键是要描述图片传达的信息。图片是一张产品图codealt/code写产品名和关键特征图片是纯装饰codealt/code可以留空codealt/code这样辅助工具会跳过它而不是读出一堆无意义的文件名。有人喜欢把codealt/code当成SEO关键词堆砌位这种操作风险很大搜索引擎对过度堆砌已经识别得比较好了。/p p响应式图片有两个主流属性codesrcset/code和codesizes/code。它们的组合方式是codesrcset/code列出多个图片地址及各自宽度描述比如codeimage-480.jpg 480w, image-800.jpg 800w/codecodesizes/code告诉浏览器这个图片在页面上大概占多少宽度比如code(max-width: 600px) 100vw, 600px/code。浏览器根据这两项信息自行决定加载哪张图。这个机制本身不复杂但实际测试时要留意浏览器还会考虑设备像素比和网络状况选图逻辑不一定完全符合你的预期所以关键图片建议自己多测几种视口。/p p懒加载属性codeloadinglazy/code是提升首屏性能的简单手段。给首屏以下的图片加上它浏览器会在图片接近视口时才加载资源。注意别给首屏的codeh1/code旁边的那张关键图加codelazy/code否则会影响LCP指标反而对性能不利。现在主流浏览器都支持原生懒加载比早期的JS方案可靠得多。宽高属性codewidth/code和codeheight/code也建议写上浏览器可以通过它们预先占位减少图片加载完成后的布局跳动。/p h32.3 audio / video / figure媒体内容的标签化写法/h3 pcodeaudio/code和codevideo/code在HTML5时代已经不算新鲜。基本的写法是codevideo srcmovie.mp4 controls/video/code加上codecontrols/code才会显示播放控制条。我记得音频和视频标签以前还要靠第三方插件现在已经变成纯浏览器能力但要注意编码格式兼容性。视频为了兼容不同浏览器可以写多个codesource/code标签浏览器会依次尝试直到找到能播放的格式。/p pcodevideo/code还有两个常用属性codeposter/code指定视频封面的图片地址codepreload/code控制预加载策略可选codenone/code、codemetadata/code、codeauto/code。对内容页来说视频最好用codepreloadmetadata/code只加载第一帧或元数据避免一打开页面就下载整个视频文件流量消耗非常可观。考虑到移动端用户流量这个细节值得关注。/p pcodefigure/code和codefigcaption/code是图片、代码片段、图表这类“独立内容”的好搭档。我常用它的场景是博客配图codefigureimg srcphoto.jpg alt某截图figcaption图1运行结果示意/figcaption/figure/code。这样做的好处是图片和说明文字在结构上绑定在一起页面排版和SEO都能更好地理解两者关系。以前很多人直接用codep/code包图片加一行说明文字标签语义不够清晰用codefigure/code之后会更明确。/p h33. 表格与表单标签踩坑率最高的两个大类/h3 h33.1 表格结构thead、tbody、th、scope 一个都不能少/h3 p早年很多页面用codetable/code做布局一个页面的结构全在表格里嵌套维护难度极高现在已经不推荐了。但表格标签本身用在数据展示领域完全正当它依然是表达二维数据语义最佳的标签。标准结构是codetable/code包着codecaption/code、codethead/code、codetbody/code、codetfoot/code。codethead/code里放列标题用codeth/code而不是codetd/codecodetbody/code里放数据行用codetd/codecodetfoot/code放汇总行。这样分块以后表格很长时阅读也清晰而且方便单独设置表头样式。/p pcodeth/code的codescope/code属性很有用codescopecol/code表示该单元格是列的表头codescoperow/code表示是行的表头。比如学生成绩表里第一列是学生姓名每个姓名格子就可以写codeth scoperow/code。屏幕阅读器拿到这个信息后就能把数据项和对应的表头关联起来朗读时不会让人分不清这一格到底是什么。这个属性写成习惯之后表格的可访问性会明显提升。/p p关于表格这里有一个查代码的习惯可以分享如果表格在前端框架里渲染出来行数不对或者表头和数据列对不齐优先检查codecolspan/code和coderowspan/code。这两个属性负责单元格合并单个数字写错经常导致整列错位而且这种问题在视觉效果上可能非常隐蔽要逐个单元格检视才能定位。/p h33.2 form、input、label表单的基本构成/h3 pcodeform/code标签是表单的根容器codeaction/code指定提交地址codemethod/code指定提交方式。实际开发里很多页面是SPA提交逻辑由JavaScript接管于是有人干脆不写codeaction/code。我不建议完全省略至少保留一个合理的codeaction/code地址一方面语义完整另一方面也方便未来的SEO和无障碍适配。/p pcodelabel/code标签的重要性常常被低估。它可以通过codefor/code属性关联到对应控件比如codelabel forusername用户名/labelinput idusername typetext/code。点击label文字时焦点会自动落到输入框这个交互在单选和复选框上尤其明显点中文字就能选中选项操作面积一下子大了很多。codefor/code和控件的codeid/code必须完全一致否则关联失效。还有一种写法更简洁直接让codelabel/code包裹codeinput/code比如codelabel用户名input typetext/label/code效果一样写法更少但在复杂布局中可能不够灵活。/p pcodeinput/code的类型选择是表单开发的核心环节。codetypeemail/code、codetypenumber/code、codetypetel/code、codetypeurl/code这些类型会启用浏览器原生校验和不同的移动端键盘。比如codetypeemail/code在手机端会弹出带code/code和code.com/code的键盘用户体验明显好过普通文本键盘。codetypepassword/code会隐藏输入内容codetypecheckbox/code是复选框codetyperadio/code是单选按钮codetypefile/code是文件选择框。codeplaceholder/code只是输入提示不是替代codelabel/code的方案从无障碍和可用性角度codelabel/code仍然建议保留。/p h33.3 select、textarea、fieldset高级表单控件与分组/h3 pcodeselect/code下拉选择框由codeselect/code和多个codeoption/code构成。如果选项很多可以加codeoptgroup label分组名/code把选项分成一组一组比如地区选择时按省份分组视觉效果和操作体验都会提升。codeselect/code默认是单选加上codemultiple/code属性后可以多选但操作体验一般一般不建议移动端用多选下拉改成一排复选框可能更直观。/p pcodetextarea/code是多行文本输入框。它和codeinput/code不一样不是自闭合标签内容写在开始和结束标签之间。需要注意它的默认样式在不同浏览器里略有差异实际项目中通常需要重置coderesize/code属性比如coderesize: vertical/code。coderows/code和codecols/code属性可以控制默认行数和列数但现在更推荐用CSS控制宽高。/p pcodefieldset/code和codelegend/code负责给表单控件分组。比如一页里有“收货人信息”“支付方式”两个区块用codefieldset/code包起来再用codelegend/code说明这组信息的名字。对屏幕阅读器来说它会把这组控件和codelegend/code内容一起朗读用户更容易明白哪些选项属于同一组。早年大家觉得codefieldset/code默认样式太丑很少用现在配合CSS重置完全没有问题。分组逻辑清晰的表单看似小的细节实际对整个表单理解成本影响很大。/p h34. 语义化与可访问性让标签服务用户而不只是浏览器/h3 h34.1 语义化标签速查与适配场景/h3 p语义化是HTML标签使用中最值得花时间的一块。平时最常用的语义标签可以列一个简单清单。codeheader/code页头、区块头部codefooter/code页脚、区块底部codemain/code页面主体内容区域一个页面一般只有一个codenav/code导航部分codeaside/code侧边栏、与主体内容关系不太直接的补充信息codearticle/code独立内容单元codesection/code主题分组。codemain/code尤其建议每个页面都明确标出来它可以帮助屏幕阅读器等辅助工具快速跳到页面核心内容是很多无障碍优化里的关键一步。/p p实际页面里区块嵌套的语义讲究的是“符合内容逻辑”不是“套标签越多越好”。你完全可以在codeheader/code里再放一个codenav/code在codearticle/code里再放一个codeheader/code这是允许的。关键是区分边界最外层的codeheader/code是页头文章内部的codeheader/code是文章头部。如果拿不准就退后一步看内容“这个部分抽出来之后它在语义上是一个完整的单元吗是的话用codearticle/code它只是整体的一部分且有自己的主题就考虑codesection/code。”/p pcodedetails/code和codesummary/code是“折叠面板”的原生实现我越用越觉得顺手。codedetails/code定义可展开区域codesummary/code作为可见的标题点击后会展开里面的内容。过去要实现一个“展开更多”的效果通常要写JS控制codedisplay/code现在原生标签就能完成而且对键盘操作和辅助工具的支持都很稳定。如果希望默认展开加一个codeopen/code属性即可。这个标签适合FAQ、操作说明、查看更多信息这类场景。/p h34.2 属性级别的无障碍细节alt、label、aria/h3 p上面讲过的codealt/code、codelabel/code其实是无障碍体系里的重要组成部分这里再展开说几个属性级的细节。按钮codebutton/code默认就是键盘可聚焦、可点击的不需要额外加codetabindex/code或鼠标事件但如果你为了样式方便把一个codediv/code加上codeonclick/code当按钮用就需要自行管理焦点和键盘事件。我的建议很简单能用codebutton/code就绝不换别的标签。/p pcodearia-label/code可以为元素提供无障碍名称。比如一个关闭按钮只有code×/code符号屏幕阅读器读出来可能就是“乘号”或者“关闭按钮”都读不出来。这时候在按钮上加codearia-label关闭弹窗/code设备就会清楚朗读这个按钮的作用。注意codearia-label/code主要用于没有可见文字但语义需要说明的控件不要滥用。如果一个元素本来就有可见的codebutton/code文字就没必要重复加codearia-label/code。/p pcodearia-hiddentrue/code用于把装饰性的内容从无障碍树中移除。典型场景是图标字体里的装饰性图标如果图标本身不传达额外信息就可以加这个属性避免屏幕阅读器朗读无意义的字符。还有一个实用建议是表单校验出错时用codearia-describedby/code指向错误提示文本的codeid/code。这样输入框获得焦点时辅助工具会自动朗读相关错误描述对复杂表单很有价值。/p h34.3 容易被忽略的细节title、lang、focus/h3 p看到标题可能有人觉得奇怪title标签不是已经讲过了吗这里说的是另一层意思。在标签体系里codetitle/code属性可以加在很多元素上比如图片上悬停显示说明或者链接上显示完整地址。但要注意codetitle/code属性在触屏设备上不起作用所以如果某个信息很重要不要只放在codetitle/code里它只能作为辅助性提示。/p pcodelang/code属性的作用也不局限于codehtml/code。如果页面大部分内容是中文但文章中引了一段英文可以在外层加codelangen/code这样屏幕阅读器会用对应的语言规则朗读这段英文。这个细节很少人在意但对特殊用户群体来说影响实实在在。同理不同语言的文本混杂时codelang/code的标记越准确自动翻译工具的效果也越好。/p p焦点管理是标签使用中有点进阶的话题但很值得提一下。页面弹出一个模态框时焦点应该移入弹窗内部关闭后再回到触发按钮这是完整键盘操作体验的一部分。原生codedialog/code标签支持一部分焦点管理但兼容性不如老项目里手动实现。如果你用自定义组件做弹窗起码要做到弹窗打开后焦点进入弹窗弹窗关闭后焦点回落到原按钮位置用Tab键循环时不跑到页面背景里。这些看起来不是“常用标签”的问题但全部由标签和属性配合实现。/p h35. 完整示例把常用标签拼成一个真实页面/h3 h35.1 页面结构与头部导航的实现/h3 p用一个实际例子把前面讲的内容串起来这也是我给团队做演示时常用的一套模板。假设要做一个小型内容站页面包含顶部导航、文章列表、侧边栏和一个简单联系表单。页面最先写文档声明和头部。/p precode classlanguage-html!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title常用标签示例页/title /head body header classsite-header h1示例内容站/h1 nav aria-label主导航 ul lia href/首页/a/li lia href/articles/文章/a/li lia href/about/关于/a/li lia href/contact/联系/a/li /ul /nav /header /code/pre p这个头部就体现了几个点。codeh1/code只保留一个就是站名codenav/code里放导航用codearia-label主导航/code让辅助工具识别出这是主要导航codeullia/code的三层结构完整。很多项目喜欢在codenav/code外面再包一层codediv/code用来做样式这是完全可以的因为那层codediv/code只承担样式包装职责语义归属由codenav/code来表达。/p h35.2 主体内容区文章列表、侧边栏、表单区/h3 p接下来是主体区。这里用codemain/code明确标识页面的核心内容里面放文章列表侧边栏独立出来用codeaside/code。/p precode classlanguage-html main classmain-area section classarticle-list aria-labelledbyrecent-title h2 idrecent-title最近更新/h2 ul li article h3a href/articles/1如何管理表单状态/a/h3 p分享表单状态管理的几种常见思路以及各自适合的场景。/p /article /li li article h3a href/articles/2图片加载优化实践/a/h3 p从懒加载到响应式图片梳理图片加载的关键参数。/p /article /li /ul /section aside classsidebar h2关于本站/h2 p整理前端与Web开发中的常用技术与实践心得。/p /aside /main /code/pre p这里的标签关系可以看得出层次。文章列表是一个codeul/code每篇文章用codearticle/code包起来文章标题又是codeh3/code。codemain/code里包含codesection/code和codeaside/code是允许的因为它们在语义上属于主体内容区域。有一点建议codearticle/code里如果没有标题辅助工具判断时容易出错所以文章卡片尽量保留一个codeh3/code或更高层级标题而不是只放一段说明文字。/p p表单区写在页面底部结构按前面讲的方式组织。/p precode classlanguage-html section classcontact-section aria-labelledbycontact-title h2 idcontact-title给我们留言/h2 form action/contact methodpost div classform-group label forcontact-name称呼/label input typetext idcontact-name namename required /div div classform-group label forcontact-email邮箱/label input typeemail idcontact-email nameemail required /div div classform-group label forcontact-message留言内容/label textarea idcontact-message namemessage rows5 required/textarea /div button typesubmit提交留言/button /form /section footer classsite-footer p本页面由纯HTML标签示例构成样式部分可自行扩展。/p /footer /body /html /code/pre p这里把之前讲过的点全部落了一遍。codelabel/code和控件codeid/code一一对应邮箱输入用codetypeemail/code留言用codetextarea/code提交按钮用codebutton typesubmit/code这是语义最准确的提交控件。codefooter/code放在页面底部里面只放版权信息和简短说明不要再塞一堆没有结构的codediv/code。/p h35.3 验收清单从标签角度检查页面质量/h3 p示例写完顺手分享一个我日常走查页面时习惯对照的验收清单。第一栏是标签的语义。页面上是否只有一个codeh1/code标题层级是否跳级导航是否用了codenav/code正文内容是否用codep/code而不用codebr/code撑间距第二栏是媒体与链接。所有codeimg/code是否都有codealt/code装饰性图片的codealt/code是否为空codetarget_blank/code的链接是否全部带coderelnoopener noreferrer/code第三栏是表单与可访问性。每个表单控件是否都有对应的codelabel/codecoderequired/code字段是否配置了合理的校验提示codefieldset/code是否把一组相关的codecheckbox/code或coderadio/code包了起来第四栏是页面完整性和编码。codeDOCTYPE/code、codelang/code、codemeta charset/code是否都齐全codetitle/code是否针对页面写了有意义的标题。/p p这份清单不需要背下来但每次写完页面花三分钟过一遍能省下后面查问题的大量时间。我自己在实际开发中最常被自己坑到的地方一是图片忘记写codealt/code二是表单控件忘记关联codelabel/code三是为了快速还原设计稿把不该用codebr/code的地方全用codebr/code顶上。这些问题只要养成走查习惯都能提前发现而不是等测试人员或用户反馈才回头改。/p pHTML常用标签其实就这么多真正拉开差距的不是背熟多少标签而是知道每个标签背后的语义边界和使用场景。写页面时多问一句“这个内容用这个标签合适吗”慢慢就会形成肌肉记忆。标签选对了后面的样式、脚本、无障碍、SEO都会省力很多。/p
