1. 从“骨架”说起为什么必须先搞懂HTML标签做了这么多年前端我带过不少新人发现一个很有意思的现象很多人一上来就急着学CSS、JavaScript觉得HTML太简单不就是一堆尖括号嘛。但真正写起页面来要么div套div嵌套到头晕要么语义化一塌糊涂要么表单提交各种莫名奇妙的问题。到头来还是得回头补HTML的课。其实HTML标签就是网页的骨架。你想想盖房子得先有梁柱结构然后才能砌墙、刷漆、装水电。HTML是梁柱CSS是墙皮和油漆JavaScript是水电网络。骨架搭歪了后面再漂亮的样式、再强大的交互都站不稳。这也是为什么所有前端学习路径都把HTML放在最前面它不是一个“会写就行”的东西而是一个需要系统理解、长期打磨的基础功。这篇内容我就把HTML常用标签从头到尾捋一遍包括每个标签的用途、属性、写法、常见坑点以及我这些年实际开发中总结的一些经验。不管你是刚接触前端的新手还是写了几年想查漏补缺的老手这份内容都能让你对HTML标签有一个更完整、更扎实的认知。2. HTML标签的核心认知元素、属性与嵌套规则2.1 标签、元素、属性这三者的关系到底是什么先把最基础的概念厘清很多新手写代码的时候会把“标签”和“元素”混着叫虽然日常沟通无所谓但心里要清楚标签是写在尖括号里的东西比如p是开始标签/p是结束标签而元素则是开始标签、结束标签、里面的内容三者加在一起的整体。平时说“写一个p标签”严格讲是“写一个p元素”但大家都懂就不必较真了。属性则是加在开始标签上的额外信息用来定义元素的特征。比如a hrefhttps://example.com链接/a这里的href就是属性它告诉浏览器点击这个链接要去哪里。属性通常以“名值”的形式出现值用引号包起来单引号双引号都行但建议统一用双引号代码风格更干净。关于属性我要特别提一点布尔属性。这种属性比较特殊它不需要写值写了就代表“真”。最典型的例子就是input disabled一个孤零零的disabled放在那里就代表这个输入框禁用了。你也可以写成disableddisabled效果一样但没必要。很多初学者不理解这一点看到别人写checked、required不写值还以为写错了其实这是标准写法。2.2 双标签与单标签以及嵌套的“规矩”HTML标签分两大类。绝大多数是双标签有开始有结束比如div/div、h1/h1。还有少数单标签也叫空标签它们没有内容也不需要闭合比如img、input、br。在老一点的规范里单标签需要写成br /这种自闭合形式但在HTML5标准下写br就行我都按HTML5的习惯来。嵌套规则是另一个容易踩坑的点。HTML要求标签嵌套必须“正确闭合”也就是后打开的先关闭。比如divp文本/p/div是正确的但divp文本/div/p就是错误写法。浏览器虽然能自动纠错很多错误写法的渲染结果看起来也正常但这个问题会引发连锁反应尤其在写JavaScript操作DOM的时候结构不对会导致找错节点、样式错位等一系列麻烦。还有一个隐含规则是块级元素和行内元素的嵌套限制。像div、p、h1这类块级元素可以包含行内元素也可以包含其他块级元素但a、span这类行内元素规范上不应该包含块级元素。不过HTML5放宽了一些比如a标签里嵌套div在某些场景下是允许的主要用于整块可点击区域。我的建议是别为了省事把行内元素硬塞块级元素语义不对后续维护也容易出问题。2.3 全局属性写在任何标签上都生效的通用属性除了每个标签自己的特有属性还有一批全局属性对任何标签都适用。class和id是最常用的class用来标识一组元素CSS选择器和JavaScript查询都靠它id要求页面内唯一通常给特定元素做锚点定位或单独控制用。style属性可以内联写样式但我建议尽量少用样式问题交给CSS文件处理内联样式会使维护成本变高。title属性容易被忽略它能让鼠标悬停在元素上时显示提示文字。这个在给用户解释某些图标的含义时很好用同时它对无障碍访问也有帮助屏幕阅读器会读取部分title内容。还有>video controls width640 source srcmovie.mp4 typevideo/mp4 source srcmovie.webm typevideo/webm 您的浏览器不支持 video 标签。 /videocontrols属性显示浏览器自带的播放控制条autoplay自动播放注意带声音的自动播放在多数浏览器中会被拦截需要静音才允许比如muted autoplay组合常用于背景视频loop循环播放poster指定视频封面图。source标签可以列出多个视频格式浏览器会按顺序选择第一个能播放的格式。最后你写的“您的浏览器不支持”这段文字会在完全不支持时显示。实际开发中视频加载策略很重要。一个几十MB的视频如果直接放在页面里首屏加载用户可能在弱网环境下等半天。我一般建议做“点击封面图后再加载视频”的方案先用img展示封面用户点击后动态创建video并设置src再播放。这个优化思路在移动端尤其重要能节约大量流量。audio的用法和video几乎一样属性也类似。区别在于没有poster因为音频没有画面。如果你是做音乐类、博客播客类网站audio配合controls就能快速实现一个可用的播放器。更复杂的播放列表、进度条、音量控制那就要靠JavaScript加自定义播放器UI了但标签层面的基础是一样的。5. 列表、表格与表单页面的“数据组件”5.1 列表的正确姿势ul、ol、li、dl列表标签有三种无序列表ul、有序列表ol、描述列表dl。ul里每一项用li包裹浏览器默认渲染为圆点符号ol同样用li但渲染为数字序号。这三种标签要记住一句话li的直接父级只能是ul或ol不要在div里直接放一堆li那是错误结构。无序列表是用得最多的列表类型导航菜单、商品列表、文章列表都是ul实现的。不管多复杂的页面结构底层往往就是一串列表项。早期很多前端用ul做导航菜单然后通过CSS去掉默认的圆点符号。有序列表用得少一些但适合步骤说明、排行榜这类有顺序含义的内容。ol的type属性可以切换序号样式数字、字母、罗马数字start属性可以指定起始值。这些在某些特殊场景下很实用比如法律条文、考试试题。描述列表dl在普通网站里出现频率偏低但它包含dt术语名和dd描述详情适合做名词解释、键值对信息展示比如产品参数列表、用户信息卡片。很多开发者对dl陌生实际上用它做一个“规格表”比满屏的divspan结构语义清晰得多。5.2 表格标签table、thead、tbody、tr、th、td表格是老牌标签在Web早期是页面布局的主力用表格拼页面现在它回归本职——展示结构化数据。一套完整的表格结构分为thead表头、tbody表体、tfoot表尾每行用tr表头单元格用th普通单元格用td。一个典型表格table thead tr th商品/th th单价/th th数量/th /tr /thead tbody tr td苹果/td td5元/td td2/td /tr /tbody /tableth默认加粗居中语义上也表示“这是一个表头”和td的“这是数据”有本质区别。合并单元格用colspan横向合并和rowspan纵向合并这个在复杂报表里是刚需。新手最容易犯的一个错是表格列数不统一。比如表头写了4列表体某一行只写了3个单元格浏览器渲染时这一行就会少一列错位很难看。写复杂表格之前先在纸上把列数、合并关系画出来再动手写HTML能省不少调试时间。另外现在的项目很少直接对表格做复杂的装饰样式但table的语义仍然是不可替代的。不用考虑用div模拟表格结构来实现数据展示那样既不语义化又难维护。5.3 表单标签全解form、input、textarea、select、button表单是和用户交互最频繁的组件也是HTML知识点最密集的区域。form是表单的容器它有两个关键属性action数据提交到哪个URL和methodGET或POST。现在也有很多项目完全靠JavaScript的fetch或axios异步提交数据action反而不写了但form的语义和内置校验能力依然重要。input标签的类型由type属性决定这是整个HTML里最需要花时间掌握的属性之一。text是普通文本输入框password是密码框输入内容被掩码email自带邮箱格式校验number限制数字输入date提供日期选择器checkbox和radio对应复选和单选file是文件选择。textarea是多行文本输入框用rows和cols控制行数列数不过现代开发一般用CSS控制高度rows的角色就是默认值。它和input的关键区别在于textarea不是单标签需要写成textarea内容/textarea初始内容写在标签中间而不是value属性里。select是下拉选择框内部用option定义选项optgroup还能给选项分组。一个常见的坑是选项里的文字默认会被当作提交值。如果想“显示文字”和“提交值”不同要给option显式设置value属性。比如option value1苹果/option提交的是1而不是苹果。button按钮标签有几种形态typesubmit触发表单提交typereset重置表单typebutton则是普通按钮需要配合JavaScript加事件。很多初学者容易忘记写type属性导致按钮行为变成默认的submit放在表单里一点击就刷新页面这个坑几乎每个人都会踩一次。5.4 表单控件的常用属性name、value、placeholder、required表单控件的属性很多但日常开发中最重要的是name和value。name是控件提交给服务器时的“字段名”。没有name的表单控件数据根本不会提交。比如input typetext nameusername提交后服务器收到的数据就是username用户输入的值。placeholder是输入提示文字比如“请输入手机号”。它只是提示不是值提交时才不会带上它。required标记必填项浏览器自带校验不填就提交会弹出提示并阻止提交。disabled禁用控件禁用的控件不会提交数据。readonly则是只读用户可以看见内容但不能修改但它的数据会提交。给控件加label标签也是一个很重要的习惯。label可以关联到具体控件用户点击label文字时等价于点击控件本身这对于勾选checkbox和radio的体验提升特别明显。关联方式有两种label文字input/label嵌套或者label forinput-id文字/label配合控件id。我推荐第二种写起来更清晰。注意移动端开发时input的type尽可能用email、tel、number这些语义类型键盘会弹出对应的数字键盘或邮箱键盘。如果只是盲写typetext用户在手机上输入数字要切换键盘模式体验差距挺明显的。6. 结构化与布局标签从div满天飞到语义化6.1 div是万能容器但它不该是唯一选择div是最常用的容器标签它没有任何语义纯粹用来划分区域和配合CSS布局。在过去很长一段时间里前端页面几乎是div的天下甚至有人调侃说“前端就是div套div”。div当然没有错但在HTML5时代更推荐的做法是“能用语义化标签就用语义化标签”。原因在于语义化标签能让页面结构一目了然对SEO更友好对屏幕阅读器更友好也让团队协作时其他人能快速理解你的布局意图。**div和span仍然是重要的兜底方案但不应成为第一选择。**比如页面头部、导航、主体、底部这些区块都有专属的标签可用何必全用div呢。6.2 HTML5语义化标签header、nav、main、article、section、aside、footerHTML5带来了一批有明确语义的结构标签让“骨架”更清晰header页面或区块的头部区域通常放标题、logo、导航。nav导航区域放一组主要的页面链接。一个页面可以有多个nav比如顶部主导航和底部导航。main页面的主要内容区域一个页面建议只出现一次。它是页面中独一无二的、最核心的那部分。article一个独立的、完整的内容块比如一篇博客文章、一个论坛帖子、一条新闻。它要求“脱离页面也能被理解”。section页面中的独立区块通常带有标题。可以理解为文档里的“章节”。aside侧边栏或和主体内容关联度低的补充内容比如推荐阅读、广告位、相关链接。footer页面或区块的底部区域放版权信息、联系方式、备案号等。这些标签不是孤立的它们可以互相嵌套。比如一个article里可以有多个section每个section里又可以有header和footer。关键在于理解“语义”而不是“位置”。比如footer不是只能出现在页面最底端它也可以出现在某个article底部表示这篇文章的脚注信息。这套语义化结构对SEO优化也有很好的加成搜索引擎能更快抓取到页面结构的关键信息区。6.3 实战案例用语义化标签搭一个标准页面框架我直接给你一版可以抄作业的页面框架它涵盖了上面这些语义化标签的典型用法!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title页面标题/title /head body header h1站点名称/h1 nav ul lia href/首页/a/li lia href/posts文章/a/li lia href/about关于/a/li /ul /nav /header main article h2文章标题/h2 p发布时间2025-01-01/p section h3章节一/h3 p正文内容/p /section section h3章节二/h3 p正文内容/p /section /article aside h3相关推荐/h3 ul lia href#推荐阅读一/a/li lia href#推荐阅读二/a/li /ul /aside /main footer p版权信息/p /footer /body /html你可以看到这套结构完全没有用div但每个区块的用途一看就明白。个人博客、新闻站点、企业官网都能直接拿这个骨架起步再往里面填充内容和样式。同时每个section里的h3不是随手写的它是顺着整个页面的h1 → h2 → h3层级下来的语义顺序严丝合缝。这一点值得慢慢体会——页面结构不是好看而已它是在替浏览器、搜索引擎和所有阅读者梳理内容网。7. 常用标签避坑指南与排查经验7.1 标签闭合与嵌套错误为什么有时候“看不出问题”HTML解析器非常宽容它有一套自己的纠错逻辑。即使你写了不闭合的div或者嵌套错乱浏览器也能勉强渲染出页面。但不要高兴这种“宽容”只是表面现象。DOM结构一旦不符合预期轻则CSS选择器匹配不上你以为的父元素不是真正的父元素重则JavaScript获取节点拿到莫名其妙的结果。一个真实场景某开发者写了一段结构divp文本/div然后想在CSS里用p的父级选择器去找div却发现样式不生效。查看控制台才发现浏览器自动把p闭合到了div前面生成的DOM结构和他想象的不一样。这种问题最坑的地方在于页面看起来正常只有等你调试到具体功能时才暴露。所以我一直强调写HTML时标签闭合要养成肌肉记忆写完可以用开发工具的Elements面板检查一下DOM树别想当然。7.2 编码与字符实体中文乱码的锅多半在这里页面中文乱码十有八九是编码声明问题。meta charsetUTF-8要放在head里比较靠前的位置。如果你不声明字符集浏览器可能用本地默认编码去解析中文字符就变成一堆乱码。这个问题在新手项目里太常见了很多人翻来覆去找原因结果就是漏了一行meta标签。另外在HTML中直接写、、这些字符是要小心的因为它们会被解析成标签或实体。如果你想在页面里展示“5 6”这个文本直接写5 6会被浏览器当成一个未闭合的标签来处理虽然也能显示但可能产生奇怪的渲染效果。正确的做法是用字符实体lt;表示gt;表示amp;表示nbsp;表示不换行空格。还有版权符号copy;、引号quot;这些写文档的时候遇到就查一下用多了自然记住。7.3 浏览器默认样式差异与reset策略写HTML不看样式就是看“默认渲染效果”。但不同浏览器的默认样式是有差异的比如ul的默认内边距在浏览器间不一样button的默认边框和背景也不相同。这会导致同一个页面在不同浏览器里的基础表现不同。所以现代项目基本都会引入一套CSS Reset或Normalize样式把所有标签的默认样式统一掉再基于统一标准写自己的样式。我个人的习惯是在项目初期就把reset做好不管用的是第三方库还是自己写一套精简版这个步骤都要尽早做。避免写到一半发现所有浏览器显示都对不齐回头再补reset改起来牵一发动全身。7.4 常见问题速查表把平时见过的高频问题整理成表格碰到类似情况直接对照查。现象常见原因解决方案点击submit按钮页面刷新按钮缺少typebutton默认触发表单提交给非提交类按钮显式加typebutton表单数据提交后后端收到空值控件缺少name属性给需要提交的控件加上name中文显示乱码head里缺meta charsetUTF-8在head最前面加编码声明图片底部有一条空隙img默认是行内元素基线对齐产生空隙给img设置display:block页面里点击链接跳转后原页面被篡改未加relnoopener noreferrer给target_blank的链接补充rel新写的CSS样式不生效标签嵌套或类名选择器结构与预期不符打开开发者工具Elements面板检查DOM树移动端输入数字弹出全键盘input的type是text改用typetel或typenumber复选框文字点击无效复选框没有关联label用label for或嵌套方式关联这些坑不算深但每一个都是真实项目里反复出现过的。尤其对新人来说一个表单提交的坑就能折腾半天其实背后原理很简单按钮的默认行为、控件的name属性、表单的action一条线串起来理解就不会再困惑。8. 写在最后扎扎实实把标签用好比追新框架更值我在实际写代码的过程中有一个体会HTML标签的知识不属于“看一遍就会”的东西它更像肌肉记忆。你写多了自然知道什么时候该用section而不是div知道button默认行为会带来什么影响知道表单控件没有name就不会提交。这些东西没有太多炫技空间但恰恰是它们决定了页面的地基稳不稳。最后分享一个小技巧拿到一个网页或模板后先用浏览器开发者工具把它的HTML结构从头到尾读一遍看别人是怎么组织标题结构、怎么处理表单、怎么用语义化标签的。阅读优秀代码比看一百篇理论文章都管用。HTML的常用标签就是这些不多但每个都值得你花时间真正吃透。搭建页面骨架这一步走得稳后面学CSS和JavaScript才能走得快。