很多刚接触前端的同学拿到一份HTML文档往往第一反应是“这些标签我都认识但真要自己写页面的时候又不知道用哪个”。标签这东西看着简单但背后涉及的文档结构、语义化、表单交互、SEO权重这些门道真不是背几个标签名就能搞定的。这篇总结我整理了日常开发中用得最频繁的HTML标签从文档骨架到内容排版从表单到多媒体把每个标签的常见用法、容易踩的坑和适用场景都梳理了一遍适合刚学完基础语法、想系统过一遍标签用法的读者也适合写了几年页面但有些细节始终没较真过的朋友查漏补缺。1. 文档骨架标签一个页面的地基到底该怎么搭1.1 从DOCTYPE到html标签这些“老面孔”你真的懂吗每个网页的第一行基本都是!doctype html这个声明很多人直接复制模板从没细想过它的作用。它的核心职责是告诉浏览器“按标准模式来解析我这页文档”而不是按IE时代的怪异模式。早期确实存在DOCTYPE声明缺失导致的盒模型偏差问题现在虽然主流浏览器默认按标准模式工作但规范起见每个页面第一行都应该写上它。注意DOCTYPE不是HTML标签它是文档声明写在所有标签之前也不需要闭合。第二行一般是html langzh-cn这个lang属性值得养成好习惯去写。它给浏览器、搜索引擎和辅助阅读工具提供了页面语言的信号对SEO和可访问性都有帮助。写成zh-cn还是zh-Hans其实影响不大关键是别漏写。接着就是head里那几个固定成员meta charsetutf-8保证中文不乱码meta nameviewport contentwidthdevice-width, initial-scale1.0适配移动端title定义浏览器标签页上显示的文字也是SEO里权重最高的位置之一。1.2 head头部的meta标签细节meta标签在头部承担了很多“看不见但很重要”的工作初学者容易忽视。除了charset和viewport还有几个实用场景meta namedescription content页面描述这段文字经常直接出现在搜索结果里是免费的广告位值得认真写针对搜索引擎爬虫有meta namerobots contentnoindex可以禁止某页面被收录页面重定向可以写meta http-equivrefresh content5;urlhttps://example.com但能用服务端301最好不要靠这个毕竟秒数等待对用户体验不友好SEO解读也不统一。有一个常见的误解是meta标签必须写在head里确实如此。还有人说meta是自闭和标签所以写meta ... /这也没错HTML5规范里meta不需要自闭合斜杠但写了也不报错风格问题而已。1.3 body标签与页面内容的装载关系body标签承载了用户实际能看到的一切内容它跟head是html标签下的两个直接子节点。实操中偶尔会遇到“页面内容显示不出来”或“多出了奇怪空白”的问题排查思路里永远要有一项是检查body相关CSS样式margin、padding、height等因为浏览器对body默认样式处理存在历史差异直接* { margin:0; padding:0; }可以打消大部分默认间距的烦恼这一点在前端圈已经是默认操作了。有一个容易被忽视的点是所有直接放在页面底层的script标签建议放在body末尾而不是head里因为脚本执行会阻塞DOM解析放到底部能让页面主体先渲染出来白屏时间更短。现代开发中用defer或typemodule也可以实现类似效果但“脚本沉底”这个思路仍然值得理解。2. 内容排版与文本类标签把信息整理成有层次的页面2.1 标题标签h1到h6不只是字号区别h1到h6是文档的六级标题重要性依次递减。从语义上说一个页面建议只有一个h1通常是logo区或文章主标题h2、h3再往下分小节。搜索引擎对标题层级非常看重把h1滥用到底栏“友情链接”或者一个页面堆七八个h1都会摊薄关键词权重。从视觉效果上说浏览器默认给h1到h6的字号是从大到小递减的但实际开发里几乎没人直接用默认样式基本都会用CSS重置。不管样式怎么调语义标签不要换想在页面上做“大号加粗文字”可以用span加样式但语义上它依然是普通文本千万别为了视觉好看把整段重要文字都写成h标签。2.2 段落、换行、水平线与无语义标签的配合p标签是最常用的块级段落容器段落之间天然有间距这是浏览器默认样式给的。br是换行标签容易被人拿来做间距这是典型错用行间距应该交给CSS的margin或line-height。同理hr表示主题分隔默认是一条横线但更多时候我们只用它来切分内容块视觉上完全可以把它改成虚线、渐变线甚至隐藏掉。span是无语义的行内容器div是无语义的块级容器。可以这样理解div负责“圈地”span负责“圈词”。两者搭配CSS就能实现任意布局但代价是页面结构缺乏可读性维护半年后再看自己写的代码满屏div会让人头大。所以现在大家在布局时更倾向先用有语义的标签剩余场景再用div/span兜底。2.3 文本修饰类标签strong、em、del、ins的实用细节strong表示重要内容浏览器的默认表现是加粗但你在阅读器或某些浏览器插件里看到的可能是“语气强调”而不是加粗这是标签语义在不同环境下的正常差异。b标签曾经是纯视觉加粗现在HTML5里也赋予了它“文体突出”的含义但实际使用中需要表达重要内容时优先用strong纯视觉加粗用CSS的font-weight更合适。em表示强调默认斜体i原本是纯视觉斜体现在常用于图标字体。这里有个实操建议做图标时不要给i标签加语义只是“一个放图标的行内元素”而已表示专业术语、外文单词时可以用i或em。del表示删除文本常配合ins表示插入文本在展示“修订前/修订后”或“原价/现价”场景中很实用默认一个删除线一个下划线视觉清晰直接。2.4 代码展示类pre、code、kbd、samp怎么搭配用如果页面里要展示代码code是行内代码标签pre是预格式化的块级标签可以保留空格和换行。前端展示代码最标准的组合是precode嵌套外层pre负责保留缩进和换行内层code负责标识“这是代码”。kbd表示用户键盘输入samp表示程序输出示例这几个标签在写技术文档时语义价值很高。我实测下来的经验是真正做代码高亮展示时标签语义只是基础效率上的核心在于高亮库怎么用。常见的方案是Prism.js或highlight.js它们会自动解析页面里带特定class的code块。如果你把代码直接放在pre里而不嵌套code某些高亮库就不会生效。另外代码中的尖括号需要转义成lt;和gt;比如展示div就必须写成lt;divgt;否则浏览器会把它当真正的标签去解析新手常在这里翻车。3. 列表、链接与图片页面里的三大基础交互单元3.1 ul、ol、li无序列表、有序列表与嵌套布局页面里“一组同类内容”最佳载体就是列表。ul是无序列表默认前面是圆点适合菜单、文章列表、商品陈列等没有先后顺序的内容ol是有序列表默认前面是数字适合步骤说明、排行榜、操作流程。li是列表项注意它只能作为ul或ol的子元素存在在li里再嵌一个ul做多级菜单是合法且常规的做法。列表有个被广泛低估的价值是导航菜单的语义化写法。很多老代码用一排div加a标签模拟导航栏但从语义到辅助阅读再到SEO解析都是用navullia更好。浏览器和搜索引擎能更准确地识别导航结构样式上也容易控制。list-style-type属性可以改序号样式比如decimal、lower-roman、square等不想显示序号就设none但只去样式不影响语义。3.2 dl、dt、dd定义列表在“名词描述”场景里的优点dldescription list是定义列表dt是术语名dd是术语描述。默认布局下dd是缩进的。这个标签在“名词解释”、“FAQ列表”、“商品参数表”这类场景里比table和div都合适因为它语义上就表示“成组的名称-值配对”。实践中要小心一个现象很多人压根不用dl/dt/dd导致这几个标签在真实项目里出现频率不高。如果你在做数据字典或图文卡片的场景用dl语义最清晰。比如商品参数dl dt品牌/dt dd某某公司/dd dt材质/dt dd铝合金/dd /dl这段代码无论对SEO还是对读屏工具的友好度都远高于div堆出来的结构。3.3 a标签的四个易错点href、target、下载、锚点a标签是超链接的载体最常用的属性是href和target。target_blank表示新标签页打开_self默认在自身页面打开。实际开发中给target_blank时建议顺手加上relnoopener noreferrer这个在旧版浏览器中能避免新页面通过window.opener反向控制来源页面虽然现代浏览器默认已经做了隔离但这个习惯许多团队仍然保留。链接跳转还有个常用分支是“锚点”也就是页面内部定位。给目标元素加id再把href写成#id名点击即可平滑滚动到位这个方法是零依赖的比写JS更高效。有一点经常被问a标签包了图片能不能点可以a里嵌img完全合法整块区域都是可点击的。还有a标签和button的区别简单说跳转用a动作触发用button语义上不要混。3.4 img标签必须养成的两个习惯alt和width/height图片标签img是自闭合标签常用属性src、alt、width、height。alt属性必须养成写的习惯它有三重作用图片加载失败时显示替代文字、搜索引擎识别图片内容、读屏工具给视觉障碍用户朗读图片描述。很多团队做SEO会发现图片搜索流量非常可观alt写得到位也有贡献。图片尺寸的细节如果只写width或只写height另一个值会自动等比缩放但如果你两个都写且不匹配原图比例图片会被拉伸变形。所以要么只写一个要么保证比例一致。响应式场景下更推荐CSS控制尺寸img标签只保留原始资源地址。另外loadinglazy懒加载属性可以直接写在img上兼容性和性能表现在现代浏览器中都过关图片多时能省不少首屏资源。4. 表格与表单谁说表格死了它只是换了活法4.1 table、tr、td、th结构顺序和合并单元格规则表格标签的正确结构顺序是table下面先有thead表头、tbody表体、tfoot表尾这三个分区每个分区里放tr行行里放th表头单元格或td普通单元格。早期很多人直接把tr写table下面跳过thead/tbody虽然浏览器会自动补全但代码可读性和可访问性都差。表头单元格th默认加粗居中表示“这一列/这一行的标题”。合并单元格用colspan横向合并和rowspan纵向合并比如colspan2表示占两列。实际中用表格做复杂报表时合并逻辑容易写乱我的经验是先画一个草稿网格标出合并位置再写代码效率能高一倍。4.2 表格的真正归宿展示结构化数据很多人做页面布局时用table这已经是上一个时代的老做法。现代布局用flex和grid但表格并没有退出历史舞台它依然是在“数据展示”这个场景下最好的原生方案——邮件里的排版、后台管理系统的数据列表、财务报表这些都是table的主场。数据量大的表格记得给table加border-collapse: collapse避免单元格之间出现默认双边框纯展示性质的表格加caption标签给表格一个标题这对无障碍阅读和SEO都有帮助。行内编辑、排序等高级交互建议配合前端框架封装组件不推荐手写大量原生DOM操作。4.3 form、input、textarea、select、button表单五件套的使用细节表单是页面和用户交互的核心入口。form标签用action指定提交地址method指定get或post。注意form的默认提交行为会把页面整页刷新现代前端开发一般用JS拦截submit事件再配合fetch或axios发异步请求这样体验更顺滑。input标签类型极多text、password、email、number、checkbox、radio、file都是日常高频HTML5还加了date、color、range等移动端会按类型弹出对应键盘。textarea是文本域换行和空格能保留default是两行。select下拉菜单配合option子标签使用。button有submit、reset、button三种typetype不写时默认是submit这个细节经常导致“按钮一按页面就刷新”的奇怪现象。给表单控件匹配label标签时用for属性指向控件的id点击label文字就等于点击控件这个交互细节对移动端体验提升明显。4.4 fieldset、legend和输入状态属性表单可访问性的进阶fieldset是表单控件分组标签legend是分组标题。比如做一个“个人信息”和“收货地址”两个区域的分组表单用fieldset加legend能让页面结构一清二楚对读屏软件尤其友好。很多前端工程师写表单多年都没用过这组标签其实在复杂表单里它们对可访问性的贡献非常大。input的可选属性里required表示必填浏览器会自动校验并在提交时报提示placeholder是占位提示文字disabled禁用输入readonly只读。disabled和readonly看起来相似但disabled控件不会参与表单提交readonly会这一点在需求确认时要拎清楚。还有pattern属性可以写正则校验不过涉及复杂联动校验时还是用JS更可靠。5. 语义化标签HTML5带来的不只是新写法更是新思维5.1 header、nav、main、footer的页面分区正确姿势HTML5新增的语义化标签把页面分区提升到了新高度。header通常放网站logo、导航或文章标题区nav放主导航main放页面核心内容整个页面最好只有一个mainfooter放版权、备案号、底部信息。还有aside表示侧边栏section表示页面里的独立区块article表示独立成文的内容比如一篇博客或一条评论。一套经典页面骨架可以写成这样body header站点头部/header nav导航菜单/nav main article文章主体内容/article aside侧边栏/aside /main footer页脚/footer /body这种结构下来哪怕完全没有CSS页面内容的阅读顺序依然通顺SEO爬虫和读屏工具都会觉得非常友好。这就叫“结构先于表现”。5.2 div与section的选择困难症怎么治很多人在div和section之间纠结到底什么时候用section一个比较实用的判断标准是如果这个区块在文档里有自己的标题比如h1/h2并且内容上能独立成块就用section如果纯粹是布局需要、没有语义含义就用div。article强调的是“独立发布单元”博客正文、新闻内容、用户评论都算section更像“章节”article内部可以嵌套多个section。还有一对容易被忽略的标签是figure和figcaption前者表示插图、图表、代码块等独立内容后者是它的标题说明。给文章配图时用figure包一层里面放img和figcaption语义比裸img清晰得多适合图片较多、需要统一说明的场景。5.3 时间、进度和格式化time、progress、mark的极简用法time标签可以表示时间点或时间段配合datetime属性能让机器读懂时间比如time datetime2025-06-016月1日/time。progress表示进度条原生外观简单常用来展示下载进度或任务完成度。mark表示高亮标记文本默认是黄色背景可以凸显用户在搜索结果中命中的关键词。这些标签体积小性价比却很高。比如在文章页显示发布时间用time标签可以方便浏览器或插件提取写教程类页面时用progress展示阅读进度也能减少JS工作量。缺点是样式定制需要额外CSS但胜在语义明确、零依赖小型项目和原型图里用起来非常顺手。6. 嵌入内容与全局属性说说多媒体和那些“每个标签都能用”的属性6.1 iframe嵌入、audio与video在页面里放“别人的内容”和“流媒体”如果要在页面里嵌入另一个网页、地图组件或第三方支付页面iframe是最直接的方案。但iframe也有很多问题会阻塞onload事件、增加内存消耗、SEO不收录内嵌内容所以能用替代方案就尽量不用。现代项目中已经大量用Web Components和微前端方案替代iframe但对零依赖的第三方交互内容它依然是兜底选项。audio和video是HTML5的新媒体标签。用法上src可以直接指向媒体文件controls属性显示原生播放控件preload属性可以控制“是否预加载”autoplay在大多数浏览器里会被禁止想要自动播放通常先静音这是产品策略上的限制也是浏览器对用户打扰的干预开发中要注意提示用户手动开启声音。6.2 class、id、style、data-*日常必备的全局属性有几个属性几乎每个标签都能用值得专门理一理。class是类名可以重复CSS和JS都靠它来定位元素id是唯一标识页面里只能有一个同名id常用于锚点定位和JS快速获取style是行内样式权重高于普通CSS但代码复用性差一般只在测试或动态修改时用。>