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 元素。
拿上述代码来说,<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 元素之间的关系是网页布局的基础,也是实现优秀网页设计的关键。