前端知识站

简体中文

English

简体中文

English

外观

2025-11-29
2606
9.5m

创建第一个网页：从零开始的 HTML 实践之旅 ​

什么是网页？ ​

在深入创建网页之前,让我们先理解什么是网页。网页本质上就是一个文本文件,只不过这个文本文件使用 HTML 语言编写,并通过浏览器来解释和显示。

想象一下,如果你要给朋友写一封信来介绍自己:

  • 普通的信件使用自然语言书写
  • 网页则使用 HTML 标记语言来"标注"内容的含义和结构

为什么需要 HTML？ ​

浏览器需要知道:

  • 哪些文字是标题
  • 哪些文字是正文段落
  • 哪些文字应该加粗或斜体
  • 图片应该放在什么位置
  • 链接应该跳转到哪里

HTML 就像是一种"说明书",告诉浏览器如何组织和展示你的内容。浏览器读取 HTML 文件后,会按照标记的含义将内容渲染成我们看到的网页。

创建网页的准备工作 ​

你需要什么？ ​

创建一个网页非常简单,你只需要:

  1. 文本编辑器:
    • Windows 自带的记事本就可以
    • 更好的选择: VS Code、Sublime Text、Notepad++
  2. 浏览器:
    • Chrome、Firefox、Edge、Safari 等任意浏览器
  3. 基本文件操作知识:
    • 如何创建和保存文件
    • 如何用浏览器打开本地文件

工作流程 ​

创建和查看网页的基本流程:

编写 HTML 代码 → 保存为 .html 文件 → 用浏览器打开 → 查看效果
        ↑                                              ↓
        └──────────────── 修改代码 ←────────────────────┘

这个循环就是 Web 开发的基础工作流程,通过不断的"编写-保存-查看-修改",你会逐渐掌握 HTML 开发。

动手创建第一个网页 ​

第一步: 创建 HTML 文件 ​

  1. 打开你的文本编辑器(比如记事本或 VS Code)
  2. 创建一个新文件
  3. 输入以下代码:
html
<!DOCTYPE html>
<html>
  <head>
    <title>我的第一个网页</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>这是我创建的第一个网页!</p>
  </body>
</html>
  1. 保存文件,命名为 my-first-page.html

文件命名建议

  • 使用英文字母、数字、连字符(-)和下划线(_)
  • 避免使用空格和特殊字符
  • 文件扩展名必须是 .html 或 .htm
  • 建议使用小写字母

第二步: 在浏览器中查看 ​

有两种方式打开你的网页:

方式一: 双击文件

  • 直接双击 my-first-page.html 文件
  • 系统会用默认浏览器打开

方式二: 浏览器打开

  • 打开浏览器
  • 按 Ctrl + O (Mac 上是 Cmd + O)
  • 选择你的 HTML 文件

你应该能看到一个显示 "Hello, World!" 标题和一段文字的简单网页。

理解网页的基本结构 ​

让我们来解析刚才创建的代码,理解每一部分的含义和作用。

文档类型声明 ​

html
<!DOCTYPE html>

这是什么？

  • 文档类型声明,告诉浏览器这是一个 HTML5 文档
  • 必须放在文件的第一行

为什么需要它？ 在早期的 Web 时代,存在多个 HTML 版本和浏览器渲染模式。<!DOCTYPE html> 声明确保浏览器使用标准模式渲染页面,而不是"怪异模式"(Quirks Mode)。在标准模式下,浏览器会按照 HTML5 规范来解析和显示你的网页,保证不同浏览器的一致性。

HTML 根元素 ​

html
<html>
  <!-- 网页内容 -->
</html>

作用:

  • <html> 是整个网页的根元素
  • 所有其他元素都必须包含在 <html> 标签内部
  • 可以理解为"网页的容器"

原理: HTML 文档采用树形结构,<html> 元素是这棵树的根节点。浏览器从外到内解析元素,先读取 <html>,然后是它的子元素,形成一个层次分明的文档对象模型(DOM)。

head 区域 - 网页的"大脑" ​

html
<head>
  <title>我的第一个网页</title>
</head>

head 元素的作用:

  • 包含网页的元信息(metadata)
  • 这些信息不会直接显示在页面上
  • 但会影响网页的行为和外观

常见的 head 内容:

  • <title>: 网页标题,显示在浏览器标签页上
  • <meta>: 元数据,如字符编码、作者信息、关键词等
  • <link>: 链接外部资源,如 CSS 样式表
  • <script>: JavaScript 脚本
  • <style>: 内部 CSS 样式

为什么叫"大脑"？ 就像人的大脑控制身体的各种功能但不可见,<head> 区域控制网页的各种行为和设置,但这些设置本身不会显示给用户看。它告诉浏览器:

  • 网页的标题是什么
  • 使用什么字符编码
  • 需要加载哪些外部资源
  • 搜索引擎应该如何索引这个页面

body 区域 - 网页的"身体" ​

html
<body>
  <h1>Hello, World!</h1>
  <p>这是我创建的第一个网页!</p>
</body>

body 元素的作用:

  • 包含所有可见的页面内容
  • 用户在浏览器中看到的所有内容都在这里
  • 文本、图片、视频、链接等都放在 <body> 中

为什么分 head 和 body？ 这是一种关注点分离(Separation of Concerns)的设计理念:

  • head: 关注"怎么做" - 配置、设置、资源引入
  • body: 关注"做什么" - 实际要展示的内容

这种分离使得网页结构更清晰,代码更易于维护。你可以单独修改网页配置而不影响内容,或者修改内容而不影响配置。

添加更多内容 ​

让我们扩展第一个网页,添加更多有意义的内容:

html
<!DOCTYPE html>
<html>
  <head>
    <title>Sarah 的个人主页</title>
  </head>
  <body>
    <h1>欢迎来到我的个人主页</h1>

    <h2>关于我</h2>
    <p>我叫 Sarah，是一名前端开发初学者。</p>
    <p>我正在学习 HTML、CSS 和 JavaScript。</p>

    <h2>我的兴趣</h2>
    <p>我喜欢编程、阅读和旅行。</p>

    <h2>联系方式</h2>
    <p>邮箱: [email protected]</p>
  </body>
</html>

理解标题层级 ​

html
<h1>欢迎来到我的个人主页</h1>
<h2>关于我</h2>
<h2>我的兴趣</h2>

标题层级的含义:

  • <h1> 是一级标题,最高级别,最重要
  • <h2> 是二级标题,次级标题
  • 依次类推到 <h6>

为什么要有层级？ 标题层级不仅仅是为了样式,更重要的是表达内容的逻辑结构:

  1. 语义化: 明确表达内容的重要性和层次关系
  2. 可访问性: 屏幕阅读器依赖标题层级来帮助视障用户理解页面结构
  3. SEO 优化: 搜索引擎通过标题层级理解页面的主题和结构
  4. 开发维护: 清晰的层级使代码更易读和维护

最佳实践:

  • 每个页面只用一个 <h1>,作为页面主标题
  • 标题层级不要跳级(不要从 <h1> 直接跳到 <h3>)
  • 标题应该反映内容的逻辑结构,而不是仅仅为了视觉效果

段落标签的使用 ​

html
<p>我叫 Sarah，是一名前端开发初学者。</p>
<p>我正在学习 HTML、CSS 和 JavaScript。</p>

为什么要用 <p> 标签？

虽然浏览器会自动显示换行,但 <p> 标签有更深层的意义:

  1. 语义清晰: 明确表示这是一个段落,而不是其他类型的内容
  2. 样式控制: 可以统一控制所有段落的样式(间距、缩进等)
  3. 结构化: 让网页代码更有组织性
  4. 可访问性: 辅助技术能正确识别和处理段落内容

常见误区

不要用多个 <br> 标签来创建段落间距。正确的做法是使用 <p> 标签,然后通过 CSS 控制段落间距。<br> 只应该用于段落内的强制换行。

常见问题与解答 ​

问题 1: 为什么我看不到效果？ ​

可能的原因:

  1. 没有保存文件: 记得在修改后保存(Ctrl + S)
  2. 文件扩展名不对: 必须是 .html 而不是 .txt
  3. 浏览器缓存: 按 F5 或 Ctrl + F5 刷新页面

问题 2: 中文显示乱码怎么办？ ​

在 <head> 中添加字符编码声明:

html
<head>
  <meta charset="UTF-8" />
  <title>我的第一个网页</title>
</head>

原理说明:

  • UTF-8 是一种通用字符编码
  • 它支持几乎所有语言的字符
  • 没有这个声明,浏览器可能使用错误的编码方式解析文件
  • charset 告诉浏览器使用什么字符集来解读文本

问题 3: 空格和换行为什么没效果？ ​

HTML 会将多个连续的空格和换行合并为一个空格:

html
<!-- 这样写 -->
<p>这是 一段 有很多空格 和换行的文字</p>

<!-- 浏览器显示为 -->
这是 一段 有很多空格 和换行的文字

原理: 这是 HTML 的空白符折叠规则。因为 HTML 是标记语言,它认为格式应该由标签而不是空白字符来控制。

解决方法:

  • 使用 <br> 标签换行
  • 使用 CSS 控制空白符处理
  • 使用 <pre> 标签保留原格式

实践练习 ​

现在轮到你了!试着创建一个介绍你最喜欢的书籍或电影的网页:

要求:

  1. 包含完整的 HTML 基本结构
  2. 使用 <h1> 作为书籍/电影名称
  3. 使用 <h2> 作为各个部分的小标题(如"剧情简介"、"主要角色"等)
  4. 至少包含 3 个段落
  5. 添加字符编码声明

参考结构:

html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>电影介绍 - Inception</title>
  </head>
  <body>
    <h1>Inception (盗梦空间)</h1>

    <h2>基本信息</h2>
    <p>导演: Christopher Nolan</p>
    <p>上映年份: 2010</p>

    <h2>剧情简介</h2>
    <p><!-- 电影简介 --></p>

    <h2>我的评价</h2>
    <p><!-- 你的观后感 --></p>
  </body>
</html>

小结 ​

通过这一课,你已经学会了:

  1. 什么是网页: 使用 HTML 编写的文本文件,由浏览器解释和显示
  2. 创建网页的步骤: 编写代码 → 保存文件 → 浏览器打开
  3. HTML 基本结构:
html
<!DOCTYPE html> ← 文档类型声明
<html>
  ← 根元素
  <head>
    ← 元信息区域
    <title>...</title>
    ← 页面标题
  </head>
  <body>
    ← 可见内容区域
    <!-- 内容 -->
  </body>
</html>

  1. 核心概念:

    • 为什么需要 <!DOCTYPE html>
    • head 和 body 的区别与作用
    • 标题层级的重要性
    • 段落标签的语义价值

  2. 最佳实践:

    • 始终添加字符编码声明
    • 合理使用标题层级
    • 用标签表达语义,不仅仅是样式