HTML 元素
HTML 文档由一系列 HTML 元素(Element)构成,是网页结构的基础。
什么是 HTML 元素?
HTML 元素是从开始标签(start tag)到结束标签(end tag)之间的完整结构。
| 开始标签 | 元素内容 | 结束标签 |
|---|---|---|
| <p> | 这是一个段落 | </p> |
| <a href="default.htm"> | 这是一个链接 | </a> |
| <br> | 换行(空元素) | 无 |
说明:
- 开始标签也称为 起始标签(opening tag)
- 结束标签也称为 闭合标签(closing tag)
HTML 元素语法规则
- 元素以开始标签开始,以结束标签结束
- 元素内容位于开始标签与结束标签之间
- 部分元素为空元素(empty element),没有内容
- 空元素通常在开始标签中自闭合(如
<br />) - 大多数元素可以包含属性(Attributes)
提示:属性将在后续章节详细介绍。
HTML 元素的嵌套
HTML 元素可以相互嵌套,形成树状结构:
- 一个元素可以包含其他元素
- HTML 文档本质上是一个嵌套结构(DOM 树)
HTML 文档示例
<!DOCTYPE html>
<html>
<body>
<p>这是第一个段落。</p>
</body>
</html>
<html>
<body>
<p>这是第一个段落。</p>
</body>
</html>
该示例包含 3 个核心元素:html、body、p。
示例解析
<p> 元素(段落)
<p>这是第一个段落。</p>
定义一个段落,包含文本内容。
<body> 元素(主体)
<body>
<p>这是第一个段落。</p>
</body>
<p>这是第一个段落。</p>
</body>
定义页面的主体内容,可以包含多个子元素。
<html> 元素(根元素)
<html>
<body>
<p>这是第一个段落。</p>
</body>
</html>
<body>
<p>这是第一个段落。</p>
</body>
</html>
整个 HTML 文档的根节点,所有内容都必须包含在其中。
关于结束标签
部分情况下,浏览器会自动补全缺失的结束标签:
<p>这是一个段落
<p>这是另一个段落
<p>这是另一个段落
虽然可以正常显示,但不推荐依赖这种行为,可能导致:
- 结构错乱
- 样式异常
- 兼容性问题
HTML 空元素
空元素是指没有内容的元素,例如:
<br>(换行)<img>(图片)<input>(输入框)
推荐写法:
<br />
这种写法兼容 HTML、XHTML 和 XML,更规范。
最佳实践:使用小写标签
HTML 标签不区分大小写,但推荐:
- 统一使用小写标签
- 符合 W3C 规范
- 提升代码可读性与一致性
