跳到主要内容

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>

浏览器会把它显示成:

这是 一个 段落。

如果你想强制换行或添加额外空格,可以使用:

  • 换行:<br>
  • 空格: &nbsp;(非断行空格)

小结

HTML 元素是网页的核心组成部分,由标签和内容构成。你已经了解了元素的结构、分类、嵌套规则及其在浏览器中的表现。掌握这些基础之后,你就能更自信地构建 HTML 页面,并为后续的 CSS 和 JavaScript 学习打下坚实基础。