第一个页面

接下来，我们将实际操作，构建我们的第一个网页。在本节课程中，我们将从零开始，逐步创建并理解一个完整的HTML页面。通过亲手实践，你将直观体会代码如何转化为浏览器中可见的内容。

第一个页面

准备我们的创作工具

说到写代码，很多朋友可能会觉得需要买昂贵的软件或者安装复杂的程序。但其实呢，我们完全可以用电脑里现成的工具开始创作。就像画家可以用最简单的铅笔开始画画一样，我们也能用最基础的文本编辑器开启HTML之旅。

在Windows系统上，我们可以使用自带的“记事本”。在Mac系统上，我们可以用“文本编辑”。这些工具虽然简单，却能帮我们专注于HTML的本质，不会因为太多的功能而分散注意力。

当然，我们也可以选择更专业的代码编辑器，比如Visual Studio Code或者Sublime Text。它们有代码高亮显示、自动补全等贴心功能，能让我们的创作更加顺畅。但现在，让我们先用最简单的工具，专注于学习HTML这门手艺本身。

认识网页的基本结构

在构建网页时，我们需要遵循一定的结构规范。每一个HTML文档都由特定的基础部分组成，这些部分共同决定了网页的功能和表现。接下来，我们将一起详细了解标准网页的基本结构，并逐步解析每个组成部分的具体作用和意义。

|
<!DOCTYPE html>                    <!-- 告诉浏览器这是HTML5格式的文档 -->
<html>                             <!-- 整个网页的根基开始 -->
  <head>                          <!-- 网页的"大脑"区域开始 -->
    <meta charset="UTF-8">        <!-- 使用UTF-8编码，支持中文显示 -->
    <title>我们的第一个页面</title>     <!-- 浏览器标签页显示的标题 -->
  </head>                         <!-- 网页的"大脑"区域结束 -->
  <body>                          <!-- 网页的"身体"区域开始 -->
    <h1>欢迎来到我们的第一个页面！</h1>  <!-- 一级标题 -->
    <p>这里是我们用HTML亲手搭建的第一个页面。</p>  <!-- 段落文字 -->
  </body>                         <!-- 网页的"身体"区域结束 -->
</html>                           <!-- 整个网页的根基结束 -->

这段代码实际上定义了一个标准的HTML文档结构，每一部分都承担着不可或缺的职责。就像工程师绘制的建筑蓝图，HTML文档的每个标签和元素都明确规定了网页的组成和功能。通过遵循这样的结构，浏览器才能准确地解析和展示网页内容，确保页面在不同设备和环境下都能正常运行和呈现。

注释

注释是写在代码中，但不会被浏览器显示或执行的文本。你可能发现了，我们上面的代码里有一些以  结束的内容。这正是我们HTML中的注释。

|
<!-- 这是一条HTML注释，它不会显示在网页上。 -->
 
<p>这是一个正常的段落，它会被显示出来。</p>
 
<!--
  注释也可以跨越多行。
  这对于写下更详细的解释非常方便。
  比如，解释下面这段代码的用途。
-->
<div class="main-content">
  ...
</div>

当你的网页变得越来越复杂时，有些代码的意图可能不是那么一目了然。几个月后，当你自己回头看时，可能都会忘记当初为什么要这么写。通过添加注释，你可以为复杂的代码块提供清晰的解释。

请注意，虽然注释在浏览器页面上不可见，但任何能够“查看网页源代码”的人，都可以看到你的注释内容。因此，永远不要在注释中包含任何敏感信息，比如密码、私钥或者未完成的、不希望被外界看到的功能构想。

身份的宣告

|
<!DOCTYPE html>

这一行代码至关重要，必须严格放在HTML文档的最顶部。它的作用是向浏览器声明：当前文档采用HTML5标准进行编写。只有这样，浏览器才能按照最新的HTML5规范来解析和渲染页面内容，确保网页在各类现代设备和环境下都能正确显示和运行。

根基标签

|
<html>
  <!-- 这里放所有网页内容 -->
</html>

<html>标签是HTML文档的根元素，承担着承载整个网页内容的职责。所有的结构性标签和页面元素都必须包含在<html>的起始标签和结束标签之间。这样做有助于浏览器正确识别和解析文档结构，确保网页能够按照标准规范进行渲染。

大脑区域：网页的控制中心

|
<head>
  <meta charset="UTF-8">
  <title>我们的小窝</title>
</head>

<head>区域是HTML文档的元数据承载区，主要负责存放页面的配置信息和控制参数。虽然这些内容不会直接呈现在网页上，但它们对于页面的解析、显示效果以及与浏览器的兼容性都起着至关重要的作用。

<meta charset="UTF-8">用于指定文档的字符编码为UTF-8，这样可以确保包括中文在内的多种语言字符都能被正确识别和显示。如果缺少该设置，页面中的中文内容可能会出现乱码，影响用户体验。

<title>标签定义了网页的标题，这一内容会显示在浏览器的标签栏或窗口标题处，有助于用户快速识别和区分不同的网页。

身体区域：网页的展示空间

|
<body>
  <h1>欢迎来到我们的第一个页面！</h1>
  <p>这里是我们用HTML亲手搭建的第一个页面。</p>
</body>

<body>区域是最让我们兴奋的部分！这里放的所有内容都会显示在浏览器窗口中，让访问者看到。无论是文字、图片还是链接，都要放在<body>标签里面。

在这个例子里，我们用<h1>创建了一个大大的标题，用<p>添加了一段描述文字。这些都是网页的基本“家具”。

创建我们的第一个网页

现在，让我们一起把这个网页变成现实吧！我们会一步一步来。首先，打开你的文本编辑器。Windows用户可以用“记事本”，Mac用户可以用“文本编辑”。然后，把上面那段完整的HTML代码复制粘贴进去。

接下来是最重要的保存步骤。点击“文件”，然后选择“另存为”。在文件名那里，我们可以写“my-first-page.html”或者“我们的第一个页面.html”，只要以.html结尾就可以。

保存的时候，一定要记得选择UTF-8编码，这样我们的中文才能正确显示。把文件保存在桌面或者你容易找到的地方。

注意，在我们编写HTML的时候，opening tag（起始标签）一定要有对应的关闭标签。
比如，如果我们只写了<html>，却忘记写</html>，浏览器会无法正确显示我们的网页内容！

打开我们的第一个网页！

找到刚刚保存的文件，你会发现它的图标变成了浏览器图标。现在，轻轻双击它！你的默认浏览器会自动打开，标签页上显示着“我们的第一个页面”，页面中间是大大的“欢迎来到我们的第一个页面！”标题，下面是那段温馨的文字。

尽管当前页面结构较为基础，但这标志着我们正式迈出了网页开发的第一步。从这一刻起，你已开始以开发者的身份参与网页的构建过程。

在后续课程中，我们将系统地学习更多实用的HTML标签和相关知识，逐步完善和丰富网页内容，从而提升页面的专业性与实用性。请继续保持学习热情，探索网页开发的更多可能性！

第一个网页 | 自在学