做前端这些年我被问得最多的问题不是某个特效怎么写而是HTML到底值不值得专门学不就那十几个标签吗每次听到这种话我都会想起自己刚入行时做过的一个页面标题写在div里图片不加alt整篇文章靠十几个div和br硬撑。页面在浏览器里看着还行可到了搜索引擎那边就惨了——搜不到核心内容摘要抓出来是一堆语义不明的文字屏幕阅读器用户更是直接迷路。后来我才明白不是HTML不重要而是我没搞懂标签背后的语义。这篇文章是系列课程的第二篇专门把HTML常用标签的语义、场景和用法一次讲透。你不用死记硬背只要理解每个标签生来是用来干什么的再结合我给出的实际场景和踩坑记录基本就能形成肌肉记忆。内容会从文档骨架、内容分区、文本级语义、列表表格表单、媒体嵌入一直讲到自查清单既有原理也有可直接抄的代码模板适合刚学完HTML入门、准备系统建站或接外包的前端初学者。1. 先搞懂语义再记标签学习效率翻倍1.1 语义标签到底是什么所谓语义就是标签名字本身就说明了它的用途。nav就是导航footer就是页脚article就是一篇独立成文的内容。而div和span是没有任何语义的通用容器它们存在的意义是实在没有更合适的标签时才用。现在很多讨论都在讲语义分割、语义识别背后其实是同一个逻辑让机器理解内容的意义而不只是看到一串字符。HTML的语义化就是这套思路在网页里的落地——浏览器、搜索引擎爬虫、屏幕阅读器都在读你的标签标签传达出的意义越准确这些机器对页面的理解就越精确。1.2 语义不只是给机器看的对SEO来说爬虫会参考h1、h2、a、img的alt等标签来理解页面结构和权重分配。对使用屏幕阅读器的视障用户来说他们可以通过标签快速跳转到导航、正文或页脚没有语义的页面就像一篇没有标题的长文只能从头读到尾。对团队协作来说语义清晰的代码几乎自带注释别人接手时扫一眼结构就能知道哪里是导航、哪里是主内容。我常用一个盖房子的类比用div当然能把页面砌出来就像用砖头也能搭房子但图纸上永远不标注这是厨房这是卧室施工队和验收方都得靠猜。语义标签就是图纸上的标注机器和人都不用来回猜。1.3 三个真实场景说明为什么语义会坑人场景一一个营销页全部用div实现标题、按钮、图片全部不标语义。上线三个月百度搜索页面标题时不出关键内容广告投放的落地页转化也差因为爬虫根本分不清这页的重点是什么。场景二我帮一个视障用户测试过读屏软件进入一个全部用div拼的新闻站读屏把所有文字按顺序读出来没有跳到正文的快捷方式用户只能听到一长串导航链接和广告然后在第40秒放弃退出。场景三接手一个外包项目HTML结构里没有一个语义标签一眼望去全是div和span我花了一个下午才从一堆样式类名里推断出哪个区域是导航、哪个区域是弹窗。理解了语义的价值接下来看具体标签就顺理成章了。先从每个HTML页面都必须有的骨架说起。2. 文档骨架四件套DOCTYPE、html、head、meta一个都不能少2.1 DOCTYPE少了它浏览器会进入怪癖模式!DOCTYPE html是文档类型声明它告诉浏览器请按照现代标准来渲染这个页面。别小看这一行如果没有它老版本浏览器会进入怪癖模式Quirks Mode盒模型、排版甚至元素默认样式都会发生变化同一套CSS在不同浏览器里出现肉眼可见的差异。正确写法就一种!DOCTYPE html这是HTML5的标准声明大小写无所谓就这一行没有任何参数。我见过一些老项目里写着!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN这种长串那是上世纪HTML4时代的写法现在完全不需要。2.2 html标签和lang属性的作用html是所有标签的根它的lang属性容易被忽略但影响不小。声明langzh-cn等于告诉浏览器、屏幕阅读器和翻译插件这个页面是简体中文。屏幕阅读器会据此选择中文发音浏览器翻译插件也会用它判断是否提供翻译按钮。html langzh-cn /html有个常见误区别踩页面内容明明是中文lang却写成en或者干脆不写。谷歌翻译插件会莫名其妙弹出此页面为英文是否翻译为中文屏幕阅读器也会用英文音素去读中文听起来非常奇怪。2.3 head里的meta字符集、视口和描述meta charsetutf-8是第二个容易忽略但极其重要的标签。它声明页面的字符编码为UTF-8保证中文、日文、韩文和绝大多数语言文字能正常显示。很多人遇到过页面中文全部变成乱码锟斤拷十有八九就是缺了这行或者文件本身用了GBK编码但声明了UTF-8。移动端适配靠viewportmeta nameviewport contentwidthdevice-width, initial-scale1这行告诉移动浏览器页面宽度跟随设备宽度初始缩放比例为1。不写这行手机浏览器会默认以980像素的虚拟宽度渲染页面然后缩小你会得到整个页面缩得很小、要手动放大才能看清的糟糕体验。description是给搜索引擎看的摘要描述meta namedescription content这里写页面的核心内容简介控制在150字以内它不是排名权重因素但会直接显示在搜索结果摘要里写得好能提高点击率。keywords现在基本没有SEO价值了写不写都行但也不用刻意堆砌。2.4 title是页面的名字title是浏览器标签页上显示的文字更是搜索引擎结果里的大标题重要性不亚于正文的h1。建议这样写核心关键词放前面站点名放后面例如HTML常用标签详解 - 我的前端笔记。一个页面有且只有一个title不要重复不要空着不要放一堆无关的站点名。标题是用户对页面的第一印象SEO和用户体验都靠它。完整骨架模板直接抄!DOCTYPE html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 meta namedescription contentHTML常用标签的语义、场景与用法详解 titleHTML常用标签详解/title /head body !-- 页面内容写在这里 -- /body /html3. 内容分区标签别让页面变成一袋乱装的土豆3.1 header、nav、main、footer各司其职一个标准页面的骨架通常长这样body header a href/站点Logo/a nav ul lia href/articles文章/a/li lia href/about关于/a/li /ul /nav /header main article h1文章标题/h1 p正文内容/p /article /main footer p版权信息与联系方式/p /footer /bodyheader是页眉通常放Logo、站点名、导航或搜索框。需要注意一个页面可以有多个header每个article或section内部也可以有自己独立的header但header里不能再嵌套header或footer。nav标记主要导航链接区块放的是主导航、侧边栏导航或页脚导航的链接集合。注意不是所有链接集合都得用nav比如一篇文章里引用的几个外链用nav就太隆重了。main标记页面的主内容区一个页面只能有一个不要把main嵌套在article、aside或footer内部。搜索引擎和读屏软件会利用main识别主要内容直接跳到正文。footer是页脚放版权、联系方式、备案信息、相关链接。和header一样每个分区内也可以有自己的footer。aside是侧边栏放相关推荐、广告、目录等与主内容相关但不属于主流程的内容。3.2 article、section、div的边界到底在哪这是初学者最容易纠结的一组。我给出一个简单判断标准如果这一段内容从页面里拿出来单独放到另一个网页上依然成立那它就该是article。博客正文、新闻稿、用户评论、商品卡片都属于这类。article强调独立成篇。section强调的是有主题的分区它通常是某个更大内容板块的一部分一般要带一个标题h1到h6都行。例如一篇长文里的背景介绍方案对比结论三个部分就可以用三个section包裹。div是最后的兜底。只有当article、section、aside等所有语义标签都不合适时才用div做纯粹的样式容器。常见错误是滥用section整个页面只套了一个section或者导航、页脚全部用section包。还是那句话如果看代码的人扫一眼标签名就能说出这块内容的用途你的结构就是合格的。3.3 标题体系h1到h6的层级不是摆设标题标签h1~h6是内容层次的大纲标记。一个页面通常只出现一个h1它是整篇文章或整个页面的主题。h2是章节标题h3是章节内的小节标题依此类推。这里有两个很常见的问题第一跳级。页面里直接出现h1然后就是h3没有h2过渡。这在语义上是大纲缺了一层搜索引擎和读屏软件构建页面大纲时会出现断层。第二用样式替代标题。为了字体好看把p加上font-size就当成h2用。这样做屏幕阅读器读不出段落层级标题大纲里什么都不显示SEO也会被影响。正确的做法是先用标题标签搭好大纲再通过CSS去调整视觉大小和样式。不要反过来用样式去假装标题。4. 文本级标签strong不是加粗em不是斜体4.1 先搞清楚语义和样式的区别这是很多人多年都没绕过来的坎。strong在浏览器里默认是加粗但它的语义是这块内容很重要读屏软件会用更响亮或更强调的语气读出它。b则单纯代表以加粗样式显示没有任何重要性含义。同理em默认是斜体语义是重读、强调而i只是斜体样式。什么时候用b和i当你只想呈现外观、不想赋予含义的时候。比如产品名iAirPods/i、分类名称b新品上市/b。但如果你想说这句话大家要注意就应该用strong或em。我见过一些团队在写页面时把所有加粗都写成b问起来说长得一样就行。这种标签在SEO权重和屏幕阅读器体验上损失很大建议写的时候多问一句这个加粗是为了好看还是内容确实重要4.2 一表看懂常用文本标签p是段落是最基础的文本容器。同一段落内容放一个p里不要一个段落就塞一整屏。span是无语义的行内容器纯粹为了给一段文字包样式或挂类名。例如给价格数字加高亮可以用span classprice。mark标记文本浏览器默认显示为黄色高亮语义是与当前场景相关的部分内容。最典型的使用场景是搜索结果页里把用户搜索的关键词用mark标出来。small在HTML5中被重新定义为旁注、免责声明比如页脚里的版权信息、法律声明。它不是单纯的小号字体。time标记时间配合datetime属性可以提供机器可读的时间格式time datetime2025-06-152025年6月15日/timeabbr是缩写配合title属性给出全称例如abbr titleCascading Style SheetsCSS/abbr。sub和sup分别表示下标和上标化学式Hsub2/subO、数学表达式xsup2/sup都会用到。del和ins表示删除和插入的内容适合在文档修订、价格变动场景中使用比如原价del299/del现价ins199/ins。4.3 引文、代码和预格式化文本写技术文章或文档类页面时这几个标签要分清blockquote标记块级引用是一整段的引用文字浏览器默认会缩进。可以配合cite属性标注引用来源。cite标记作品标题比如书名、电影名、文章标题。code是行内代码比如用codegit commit/code提交代码。pre是预格式化文本保留空格和换行是原样显示的容器常和code配合展示多行代码precode function hello() { console.log(Hello); } /code/prekbd表示键盘输入samp表示程序输出示例。写技术教程时用到它们会让页面语义更准确样式上稍微配合CSS就能做出很专业的文档效果。5. 列表、表格、表单结构化数据的三种容器5.1 三种列表的选择逻辑ul是无序列表各项之间没有先后关系适合导航菜单、商品列表、功能特点列表。ol是有序列表各项之间有明确顺序适合操作步骤、排行榜、烹饪流程。dl是定义列表由一组组术语描述组成适合术语表、商品参数、键值对数据。一个很典型的例子dl dt屏幕尺寸/dt dd6.1英寸/dd dt电池容量/dt dd3200mAh/dd /dl列表最常被乱用的地方是导航很多新手用div加一堆a拼导航然后靠CSS硬调对齐。正确的语义做法是导航里的链接集合用ul包起来每一项用li链接放a里nav ul lia href/home首页/a/li lia href/posts文章/a/li lia href/about关于我/a/li /ul /nav注意一个嵌套规则ul和ol的直接子元素只能是lili里面才能再放其他标签。不能在ul里直接写a或div这是无效HTML。5.2 表格展示数据别用布局表格标签包括table、caption、thead、tbody、tfoot、tr、th、td。现代HTML中表格的唯一职责是展示结构化数据不要再像十几年前那样用表格做页面布局了。一个语义完整的表格长这样table caption2025年Q1销售报表/caption thead tr th scopecol月份/th th scopecol销售额/th th scopecol增长率/th /tr /thead tbody tr td1月/td td120万/td td18%/td /tr tr td2月/td td145万/td td21%/td /tr /tbody /tablecaption是表格标题th配合scopecol或scoperow明确表头方向屏幕阅读器用户读表格时会依赖这些信息理解行列关系。如果你只是在页面上展示几行数据别用div硬凑直接用表格标签是最省事的。顺带提一个冷门场景HTML邮件。很多邮件客户端对CSS支持极差div布局在Outlook里经常崩得不成样反而是table布局最稳定。所以做邮件模板时表格布局反而是正确解法。这也说明了为什么不能死记表格不能做布局这种话——要看场景。5.3 表单与用户交互的第一关表单标签是整个HTML里最接近用户输入的部分常用标签包括form、input、label、textarea、select、button、fieldset、legend。一个最基础的用户登录表单form action/login methodpost div label forusername用户名/label input typetext idusername nameusername required /div div label forpassword密码/label input typepassword idpassword namepassword required /div button typesubmit登录/button /formlabel的for属性对应input的id这个关联非常关键。点击用户名三个字时光标会聚焦到对应的输入框屏幕阅读器也能把标签文字和输入框关联起来读屏用户才知道这个输入框是让填什么的。我见过很多表单没写label只放一个placeholder当提示这样做有两个问题一是移动端部分浏览器在聚焦后隐藏placeholder用户填到一半忘了这格要填什么二是读屏软件读不出表单用途。input的type属性非常重要不只是text。typeemail会在移动端弹出适合输入邮箱的键盘typetel弹出数字键盘typenumber只能输入数字typecheckbox和typeradio控制勾选和单选。选对type能显著提升移动端输入体验还能触发浏览器自带的基础格式校验。placeholder只是示例提示不能替代真正的label最好把提示和标签分开使用。button有typesubmit、typebutton、typereset三种。默认情况下button的type是submit如果它放在表单里点击就会提交表单。很多新手在表单里放一个button想当作普通按钮用结果页面莫名其妙刷新了就是type忘改。6. 媒体与嵌入标签图片音视频怎么放才更稳6.1 imgalt不是可有可无img是最常用的媒体标签基本格式img srcphoto.jpg alt夕阳下的海边栈道 width800 height600 loadinglazysrc是图片地址width和height建议设置能防止图片加载时页面布局跳动。loadinglazy表示懒加载图片在滚动到视口附近时才加载对长页面性能帮助很大。alt属性的作用常常被低估图片加载失败时它显示替代文字搜索引擎读它来理解图片内容屏幕阅读器给视障用户读出它。如果你的图片是装饰性的、不传达任何信息可以写alt让读屏软件跳过但如果图片包含核心信息比如数据截图、产品图一定要写清晰的alt。不要做那种把所有图片我写了个alt图片等于没写读屏用户根本不知道图片里是什么。关于图片格式选型照片用jpg或webp图标和Logo用svg简单图形用png需要透明背景的用png或webp。响应式图片可以看srcset和sizes这一节先不展开但你要知道一张图打天下在移动端会浪费流量。6.2 video和audio别让它一进页面就自动播放视频标签的标准写法video controls posterpreview.jpg width640 height360 source srcmovie.mp4 typevideo/mp4 source srcmovie.webm typevideo/webm 您的浏览器不支持视频播放。 /videocontrols让浏览器显示播放控制条不写的话用户无法操作播放暂停。poster是视频加载前显示的封面图。source可以写多个浏览器会按顺序选择它支持的格式。最后的文字是兜底提示在完全不支持video的老浏览器上显示。音频标签类似audio controls preloadmetadata source srcpodcast.mp3 typeaudio/mpeg 您的浏览器不支持音频播放。 /audio新手最爱犯的错是加autoplay想让视频自动播放。桌面浏览器对带声音的自动播放限制很严即便写上也大概率无效还会引发用户反感。如果非要自动播放建议配合muted静音属性在移动端部分场景下浏览器会放行比如轮播背景视频。6.3 iframe嵌入别人的内容要留个心眼iframe用于嵌入另一个HTML页面比如嵌入B站视频、地图、在线文档。iframe srchttps://example.com/embed width800 height450 loadinglazy sandboxallow-scripts/iframe需要注意几点loadinglazy同样可用于iframe延迟加载sandbox属性限制嵌入内容的权限是重要的安全措施尽量给iframe设置明确的宽高避免嵌入内容导致页面布局突变。平时偶尔会有人问怎么把多个html打包成一个页面这里涉及几种方案可以用iframe直接嵌入可以利用服务端模板把这些HTML片段拼起来也可以单页应用里做组件化。iframe是最简单的一种但性能和安全开销比较大多个iframe会拖慢页面慎用。7. 我踩过的标签坑与一份自查清单7.1 标签嵌套规则的硬性要求HTML标签的嵌套不是随心所欲的下面几种错误我在实际项目里都见过第一p标签里嵌入了块级元素比如pdiv内容/div/p。浏览器解析时会自动把div从p里踢出来导致结构分裂样式和布局全乱。原因很简单p是段落容器设计上只能放行内内容。第二a标签里嵌套a标签。点击区域会发生重叠浏览器行为不可预测。如果一个卡片整体可点击正确做法是只让卡片的标题或某个按钮变成a或者用CSS把整个区域包起来而不是用a套a。第三ul或ol的直接子元素不是li而是div或a。W3C规范要求列表项必须由li承载直接把a塞进ul里属于无效HTML浏览器会尝试修复但修复后的DOM结构可能让你在调试CSS时怀疑人生。嵌套问题有一个简单排查思路把HTML按照块级元素只能包含流内容这条基本规则过一遍再在浏览器DevTools里看解析后的DOM结构你会发现浏览器已经在悄悄纠正你写的错误了。这很危险因为自己看源文件没问题实际渲染却和你预想的不一样。7.2 样式伪装语义短期的省事长期的坑用div模拟按钮、用带样式的span模拟标题、用img做图标却不设alt这些做法在写静态页面时看不出毛病但到了真实项目里会带来一连串问题无障碍测试不通过、SEO不收录关键内容、前端框架升级时样式失效。我还有一个很真实的体会语义结构写得好的HTML在转成Markdown或提取正文时相当省心。像html转为md这样的需求如果源页面里标题是div加类名提取程序根本不知道哪个是标题如果用h1到h3这种标准层级转出来就是干净的大纲。语义化不是额外的道德要求而是实实在在降低后期处理成本的技术债。7.3 场景化自查清单如果你正在做一个页面写完HTML后对照这份清单过一遍检查项正确姿势常见问题文档声明!DOCTYPE html缺失或使用HTML4旧格式字符编码meta charsetutf-8缺失导致中文乱码页面标题title描述清楚页面主题标题为空或堆砌多个关键词主标题页面只有一个h1多个h1或不用h1导航用nav包ul用div拼导航图片重要图片写描述性alt漏写或用无意义alt表单label的for关联input的id只靠placeholder按钮明确button的type忘记type导致页面刷新列表ul/ol直接子元素只放li列表里混入div表格用th标记表头全是td表头语义缺失如果这份清单里的问题你一个都没有那这个页面的标签功底已经超过大多数新手了。写HTML这件事说到底是用标签表达内容。多问一句这个内容的本质是什么你自然就会选对标签。我在改完自己过去的旧页面、把所有div换成合适的语义标签之后再回头看那些标签不重要的说法只觉得当年差点被这句话坑惨。希望这篇文章能让你少走一次弯路。