PHP小码农

Appearance

第一个 HTML 页面 ​

本节将手把手带你创建第一个 HTML 文件，从打开文本编辑器到在浏览器中查看结果。完成本节后，你将拥有一个可以实际运行的 HTML 页面。

前置知识

阅读本节前，建议先了解：HTML 与 XHTML 的区别

基础概念 ​

创建一个 HTML 页面只需要两样东西：一个文本编辑器和一个浏览器。HTML 文件本质上是纯文本文件，后缀名为 .html。文本编辑器用来编写 HTML 代码，浏览器用来打开和渲染 HTML 文件。

推荐使用的文本编辑器包括 VS Code（免费且最流行）、Sublime Text、Atom 等。浏览器推荐使用 Chrome、Firefox 或 Edge。这些工具都可以免费下载和使用。

创建你的第一个 HTML 文件 ​

第一步：创建文件 ​

在你的电脑上新建一个文件夹（比如叫 my-first-website），然后在其中创建一个名为 index.html 的文件。

文件命名规范

HTML 文件使用 .html 作为后缀名。首页通常命名为 index.html，因为当用户访问一个目录时，Web 服务器会自动查找并返回 index.html 文件。

第二步：编写基本结构 ​

用文本编辑器打开 index.html，输入以下代码：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一个网页</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>这是我的第一个 HTML 页面。</p>
</body>
</html>

这五行代码构成了一个完整的 HTML 页面。让我们逐行解析：

html
<!-- 第 1 行：文档类型声明 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个 HTML5 文档，使用标准模式渲染 -->

<!-- 第 2 行：根元素 -->
<html lang="zh-CN">
<!-- html 是整个页面的根元素，lang="zh-CN" 声明页面使用中文 -->

<!-- 第 3-5 行：头部区域 -->
<head>
  <meta charset="UTF-8">
  <!-- 声明字符编码为 UTF-8，支持中文和特殊字符 -->
  <title>我的第一个网页</title>
  <!-- 浏览器标签页上显示的标题 -->
</head>

<!-- 第 6-9 行：主体区域 -->
<body>
  <h1>Hello, World!</h1>
  <!-- 一级标题：页面中最大的标题 -->
  <p>这是我的第一个 HTML 页面。</p>
  <!-- 段落：一段普通文字 -->
</body>

<!-- 第 10 行：闭合根元素 -->
</html>

第三步：在浏览器中打开 ​

保存文件后，有两种方式在浏览器中打开：

方式一：直接双击 index.html 文件，系统默认浏览器会自动打开它。

方式二：打开浏览器，按 Ctrl + O（Mac 上为 Cmd + O），选择文件打开。

开发者推荐方式

如果你使用 VS Code，可以安装 "Live Server" 插件，右键点击 HTML 文件选择 "Open with Live Server"，浏览器会自动打开并支持实时刷新。

打开后，你应该能看到一个包含标题 "Hello, World!" 和段落文字的网页。

理解 HTML 文档骨架 ​

每个 HTML 页面都遵循相同的骨架结构，由三个主要部分组成：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- 头部：存放元数据，用户不可见 -->
  <meta charset="UTF-8">
  <title>页面标题</title>
</head>
<body>
  <!-- 主体：存放页面内容，用户可见 -->
</body>
</html>

DOCTYPE 声明 ​

html
<!DOCTYPE html>

这行代码称为文档类型声明（Document Type Declaration）。它的作用是告诉浏览器使用 HTML5 标准模式来解析页面。如果不写这行，浏览器会进入怪异模式（Quirks Mode），用旧版本的规则渲染页面，导致样式不一致。

不要省略 DOCTYPE

省略 <!DOCTYPE html> 是最常见的初学者错误之一。没有它，页面可能在不同浏览器中显示不一致。

html 根元素 ​

html
<html lang="zh-CN">
  <!-- 所有内容都在这里 -->
</html>

<html> 是文档的根元素，所有其他元素都嵌套在它内部。lang="zh-CN" 属性声明页面使用的语言是简体中文，这对搜索引擎优化和屏幕阅读器非常重要。

head 头部区域 ​

html
<head>
  <meta charset="UTF-8">
  <title>页面标题</title>
</head>

<head> 存放元数据（Metadata）——描述文档本身信息的数据。head 中的内容不会直接显示在页面上。常见的 head 元素包括：

元素作用是否显示
<title>页面标题（显示在浏览器标签栏）标签栏中
<meta charset="UTF-8">字符编码声明否
<meta name="viewport">移动端视口设置否
<link rel="stylesheet">引入外部 CSS 文件否
<script src="...">引入外部 JavaScript 文件否
<meta name="description">页面描述（用于 SEO）否

body 主体区域 ​

html
<body>
  <!-- 用户能看到的所有内容都在这里 -->
  <h1>标题</h1>
  <p>段落</p>
</body>

<body> 存放页面内容——用户在浏览器中能看到和交互的一切。标题、段落、图片、链接、按钮、表单等所有可见元素都在 body 中。

详细说明 ​

文件编码很重要 ​

HTML 文件必须以 UTF-8 编码保存，否则中文和特殊字符会显示为乱码。

html
<!-- head 中的编码声明 -->
<meta charset="UTF-8">

在文本编辑器中保存文件时，确保选择 UTF-8 编码：

编辑器设置方法
VS Code右下角状态栏点击编码 → 选择 "UTF-8"
Sublime TextFile → Save with Encoding → UTF-8
记事本另存为 → 编码选择 "UTF-8"
Atom底部状态栏点击编码 → 选择 "UTF-8"

编码错误导致乱码

如果 HTML 文件保存为 GBK 或 ANSI 编码，即使声明了 <meta charset="UTF-8">，中文仍然可能显示乱码。文件的实际编码必须与声明一致。

常见编辑器配置 ​

使用 VS Code 创建 HTML 文件时，可以通过 Emmet 缩写快速生成基本结构：

在 VS Code 中新建 HTML 文件，输入 !（感叹号），然后按 Tab 键，会自动生成：

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

记住改 lang 属性

自动生成模板中 lang="en" 表示英文。中文页面应改为 lang="zh-CN"。

实战示例 ​

示例一：个人介绍页面 ​

下面是一个稍微丰富一些的个人介绍页面：

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>你好，我叫小明</h1>

  <!-- 自我介绍 -->
  <p>
    我是一名前端开发初学者，目前正在学习 HTML、CSS 和 JavaScript。
    这是我的第一个网页，虽然简单，但它是我 Web 开发之旅的起点。
  </p>

  <!-- 分隔线 -->
  <hr>

  <!-- 关于我 -->
  <h2>关于我</h2>
  <p>我住在<strong>北京</strong>，喜欢<em>编程</em>和<em>阅读</em>。</p>

  <!-- 我的学习计划 -->
  <h2>学习计划</h2>
  <p>我计划按照以下顺序学习 Web 前端技术：</p>
  <ol>
    <li>HTML — 掌握网页结构和语义化</li>
    <li>CSS — 学会页面样式和布局</li>
    <li>JavaScript — 实现页面交互和动态效果</li>
  </ol>

  <!-- 我喜欢的网站 -->
  <h2>我常用的学习网站</h2>
  <ul>
    <li><a href="https://developer.mozilla.org/zh-CN/" target="_blank">MDN Web 文档</a></li>
    <li><a href="https://www.w3school.com.cn/" target="_blank">W3School</a></li>
  </ul>

  <!-- 分隔线 -->
  <hr>

  <!-- 联系方式 -->
  <h2>联系方式</h2>
  <p>
    你可以通过邮件联系我：
    <a href="mailto:xiaoming@example.com">xiaoming@example.com</a>
  </p>

  <!-- 版权信息 -->
  <p><small>版权所有 2024 小明</small></p>
</body>
</html>

示例二：简单的导航页面 ​

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>我的书签导航</h1>
  <p>这是我常用的网站集合，方便快速访问。</p>

  <hr>

  <!-- 搜索引擎 -->
  <h2>搜索引擎</h2>
  <ul>
    <li><a href="https://www.google.com">Google</a> — 全球最大的搜索引擎</li>
    <li><a href="https://www.baidu.com">百度</a> — 中文搜索引擎</li>
  </ul>

  <!-- 技术学习 -->
  <h2>技术学习</h2>
  <ul>
    <li><a href="https://developer.mozilla.org/zh-CN/">MDN</a> — Mozilla 开发者网络</li>
    <li><a href="https://github.com">GitHub</a> — 代码托管平台</li>
    <li><a href="https://stackoverflow.com">Stack Overflow</a> — 编程问答社区</li>
  </ul>

  <!-- 社交媒体 -->
  <h2>社交媒体</h2>
  <ul>
    <li><a href="https://www.zhihu.com">知乎</a> — 知识问答平台</li>
    <li><a href="https://weibo.com">微博</a> — 社交媒体平台</li>
  </ul>

  <hr>
  <p><small>最后更新：2024 年 1 月</small></p>
</body>
</html>

注意事项 ​

  • HTML 文件后缀必须是 .html 或 .htm，推荐使用 .html
  • 不要使用中文或空格作为文件名，使用小写字母和连字符（如 my-page.html）
  • 保存文件时确保编码为 UTF-8，避免中文乱码
  • 不要用 Word、WPS 等文字处理软件编写 HTML，它们会添加不可见格式字符
  • 如果页面显示不正常，首先检查 <!DOCTYPE html> 是否存在
  • 每次修改文件后，需要在浏览器中刷新（F5 或 Ctrl+R）才能看到更新

最佳实践 ​

  • 使用专业的代码编辑器（如 VS Code）而非普通文本编辑器（如记事本）
  • 文件名使用小写字母和连字符（如 my-first-page.html），避免空格和中文
  • 为每个 HTML 文件添加完整的骨架结构：DOCTYPE、html、head（含 charset 和 title）、body
  • 在 head 中添加 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 以支持移动端
  • 使用 2 或 4 个空格缩进代码，保持层级清晰
  • 页面语言通过 <html lang="zh-CN"> 正确声明
  • 首页文件命名为 index.html

下一节

继续学习：基本页面结构

参考链接 ​