很多新手分不清HTML 标签、HTML 元素这两个概念。这节课彻底搞懂大量例子、对比、易错点。前言前面我们学过h1、p、a、img这些尖括号的东西叫标签。 现在要学习新概念HTML 元素Element。新手一句话先记牢标签是符号元素 开始标签 内容 结束标签整体全部合在一起叫元素。一、HTML 元素到底是什么官方定义HTML 元素由开始标签、内容、结束标签三部分组成这一整套完整的整体叫做 HTML 元素。拆分结构双标签元素绝大多数元素都是这种开始标签 元素内容 /结束标签举个最简单例子p我是一段文字/pp→开始标签opening tag我是一段文字→元素内容content/p→结束标签closing tag✅完整这一整块p我是一段文字/p才叫一个 p 元素。通俗比喻帮助理解 把 HTML 元素想象成一个快递盒子p盒子的盖子开始标签中间文字 盒子里面装的东西内容/p盒子底部盖子结束标签 整个盒子 里面的东西合起来才叫完整的盒子元素。 只拿一个盖子p那不叫完整元素。重要区分新手必背考试面试经常考标签仅仅指尖括号这一部分符号。例如p只是标签。元素开始标签 内容 结束标签整套整体。代码片段名称h2只是【开始标签】/h2只是【结束标签】h2小猫介绍/h2完整【h2 HTML 元素】示例h2小猫介绍/h2h2开始标签小猫介绍元素内容/h2结束标签全部合在一起h2小猫介绍/h2→ h2 元素二、两种 HTML 元素类型HTML 分为双标签元素有内容元素和单标签元素空元素没有内容1、双标签元素闭合元素格式标签名内容/标签名有开始标签有内容有结束标签。 前面学过的h1~h6、p、a全部属于双标签元素。示例 1h1 元素h1欢迎学习HTML/h1开始标签h1内容欢迎学习HTML结束标签/h1整体h1 元素示例 2a 链接元素a hrefhttps://www.baidu.com点击去百度/a开始标签a hrefhttps://www.baidu.com注意属性是写在开始标签内部的属于开始标签一部分。href 属性归属于 a 元素。内容点击去百度结束标签/a整体a 元素重点属性写在开始标签里面不属于元素内容 元素内容是开始标签和结束标签中间夹的那部分。2、空元素单标签元素有些元素里面不能放任何内容没有结束标签叫做空元素也属于 HTML 元素。我们之前学的br换行元素img图片元素例子img srccat.jpg alt小猫这是一个img 元素只有开始标签没有结束标签中间也没有内容src、alt 都是写在开始标签里面的属性brbr完整就是 br 换行元素没有内容不需要闭合。为什么叫空元素因为标签中间没有内容盒子里面是空的。HTML5 写法空元素后面斜杠可以写也可以不写br和br/两种写法都正确推荐直接写br。三、元素可以互相嵌套非常重要网页都是嵌套写的HTML 允许一个元素里面包含另外一个元素叫做元素嵌套。规则嵌套要完整先开的标签后关闭后开的标签先关闭。不能交叉✅正确嵌套示范p这是段落里面 b加粗文字/b 剩下的文字/p拆解分析外层是p元素在 p 元素的内容里面嵌套了一个b加粗元素先打开p→ 再打开b→ 先关闭/b→ 最后关闭/p图解顺序p 这是段落里面 b加粗文字/b 剩下的文字 /p❌错误交叉嵌套千万不要这么写!--错误示范标签交叉了-- p这是段落里面 b加粗文字/p/b错误原因先开 p再开 b但是先关 p再关 b标签互相交叉浏览器虽然可能勉强显示但语法是错误的。实战嵌套完整可运行例子复制全部代码保存为 html直接运行!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleHTML元素嵌套演示/title /head body !-- h2元素 -- h2水果介绍/h2 !-- p元素内部嵌套a链接元素 -- p想要了解更多水果知识可以访问 a hrefhttps://www.baidu.com target_blank百度搜索/a /p /body /html解析body是大元素body 元素里面嵌套了h2元素 和p元素p元素的内容里面又嵌套了一个a链接元素。整个网页就是一层一层元素互相套起来。html元素是最大的根元素里面套head和body。html !-- 根html元素 -- head !-- head元素嵌套在html里面 -- /head body !-- body元素嵌套在html里面 -- /body /html四、元素内容可以是什么元素中间的内容可以是普通文本文字p我是普通文字内容/p另外一个 HTML 元素嵌套pa href#我是链接元素放在p里面/a/p文字 其他元素混合在一起p今天天气很好b适合出门散步/b。/p⚠️空元素img br不能放内容 ❌错误写法img这里不能写文字/imgimg 是空元素不能中间写内容也不要写结束标签。五、属性属于谁属性写在开始标签里面用来给元素增加附加信息。例子a hrefhttps://www.baidu.com target_blank去百度/ahref、target是a 元素的属性属性写在开始标签a ......内部不属于元素内容元素内容只有去百度再看图片元素img srccat.jpg alt小猫图片src、alt属于 img 元素的属性img 是空元素没有内容。记住属性修饰整个元素不是修饰内容。六、新手常见问题 误区误区 1标签 元素❌错误p就是 p 元素 ✅正确p只是开始标签p内容/p整套整体才叫 p 元素。误区 2空元素没有结束标签就不是元素❌错误img只是标签不是元素 ✅正确img srcxxx altxx完整就是 img 空元素。误区 3随便交叉嵌套标签记住口诀后开先关。先开后关。误区 4把属性写在结束标签里面❌错误p文字/p classdemoclass 属性必须写在开始标签结束标签不能写任何属性。✅正确p classdemo文字/p七、综合完整示例把所有概念放一起复制代码运行逐段看懂每个元素!DOCTYPE html html langzh-CN !-- html元素根元素 -- head !-- head元素 -- meta charsetUTF-8 !-- meta空元素设置编码 -- titleHTML元素讲解/title !-- title元素 -- /head body !-- body元素网页主体所有可见元素写在这里 -- h1认识HTML元素/h1 !-- h1元素 开始标签h1 内容认识HTML元素 结束标签/h1 -- pHTML元素由开始标签、内容、结束标签组成。/p !-- p段落元素 -- p点击跳转 a hrefhttps://www.baidu.com target_blank百度网站/a !-- a链接元素嵌套在p元素内部href、target是a的属性 -- /p img srchttps://picsum.photos/id/237/300/200 alt小狗图片 !-- img空元素src alt是属性无结束标签无中间内容 -- br !-- br换行空元素 -- /body /html逐点回顾本篇核心知识点总结标签只是尖括号符号p、/pHTML 元素 开始标签 内容 结束标签整套整体。元素分为两类普通双标签元素h1 p a有开始、内容、结束标签可以嵌套别的元素。空元素img br meta没有内容没有结束标签。属性写在【开始标签】内部不属于元素内容结束标签不能写属性。元素支持嵌套规则后打开的标签要先关闭禁止交叉嵌套。整个网页就是无数 HTML 元素一层一层互相嵌套构成。小测验考考自己h3苹果/h3问哪个是开始标签哪个是内容哪个是结束标签什么是完整 h3 元素下节预告下一篇教程HTML 属性大量实操案例。