什么是 HTML？

HTML 是 HyperText Markup Language（超文本标记语言）的缩写。它是用于在 Web 上创建和构建内容的标准语言。HTML 使用由标签表示的元素系统来定义标题、段落、链接、图像、表单和其他内容。您在浏览器中访问的每个页面都以 HTML 为基础——HTML 是 Web 的骨架。

历史

HTML 由 Tim Berners-Lee 于 1991 年创建，用于在新兴的万维网上共享文档。此后，HTML 经历了几个主要版本：HTML 2.0（1995）、HTML 4.01（1999）、XHTML（2000），最终是 HTML5——2014 年由 W3C 和 WHATWG 标准化，至今仍是现行的活标准。

基本语法

HTML 文档由嵌套的元素组成。每个元素由开始标签、内容和结束标签构成。某些元素是自闭合的（空元素），不需要结束标签。标签可以携带提供附加信息或行为的属性。

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>我的页面</title>
  </head>
  <body>
    <h1>你好，世界！</h1>
    <p>这是一个<a href="https://example.com">链接</a>。</p>
    <img src="photo.jpg" alt="一张照片" />
  </body>
</html>

核心概念

• DOCTYPE — <!DOCTYPE html> 告诉浏览器这是 HTML5 文档。始终作为第一行。
• 元素 — 基本构建块：开始标签、内容和结束标签。示例：<p>你好</p>
• 空元素 — 没有内容的自闭合元素：<img>、<br>、<input>、<meta>、<link>
• 属性 — 开始标签内的额外信息：<a href="/页面">、<img alt="描述">
• 嵌套 — 元素必须正确嵌套；子元素必须在其父元素之前关闭
• Head — 包含元数据：标题、字符集、viewport、CSS 链接、脚本
• Body — 包含所有可见页面内容

HTML5 语义元素

HTML5 引入了描述含义而非外观的语义元素，帮助浏览器、搜索引擎和辅助技术理解您的内容：

• <header> — 页面或部分的介绍性内容或导航
• <nav> — 一组导航链接
• <main> — 文档的主要内容（每页只有一个）
• <section> — 带有标题的主题内容分组
• <article> — 独立完整的内容（博客文章、新闻）
• <aside> — 与主要内容相关的侧边内容（侧边栏）
• <footer> — 页面或部分的页脚
• <figure> / <figcaption> — 带有可选说明的图像或图表

常用标签参考

• 标题 — <h1> 到 <h6> — 每页只使用一个 <h1>
• 段落 — <p>
• 链接 — <a href="url">文字</a>
• 图像 — <img src="url" alt="描述">
• 列表 — <ul>（无序）、<ol>（有序），条目用 <li>
• 表格 — <table>、<tr>、<th>、<td>
• 表单 — <form>、<input>、<textarea>、<button>、<select>
• Div / Span — <div>（块级）、<span>（行内）— 通用容器
• 粗体 / 斜体 — <strong>（重要）、<em>（强调）
• 代码 — <code>（行内）、<pre>（预格式化块）

HTML、CSS 与 JavaScript 比较

Web 的三种核心技术各有其独特角色：

• HTML — 结构和内容。定义页面上有什么。
• CSS — 表现。控制颜色、字体、布局和间距。
• JavaScript — 行为。添加交互性、动画和动态更新。

没有 CSS 的网页简朴但可读。没有 JavaScript 的网页仍然显示内容。但没有 HTML 的网页什么都没有可显示的。

无障碍基础

• 始终为图像添加 alt 属性——屏幕阅读器会使用它们
• 使用语义元素而非到处使用通用 <div>
• 用 <label for="id"> 标记表单输入
• 确保标题遵循逻辑层次（h1 → h2 → h3）
• 确保文本与背景之间有足够的颜色对比度

注意事项

• 始终以 <!DOCTYPE html> 作为第一行
• HTML 不区分大小写，但小写标签是惯例
• 属性值必须始终加引号
• 空元素（<img>、<br>、<input>）没有结束标签
• 正确嵌套元素——标签绝不能交叉
• 在 <html> 元素上使用 lang 属性以提升无障碍性和 SEO