HTML标签之间的关系、注释、属性这期内容其实是很多前端新人最容易忽略也最容易稀里糊涂的部分。标签不会写查一下文档就行但标签之间怎么组织注释怎么写才不出错属性到底在起什么作用这些才是决定你后面学 CSS 和 JS 顺不顺的关键。这期笔记专门把这三件事拆开揉碎讲清楚。不管你是刚接触 H5 页面开发的新手还是已经写了几个静态页面、但对一些细节还是一知半解的初级前端这篇内容都值得完整看一遍。思路我会按标签怎么组合、注释怎么写、属性怎么用来展开中间穿插大量代码示例和调试经验尽量做到每句话都能落地。1. HTML基础框架先搞懂标签之间的关系后面少走弯路1.1 从DOCTYPE到body一张网页的基本骨架你有没有想过每次新建 HTML 文件时编辑器自动生成的那一坨代码到底是什么意思大多数时候我们直接忽略它眼一闭就开始写 div。但恰恰是这些每次都在但从未细看的标签构成了 HTML 最基础的层级关系。一个完整的 HTML 文档通常长这样!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个页面/title /head body h1你好HTML/h1 p这是段落内容。/p /body /html这里面的关键点不只是每个标签有什么用而是它们之间的包含关系。!DOCTYPE html在最外层但它不是HTML标签它是一个文档类型声明告诉浏览器接下来请用现代标准模式解析页面。它和html不是父子关系更像是一个门卫站在门口宣布规矩。真正撑起整个页面的是html标签。它是整个文档的根节点。你会发现它内部只有两个二级节点head和body。一个管配置信息一个管页面内容。这就好比开一家餐厅head是后厨规章制度和菜谱顾客看不见但决定菜品质量body是餐厅的门面、桌椅和菜品顾客直接看到和操作的东西。理解了这层关系之后再看head内部的那些标签就顺理成章了meta是配置项title是浏览器标签栏显示的标题link引入外部样式script引入脚本。它们都是 head 的子标签为整个页面提供幕后支持。1.2 父子、兄弟、祖先与后代把标签结构想象成家族树HTML 标签之间的关系我用一个词总结就是——树。HTML 文档就是一棵倒着长的树根部是html往下不断分叉。树伸展出的每个分支对应着标签之间的四种关系父与子、兄与弟、祖先与后代、以及没直接血缘但同处一棵树的节点。先看一个最典型的例子ul classlist li classitem前端/li li classitem后端/li li classitem测试/li /ul这里ul是父三个li是它的三个子节点。三个li之间互为兄弟节点。如果我在某个li里面再放一个a链接那a就是li的子节点也是ul的后代节点同时a和另外两个li之间既不是父子也不是兄弟它们只是同在一棵树下。这种关系在日常生活中很好理解比如爷爷是祖先爸爸是父儿子是子叔叔和爸爸是兄弟堂兄弟之间就是同根但不同支。为什么非要把关系理得这么清因为后面学的两个核心内容完全依赖这层关系CSS 选择器里的后代选择器.list .item只选中.list后代的.item不会选中.list外部的.item。如果标签嵌套结构写错了CSS 选择器就会打到错误的元素上。JavaScript 的 DOM 操作parentNode、children、nextElementSibling这些 API全部是基于节点关系来定位元素的。你连父子兄弟都分不清写页面逻辑时就会各种找不到元素。这是我踩过最大的坑之一。早些年我写页面div 套 div套到后面自己都不知道哪个 div 是哪个的父节点结果改样式时要么改错了地方要么选择器权重叠了一堆!important。后来养成的习惯是每写一个嵌套结构先在脑子里画一下这颗小树长什么样。关系顺了后续的样式和脚本才好写。1.3 嵌套规则块级元素与行内元素到底谁包谁标签之间的关系不只是能放进去还有一套默认的包含规则。虽然 HTML5 不再严格区分块级和行内元素但实际开发中它们的行为差异依然明显。简单说块级元素比如div、p、h1、ul默认独占一行宽度占满父容器行内元素比如span、a、strong不会换行宽度由内容撑开。嵌套规则有一条很经典的红线p标签内部不能放块级元素。很多新手会写p div我是错误的嵌套/div /p这个页面在浏览器里看起来好像没问题但实际浏览器解析时会帮你在p内部自动补上一个闭合标签把div踢出来导致结构完全变样。你打开开发者工具会看到 HTML 已经变成了两层p/p div我是错误的嵌套/div p/p这种隐性报错很难排查因为页面没有崩溃只是结构乱了。CSS 一写莫名其妙有间隙、有偏移你死查都查不出原因。所以最好的办法就是在一开始遵循环块级元素可以包含行内元素和其他块级元素特殊情况例外行内元素尽量避免包含块级元素。写嵌套之前多问一句这个结构在语义上合理吗能省掉后面各种调样式的破事。2. HTML注释不只写给人看更是调试利器2.1 注释语法与写注释的正确姿势HTML 注释的语法很简洁!-- 这里是一段注释浏览器不会渲染它 --注释可以放在head里也可以放在body里几乎任何位置。它最大的特点是浏览器解析时会直接跳过用户看不到但源码里和开发者工具里能看见。写注释这件事很多新手觉得没有必要觉得代码又不复杂我写得清楚就行了。但只要你试过接手别人的项目或者在半年后回头改自己写的页面就会明白注释有多重要。HTML 是结构语言它不像 JS 那样有变量名和函数名能传递语义一段 div 套 div 的结构脱离了注释你根本看不出当时为什么要分这几层。一般我的注释习惯分两类结构分区注释在比较长的页面中用注释标记每个区块的起点和终点比如!-- 头部导航开始 --、!-- 头部导航结束 --。配合编辑器的代码折叠功能找结构非常方便。临时隐藏注释调试的时候把某一段代码注释掉看看页面变化这是最简单有效的排查方法。比如怀疑某个模块影响了布局可以直接给它加上注释刷新页面看效果。还有一个小技巧写注释时要有写给未来的自己的心态。不要写这是导航栏这种废话因为代码本身已经表达了它是导航栏。要写的是这里为什么用 flex 而不是 grid、这里为什么没有用语义化标签而是 div这种上下文信息才是注释真正的价值。2.2 注释使用的几个坑嵌套、隐藏与过期内容注释虽然简单但实际使用中有几个问题经常遇到。第一个问题是注释嵌套。HTML 注释不支持嵌套这跟某些编程语言不一样。如果你写了!-- 外层注释 !-- 内层注释 -- --浏览器解析到第一个--的时候就认为注释已经结束了后面的--会变成页面上的可见文本。结果就是页面莫名其妙多了一撮内容而且看起来极其诡异。这个问题在批量注释一大段代码时特别容易踩到因为这段代码里可能本身就包含了注释。第二个问题是不要在注释里放敏感信息。有人说注释用户看不到放点账号密码没关系吧大错特错。所有 HTML 注释在开发者工具和查看源代码里都是完全可见的。你写上去的口令、接口地址、联系方式全都等于公开发布。我有一次帮朋友排查一个外包项目的漏洞就是在注释里找到了后台地址和管理员提示虽然没真去攻击但这个事给了我一个很深的教训凡是不能公开的东西一律不要写进注释里。第三个问题涉及条件注释。老版本的 IE 浏览器支持一种特殊的条件注释比如!--[if IE] ... ![endif]--用来针对 IE 写特殊样式。但如今这个机制已经彻底淘汰完全不需要学。如果你在网络上看到相关代码跳过就好。HTML 注释就只干注释这一件事别想着整花活。2.3 注释与调试临时注释引发的问题有时候你只是想临时注释掉一段结构看看效果结果一注释页面布局全乱了。这不是注释的错而是页面本身依赖了那段结构。比如你注释掉了一个div它的兄弟元素突然塌陷了宽度说明这个 div 在布局中还承担了撑起高度的作用。这种时候别急着恢复代码试着观察一下布局变化的原因反而能加深你对页面结构的理解。我通常的做法是先注释掉目标代码块刷新页面。打开开发者工具看当前页面的几何尺寸分布。找到少了它就不行的依赖点判断是结构问题还是样式问题。如果是样式问题就考虑是不是可以用更独立的写法避免以后误操作注释时影响整体布局。注释本身是安全的但注释掉代码之后页面崩溃的经历反而能暴露你对页面结构理解不足的地方。用过几次这个套路你的布局直觉会提升得很快。3. 标签属性为标签添加配置信息的关键机制3.1 属性的基本语法与工作机制标签属性可以理解为标签的配置项。每一个 HTML 标签都可以像设置开关和参数一样附加一些额外信息。比如一个img标签如果不加src属性就不知道要显示哪张图片img srclogo.png alt网站logosrclogo.png就是一个属性src是属性名logo.png是属性值。属性名的取值通常是固定的不能随便造除非是>input typetext disableddisabled就是布尔属性它和disableddisabled、disabledtrue的效果完全一样都表示禁用。同理还有checked、selected、readonly等等。很多新手看着别人的代码里一会儿写disabled一会儿写disableddisabled会以为有什么区别其实一点区别都没有。我自己习惯只写属性名因为更简洁也更符合现代前端社区的写码风格。3.2 全局属性id、class、style、title、data-*有一类属性几乎可以加在任何一个标签上它们叫全局属性。全局属性里日常开发最常踩、也最常出问题的就是id和class。id是元素的唯一标识等于给元素发了一张身份证。一个页面里id只能出现一次不能重复。它最重要的用途是给 JavaScript 和 CSS 定位元素。比如div idapp/div这是在很多前端框架项目里都会出现的经典结构idapp就是整个 Vue 或 React 应用挂载的根节点。另外id还有一个特殊作用带有id的元素可以通过#锚点链接直接定位到页面中的位置比如a href#footer跳到页尾/a。class是元素的类名可以重复也可以同时有多个类名用空格隔开div classbox box-primary box-small内容/div我见过不少新手问class和id到底用哪个原则其实很简单一个元素如果只用一次且需要单独标识用id如果多个元素共享同一种样式或行为用class。在实际项目中绝大多数情况下你都会用class因为页面的设计是有规律的按钮、卡片、导航每一项大多数都是同一套样式重复使用。id更多的用于逻辑锚点比如表单校验的某个输入框或者框架的挂载点。style属性也属于全局属性它允许直接在元素上写内联样式。但我建议你尽量少用尤其是做项目的时候。内联样式的优先级高于外部样式表会导致 CSS 重写困难而且不方便复用。它更适合应急调试——在开发者工具里临时改一改看效果。title属性也值得说。它可以在鼠标悬停在元素上时显示一段提示文字。比如abbr titleWorld Wide WebWWW/abbr还有一个非常实用的全局属性是>div>const form document.querySelector(form); const data new FormData(form); console.log(data.get(username));一行代码全凭控件的name才能准确取值。这就是属性的意义它给了标签身份和能力让结构层的标签真正能参与页面交互。3.4 meta标签属性页面编码与移动端适配里有一组很特殊但极其重要的标签——。它本身没有视觉效果却控制着整个页面的基础参数。最基础的就是编码声明meta charsetUTF-8这个属性它告诉浏览器这个页面用 UTF-8 编码解析。如果你不写这行页面里出现中文就很容易变成乱码尤其是和方案里的文件编码不一致的时候那酸爽谁见过谁知道。另一个高频 meta 是视口设置这对 H5 移动端开发是标配meta nameviewport contentwidthdevice-width, initial-scale1.0name是配置项的名字content是这份配置的具体内容。widthdevice-width表示页面宽度等于设备宽度initial-scale1.0表示初始缩放比例是 1。没有这行配置页面在手机上会按桌面宽度渲染然后被等比缩小字看起来特别小用户要双击才能放大。这只是恶性的移动端体验做 H5 不写 viewport 等于没做 H5。还有几个常见的 meta比如 SEO 相关的namedescription和namekeywords它们让搜索引擎能读懂页面主题。以及nametheme-color可以控制部分手机浏览器地址栏的颜色。这类标签的核心机制完全相同用name指定属性项用content指定属性值。我想表达的是HTML 属性在整个页面里无处不在不只是你在div上看到的那几个类名和 id更藏在 head 里这些默默工作的标签上。4. 实操写一个完整页面打开开发者工具观察标签关系4.1 VSCode 搭建页面从空文件到实时预览光说不练假把式。这一节我带你从零搭一个带基础结构的小页面重点不是页面多漂亮而是让你能在浏览器里看见标签之间的关系。环境依然是 VSCode。新建一个文件夹在里面创建index.html输入!后按 Tab 键VSCode 的 Emmet 语法会自动帮你生成一份标准的 HTML 骨架。我平时写页面特别喜欢用这个快捷键几秒钟就能把模板搭好。然后在 VSCode 里安装一个 Live Server 插件。它是本地开发调试的神器装好之后右键 HTML 文件选择 Open with Live Server浏览器会自动打开页面并且你在编辑器里改了代码保存浏览器会实时刷新。这样就能一边写、一边看效果。很多新手没有用 Live Server而是直接双击 HTML 文件用file://协议打开。但以后做项目要请求接口、加载本地数据时file://会有跨域限制很多功能都跑不通。从一开始就用 Live Server能省掉非常多不必要的坑。接下来我写一个简单的个人介绍页面把前面讲到的三类知识点全部用上!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title前端新人小站的个人介绍/title /head body !-- 头部导航 -- header classsite-header nav a href#about关于我/a a href#contact target_blank联系我/a /nav /header !-- 主要内容 -- main h1 classpage-title你好我是小站/h1 p classintro一名正在学习 strong前端开发/strong 的新人。/p img srcavatar.png alt我的头像 width120 height120 section idabout h2关于我/h2 p喜欢研究 HTML、CSS 和 JavaScript。/p ul li目前在学习 H5 页面/li li正在练习标签嵌套/li li试着理解属性机制/li /ul /section section idcontact h2联系我/h2 form label forusername昵称/label input typetext idusername nameusername placeholder请输入昵称 button typesubmit提交/button /form /section /main !-- 页脚 -- footer classsite-footer p© 2025 小站的HTML学习笔记/p /footer /body /html这个页面的结构是我刻意设计的。header、main、footer三个兄弟节点是页面的主骨架main里又包含h1、p、img、两个section其中每个section内又有各自的子节点。如果你想验证自己对标签关系的理解把这个页面的节点树在脑子里画一遍看能不能画对每一层。4.2 浏览器开发者工具查看页面代码构成的最佳方式页面在 Live Server 里打开后按F12或者右键点击页面任意位置选择检查就能打开开发者工具。重点看 Elements元素面板。Elements 面板里显示的 DOM 树跟你在 VSCode 里写的 HTML 是不是完全一样大多数时候是但也存在不一致的情况因为浏览器会在解析时自动修正一些错误嵌套。比如早前我们说的p标签套div你在源码里写的是p包div但在 Elements 里你看到的却已经被浏览器拆成了两个层级——这时候你会真正理解浏览器是一个宽容但又严格的环境这句话。在 Elements 面板里你可以直接把鼠标移动到某个标签上浏览器视图中对应的元素区域会高亮。我个人特别喜欢用这个功能来观察块级元素和行内元素的实际占位。选中一个div你会看到它占满一整行选中一个a你会发现它只占自己文字那么宽。你还可以在 Elements 面板里临时改属性、加样式这些修改不会写入源文件刷新页面就会还原。我经常用这个功能做临时实验。比如把某个div的display改成none看看页面会发生什么或者临时改一下img的src看看图片加载状态。这种改一改刷新再改一改的循环比只看教程理解深得多。网上有个提问高频词是vscode 做网页前端开发如何查看web界面代码构成的界面标准答案其实就一句话写代码用 VSCode看页面结构用浏览器开发者工具。这两个工具配合使用前端开发的基础链路就通了。4.3 实操中的属性调试在开发者工具里快速定位问题属性写错了最常见的现象有两种图片不显示、样式不生效或者其他行为异常。图片不显示先在 Elements 里找到这个img标签看它的src属性里的路径是不是对的。注意开发者工具里显示的路径是相对于当前页面的有些相对路径问题一眼就能看出来。样式不生效先看的是 DOM 结构再看 class 是否正确命中。比如我上面的页面里h1 classpage-title如果我想让它变红CSS 写法是.page-title { color: red; }。如果没变红去 Elements 面板里看看这个元素是否真的有page-title这个类名再看看有没有其他高优先级的样式把颜色覆盖掉了。绝大多数属性没生效的问题根源都在于类名写错、标签选错、层级关系选错。与其瞎猜不如直接在浏览器里检查元素的实际状态。这也是我一直向新人强调的HTML、CSS、JavaScript 三者是联动的你可以在 HTML 文件里看到标签但不代表你能看到页面最终状态。页面最终状态永远是浏览器的解析结果。所以标签关系、属性和最终渲染效果之间的关系一定要通过开发者工具去验证而不是只靠脑补。5. 常见问题与踩坑记录标签、注释、属性实战速查5.1 页面注释神秘消失或多出一截是怎么回事之前讲到过 HTML 注释的嵌套问题。这里把实际场景说透比如说你接手一个页面有一段代码你想暂时屏蔽掉于是你选中一大段然后按 Ctrl/如果你的编辑器按了两次——第一段里的注释刚好被选中那么新的注释块就会把旧的注释包住形成了嵌套注释。这时页面会在第二个--处终止注释剩下的文本直接渲染出来表现为页面上出现了一段混乱的文本内容。怎么快速排查打开开发者工具看 Elements 里被渲染出来的奇怪内容附近往往就能找到注释的闭合符号。如果你不想每次出问题都去翻源码可以在 VSCode 里打开折叠所有区域快捷键 CtrlKCtrl0带注释的代码块会自动折叠起来这时候嵌套注释的异常结构会显现得更清楚一些。最稳妥的规避方法是养成永远手动输入闭合注释符号的习惯。写注释的时候先写!-- --再把光标移到中间写内容。这样就不会出现忘记闭合、多闭合的问题。这个习惯一开始可能会觉得多此一举但用久了会发现它真的能救你于水火之中。5.2 单行注释与多行注释的误解很多编程语言里注释分成单行注释//和多行注释/* */于是有人会在 HTML 里问HTML 有单行注释和多行注释之分吗单行注释里能写多行内容吗答案很直接HTML 只有一种注释就是!-- --它天然支持多行写法。你可以在!--和--之间放任意行数的内容!-- 这是第一行 这是第二行 这是第三行 --所以不存在单行注释里能不能使用多行注释的问题HTML 注释本身就同时具备单行和多行能力。但要注意的是在这种多行注释内部不要再出现!--或--否则会导致注释提前终止。这是 HTML 注释和很多编程语言注释的一个显著差别也是新手最常踩的坑。5.3 属性值到底要不要加引号单引号还是双引号这个问题真的问得很多。HTML 规范里属性值在特定条件下可以不加引号比如只有字母、数字和一些特定符号时。但只要你用了空格、引号、尖括号等字符就必须加引号。实际开发里我建议任何属性值都加双引号。原因很简单不加引号是给自己埋雷早晚会因为值里混入特殊字符而出问题。至于双引号和单引号选谁HTML 官方没有明确规定。我推荐双引号因为这是社区的主流写法。万一属性值里本身包含双引号那就用单引号包整个值例如button title他说你好按钮/button或者反过来用双引号包外部、属性值里放单引号。核心原则只有一个保持外部引号和内部引号不冲突保证浏览器能正确解析整个属性值。我在写代码时如果遇到引号嵌套通常还会改为用实体编码quot;替代内部引号这样就完全避免了解析歧义。5.4 属性顺序重要吗小细节里的大习惯属性的书写顺序不会影响页面效果class和id谁先谁后结果都是一样的。但社区里有一些不成文的约定比如把id写在class前面把src、href这类元素核心属性写在最前面。这样做的唯一目的是可读性。当一行有个六七个属性的时候一个固定的属性顺序能帮你快速扫到关键信息。我自己写属性时一般遵循这个顺序核心属性src、href、type、name等 →id→class→style→>input typetext placeholder请输入你的昵称placeholder请输入你的昵称这个属性值中带了中文和空格但因为是双引号包裹解析会正常。但如果你误写成placeholder请输入 你的昵称不带引号浏览器就会把属性截断成placeholder请输入后面的你的昵称会被当作另一个你根本没想到的属性。这种问题很难一眼定位因为它不会报错只会让你发现提示文字怎么少了几个字。解决办法就是按习惯所有属性值都加引号这个坑基本就能避开。6. 写在最后的实操体验学到这HTML 最核心的三个基础板块——标签之间的关系、注释、标签属性——就算完整过了一遍。总结起来就三句话标签之间的关系决定了页面的结构骨架注释帮你理解这段结构骨架背后的意图属性给骨架上的每个节点赋予具体的能力和表现。如果让我给一个建议那就是别急着往下学。你可以把今天的内容做个小小的实战练习打开任意一个你经常访问的普通网页按 F12 打开开发者工具在 Elements 面板里找找它的head、body、header、main、footer看看它是怎么嵌套的看看那些图片和输入框上都挂了哪些属性。一边看一边想如果我来写这个部分我会怎么组织标签关系哪个属性是必不可少的这样过一遍之后你会发现自己对 HTML 的掌控力提升了不止一个档次。我个人是算法不太灵光、记忆标签全靠手速的那类前端但 HTML 这些基础我从来没觉得难因为它的逻辑链非常清晰——结构、说明、配置每一层都服务于一个明确目的。后面第 03 期我会写 CSS 选择器与标签关系的配合到时候你会发现今天理清楚的父子、兄弟关系马上就能派上大用场。