第二节 HTML主框架搭建

在了解了 HTML 的基础概念后，本节我们将正式动手，在本地开发环境中搭建一个标准网页的核心骨架与主框架。

一、准备工作

选择编辑器：我们将继续使用第一章第三节中配置好的 VS Code 作为前端开发的主力编辑器。创建项目文件夹：打开你的 EServer 本地环境，创建一个新的站点目录，随后将该文件夹拖拽到 VS Code 中打开，用于存放我们接下来要编写的 HTML 文件和其他资源（如图片、样式表）。

二、编写HTML代码

1.新建 HTML 文件与生成骨架

在 VS Code 的项目文件夹中，新建一个名为 index.html 的文件。紧接着，在文件的第一行输入 html:5（或直接输入一个英文的 !），然后按一下键盘上的 Tab 键，编辑器就会利用内置的 Emmet 插件，为你瞬间自动生成以下标准的 HTML5 骨架代码：

<!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>

为了帮助大家更好地理解这套骨架，我们可以为其添加详细的注释。添加 HTML 骨架是构建一个结构清晰、兼容性良好、易于维护和可扩展的网页的基础。

<!DOCTYPE html>
<!-- 定义文档类型为HTML5 -->
<html lang="en">
<!-- 设置网页语言为英语 -->
<head>
    <meta charset="UTF-8">
    <!-- 设置字符编码为UTF-8，确保页面正确显示各种语言 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置视口属性，使页面在不同设备上自适应显示 -->
    <title>Document</title>
    <!-- 置入页面标题 -->
</head>
<body>
<!-- 页面主体内容放置在此标签内 -->
</body>
</html>

2.修改lang语言

默认生成的骨架中，语言属性是 lang="en"。对于中文网站，我们需要将其修改为简体中文：

<!-- 设置HTML文档的语言为简体中文 -->
<html lang="zh-hans">

设置正确的页面语言具有以下重要作用：

可访问性：辅助技术（如屏幕阅读器）会根据 lang 属性识别页面的默认语言，从而采用正确的发音引擎为视障用户朗读内容。
SEO 优化：搜索引擎（如百度、谷歌）可以利用该属性判断页面内容的语言类型，有助于向目标语言用户精准推荐你的网页。
样式与行为控制：某些 CSS 属性和脚本行为可能依赖语言设置，比如伪元素 :lang() 的使用。
国际化支持：浏览器可以根据语言设置提供合适的本地化体验，例如触发浏览器自带的“网页翻译”功能或拼写检查。

3.修改 title 网页标题

默认的标题是 “Document”，我们需要将其修改为与网站内容相关的主题：

<title>你好，世界</title>

设置 <title> 标签有以下几个主要原因：

浏览器显示：<title> 的内容会直接显示在浏览器的最上方标题栏或标签页上，帮助用户在打开多个网页时快速识别当前页面。
搜索引擎优化（SEO）：搜索引擎会将页面的标题作为判断网页内容相关性的最核心因素之一。一个清晰、描述性强的标题能极大地提高网页在搜索结果中的点击率和排名。
书签标识：当用户将网页添加为收藏夹/书签时，<title> 的内容会作为默认的书签名称保存。
初始状态提示：在开发过程中，“Document”仅仅是一个占位符，提醒开发者该 HTML 文件尚未配置具体的页面标题，必须进行修改。

4.body语义化标签组织

在过去，开发者习惯使用无数个 <div> 标签来划分网页区域，这被称为“div 地狱”。而在 HTML5 中，我们提倡使用语义化标签来组织 <body> 内部的框架。

<body>
    <header>
        这是顶部
    </header>

    <nav>
        这里放导航
    </nav>

    <main>
        这里是网站的主要内容
    </main>

    <footer>
        这是底部版权区
    </footer>
</body>

采用语义化标签组织结构的优势：

结构清晰：能明确地划分网页的功能区域，使代码像大纲一样易读、易维护。
提升可访问性（Accessibility）：屏幕阅读器等辅助工具可以根据这些标签更好地理解页面结构，快速跳转到主内容区或导航区。
利于 SEO 优化：搜索引擎爬虫可以通过这些语义标签，更智能地剥离出网页的“核心正文”与“边缘导航”，从而给予正文更高的权重。
标准化开发规范：采用通用的语义化标签结构，方便团队协作开发，统一项目风格。

5.完善 nav 导航栏

接下来，我们向 <nav> 标签中填充具体的列表内容。使用无序列表 <ul> 和列表项 <li> 是制作导航栏的行业标准做法。

    <!-- 导航 -->
    <nav>
        <ul class="container">
            <li><a href="index.html">首页</a></li>
            <li><a href="list.html">列表页</a></li>
            <li><a href="single.html">文章页</a></li>
            <li><a href="page.html">单页</a></li>
        </ul>
    </nav>

6.完善 main 主区域模块化管理

在 <main> 核心内容区中，我们可以使用 <section> 标签将内容划分为不同的小节（模块），并结合 <h2>（二级标题）、<p>（段落）、<img>（图片）和 <ol>（有序列表）来丰富页面的图文排版。

<main>
      <section class="container">
            <div class="introduction">
                <h2>介绍</h2>
                <p>
                    520反套路指南，是一个针对 520 群友的指南，用于帮助大家快速了解和掌握 520 反套路的用法。
                    <img src="/image/love.png" alt="图片描述">
                </p>
            </div>
        </section>

        <section class="container">
            <div class="usage">
                <h2>使用</h2>
                <p>使用方法：</p>
                <ol>
                    <li>点击 <a href="guide.html">使用指南</a> 进入使用指南页面。</li>
                    <li>按照使用指南中的步骤操作。</li>
                    <li>遇到问题时，请查看 <a href="about.html">关于</a> 页面。</li>
                </ol>
            </div>
        </section>
</main>

7.保存文件

代码编写完成后，请养成随时保存的良好习惯。按下键盘快捷键 Ctrl + S（Mac 系统为 Cmd + S），确保文件修改已同步到本地硬盘。

三、预览网页

完成框架搭建后，我们需要查看代码在浏览器中的真实渲染效果：

直接打开：找到你在电脑中创建的 index.html 文件，双击它，或者右键点击文件并选择“用浏览器打开”。
环境预览：如果你已经启动了第一章配置的本地环境服务器，也可以直接在浏览器地址栏输入你的本地自定义域名（如 http://web.cm）来实时预览。

此时，浏览器会加载并显示你刚刚编写的全部 HTML 页面结构。虽然现在页面看起来还很朴素（因为我们还没有加入 CSS 样式），但一个坚固、标准、语义化的网页骨架已经诞生了！

一、准备工作​

二、编写HTML代码​

1.新建 HTML 文件与生成骨架​

2.修改lang语言​

3.修改 title 网页标题​

4.body语义化标签组织​

5.完善 nav 导航栏​

6.完善 main 主区域模块化管理​

7.保存文件​

三、预览网页​