HTML 简介

HTML 简介

什么是 HTML？

HTML 是用于在万维网（World Wide Web）上创建和构建内容的标准标记语言（markup language）。

• HTML 代表 超文本标记语言（HyperText Markup Language）。
• 它不是一种编程语言（programming language）；它是一种标记语言，用于描述网页内容的结构和语义（含义）。
• HTML 使用**标签（tag）**来定义标题、段落、图像、链接等元素。
• Web 浏览器解释 HTML 标签，以渲染内容的视觉呈现。

基本 HTML 示例

这是一个简单但完整的 HTML5 文档：

<!DOCTYPE html>
<html lang="en">  <!-- 'lang' 指定文档语言 -->
<head>
  <meta charset="UTF-8"> <!-- 声明字符编码 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 配置视口（viewport）以实现响应式设计 -->
  <title>Page Title</title> <!-- 出现在浏览器标签页上 -->
</head>
<body>

  <h1>My First Heading</h1>
  <p>My first paragraph.</p>

</body>
</html>

示例解释

• <!DOCTYPE html>：声明文档类型为 HTML5（对现代浏览器至关重要）。
• <html>：根元素（root element），包裹所有其他内容。
• <head>：包含关于文档的元信息（metadata）（不会显示在页面上）。
• <meta charset="UTF-8">：指定字符编码（character encoding），允许正确显示文本字符。
• <meta name="viewport" ...>：配置页面如何在不同设备上显示，对于响应式设计（responsive design）至关重要。
• <title>：设置显示在浏览器标签页或窗口标题栏上的标题。
• <body>：包含对用户可见的实际内容（文本、图像、链接等）。
• <h1>：定义一个一级标题。
• <p>：定义一个段落。

Web 浏览器读取此 HTML，理解标签，并以可视方式渲染标题和段落。

HTML 标签

HTML 标签是将元素名称包含在尖括号（< 和 >）中的形式。

<tagname>content goes here...</tagname>

• 大多数 HTML 标签是成对出现的：一个开始标签（start tag）（例如 <p>) 和一个结束标签（end tag）（例如 </p>)。
• 结束标签与开始标签相同，但在标签名称前包含一个正斜杠（/）。
• 内容放置在开始标签和结束标签之间。
• 有些标签，称为空元素（empty element）或无效元素（void element）（例如 <img>、<br>、<hr>、<input>)，不包含内容，并且在 HTML5 中不需要结束标签。它们可能会为了 XHTML 兼容性而自闭合（self-closed）（例如 <hr />)，但在 HTML5 中斜杠是可选的。

Web 浏览器

Web 浏览器（例如 Chrome、Firefox、Safari、Edge）是检索、处理和渲染网页的软件应用程序。

浏览器与 HTML 相关的主要工作是：

• 读取 HTML 文档。
• 解析标签以理解结构和内容。
• 将 HTML 结构与 CSS 样式和 JavaScript 行为结合起来。
• 在屏幕上渲染最终的视觉呈现。

浏览器本身不显示 HTML 标签；它们使用标签来确定如何显示内容。

HTML 页面结构可视化

想象一个嵌套的结构：

+------------------------------------+
| <html>                             |
| +--------------------------------+ |
| | <head>                         | |
| |   (Metadata: title, charset) | |
| +--------------------------------+ |
| +--------------------------------+ |
| | <body>                         | |
| |   <h1>Heading</h1>             | |
| |   <p>Paragraph.</p>            | |
| |   (Visible Content Area)       | |
| +--------------------------------+ |
+------------------------------------+

通常，只有 <body> 元素内部的内容会直接显示在主浏览器窗口中。

<!DOCTYPE> 声明

<!DOCTYPE html> 声明至关重要。它必须是你 HTML 文档中的第一项内容。

它告诉浏览器以“标准模式”（standards mode）渲染页面，确保其根据最新的 Web 标准（HTML5）解释 HTML 和 CSS。如果没有它，浏览器可能会回退到“怪异模式”（quirks mode），导致渲染不一致。

虽然较旧的 HTML 版本（如 HTML 4.01 或 XHTML 1.0）有不同且更复杂的 DOCTYPE 声明，但对于现代 Web 开发，你只需要使用 <!DOCTYPE html>。

HTML 版本历史

自诞生以来，HTML 经历了显著演变：

版本	年份
HTML	~1991
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2014（标准化）
HTML Living Standard	进行中

HTML5 是当前主要的版本，也是现代 Web 开发的基础。它由 WHATWG 作为“Living Standard”（活文档/持续更新标准）持续更新。