【H5 前端开发笔记】第 02 期HTML标签之间的关系、HTML注释、标签属性2026 最新版 · 结构清晰 · 可直接作为学习笔记一、本期核心知识点概览本期我们重点学习 HTML 的三大基础概念HTML 标签之间的关系父子、兄弟、祖先、后代HTML 注释的正确写法与作用标签属性Attribute的详细用法掌握这三点是写出规范、清晰、可维护 HTML 代码的前提。二、HTML 标签之间的关系非常重要HTML 文档本质是一个树状结构DOM 树。标签之间存在明确的层级关系。1. 常见关系术语关系名称英文术语含义说明示例父元素Parent直接包含当前元素的上一级元素div是p的父元素子元素Child直接被当前元素包含的下一级元素p是div的子元素兄弟元素Sibling拥有同一个父元素的元素两个li互为兄弟祖先元素Ancestor当前元素的父元素、父元素的父元素……body是所有可见元素的祖先后代元素Descendant当前元素包含的所有子级、孙子级……div的后代包含里面的所有标签根元素Root整个文档的顶级元素html2. 实际代码示例强烈建议手敲理解!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title标签关系示例/title/headbody!-- 祖先元素、根元素之一 --header!-- body 的子元素 --nav!-- header 的子元素body 的后代 --ulli首页/li!-- ul 的子元素li 之间互为兄弟 --li关于我们/li/ul/nav/headermain!-- body 的子元素与 header 是兄弟 --article!-- main 的子元素 --h1文章标题/h1p这是段落内容span重点文字/span/p!-- p 的子元素是 span --/article/mainfooter/footer!-- body 的子元素与 header、main 是兄弟 --/body/html记忆口诀父子关系看直接包含兄弟关系看同级祖先后代看包含关系。三、HTML 注释Comments1. 写法!-- 这是一行注释内容 --!-- 这是一个多行注释 可以写很多行 常用于解释复杂结构或临时隐藏代码 --2. 注释的作用解释代码意图提高可读性临时隐藏某些代码调试时非常有用团队协作时标注 TODO、注意事项等3. 注意事项2026 规范注释不能嵌套下面写法错误!--外层注释!--内层注释--!-- 错误 ----注释不会被浏览器显示也不会影响页面性能生产环境建议删除过多注释减少文件体积四、标签属性Attribute详解1. 基本概念属性是写在开始标签里面用于给标签提供额外信息或功能的键值对。语法格式标签名属性名属性值属性名属性值2. 属性分类2026 最新理解全局属性Global Attributes几乎所有标签都可以使用专有属性只有特定标签才支持如img的src、alt3. 常用全局属性必须掌握属性名含义说明推荐写法示例id唯一标识一个页面只能出现一次idmainclass类名可重复用于 CSS 和 JS 选择classbox redstyle行内样式不推荐大量使用stylecolor:red;title鼠标悬停时显示的提示文字title删除此项lang语言声明langzh-CNdata-*自定义数据属性非常重要data-id123data-user-name张三hidden隐藏元素布尔属性hiddentabindex控制 Tab 键聚焦顺序tabindex04. 常用专有属性示例!-- 图片必须属性 --imgsrcphoto.jpgalt产品照片width300height200loadinglazy!-- 链接常用属性 --ahrefhttps://example.comtarget_blankrelnoopener noreferrertitle打开官网访问官网/a!-- 表单常用属性 --inputtypetextnameusernameplaceholder请输入用户名requiredmaxlength205. 布尔属性Boolean Attributes特点只写属性名不需要写属性值表示“开启”该功能。inputtypecheckboxchecked!-- 已选中 --buttondisabled提交/button!-- 不可点击 --videocontrolsautoplaymuted/video五、本期综合练习建议全部手写一遍写一个完整的 HTML 页面包含header、nav、main、footer在nav中用ul写导航菜单两个li之间用注释说明“这是兄弟元素”给至少 3 个标签加上id、class、title属性使用data-id1001自定义属性用注释标注页面的主要区域头部、内容区、底部六、笔记总结建议抄写或高亮HTML 是树状结构标签存在父子、兄弟、祖先后代关系注释用!-- --不能嵌套主要用于解释和临时隐藏属性写在开始标签内格式为属性名属性值全局属性id、class、style、title、data-*几乎所有标签都可用布尔属性只写属性名即可强烈推荐多使用语义化标签 有意义的 class 和>