PHP小码农

Appearance

HTML 是什么 ​

本节将为你介绍 HTML 的基本定义、核心概念以及它在 Web 开发中的地位。学完本节，你将理解 HTML 是什么、它与编程语言的区别，以及为什么它是所有 Web 开发者的必备基础。

前置知识

无需前置知识，适合零基础读者。如果你从未接触过 Web 开发，本节正是你的起点。

基础概念 ​

HTML（HyperText Markup Language，超文本标记语言）是构建网页内容的标准标记语言。它通过一系列标签（Tags）来描述网页的结构和语义，浏览器根据这些标签将内容渲染为用户可见的页面。

"超文本"指的是网页之间通过链接（Hyperlinks）相互关联，形成一张庞大的信息网络；"标记语言"则意味着 HTML 使用标签来标记内容，而非通过逻辑指令控制程序执行——这正是 HTML 与编程语言的根本区别。

HTML 是 Web 技术的基石。无论你使用 React、Vue 还是 Angular 构建前端应用，它们最终都会生成 HTML。掌握 HTML 是学习 Web 开发的第一步，也是最重要的一步。

HTML 的核心特征 ​

HTML 具有以下核心特征，理解这些特征有助于你正确使用它：

特征说明
标记语言使用标签描述内容结构，而非执行逻辑指令
声明式你描述"是什么"，浏览器负责"怎么显示"
平台无关只要有浏览器就能运行，不依赖操作系统
文本格式HTML 文件本质是纯文本，可用任何文本编辑器编写
树形结构HTML 文档形成一棵 DOM 树，是前端编程的基础

标签与元素 ​

HTML 的基本组成单位是标签（Tag）和元素（Element）。标签是用尖括号包裹的关键字，如 <p>、<h1>、<div>；元素则由开始标签、内容和结束标签组成。

html
<!-- 一个完整的 HTML 元素 -->
<p>这是一个段落。</p>
  • <p> 是开始标签（Opening Tag），告诉浏览器这里开始一个段落
  • 这是一个段落。 是内容（Content），即标签包裹的文字
  • </p> 是结束标签（Closing Tag），告诉浏览器段落到此结束

有些元素没有内容，称为自闭合标签（Void Elements），它们不需要结束标签：

html
<!-- 自闭合标签示例 -->
<br>        <!-- 换行 -->
<hr>        <!-- 水平线 -->
<img src="photo.jpg" alt="照片">  <!-- 图片 -->
<input type="text">             <!-- 输入框 -->

标签的嵌套 ​

HTML 元素可以互相嵌套，形成层级结构。外层元素称为父元素，内层元素称为子元素：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>标签嵌套示例</title>
</head>
<body>
  <!-- div 是 p 的父元素，p 是 div 的子元素 -->
  <div>
    <p>这段文字被 div 包裹。</p>
    <p>div 可以包含多个子元素。</p>
  </div>
</body>
</html>

常见错误

标签必须正确嵌套，不能交叉重叠。

html
<!-- 错误！标签交叉嵌套 -->
<p><strong>加粗的文字</p></strong>

<!-- 正确：标签正确嵌套 -->
<p><strong>加粗的文字</strong></p>

HTML 与编程语言的区别 ​

这是初学者最容易产生误解的地方。HTML 是标记语言，不是编程语言。两者的区别如下：

对比维度标记语言（HTML）编程语言（JavaScript、Python 等）
核心功能描述内容的结构和含义执行逻辑指令、处理数据
逻辑控制无法进行条件判断、循环等支持 if/else、for/while 等控制流
变量没有变量的概念可以声明和使用变量
数据处理无法进行计算或数据处理可以进行复杂的数学运算和数据操作
执行方式由浏览器解析渲染由解释器或编译器执行
输出生成可见的网页界面可以输出任意格式的数据
动态性本身是静态的可以动态执行、响应用户操作

简单来说：

  • HTML 回答的问题是"页面上有什么"
  • 编程语言 回答的问题是"怎么做某件事"
html
<!-- HTML 只能描述"这里有一个按钮" -->
<button>点击我</button>

<!-- 要让按钮有交互行为，需要 JavaScript（编程语言） -->
<script>
  document.querySelector('button').addEventListener('click', function() {
    alert('你点击了按钮！');
  });
</script>

补充说明

虽然 HTML 本身不是编程语言，但现代 HTML5 中的一些特性（如 <input type="range"> 的内置交互）让它在某种程度上具备了"行为"能力。不过这些行为依然是由浏览器内置的代码实现的，HTML 只负责声明。

HTML 在 Web 中的核心地位 ​

Web 开发有三个核心技术，常被称为前端三剑客：

技术职责类比
HTML结构（Structure）建筑的骨架
CSS表现（Presentation）建筑的装修和外观
JavaScript行为（Behavior）建筑中的电梯、灯光等可交互设施

这三者的关系可以用一个页面来说明：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>前端三剑客演示</title>
  <!-- CSS：负责样式和美观 -->
  <style>
    body { font-family: sans-serif; }
    .card {
      border: 1px solid #ccc;
      padding: 20px;
      border-radius: 8px;
      max-width: 400px;
    }
    .highlight { color: #e74c3c; font-weight: bold; }
  </style>
</head>
<body>
  <!-- HTML：负责内容结构 -->
  <div class="card">
    <h2>欢迎来到 Web 世界</h2>
    <p>这是一个展示<span class="highlight">前端三剑客</span>协作的示例。</p>
    <button id="actionBtn">点击变色</button>
  </div>

  <!-- JavaScript：负责交互行为 -->
  <script>
    const btn = document.getElementById('actionBtn');
    btn.addEventListener('click', function() {
      // 动态改变 HTML 结构和 CSS 样式
      document.querySelector('.card').style.borderColor = '#e74c3c';
      document.querySelector('h2').textContent = '颜色已改变！';
    });
  </script>
</body>
</html>

在这个示例中，HTML 提供了卡片、标题、段落和按钮的结构；CSS 让卡片有了边框和圆角；JavaScript 让按钮具有了点击交互的能力。

HTML 的基本语法规则 ​

在深入了解 HTML 之前，先掌握几条基本的语法规则：

属性（Attributes） ​

标签可以拥有属性，属性提供关于元素的额外信息。属性写在开始标签中，格式为 属性名="属性值"：

html
<!-- 带属性的标签示例 -->
<a href="https://example.com" target="_blank" title="访问示例网站">访问示例</a>
<img src="photo.jpg" alt="一张风景照片" width="800">
<input type="email" placeholder="请输入邮箱地址">

常用属性说明：

属性作用适用标签
id元素的唯一标识符所有元素
class元素的类别，用于 CSS 选择所有元素
style内联样式所有元素
title鼠标悬停时显示的提示文字所有元素
src资源路径<img>、<script>、<audio> 等
href链接目标地址<a>、<link>

大小写与引号 ​

HTML 标签和属性名不区分大小写，但推荐统一使用小写：

html
<!-- 可以运行但不推荐：混合大小写 -->
<DIV Class="container">内容</DIV>

<!-- 推荐：统一使用小写 -->
<div class="container">内容</div>

属性值必须用引号包裹，推荐使用双引号：

html
<!-- 不推荐：不使用引号 -->
<a href=https://example.com>链接</a>

<!-- 可以但较少用：单引号 -->
<a href='https://example.com'>链接</a>

<!-- 推荐：双引号 -->
<a href="https://example.com">链接</a>

注释 ​

HTML 注释用于在代码中添加说明，不会在浏览器中显示：

html
<!-- 这是一条 HTML 注释 -->
<!-- 
  多行注释
  可以写多行说明
  浏览器会忽略这些内容
-->

<h1>这个标题会正常显示</h1>

<!-- <p>这段文字被注释掉了，不会显示</p> -->

开发习惯

良好的注释习惯可以帮助你和团队成员更好地理解代码。但不要过度注释，应该注释"为什么"这样做，而不是"做了什么"。

实战示例 ​

下面是一个展示 HTML 基本概念的完整示例，包含标签、元素、属性、嵌套和注释：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>HTML 基本概念示例</title>
</head>
<body>
  <!-- 标题元素：h1 到 h6，表示不同层级的标题 -->
  <h1 id="main-title">HTML 基本概念</h1>

  <!-- 段落元素：用于包裹一段文字 -->
  <p class="intro">
    HTML 是 Web 技术的基石。本示例展示了 HTML 的核心概念。
  </p>

  <!-- 嵌套：div 包裹多个子元素，形成逻辑分组 -->
  <div class="content-section">

    <!-- 列表：展示多个项目 -->
    <h2>HTML 的核心特征</h2>
    <ul>
      <li><strong>标记语言</strong> — 使用标签描述内容</li>
      <li><strong>声明式</strong> — 描述"是什么"，而非"怎么做"</li>
      <li><strong>平台无关</strong> — 有浏览器即可运行</li>
    </ul>

    <!-- 链接：使用 href 属性指定目标地址 -->
    <h2>学习资源</h2>
    <p>
      访问
      <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML"
         target="_blank"
         title="MDN HTML 文档">
        MDN HTML 文档
      </a>
      获取更详细的参考资料。
    </p>

  </div>

  <!-- 图片：自闭合标签，使用 src 引用资源 -->
  <hr> <!-- 水平线，分隔内容区域 -->

  <p>
    <img src="example.png" alt="示例图片" width="300">
  </p>

</body>
</html>

注意事项 ​

  • HTML 是标记语言，不要试图用它实现复杂的逻辑处理——那是 JavaScript 的职责
  • 标签必须正确嵌套，不能交叉重叠，否则会导致页面渲染异常
  • 属性值必须用引号包裹，否则可能引发解析错误
  • 虽然浏览器对语法错误有一定的容错能力，但不应依赖容错——始终编写规范的 HTML
  • HTML 文件保存时使用 UTF-8 编码，以支持中文和特殊字符
  • 不要忽略 <!DOCTYPE html> 声明，它会让浏览器以标准模式渲染页面

最佳实践 ​

  • 统一使用小写书写标签和属性名，保持代码风格一致
  • 缩进对齐嵌套的标签，通常使用 2 个或 4 个空格缩进
  • 为关键元素添加有意义的 id 和 class，方便 CSS 和 JavaScript 操作
  • 编写语义化的 HTML，使用 <article>、<nav>、<section> 等标签表达内容含义
  • 每个页面使用一个 <h1> 作为主标题，<h2> 到 <h6> 按层级递减使用
  • 添加必要的注释，尤其是在结构复杂的区域

下一节

继续学习：HTML 能做什么

参考链接 ​