首页 › HTML › HTML 基础 › HTML 概述与文档结构

什么是 HTML

HTML（HyperText Markup Language，超文本标记语言）是网页的骨架。它不是编程语言，而是一种标记语言——用标签（Tag）来标注内容的含义。

层	类比	对应技术
结构	建筑的钢架	HTML
样式	装修、颜色	CSS（将单独输出）
行为	电梯、水电控制	JavaScript

HTML 版本演进

版本	发布年份	特点
HTML 2.0	1995	第一个标准化版本
HTML 4.01	1999	广泛使用，过渡到 XHTML
XHTML 1.0	2000	更严格的 XML 语法
HTML5	2014	当前标准，新增语义标签、多媒体、Canvas、API
HTML Living Standard	持续更新	WHATWG 维护，无版本号

当前标准：使用 HTML5（或称为 HTML Living Standard）。所有现代浏览器都支持。

最简 HTML 文档

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个网页</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>这是一个段落。</p>
</body>
</html>

每一行的作用：

行	作用
<!DOCTYPE html>	文档类型声明，告诉浏览器这是 HTML5
<html lang="zh-CN">	根元素，lang 属性声明页面语言
<meta charset="UTF-8">	字符编码为 UTF-8（支持中文）
<meta name="viewport">	移动端适配，视口设置
<title>...</title>	浏览器标签页标题
<body>	页面可见内容的容器

HTML 文档结构详解

<head> 部分

<head> 存放元数据（不到页面可见内容）：

<head>
  <!-- 字符编码 -->
  <meta charset="UTF-8">

  <!-- 视口设置（移动端） -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 页面描述（SEO） -->
  <meta name="description" content="HTML 教程 - 从零开始学习网页开发">

  <!-- 搜索引擎索引 -->
  <meta name="robots" content="index, follow">

  <!-- Open Graph（社交媒体分享卡片） -->
  <meta property="og:title" content="HTML 教程">
  <meta property="og:description" content="从零开始学习 HTML">

  <!-- 标签页图标 -->
  <link rel="icon" href="favicon.ico" type="image/x-icon">

  <!-- 标题（浏览器标签页） -->
  <title>HTML 教程 - 我的站点</title>
</head>

<body> 部分

<body> 存放所有可见内容。

开发工具

工具	用途
VSCode	代码编辑器，安装 Live Server 插件可实时预览
浏览器 DevTools	F12 打开，查看/调试 HTML 结构（Elements 面板）
HTML Validator	validator.w3.org 检查语法

HTML 基本规则

1. 标签成对出现：<p>内容</p>（开始标签 + 结束标签）
2. 可嵌套但不能交叉：<p><strong>对</strong></p> ✅ / <p><strong>错</p></strong> ❌
3. 属性用引号：<a href="https://example.com">链接</a>
4. 不区分大小写：<HTML> = <html>，但推荐小写
5. 空白折叠：多个连续空格/换行在 HTML 中只显示一个空格

小结

概念	要点
HTML 版本	当前使用 HTML5（Living Standard）
文档骨架	<!DOCTYPE html> → <html> → <head> + <body>
<head>	元数据、标题、SEO、编码
<body>	所有可见内容
基本规则	双标签、嵌套正确、属性引号、小写

下一节：标签语法与全局属性

贡献者: 布欧-Lewyon