前面我们学过 HTML 元素开始标签 内容 结束标签。属性就写在【开始标签】里面用来给元素附加额外信息控制元素的行为、外观、功能。前言回顾示例a hrefhttps://www.baidu.com target_blank打开百度/aa是开始标签hrefhttps://www.baidu.com、target_blank这两个就是属性打开百度是元素内容/a结束标签⚠️重点规则属性只能写在开始标签里面绝对不能写在结束标签一个开始标签可以写多个属性属性之间用空格隔开。属性格式固定属性名属性值引号必须英文双引号新手不要用中文引号。一、HTML 属性基础语法标准格式标签名 属性名属性值 属性名2属性值2内容/标签名拆解属性名HTML 规定好的英文单词不能自己随便瞎编。等于号紧贴属性名不要乱加空格。属性值放在英文双引号中间描述这个属性具体是什么。多个属性之间用空格隔开逗号、分号都不能用来分隔属性。✅正确示例a hrefhttps://www.baidu.com target_blank百度/ahref 和 target 两个属性中间用空格分开。❌新手常见错误写法全部不要写!--错误1中文引号网页直接失效-- a href“https://www.baidu.com”百度/a !--错误2属性写在结束标签完全无效-- a百度/a hrefhttps://www.baidu.com !--错误3属性之间用逗号分隔错误-- a hrefxxx, target_blank百度/a !--错误4等于号两边乱加大量空格不报错但不推荐-- a href xxx百度/a小提示HTML5 也支持单引号值甚至部分情况可以不写引号新手统一全部用英文双引号避免踩坑。二、两种属性分类1. 通用属性全局属性几乎所有 HTML 元素都可以使用的属性放在任何标签的开始标签都生效。 常用全局属性class、id、title。① title 属性作用鼠标悬浮在元素上面的时候弹出提示文字。示例p title这是鼠标悬浮提示文字把鼠标放到这段文字上面看提示/p解释title这是鼠标悬浮提示文字是 p 元素的 title 属性网页正常只显示文字把鼠标放到这段文字上面看提示鼠标悬停上去就会弹出 title 里面写的提示。再举 a 链接例子a hrefhttps://www.baidu.com title跳转到百度首页百度/a鼠标放在 “百度” 两个字上弹出提示跳转到百度首页。② class 属性非常重要后面学 CSS 高频用作用给元素设置类别标记主要给 CSS 样式使用可以多个元素使用同一个 class。 格式class类名p classred-text第一段文字/p p classred-text第二段文字/p解释 两个 p 元素class 都是red‑text。现在 HTML 阶段看不到效果后面 CSS 就可以统一给所有 classred‑text 的文字改成红色。 class 名字可以自己起英文、数字、横线不能中文不能有空格。一个元素写多个 class空格隔开p classbig red文字/p这里这个 p 同时拥有big和red两个类别。③ id 属性作用给元素设置唯一标识整个页面 id 名字不能重复。class 可以多个元素共用id 在一个网页里面只能出现一次。p idintro这是介绍段落/pid 后面做页面锚点跳转、JS 使用新手先记住规则id 值整个网页唯一。2. 特有属性局部属性只属于某一类标签别的标签写了不生效。比如我们前面学过a标签才有href、targetimg标签才有src、alt这些就是特有属性放到别的标签上没有任何作用。示例 1a 标签特有属性 href、targeta hrefhttps://www.baidu.com target_blank访问百度/ahref规定跳转地址只有 a 标签能用。target_blank新标签页打开只有 a 标签有效。如果你把 href 写到 p 标签上p hrefhttps://www.baidu.com测试/p❌完全没用p 标签不认识 href 这个属性文字不会变成链接。示例 2img 标签特有属性 src、alt、widthimg srccat.jpg alt小猫图片 width400src图片来源地址img 专属。alt图片加载失败时显示的替代文字img 专属。width设置图片宽度。把 src 写在 p 标签上不起任何效果。示例 3meta 标签特有 charset 属性meta charsetUTF-8charset是 meta 标签的专属属性用来设置网页编码防止中文乱码。三、空元素单标签的属性空元素没有结束标签属性同样写在唯一的开始标签中。img、br、meta都是空元素。示例img srcdog.jpg alt小狗 width300img 是空元素没有内容没有/imgsrc、alt、width 全部写在这个开始标签内。br 换行标签几乎不用属性。meta 大量使用属性。四、属性完整可运行综合案例复制全部代码保存为.html文件浏览器打开逐个看效果!DOCTYPE html html langzh-CN head !-- meta标签charset是特有属性设置中文编码 -- meta charsetUTF-8 titleHTML 属性演示/title /head body !-- p标签使用全局属性 title -- p title我是悬浮提示鼠标放上来鼠标悬浮在本段文字看提示效果/p !-- h2标签使用id全局属性 -- h2 idtitle01水果介绍/h2 !-- a标签特有属性 href、target同时使用title全局属性 -- a hrefhttps://www.baidu.com target_blank title打开百度搜索水果知识 点击搜索水果 /a br !-- img标签特有属性 src、alt、width -- img srchttps://picsum.photos/id/102/350/220 alt水果照片 width350 !-- p标签使用class全局属性 -- p classtext‑note上面是一张水果图片。class属性现阶段看不到样式效果CSS才会生效。/p /body /html代码逐句解释meta charsetUTF‑8charset是 meta 的特有属性告诉浏览器网页编码 UTF‑8防止中文乱码。p title我是悬浮提示鼠标放上来title是全局属性鼠标悬浮就会弹出引号里面的文字p 标签可以用a、h2 也都可以用。a hrefhttps://www.baidu.com target_blank title打开百度搜索水果知识hrefa 标签特有跳转地址target_blanka 标签特有新窗口打开title全局属性鼠标悬浮提示同一个标签写 3 个属性属性之间用空格隔开。img srchttps://picsum.photos/id/102/350/220 alt水果照片 width350srcimg 特有属性图片网络地址altimg 特有属性图片加载失败显示的文字width设置图片宽度。p classtext‑noteclass 全局属性给这个段落打上标记HTML 本身看不出变化后面 CSS 用来设置样式。五、新手高频易错点汇总❌属性写在结束标签p文字/p title提示 !--错误结束标签不允许写属性--✅正确写在开始标签p title提示文字/p❌使用中文双引号“ ”必须英文 中文引号浏览器识别不了属性直接失效。❌多个属性用逗号隔开a hrefxxx, target_blank /a !--错不能逗号只用空格分隔--❌特有属性随便给别的标签用href只属于asrc只属于img写到 p、h2 上没有任何效果。❌id 在同一个页面写重复名字iddemo 整个网页只能出现一次class 可以无限次重复。❌属性名自己随便创造比如p myattr123测试/pHTML 没有myattr这个属性浏览器会直接忽略不会起作用。属性名必须是 HTML 规定的。六、本篇核心知识点总结HTML 属性写在【开始标签】内部结束标签不能写属性。标准语法属性名属性值多个属性之间空格分隔引号用英文双引号。分为两大类全局属性几乎所有标签都能用代表class、id、title。特有属性只给特定标签使用如 a 标签href / targetimg 标签src / alt。class 可以多个元素共用id 整个页面必须唯一。空元素img meta没有结束标签属性写在仅有的开始标签。属性作用给元素附加额外信息控制跳转、图片来源、提示、标记分类等功能。小思考题巩固img srcflower.jpg alt鲜花 title美丽的鲜花 width300问哪些是属性哪些是全局属性哪些是 img 标签的特有属性下节预告下一篇教程HTML 文本格式化标签加粗、斜体、删除线、上标下标 列表 ul、ol、li大量可运行示例。需要我继续写下一篇完整教程吗HTML 标题给详细讲解一下详细说我是新手可以多进行举例说明其中举例要注意解释必须详细说明HTML 系列教程第六篇HTML 标题 h1‑h6 超详细讲解网页的标题用来定义页面里面的标题、子标题。HTML 一共提供6 个等级的标题标签h1、h2、h3、h4、h5、h6h 来自英文 heading意思就是标题、 heading。基础认识h1一级标题字号最大最重要h2二级标题h3三级标题h4四级标题h5五级标题h6六级标题字号最小重要程度最低✅标题标签自带默认效果浏览器默认样式文字自动加粗独占一整行自动换行标题上下自带空白间距数字越大文字字号越小重点h 标签不只是改变字体大小它有语义含义代表内容层级搜索引擎会根据 h 标签判断文章结构。基础语法属于双标签元素h1这里写标题文字内容/h1h1开始标签这里写标题文字内容元素内容显示在网页的标题文字/h1结束标签⚠️标题标签里面只适合放文字一般不要放大段复杂内容。所有标题写在body里面。完整演示示例 16 级标题全部展示复制代码保存为 html直接浏览器打开观察字号大小变化!DOCTYPE html html langzh-CN head meta charsetUTF-8 title6级标题演示/title /head body h1h1 一级标题最重要/h1 h2h2 二级标题/h2 h3h3 三级标题/h3 h4h4 四级标题/h4 h5h5 五级标题/h5 h6h6 六级标题字号最小/h6 /body /html代码解释从 h1 到 h6 依次排列浏览器渲染之后h1 文字最大h6 最小。每一个标题都会自动另起一行标题和标题之间自带空隙不需要手动加br换行。实际网页结构用法层级逻辑非常重要网页、文章是有层级结构的就像书本书的大标题 →h1全书总标题第一章标题 →h21.1 小节标题 →h31.1.1 小点 →h4✅正确层级示例模拟一篇文章!DOCTYPE html html langzh-CN head meta charsetUTF-8 title文章结构演示/title /head body !-- 整个页面的主标题h1只用一次 -- h1四季的介绍/h1 h2春天/h2 p春天万物复苏花草发芽。/p h3春天的景色/h3 p春风吹拂百花盛开。/p h2夏天/h2 p夏天天气炎热雨水很多。/p h3夏天的水果/h3 p西瓜、桃子都是夏天的水果。/p h2秋天/h2 p秋天秋高气爽树叶变黄。/p h2冬天/h2 p冬天天气寒冷会下雪。/p /body /html解释结构逻辑h1四季的介绍/h1整篇文章总标题整个页面只出现 1 次 h1。h2代表四大季节属于大章节。h3是每个章节下面的小副标题。p放正文段落文字。层级顺序建议h1 → h2 → h3不要跳级 ❌不推荐h1 写完直接写 h3跳过 h2结构混乱。重要规则h1 使用规范一个网页建议只使用 1 个h1h1 代表当前页面最重要的标题相当于一本书的书名。如果页面写多个 h1搜索引擎会分不清哪个才是页面核心主题不利于网页。✅推荐1 个 h1多个 h2、h3、h4 ❌不推荐页面到处写h1标题标签可以使用属性h1‑h6 都是普通 HTML 元素可以写全局属性title、class、id写在开始标签里面。示例 1title 属性鼠标悬浮显示提示h2 title鼠标放在标题上就看到这句话小动物/h2解释鼠标移动到标题文字上方会弹出提示文字。示例 2class 属性以后 CSS 设置样式h3 classtitle‑small水果分类/h3class 给标题打上标记HTML 看不到效果后面 CSS 可以修改这个标题的颜色、大小。示例 3id 属性页面锚点跳转h2 idfood美食栏目/h2id 用来做页面内部跳转记住 id 在整个页面不能重复。完整带属性例子h2 title美食板块 classmain‑title idfood美食栏目/h2title、class、id多个属性写在开始标签中间空格隔开。标题标签内部嵌套标题里面可以嵌套简单行内元素比如b加粗a链接。示例标题里面放链接h3a hrefhttps://www.baidu.com target_blank点我查看更多动物资料/a/h3解释整个 h3 标题文字变成可以点击的链接。但是h 标签里面不要放 p、div 这种大块段落语法不合理。❌新手高频错误错误 1拿 h 标签单纯用来调字体大小需求想要一段小字直接写h6。 ❌错误做法h6版权所有 ©2026/h6h6 是标题语义版权声明并不是标题。想要小字体以后用 CSS 修改文字大小不要滥用 h6。错误 2一个页面写很多 h1h1新闻1/h1 h1新闻2/h1 h1新闻3/h1❌错误一个页面尽量只有 1 个 h1。错误 3标签忘记闭合h2我的家乡 p我的家乡风景很美/p忘记写/h2结束标签页面布局错乱。✅正确h2我的家乡/h2 p我的家乡风景很美/p错误 4标签交叉嵌套h2标题文字 p段落文字/h2/p标签交叉语法错误。错误 5把标题写在 head 里面h1标题/h1必须放在body中。写在 head 里面网页看不到标题。区分title和h1很多新手搞混标签放在哪里显示在哪里作用title写在head里面浏览器标签页上面浏览器窗口标题浏览器标题栏不会显示在网页内容里h1~h6写在body里面网页页面内部看得见的大标题页面正文的标题文字示例对比head title浏览器标签显示的文字/title /head body h1网页页面里面显示的大标题/h1 /body很多新手混淆title 是浏览器窗口名字h1 才是网页正文大标题。综合完整示例结合标题 段落!DOCTYPE html html langzh-CN head meta charsetUTF-8 title旅游攻略/title /head body !--页面主标题h1只写一次-- h1青岛旅游攻略/h1 h2 title介绍景点著名景点/h2 p青岛有海边、栈桥、八大关等很多好看的景点。/p h3栈桥/h3 p栈桥是青岛标志性景点可以看大海。/p h3八大关/h3 p八大关有很多漂亮老建筑适合拍照。/p h2特色美食/h2 p海鲜是青岛的特色美食。/p /body /html本篇总结HTML 标题一共 6 级h1~h6h1 最大最重要h6 最小。标题自带加粗、独占一行、上下间距。不只是调字号有语义层级含义。规则一个网页建议只用 1 个 h1h2‑h6 可以多次使用尽量不要跳级写标题。h 标签写在body里面title写在head是浏览器标签标题和 h1 不是一回事。h1‑h6 可以使用全局属性title、class、id属性写在开始标签。不要为了字体大小滥用 h 标签文字大小交给后面 CSS 控制。小练习思考写一篇 “我的爱好” 页面h1 做总标题h2 写不同爱好p 写爱好介绍。下一节预告下一篇HTML段落。
HTML系列教程：6_HTML 标题 h1‑h6 超详细讲解
前面我们学过 HTML 元素开始标签 内容 结束标签。属性就写在【开始标签】里面用来给元素附加额外信息控制元素的行为、外观、功能。前言回顾示例a hrefhttps://www.baidu.com target_blank打开百度/aa是开始标签hrefhttps://www.baidu.com、target_blank这两个就是属性打开百度是元素内容/a结束标签⚠️重点规则属性只能写在开始标签里面绝对不能写在结束标签一个开始标签可以写多个属性属性之间用空格隔开。属性格式固定属性名属性值引号必须英文双引号新手不要用中文引号。一、HTML 属性基础语法标准格式标签名 属性名属性值 属性名2属性值2内容/标签名拆解属性名HTML 规定好的英文单词不能自己随便瞎编。等于号紧贴属性名不要乱加空格。属性值放在英文双引号中间描述这个属性具体是什么。多个属性之间用空格隔开逗号、分号都不能用来分隔属性。✅正确示例a hrefhttps://www.baidu.com target_blank百度/ahref 和 target 两个属性中间用空格分开。❌新手常见错误写法全部不要写!--错误1中文引号网页直接失效-- a href“https://www.baidu.com”百度/a !--错误2属性写在结束标签完全无效-- a百度/a hrefhttps://www.baidu.com !--错误3属性之间用逗号分隔错误-- a hrefxxx, target_blank百度/a !--错误4等于号两边乱加大量空格不报错但不推荐-- a href xxx百度/a小提示HTML5 也支持单引号值甚至部分情况可以不写引号新手统一全部用英文双引号避免踩坑。二、两种属性分类1. 通用属性全局属性几乎所有 HTML 元素都可以使用的属性放在任何标签的开始标签都生效。 常用全局属性class、id、title。① title 属性作用鼠标悬浮在元素上面的时候弹出提示文字。示例p title这是鼠标悬浮提示文字把鼠标放到这段文字上面看提示/p解释title这是鼠标悬浮提示文字是 p 元素的 title 属性网页正常只显示文字把鼠标放到这段文字上面看提示鼠标悬停上去就会弹出 title 里面写的提示。再举 a 链接例子a hrefhttps://www.baidu.com title跳转到百度首页百度/a鼠标放在 “百度” 两个字上弹出提示跳转到百度首页。② class 属性非常重要后面学 CSS 高频用作用给元素设置类别标记主要给 CSS 样式使用可以多个元素使用同一个 class。 格式class类名p classred-text第一段文字/p p classred-text第二段文字/p解释 两个 p 元素class 都是red‑text。现在 HTML 阶段看不到效果后面 CSS 就可以统一给所有 classred‑text 的文字改成红色。 class 名字可以自己起英文、数字、横线不能中文不能有空格。一个元素写多个 class空格隔开p classbig red文字/p这里这个 p 同时拥有big和red两个类别。③ id 属性作用给元素设置唯一标识整个页面 id 名字不能重复。class 可以多个元素共用id 在一个网页里面只能出现一次。p idintro这是介绍段落/pid 后面做页面锚点跳转、JS 使用新手先记住规则id 值整个网页唯一。2. 特有属性局部属性只属于某一类标签别的标签写了不生效。比如我们前面学过a标签才有href、targetimg标签才有src、alt这些就是特有属性放到别的标签上没有任何作用。示例 1a 标签特有属性 href、targeta hrefhttps://www.baidu.com target_blank访问百度/ahref规定跳转地址只有 a 标签能用。target_blank新标签页打开只有 a 标签有效。如果你把 href 写到 p 标签上p hrefhttps://www.baidu.com测试/p❌完全没用p 标签不认识 href 这个属性文字不会变成链接。示例 2img 标签特有属性 src、alt、widthimg srccat.jpg alt小猫图片 width400src图片来源地址img 专属。alt图片加载失败时显示的替代文字img 专属。width设置图片宽度。把 src 写在 p 标签上不起任何效果。示例 3meta 标签特有 charset 属性meta charsetUTF-8charset是 meta 标签的专属属性用来设置网页编码防止中文乱码。三、空元素单标签的属性空元素没有结束标签属性同样写在唯一的开始标签中。img、br、meta都是空元素。示例img srcdog.jpg alt小狗 width300img 是空元素没有内容没有/imgsrc、alt、width 全部写在这个开始标签内。br 换行标签几乎不用属性。meta 大量使用属性。四、属性完整可运行综合案例复制全部代码保存为.html文件浏览器打开逐个看效果!DOCTYPE html html langzh-CN head !-- meta标签charset是特有属性设置中文编码 -- meta charsetUTF-8 titleHTML 属性演示/title /head body !-- p标签使用全局属性 title -- p title我是悬浮提示鼠标放上来鼠标悬浮在本段文字看提示效果/p !-- h2标签使用id全局属性 -- h2 idtitle01水果介绍/h2 !-- a标签特有属性 href、target同时使用title全局属性 -- a hrefhttps://www.baidu.com target_blank title打开百度搜索水果知识 点击搜索水果 /a br !-- img标签特有属性 src、alt、width -- img srchttps://picsum.photos/id/102/350/220 alt水果照片 width350 !-- p标签使用class全局属性 -- p classtext‑note上面是一张水果图片。class属性现阶段看不到样式效果CSS才会生效。/p /body /html代码逐句解释meta charsetUTF‑8charset是 meta 的特有属性告诉浏览器网页编码 UTF‑8防止中文乱码。p title我是悬浮提示鼠标放上来title是全局属性鼠标悬浮就会弹出引号里面的文字p 标签可以用a、h2 也都可以用。a hrefhttps://www.baidu.com target_blank title打开百度搜索水果知识hrefa 标签特有跳转地址target_blanka 标签特有新窗口打开title全局属性鼠标悬浮提示同一个标签写 3 个属性属性之间用空格隔开。img srchttps://picsum.photos/id/102/350/220 alt水果照片 width350srcimg 特有属性图片网络地址altimg 特有属性图片加载失败显示的文字width设置图片宽度。p classtext‑noteclass 全局属性给这个段落打上标记HTML 本身看不出变化后面 CSS 用来设置样式。五、新手高频易错点汇总❌属性写在结束标签p文字/p title提示 !--错误结束标签不允许写属性--✅正确写在开始标签p title提示文字/p❌使用中文双引号“ ”必须英文 中文引号浏览器识别不了属性直接失效。❌多个属性用逗号隔开a hrefxxx, target_blank /a !--错不能逗号只用空格分隔--❌特有属性随便给别的标签用href只属于asrc只属于img写到 p、h2 上没有任何效果。❌id 在同一个页面写重复名字iddemo 整个网页只能出现一次class 可以无限次重复。❌属性名自己随便创造比如p myattr123测试/pHTML 没有myattr这个属性浏览器会直接忽略不会起作用。属性名必须是 HTML 规定的。六、本篇核心知识点总结HTML 属性写在【开始标签】内部结束标签不能写属性。标准语法属性名属性值多个属性之间空格分隔引号用英文双引号。分为两大类全局属性几乎所有标签都能用代表class、id、title。特有属性只给特定标签使用如 a 标签href / targetimg 标签src / alt。class 可以多个元素共用id 整个页面必须唯一。空元素img meta没有结束标签属性写在仅有的开始标签。属性作用给元素附加额外信息控制跳转、图片来源、提示、标记分类等功能。小思考题巩固img srcflower.jpg alt鲜花 title美丽的鲜花 width300问哪些是属性哪些是全局属性哪些是 img 标签的特有属性下节预告下一篇教程HTML 文本格式化标签加粗、斜体、删除线、上标下标 列表 ul、ol、li大量可运行示例。需要我继续写下一篇完整教程吗HTML 标题给详细讲解一下详细说我是新手可以多进行举例说明其中举例要注意解释必须详细说明HTML 系列教程第六篇HTML 标题 h1‑h6 超详细讲解网页的标题用来定义页面里面的标题、子标题。HTML 一共提供6 个等级的标题标签h1、h2、h3、h4、h5、h6h 来自英文 heading意思就是标题、 heading。基础认识h1一级标题字号最大最重要h2二级标题h3三级标题h4四级标题h5五级标题h6六级标题字号最小重要程度最低✅标题标签自带默认效果浏览器默认样式文字自动加粗独占一整行自动换行标题上下自带空白间距数字越大文字字号越小重点h 标签不只是改变字体大小它有语义含义代表内容层级搜索引擎会根据 h 标签判断文章结构。基础语法属于双标签元素h1这里写标题文字内容/h1h1开始标签这里写标题文字内容元素内容显示在网页的标题文字/h1结束标签⚠️标题标签里面只适合放文字一般不要放大段复杂内容。所有标题写在body里面。完整演示示例 16 级标题全部展示复制代码保存为 html直接浏览器打开观察字号大小变化!DOCTYPE html html langzh-CN head meta charsetUTF-8 title6级标题演示/title /head body h1h1 一级标题最重要/h1 h2h2 二级标题/h2 h3h3 三级标题/h3 h4h4 四级标题/h4 h5h5 五级标题/h5 h6h6 六级标题字号最小/h6 /body /html代码解释从 h1 到 h6 依次排列浏览器渲染之后h1 文字最大h6 最小。每一个标题都会自动另起一行标题和标题之间自带空隙不需要手动加br换行。实际网页结构用法层级逻辑非常重要网页、文章是有层级结构的就像书本书的大标题 →h1全书总标题第一章标题 →h21.1 小节标题 →h31.1.1 小点 →h4✅正确层级示例模拟一篇文章!DOCTYPE html html langzh-CN head meta charsetUTF-8 title文章结构演示/title /head body !-- 整个页面的主标题h1只用一次 -- h1四季的介绍/h1 h2春天/h2 p春天万物复苏花草发芽。/p h3春天的景色/h3 p春风吹拂百花盛开。/p h2夏天/h2 p夏天天气炎热雨水很多。/p h3夏天的水果/h3 p西瓜、桃子都是夏天的水果。/p h2秋天/h2 p秋天秋高气爽树叶变黄。/p h2冬天/h2 p冬天天气寒冷会下雪。/p /body /html解释结构逻辑h1四季的介绍/h1整篇文章总标题整个页面只出现 1 次 h1。h2代表四大季节属于大章节。h3是每个章节下面的小副标题。p放正文段落文字。层级顺序建议h1 → h2 → h3不要跳级 ❌不推荐h1 写完直接写 h3跳过 h2结构混乱。重要规则h1 使用规范一个网页建议只使用 1 个h1h1 代表当前页面最重要的标题相当于一本书的书名。如果页面写多个 h1搜索引擎会分不清哪个才是页面核心主题不利于网页。✅推荐1 个 h1多个 h2、h3、h4 ❌不推荐页面到处写h1标题标签可以使用属性h1‑h6 都是普通 HTML 元素可以写全局属性title、class、id写在开始标签里面。示例 1title 属性鼠标悬浮显示提示h2 title鼠标放在标题上就看到这句话小动物/h2解释鼠标移动到标题文字上方会弹出提示文字。示例 2class 属性以后 CSS 设置样式h3 classtitle‑small水果分类/h3class 给标题打上标记HTML 看不到效果后面 CSS 可以修改这个标题的颜色、大小。示例 3id 属性页面锚点跳转h2 idfood美食栏目/h2id 用来做页面内部跳转记住 id 在整个页面不能重复。完整带属性例子h2 title美食板块 classmain‑title idfood美食栏目/h2title、class、id多个属性写在开始标签中间空格隔开。标题标签内部嵌套标题里面可以嵌套简单行内元素比如b加粗a链接。示例标题里面放链接h3a hrefhttps://www.baidu.com target_blank点我查看更多动物资料/a/h3解释整个 h3 标题文字变成可以点击的链接。但是h 标签里面不要放 p、div 这种大块段落语法不合理。❌新手高频错误错误 1拿 h 标签单纯用来调字体大小需求想要一段小字直接写h6。 ❌错误做法h6版权所有 ©2026/h6h6 是标题语义版权声明并不是标题。想要小字体以后用 CSS 修改文字大小不要滥用 h6。错误 2一个页面写很多 h1h1新闻1/h1 h1新闻2/h1 h1新闻3/h1❌错误一个页面尽量只有 1 个 h1。错误 3标签忘记闭合h2我的家乡 p我的家乡风景很美/p忘记写/h2结束标签页面布局错乱。✅正确h2我的家乡/h2 p我的家乡风景很美/p错误 4标签交叉嵌套h2标题文字 p段落文字/h2/p标签交叉语法错误。错误 5把标题写在 head 里面h1标题/h1必须放在body中。写在 head 里面网页看不到标题。区分title和h1很多新手搞混标签放在哪里显示在哪里作用title写在head里面浏览器标签页上面浏览器窗口标题浏览器标题栏不会显示在网页内容里h1~h6写在body里面网页页面内部看得见的大标题页面正文的标题文字示例对比head title浏览器标签显示的文字/title /head body h1网页页面里面显示的大标题/h1 /body很多新手混淆title 是浏览器窗口名字h1 才是网页正文大标题。综合完整示例结合标题 段落!DOCTYPE html html langzh-CN head meta charsetUTF-8 title旅游攻略/title /head body !--页面主标题h1只写一次-- h1青岛旅游攻略/h1 h2 title介绍景点著名景点/h2 p青岛有海边、栈桥、八大关等很多好看的景点。/p h3栈桥/h3 p栈桥是青岛标志性景点可以看大海。/p h3八大关/h3 p八大关有很多漂亮老建筑适合拍照。/p h2特色美食/h2 p海鲜是青岛的特色美食。/p /body /html本篇总结HTML 标题一共 6 级h1~h6h1 最大最重要h6 最小。标题自带加粗、独占一行、上下间距。不只是调字号有语义层级含义。规则一个网页建议只用 1 个 h1h2‑h6 可以多次使用尽量不要跳级写标题。h 标签写在body里面title写在head是浏览器标签标题和 h1 不是一回事。h1‑h6 可以使用全局属性title、class、id属性写在开始标签。不要为了字体大小滥用 h 标签文字大小交给后面 CSS 控制。小练习思考写一篇 “我的爱好” 页面h1 做总标题h2 写不同爱好p 写爱好介绍。下一节预告下一篇HTML段落。