HTML 中的节点、元素、标签、标记的区别

最新推荐文章于 2023-08-03 12:42:00 发布

liaowenxiong

最新推荐文章于 2023-08-03 12:42:00 发布

阅读量8.3k

点赞数 20

本文链接：https://blog.csdn.net/liaowenxiong/article/details/107665439

版权

文章目录

一、HTML 节点
- （一）节点的类型
二、HTML 标签
三、HTML 元素
- （一）HTML 元素属性
- （二）HTML 元素的嵌套

一、HTML 节点

节点（node）是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点。例如： html 元素、属性、文本、注释、整个文档等都是一个节点。

（一）节点的类型

按照大小关系分类如下：

文档节点，表示的是整个 html
元素节点，表示的是 html 中的元素，就是标签及其所包含的内容
属性节点，表示的是 html 标签中的属性
文本节点，表示的是 html 标签中的内容文本

节点最终是要映射成为 js 对象，程序员操作这些对象来改变网页属性和行为，不同类型的节点具有不同的属性和方法。节点较为抽象，注意深刻理解。

二、HTML 标签

HTML 标签（tag or label）其实也叫标记（markup），是由一对尖括号 <> 及标签名组成的。标签分为“起始标签”和“结束标签”两种，两者的标签名称是相同的，只是结束标签多了一个正斜杠“/”。所以标签就是尖括号+标签名，不包含起止标签所包裹的内容。

如下图所示， 为起始标签， 为结束标签，“p”为标签名称，它是英文“paragraph（段落）”的缩写。标签名称对大小写不敏感，如 …… 和 …… 的效果是一样的。不过，HTML 规范推荐使用小写字母表示标签。

在这里插入图片描述

三、HTML 元素

HTML 文档是由各种 HTML 元素组成的，如 html 元素（HTML 文档根元素）、head（HTML 头部）元素、body（HTML 主体）元素、title（HTML 标题）元素和 p（段落）元素等，这些元素都是通过尖括号“<>”组成的标签形式来表现的。一般来说，“起始标签”表示元素的开始，“结束标签”表示元素的结束，所以元素是起止标签+标签所包含的内容

HTML 元素分为“有内容的元素”和“空元素”两种。“有内容的元素”是由起始标签、结束标签以及两者之间的元素内容组成的，其中元素内容既可以是需要显示在网页中的文字内容，也可以是其它元素。
在这里插入图片描述

例如上面的示例中，起始标签  与结束标签  组成的元素，它的元素内容是“这是一个段落”；起始标签 <head> 和结束标签 < /head> 之间的元素内容是另外一个元素“title”。“空元素”只有起始标签而没有结束标签，也没有元素内容，如上面示例中的 <hr> 元素就是空元素，<hr> 表示横线。

HTML 元素可以按另一种方式分为“块元素”和“行元素”。“块元素”在网页中的效果是该元素的内容对于其前后元素的内容都另起一行。如下图所示，“p”是块元素，浏览器会单独用一行来显示块元素。“行元素”在网页中的显示效果是该元素的内容对于其前后元素的内容都在一行显示。
如下图所示， 元素和 <input> 元素是行元素，浏览器会将它们的内容都放置在一行显示。
在这里插入图片描述

（一）HTML 元素属性

HTML 的元素属性提供了对 HTML 元素的描述和控制信息，借助于元素属性，HTML 网页才会展现丰富多彩且格式美观的内容。例如要设置“p”元素中文字内容的颜色为红色，字号为30像素，这时就需要用到 HTML 元素属性了。

如下图所示，在“p”元素的开始标签  尖括号内添加了 style="color:#ff0000;font-size:30px" 内容，浏览器就会按照设定的效果来显示内容。

在这里插入图片描述

类似 style="color:#ff0000;font-size:30px" 这样的内容就是 HTML 元素的属性，HTML 元素的属性放置在元素的起始标签内，属性分为属性名称和属性值，上面案例中 style 为属性名称（style 为 CSS 属性名称），属性值为 “color:#ff0000;font-size:30px”。

HTML 元素设置属性的语法为：<element [{name=”value”}]>

其中 element 为元素的名称，属性内容放置在“[{}]”表示属性可选且允许有多个属性，name 是属性的名称，value 是属性的值。例如，要给网页设置背景色，可以在“body”元素中添加属性 bgcolor="yellow"。

如下图所示：
在这里插入图片描述

（二）HTML 元素的嵌套

在这里插入图片描述
除了 HTML 文档元素“html”外，其它的 HTML 元素都是被嵌套在另一个元素之内的。

如上图所示的 HTML 文档中，“html”是最外层元素，也称为根元素。元素“head”、元素“body”是嵌套在元素“html”内的。元素“body”内又嵌套了元素“h1”、元素“hr”和元素“p”。HTML 中的元素可以多级嵌套，但是不能互相交叉。

下面不正确的写法中，元素“p”的起始标签  在元素“b”的外层，但它的结束标签  却放在了元素“b”内。
在这里插入图片描述

为了防止出现错误的HTML元素嵌套，在编写HTML文档时，建议先写外层的一对标签，然后逐渐往里写，这样既不容易忘记写HTML元素的结束标签，也可以减少HTML元素的嵌套错误。

编写 HTML 文档，大体顺序可以这样：

第一步：
<html>
</html>

第二步：
<html>
<head>
</head>
<body>
</body>
</html>

第三步：
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
</body>
</html>

liaowenxiong

关注

20
点赞
踩
75

收藏

觉得还不错? 一键收藏
1
评论
HTML 中的节点、元素、标签、标记的区别

节点 Node节点是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点例如： html标签、属性、文本、注释、整个文档等都是一个节点节点的类型节点是有类型的，不同节点的类型不同，按照大小关系分类如下文档节点表示的是整个html元素节点表示的是 html 中的标签属性节点表示的是 html标签中的属性文本节点表示的是 html标签中的内容文本节点最终是要映射成为 js 对象，程序员操作这些对象来改变网页属性和方法不同的节点具有不同的属性和方法
复制链接

扫一扫