HTML 基础入门

学习目标

理解 HTML 的基本定义、作用及其与编程语言的区别；
掌握 HTML 文档的基本结构和核心组成部分；
区分 HTML 标签（Tag）与元素（Element）的概念；
了解浏览器如何解析并渲染 HTML 页面；
认识 HTML 与 CSS、JavaScript 的协作关系。

什么是 HTML

HTML（HyperText Markup Language，超文本标记语言）是用于创建和组织网页内容的标准标记语言。它通过一系列标签（tags）来定义文本、图片、链接等在浏览器中的显示方式。

需要注意的是：

HTML 不是编程语言，而是一种标记语言；
它的作用是对内容进行结构化标注，告诉浏览器“这是标题”、“这是段落”等；
HTML 本身是静态的，不具备交互能力，但可与 CSS（样式）和 JavaScript（行为）结合，构建动态、美观的网页。

一个最简单的 HTML 页面

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是我写的第一个段落！</p>
</body>
</html>

这段代码展示了 HTML 文档的最小可行结构。我们将在下一节详细解析其组成部分。

HTML 标签与元素

虽然常被混用，但“标签”和“元素”有明确区别：

标签（Tag）：指写在尖括号 < > 中的关键字，如  或 。
元素（Element）：指由开始标签 + 内容 + 结束标签组成的完整结构。

例如：

<p>你好，世界！</p>

 和  是标签；
整个 你好，世界！ 是一个 HTML 元素。

有些元素是自闭合的（如 <img>、 ），不需要结束标签。

如何工作的

让我们一步步了解 HTML 文件如何变成你在屏幕上看到的网页：

步骤 1：编写 HTML 文件

使用任意文本编辑器（如 VS Code、记事本）编写代码；
保存文件时使用 .html 扩展名（如 index.html）。

步骤 2：在浏览器中打开

双击文件，或在浏览器中选择“打开文件”；
浏览器会读取并解析 HTML 代码。

步骤 3：渲染与显示

浏览器根据标签构建文档对象模型（DOM）；
将结构化内容转换为可视化的网页；
若 HTML 存在语法错误，可能导致布局错乱或内容缺失。

HTML、CSS 与 JS 的关系

现代网页由三大核心技术共同构建：

技术	角色	类比
HTML	定义内容结构	房屋的钢筋骨架
CSS	控制外观样式（颜色、布局等）	墙面、地板、油漆
JavaScript	实现交互与动态功能	电灯开关、电梯、智能系统

<!DOCTYPE html>
<html>
<head>
  <title>HTML、CSS 和 JS 示例</title>
  <style>
    body { font-family: Arial, sans-serif; background: #f0f0f0; }
    button { padding: 10px 20px; background: #007bff; color: white; border: none; cursor: pointer; }
  </style>
</head>
<body>
  <h2>欢迎来到我的网页</h2>
  <p>此结构由 HTML 构建，通过 CSS 美化，并用 JavaScript 实现交互。</p>
  <button onclick="showMessage()">点我试试</button>

  <script>
    function showMessage() {
      alert('你好！你刚刚触发了一个 JavaScript 函数！');
    }
  </script>
</body>
</html>

在实际开发中，CSS 和 JavaScript 通常放在外部文件中以提高可维护性。

HTML 属性

Attributes

属性用于为 HTML 元素提供额外信息，写在开始标签内部，格式为 名称="值"。

常见属性：

class：为元素指定 CSS 类名；
id：为元素设置唯一标识；
href：定义链接目标（用于 <a> 标签）；
src：指定图片或脚本的路径（用于 <img>、<script>）；
onclick：绑定点击事件（常与 JavaScript 配合使用）。

<a href="https://www.example.com/">访问示例网站</a>

href 是 <a> 标签的属性，表示链接地址；
属性值必须用双引号包裹（推荐做法）。

重点总结

HTML 是标记语言，用于定义网页的结构和内容；
所有 HTML 文档必须以 <!DOCTYPE html> 开头，并包含 <html>、<head>、<body> 三大区块；
元素 = 开始标签 + 内容 + 结束标签，而标签只是其中的一部分；
浏览器通过解析 HTML 构建 DOM，最终渲染出可视化页面；
HTML 与 CSS、JavaScript 三位一体：结构 + 样式 + 行为 = 完整网页体验；
属性用于扩展元素功能，书写格式为 name="value"。

思考题

为什么说 HTML 不是编程语言？它和 Python 或 JavaScript 的本质区别是什么？
如果你把 Hello 中的结束标签  删除，浏览器会如何处理？尝试在本地测试并观察结果。
假设你要做一个“用户登录”页面，分别列出哪些部分用 HTML 实现，哪些用 CSS，哪些需要 JavaScript？