HTML 元素
在学习 HTML 5 时,你需要了解最基本的构建模块 —— HTML 元素(HTML Elements)。HTML 元素是网页的组成部分,浏览器通过这些元素来解析和渲染页面内容。
本节将带你了解什么是 HTML 元素、元素的语法结构,以及各种类型的元素。
什么是 HTML 元素?
一个 HTML 元素通常由以下几个部分组成:
- 起始标签(Start tag)
- 内容(Content)
- 结束标签(End tag)
举个例子:
<p>这是一个段落。</p>
这里的 <p>
是开始标签,</p>
是结束标签,而“这是一个段落。”是元素的内容。HTML元素可以嵌套,也就是说一个元素可以包含其他元素。
提示
你可以把它理解成一个盒子:标签是盒子的边界,内容就是盒子里面的东西。
HTML 元素 vs HTML 标签
HTML 标签 是围绕内容的标识符,比如 <h1>
和 </h1>
,而 HTML 元素 是“标签 + 内容”的整体。
来看一个例子:
<h1>主标题</h1>
<h1>
是开始标签主标题
是元素的内容</h1>
是结束标签- 整个
<h1>主标题</h1>
才是一个 HTML 元素
空元素(Empty Elements)
某些 HTML 元素是空的,它们不包含任何内容。最常见的空元素包括:
<br>
<img src="image.jpg" alt="描述文本">
这些元素不需要结束标签,在 HTML5 中也不要求加 /
。虽然你可能在一些旧代码中看到 <br />
这样的写法,但推荐你使用简洁的 <br>
。
嵌套 HTML 元素
你可以将一个 HTML 元素嵌套在另一个元素中。比如:
<p>这是 <strong>加粗</strong> 的文字。</p>
在这个例子中,<strong>
是嵌套在 <p>
中的。请注意:元素必须正确嵌套,不能交叉嵌套,否则浏览器可能无法正确解析。
正确嵌套的例子:
<b><i>文字</i></b>
错误嵌套的例子(不要这样写):
<b><i>文字</b></i>
所有 HTML 文档的结构
一个完整的 HTML5 文档中,元素是嵌套结构,页面内容都包裹在一些必需的元素中:
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
元素说明:
<html>
是整个页面的根元素<head>
中包含页面的元信息<title>
设置网页标题<body>
包含了网页的可见部分
你在编写 HTML 页面时,必须遵循这种结构。
不同类型的 HTML 元素
HTML 元素有很多种,用途也各不相同。常见的元素包括:
- 标题元素:
<h1>
到<h6>
,用来定义从大到小的标题 - 段落元素:
<p>
,用来定义段落 - 链接元素:
<a>
,用来添加超链接 - 图像元素:
<img>
,用来插入图片 - 列表元素:
<ul>
、<ol>
、<li>
,用来创建列表 - 表格元素:
<table>
、<tr>
、<td>
等
HTML 中的空格和换行
HTML 会自动忽略你在代码中多余的空格和换行。例如:
<p>这是
一个
段落。</p>
浏览器会把它显示成:
这是 一个 段落。