Klein's-blue的博客

记录生活，分享技术

0%

HTML 基础入门

HTML 基础入门

HTML（HyperText Markup Language，超文本标记语言）是构建网页的标准标记语言。本文档将带你了解 HTML 的基础知识，包括其发展历史、基本结构和常用元素。

1. HTML 发展简史与作用

1.1 HTML 发展简史

HTML 的发展经历了多个重要阶段：

  • 1991 年：Tim Berners-Lee 创建了 HTML，最初只有 18 个标签
  • 1995 年：HTML 2.0 发布，成为第一个正式标准
  • 1997 年：HTML 3.2 发布，增加了表格、Applet 等特性
  • 1999 年：HTML 4.01 发布，分离了样式（CSS）和结构（HTML）
  • 2000 年：XHTML 1.0 发布，基于 XML 的严格 HTML
  • 2014 年：HTML5 成为 W3C 推荐标准，引入了语义化标签、多媒体支持等新特性

1.2 HTML 的作用

HTML 的主要作用包括：

  1. 结构定义：定义网页的内容结构，如标题、段落、列表等
  2. 内容组织：组织文本、图片、链接等内容元素
  3. 语义表达：通过标签传达内容的语义含义
  4. 基础交互：提供表单、链接等基础交互能力

1.3 浏览器解析流程

当浏览器接收到 HTML 文档时，会按照以下流程进行解析：

1
2
3
4
5
6
7
8
9
10
11
12
13
1. 接收 HTML 文档
   ↓
2. 构建 DOM（Document Object Model）树
   ↓
3. 解析 CSS 样式表，构建 CSSOM（CSS Object Model）树
   ↓
4. 合并 DOM 和 CSSOM，构建渲染树（Render Tree）
   ↓
5. 布局（Layout/Reflow）：计算元素的位置和大小
   ↓
6. 绘制（Paint）：将元素绘制到屏幕上
   ↓
7. 合成（Composite）：将多个层合成最终图像

关键步骤说明：

  • DOM 构建：浏览器从上到下解析 HTML，遇到标签就创建 DOM 节点
  • CSSOM 构建：解析 CSS 规则，建立样式对象模型
  • 渲染树构建：将 DOM 和 CSSOM 结合，只包含需要显示的元素
  • 重排与重绘：布局改变时触发重排（Reflow），样式改变时触发重绘（Repaint）

2. 文档结构

一个标准的 HTML 文档包含以下基本结构：

2.1 <!DOCTYPE> 声明

<!DOCTYPE> 声明位于文档的第一行，用于告诉浏览器使用哪个 HTML 版本进行解析。

1
<!DOCTYPE html>

说明：

  • HTML5 只需要简单的 <!DOCTYPE html>
  • 必须是文档的第一行，在 <html> 标签之前
  • 不区分大小写，但推荐使用小写

历史版本示例：

1
2
3
4
5
<!-- HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 1.0 Strict -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2.2 <html> 根元素

<html> 是 HTML 文档的根元素，包含整个文档内容。

1
2
3
<html lang="zh-CN">
  <!-- 文档内容 -->
</html>

常用属性：

  • lang：指定文档的语言，有助于搜索引擎和屏幕阅读器
    • zh-CN：简体中文
    • zh-TW：繁体中文
    • en：英语
    • en-US：美式英语

2.3 <head> 头部元素

<head> 元素包含文档的元信息（metadata），这些信息不会在页面上显示，但对浏览器和搜索引擎很重要。

1
2
3
<head>
  <!-- 元信息内容 -->
</head>

<head> 中包含的常见元素：

  • <meta>：文档的元数据
  • <title>：页面标题
  • <link>：外部资源链接（如 CSS 文件）
  • <style>：内联样式
  • <script>：JavaScript 代码（通常放在 <body> 底部）

2.4 <body> 主体元素

<body> 元素包含所有在浏览器中显示的内容。

1
2
3
<body>
  <!-- 可见内容 -->
</body>

完整示例：

1
2
3
4
5
6
7
8
9
10
11
12
<!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>欢迎来到我的网站</h1>
  <p>这是第一个段落。</p>
</body>
</html>

3. 常用元信息

3.1 charset 字符编码

charset 指定文档的字符编码，必须放在 <head> 的前 1024 个字符内。

1
<meta charset="UTF-8">

说明：

  • UTF-8 是推荐的编码方式，支持所有字符
  • 如果不指定或指定错误，可能导致中文等字符显示为乱码
  • 必须使用小写 utf-8 或 UTF-8

其他编码方式（不推荐）：

1
2
3
<meta charset="GB2312">  <!-- 简体中文 -->
<meta charset="GBK">     <!-- 扩展的中文编码 -->
<meta charset="ISO-8859-1"> <!-- 西欧字符 -->

3.2 viewport 视口设置

viewport 控制移动设备的视口宽度和缩放比例，对响应式设计至关重要。

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

属性说明：

  • width=device-width：视口宽度等于设备屏幕宽度
  • initial-scale=1.0：初始缩放比例为 100%
  • maximum-scale=1.0：最大缩放比例（可选，防止用户缩放）
  • user-scalable=no：禁止用户缩放（不推荐，影响可访问性）

其他常见配置：

1
2
3
4
5
<!-- 响应式设计推荐配置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0">

<!-- 固定宽度（不推荐） -->
<meta name="viewport" content="width=1200">

3.3 title 页面标题

<title> 定义浏览器标签页显示的标题，也是搜索引擎结果中显示的标题。

1
<title>页面标题</title>

最佳实践：

  • 标题应该简洁明了，通常 50-60 个字符
  • 每个页面应该有独特的标题
  • 可以包含网站名称和页面描述，用分隔符连接
1
2
<title>首页 - 我的网站</title>
<title>关于我们 | 公司名称</title>

3.4 base 基础 URL

<base> 为页面上的所有相对 URL 指定基础地址，一个文档中只能有一个 <base> 元素。

1
<base href="https://www.example.com/" target="_blank">

属性：

  • href：基础 URL
  • target：默认链接打开方式（_blank、_self、_parent、_top）

示例：

1
2
3
4
5
6
7
<head>
  <base href="https://www.example.com/images/">
</head>
<body>
  <!-- 实际链接为 https://www.example.com/images/logo.png -->
  <img src="logo.png" alt="Logo">
</body>

注意：<base> 的使用较少，通常直接使用绝对 URL 或相对路径更清晰。

3.5 meta 元信息标签

<meta> 标签用于提供页面的元数据，有多种用途。

SEO 优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 页面描述（搜索引擎结果中显示） -->
<meta name="description" content="这是一个关于HTML基础入门的教程页面">

<!-- 关键词（现在影响较小，但仍可添加） -->
<meta name="keywords" content="HTML, 基础, 教程, 前端开发">

<!-- 作者信息 -->
<meta name="author" content="作者姓名">

<!-- 搜索引擎索引控制 -->
<meta name="robots" content="index, follow">
<!-- 
  content 值说明：
  - index, follow：允许索引和跟踪链接（默认）
  - noindex, nofollow：禁止索引和跟踪链接
  - index, nofollow：允许索引但不跟踪链接
  - noindex, follow：禁止索引但允许跟踪链接
-->

社交分享优化

Open Graph（Facebook、LinkedIn 等）：

1
2
3
4
5
6
<meta property="og:type" content="website">
<meta property="og:title" content="HTML 基础入门">
<meta property="og:description" content="学习 HTML 基础知识">
<meta property="og:image" content="https://www.example.com/image.jpg">
<meta property="og:url" content="https://www.example.com/page.html">
<meta property="og:site_name" content="我的网站">

Twitter Cards：

1
2
3
4
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HTML 基础入门">
<meta name="twitter:description" content="学习 HTML 基础知识">
<meta name="twitter:image" content="https://www.example.com/image.jpg">

页面刷新与重定向

1
2
3
4
5
6
7
8
<!-- 5 秒后刷新页面 -->
<meta http-equiv="refresh" content="5">

<!-- 5 秒后跳转到指定页面 -->
<meta http-equiv="refresh" content="5; url=https://www.example.com/">

<!-- 立即跳转 -->
<meta http-equiv="refresh" content="0; url=https://www.example.com/">

注意：自动刷新和重定向可能影响用户体验，应谨慎使用。

其他常用 meta 标签

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 文档类型 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- X-UA-Compatible（IE 浏览器兼容模式） -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- 主题颜色（移动浏览器） -->
<meta name="theme-color" content="#4285f4">

<!-- 移动应用标识 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="应用名称">

4. 注释、转义字符与实体

4.1 HTML 注释

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

1
2
3
4
5
6
7
8
9
10
<!-- 这是单行注释 -->

<!-- 
  这是
  多行
  注释
-->

<!-- 注释可以用于暂时隐藏代码 -->
<!-- <p>这段代码暂时不显示</p> -->

最佳实践：

  • 使用注释解释复杂的代码逻辑
  • 注释应该简洁明了
  • 不要过度注释显而易见的代码
  • 可以使用注释来标记待办事项
1
2
<!-- TODO: 需要添加用户登录功能 -->
<!-- FIXME: 这里存在跨浏览器兼容性问题 -->

4.2 转义字符

在 HTML 中，某些字符具有特殊含义，如果想显示这些字符本身，需要使用转义字符。

常见的需要转义的情况：

  1. 标签符号：< 和 >
  2. 引号：" 和 '
  3. 特殊字符：&、空格等

常见转义字符实体：

字符 实体名称 实体编号 说明
< &lt; &#60; 小于号
> &gt; &#62; 大于号
& &amp; &#38; 和号
" &quot; &#34; 双引号
' &apos; &#39; 单引号（HTML5）
空格 &nbsp; &#160; 不间断空格

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 显示 HTML 标签 -->
<p>使用 &lt;div&gt; 标签来创建容器</p>
<!-- 输出：使用 <div> 标签来创建容器 -->

<!-- 显示引号 -->
<p>他说："欢迎访问我的网站"</p>
<!-- 或者 -->
<p>他说：&quot;欢迎访问我的网站&quot;</p>

<!-- 显示 & 符号 -->
<p>HTML & CSS 教程</p>
<!-- 或者 -->
<p>HTML &amp; CSS 教程</p>

<!-- 使用不间断空格 -->
<p>价格：100&nbsp;元</p>

4.3 HTML 实体

HTML 实体用于显示特殊字符、符号和 Unicode 字符。

常用实体分类

1. 标点符号：

1
2
3
4
5
6
7
&copy;  <!-- © 版权符号 -->
&reg;   <!-- ® 注册商标 -->
&trade; <!-- ™ 商标符号 -->
&middot; <!-- · 中间点 -->
&bull;  <!-- • 项目符号 -->
&ndash; <!-- – 短破折号 -->
&mdash; <!-- — 长破折号 -->

2. 货币符号：

1
2
3
4
5
&yen;   <!-- ¥ 人民币/日元 -->
&euro;  <!-- € 欧元 -->
&pound; <!-- £ 英镑 -->
&cent;  <!-- ¢ 美分 -->
&dollar; <!-- $ 美元（也可直接输入 $） -->

3. 数学符号：

1
2
3
4
5
6
7
&times;  <!-- × 乘号 -->
&divide; <!-- ÷ 除号 -->
&plusmn; <!-- ± 正负号 -->
&le;     <!-- ≤ 小于等于 -->
&ge;     <!-- ≥ 大于等于 -->
&ne;     <!-- ≠ 不等于 -->
&asymp;  <!-- ≈ 约等于 -->

4. 箭头符号：

1
2
3
4
5
&larr;   <!-- ← 左箭头 -->
&rarr;   <!-- → 右箭头 -->
&uarr;   <!-- ↑ 上箭头 -->
&darr;   <!-- ↓ 下箭头 -->
&harr;   <!-- ↔ 双向箭头 -->

5. 希腊字母：

1
2
3
4
5
6
7
8
9
10
&Alpha;   <!-- Α -->
&Beta;    <!-- Β -->
&Gamma;   <!-- Γ -->
&Delta;   <!-- Δ -->
&Pi;      <!-- Π -->
&Omega;   <!-- Ω -->
&alpha;   <!-- α -->
&beta;    <!-- β -->
&pi;      <!-- π -->
&omega;   <!-- ω -->

使用实体编号

除了实体名称，还可以使用实体编号（十进制或十六进制）：

1
2
3
4
5
6
7
8
9
<!-- 十进制 -->
&#169;  <!-- © -->
&#174;  <!-- ® -->
&#8364; <!-- € -->

<!-- 十六进制（需要加 x） -->
&#xA9;  <!-- © -->
&#xAE;  <!-- ® -->
&#x20AC; <!-- € -->

完整示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML 实体示例</title>
</head>
<body>
  <h1>特殊字符与实体示例</h1>
  
  <h2>基本转义</h2>
  <p>HTML 标签使用 &lt; 和 &gt; 包围：&lt;div&gt;&lt;/div&gt;</p>
  <p>价格：100&nbsp;元 &amp; 200&nbsp;美元</p>
  
  <h2>版权信息</h2>
  <p>&copy; 2024 我的网站。保留所有权利。&reg;</p>
  
  <h2>数学表达式</h2>
  <p>2 &times; 3 = 6</p>
  <p>&pi; &asymp; 3.14159</p>
  <p>x &le; 10 &amp;&amp; x &ge; 0</p>
  
  <h2>货币</h2>
  <p>价格：&yen;100、&euro;50、&pound;30、$20</p>
  
  <h2>希腊字母</h2>
  <p>&Alpha; &Beta; &Gamma; &Delta; ... &Omega;</p>
  <p>&alpha; &beta; &gamma; &delta; ... &omega;</p>
</body>
</html>

总结

本文档介绍了 HTML 的基础知识，包括：

  1. HTML 发展历史：从 HTML 2.0 到 HTML5 的演进
  2. 浏览器解析流程：DOM 构建、CSSOM 构建、渲染树生成等
  3. 文档结构：<!DOCTYPE>、<html>、<head>、<body> 的作用和用法
  4. 元信息：字符编码、视口设置、SEO 优化、社交分享等 meta 标签
  5. 注释与实体：如何添加注释和使用转义字符、HTML 实体

掌握这些基础知识是学习前端开发的第一步。接下来，你可以学习 HTML 的具体元素和标签，如标题、段落、列表、链接、图片等。