HTML入门：元素
HTML 页面是由 HTML 元素（也叫 HTML 标签）组成的。HTML 元素是 HTML 页面的基本构建块，它们定义了页面的内容和结构。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>一起学习前端，一起成长！</title>
</head>
<body>
<h1>这是一个大标题</h1>
<p>这是一个段落</p>
</body>
</html>
HTML 元素的语法
元素由开始标记、结束标记和内容组成。开始标记用于指定元素的名称，结束标记用于标记元素的结束。内容就是元素标记中间的文字或者是一些 HTML 元素。
拿上述代码来说，<p>是段落元素的开始标记，</p>是段落元素的结束标记，这是一个段落是元素内容。
HTML 元素，有以下7个特点：
1、嵌套性：HTML 元素可以嵌套在其他元素中，形成嵌套结构，大多数 HTML 元素可以嵌套。例如，一个段落元素可以包含一个图像元素,或者包含一个加粗的文字，<b>(bold)加粗标签。如图。
2、具有属性：HTML 元素可以具有属性，用于提供元素的额外信息或对元素进行样式设置，每个标签的功能作用不同，属性有差异。
属性通常出现在开始标记中，格式为属性名="属性值"。例如，<img src="image.jpg" alt="图片描述">中的src和alt就是图像元素的属性，但是p标签就不具备这些。
3、大小写敏感性：HTML 元素的名称对大小写不敏感，但万维网在上个版本曾要求使用小写，所以，我们保持使用小写字母编写元素名称就行了，以保持一致性和兼容性。
4、空元素：有些 HTML 元素没有内容，称为空元素。这些元素只包含开始标记，没有结束标记。例如，<br>和<img>就是空元素。
5、文档结构：HTML 元素按照一定的结构组织成 HTML 文档。文档的根元素是<html>且单个页面只能有 1 个，其他元素按照嵌套关系位于根元素内部。
6、类别和 ID：HTML 元素可以具有类别（class）和 ID 属性，用于 CSS 样式设置和 JavaScript 操作。cs 类用于将多个元素分组，ID 用于唯一标识一个元素。这到后面用起来就知道了。先做了解。
7、非空标签一定要成对出现！一定要有结束标签 比如，<p>这是段落，而是应该这样写，<p>这是段落</p>， 写错的话，这可能会导致页面布局或样式出现问题，因为浏览器可能无法正确识别元素的边界，或者直接导致标签无效。
这是 HTML 元素的一些基本特点，通过合理使用 HTML 元素，可以构建出结构良好、内容丰富的 HTML 文档。
案例解析
<html>
<body>
<p>这是一个段落</p>
</body>
</html>
1、 <html> 元素定义了 HTML 文档的根元素。这个元素拥有一个开始标签 <html> 以及一个结束标签 </html>。它的元素内容是 <body> 元素。
2、 <body> 元素定义了 HTML 文档的主体内容。这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。元素内容是包含着 1 个<p>元素。
3、 <p> 元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签 <p>以及一个结束标签 </p>。元素内容是: 这是一个段落。
总结
由上面的简单案例可以发现，HTML 页面其实就像是一个大积木，它由许多不同类型的积木块（HTML 元素）组成。每个 HTML 元素都像是一个小积木，它具有自己的形状、大小和功能。
HTML 元素可以嵌套在其他 HTML 元素中，就像小积木可以嵌套在大积木中一样。
通过将 HTML 页面比作一个大积木，将 HTML 元素比作小积木，可以更好地理解网页布局的基本原理和方法。
理解以上特性，对后续学习有以下好处：
在网页布局中，我们需要使用各种 HTML 元素来构建页面的结构和内容，例如使用<div>元素来创建分区，使用<img>元素来插入图片，使用<p>元素来创建段落等。
通过合理地使用这些 HTML 元素，可以将页面的不同部分组织在一起，形成一个清晰、有条理的布局。
同时，通过嵌套 HTML 元素，可以实现更复杂的布局效果，例如创建响应式布局、多列布局等。
因此，理解 HTML 页面和 HTML 元素之间的关系是网页布局的基础，也是实现优秀网页设计的关键。
湘公网安备 43102202000103号