HTML 元素

理解 HTML 元素

HTML 文档是由 HTML 元素构建的，它们定义了网页的结构和内容。

HTML 元素的组成

大多数 HTML 元素由三部分组成：

一个 开始标签（例如，）。这标志着元素的开始。
内容（例如，This is a paragraph.）。这是由标签包围的文本或其他 HTML 元素。
一个 结束标签（例如，）。这标志着元素的结束。注意标签名前面的斜杠 /。

整个结构，从开始标签到结束标签，包括内容，构成了 HTML 元素：

<tagname>Content goes here...</tagname>

示例：

开始标签	内容	结束标签	元素类型
`<h1>`	我的主标题	`</h1>`	一级标题
`<p>`	这是一段文本。	`</p>`	段落
`<a>`	点击我	`</a>`	锚点（链接）- 通常有属性，参见 HTML 属性教程。

一些元素，称为空元素，没有内容或结束标签（下文会讨论）。

嵌套的 HTML 元素

HTML 元素可以放置在其他 HTML 元素内部。这称为嵌套。

正确的嵌套对于创建有效且结构良好的 HTML 文档至关重要。可以将其想象成俄罗斯套娃或文件夹内的文件夹。

此示例展示了嵌套元素：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Web Page</title>
</head>
<body>
  <h1>My Website</h1>
  <p>Welcome to my **first** web page!</p>
</body>
</html>

说明：

<html> 元素是根元素，包含所有其他元素。
在 <html> 内部，有 <head> 和 <body> 元素。
<body> 元素包含可见内容：<h1> 和  元素。
 元素包含文本和另一个嵌套元素：**，它使文本加粗。

元素必须按照其打开的逆序关闭。正确示例：**Text**。错误示例：**Text**。

永远不要省略结束标签（通常）

虽然浏览器通常很宽松，即使你忘记了一些结束标签（如  或 </li>），页面也可能正确显示，但这是一种不好的做法。

为什么不好：

不可预测的结果： 不同的浏览器处理缺失的标签的方式可能不同，导致布局不一致。
无效的 HTML： 这使得你的 HTML 在技术上是无效的，可能会导致校验工具和辅助功能软件出现问题。
调试困难： 由缺失标签引起的错误很难追踪。
可读性： 明确的闭合标签使代码结构更清晰。

经验法则： 除非元素明确是一个空元素，否则始终包含结束标签。

空 HTML 元素

一些 HTML 元素是空元素（或称为虚空元素），这意味着它们不包含任何内容且没有结束标签。

常见的例子包括：

 ：定义换行符。
<hr>：定义主题分隔（通常显示为水平线）。
<img>：嵌入图像（需要 src 和 alt 等属性）。
<input>：在表单中创建一个输入字段。
<link>：链接外部资源（如 CSS 样式表）。
<meta>：提供关于 HTML 文档的元数据。

语法：

标准 HTML 语法： ，<img>
XML 风格的自闭合语法： ，<img />。这种语法在 HTML5 中也是有效的，但不是必需的。它常被熟悉 XHTML 或使用类 XML 模板的框架的开发者使用。

为空元素选择一种风格（  或  ），并在项目中保持一致，以提高可读性。

使用小写标签名

HTML 标签名在技术上是不区分大小写的（意味着  与  或  被视为相同）。

然而，普遍接受的最佳实践和惯例是始终使用小写标签名。

为何使用小写？

可读性： 保持小写一致性更容易阅读。
一致性： 它与 XML 和 XHTML 等相关标准保持一致，这些标准要求使用小写。
行业标准： 几乎所有现代 HTML 代码、教程和工具都使用小写。

为所有 HTML 标签和属性坚持使用小写，以获得更整洁、更专业的代码。