正在加载...

HTML 元素

你已经了解基础文档骨架。本课聚焦页面内部的构建块：HTML 元素。每个标题、段落以及页面上的大多数其他部分都是元素。

什么是 HTML 元素？

HTML 元素是完整的标记单元。对大多数包裹内容的元素来说，有三个部分：

  1. 开始标签 — 例如 <p>
  2. 内容 — 其中的文本或嵌套元素
  3. 结束标签 — 例如 </p>
    合在一起，<p>你好</p> 就是一个段落元素。

直接回答

HTML 元素通常指匹配的开始标签、可选内容和结束标签。浏览器用这一对来知道元素从哪里开始、到哪里结束。有些空元素不包裹内容，因此没有单独的结束标签。

带开始标签、内容和结束标签的元素

html
HTML Code 
<p>这是一个段落元素。</p>
<h1>这是一个标题元素。</h1>

阅读示例

  • <p> 打开一个段落元素
  • 标签之间的文本是内容
  • </p> 关闭段落
  • 标题同样使用 <h1> 和 </h1>

嵌套元素

元素可以放在其他元素内部，这叫做嵌套。内层元素必须在外层关闭之前完全打开并关闭。

嵌套元素

html
HTML Code 
<p>这个段落包含一个<strong>重要</strong>的词。</p>

这里 strong 元素嵌套在 p 元素内。嵌套可在更大的内容块中标记含义。保持树形结构清晰：不要交叉标签，例如打开 p、打开 strong，然后在 strong 之前关闭 p。

空（void）元素

有些元素不包裹内容。常称为空元素或 void。初学者常见例子是换行：

空的 br 元素

html
HTML Code 
<p>第一行。<br>第二行。</p>

<br> 标签创建换行。它没有单独的结束标签，也没有内部文本。稍后你会遇到图片等其他空元素。现在请记住：并非每个元素都像“开始-内容-结束”三明治。

标签与元素

人们有时把「标签」和「元素」说成一样。标签是尖括号中的标记。元素是浏览器理解的完整单元——通常是开始标签 + 内容 + 结束标签。说「p 元素」通常指完整的段落单元。

亲自试一试

  1. 打开你的基础 HTML 文件
  2. 添加带有嵌套 strong 文本的段落
  3. 再添加一个在两行短文本之间使用 <br> 的段落
  4. 保存并刷新浏览器
  5. 确认粗体文字和换行按预期显示

常见错误

  • 忘记需要结束标签的元素的结束标签
  • 交叉标签而不是干净嵌套
  • 把每个标签都当成必须有内容和结束标签（空元素不同）
  • 错误的结束名称，例如把 </p> 与 <h1> 配对
  • 把可见页面内容放在 body 之外

小结

  • 大多数 HTML 元素使用开始标签、内容和结束标签
  • 嵌套元素必须按正确顺序关闭
  • 像 br 这样的空元素不包裹内容
  • 标签是括号中的标记；元素是完整单元
  • 在页面中练习嵌套和简单换行
  • 为标签添加额外信息的属性会在下一课介绍

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
8
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Html 教程