前言介绍
很多零基础的朋友想学习网页制作，但一看到密密麻麻的代码就感到头疼。其实，一个网页的骨架并没有想象中那么复杂。HTML（超文本标记语言）就是用来搭建网页结构的语言，它就像盖房子时的钢筋水泥，决定了页面上的标题、段落、图片、链接等元素应该放在哪里。本教程将从零开始，手把手教你编写一个完整的静态首页。你将学到最核心的HTML标签、页面结构布局方法，以及如何让页面在不同屏幕上都显示正常。学完本教程，你将能够独立写出一个结构清晰、内容完整的网页首页，为后续学习CSS美化打下坚实基础。
前置准备
在开始编写代码之前，需要准备好两样东西：一个文本编辑器和一款现代浏览器。
文本编辑器推荐使用Visual Studio Code（简称VS Code），它是免费且功能强大的代码编写工具。如果你不想安装软件，也可以使用电脑自带的记事本（Windows系统）或文本编辑（Mac系统）。但为了更好的编码体验，建议下载VS Code。安装完成后，建议安装一个名为“Live Server”的插件（在VS Code扩展商店搜索安装），它可以让你的网页修改后自动刷新浏览器，极大提升效率。
浏览器方面，推荐使用Google Chrome或Firefox，它们对HTML标准的支持最好，并且自带开发者工具，方便你调试代码。
在桌面新建一个文件夹，命名为“my-first-page”。这个文件夹将存放你所有的网页文件。打开VS Code，点击“文件”->“打开文件夹”，选择刚才创建的文件夹。然后在VS Code左侧的资源管理器中，右键点击空白处，选择“新建文件”，命名为“index.html”。注意，扩展名必须是.html，否则浏览器无法识别。现在，准备工作全部完成，可以开始编写代码了。
分步操作步骤
1. 搭建HTML文档基本骨架
任何一个HTML页面都必须有固定的基础结构。在index.html文件中，首先输入以下代码：
```html
```
逐行解释：
- ``：文档类型声明，告诉浏览器这是一个HTML5文档。这一行必须放在最顶部。
- ``：根标签，所有内容都写在这对标签内部。lang="zh-CN"表示页面语言为简体中文，有助于搜索引擎识别。
- `
`：头部区域，这里放置页面的元信息，比如字符编码、页面标题、样式链接等，这些内容不会直接显示在网页上。- ``：声明字符编码为UTF-8，支持中文显示，避免乱码。
- ``：视口设置，让页面在移动设备上按实际宽度显示，不缩放。这是实现响应式布局的基础。
- `
- `
`：主体区域，所有用户可见的内容都写在这里。目前是空的，接下来我们将填充它。注意：所有标签都要成对出现，有开始标签`<标签名>`就有结束标签``。少数标签可以自闭合，比如``。
2. 创建头部导航栏
在`
`标签内部，开始编写页面可见内容。首先创建一个顶部导航栏，通常包含网站Logo和导航菜单。在``和``之间输入：```html
```
详细说明：
- `
- `
- `
`标签，这是最重要的标题标签，通常用于网站名称，有利于SEO。
- `
- `
- `：无序列表，用于排列导航项。
- `：列表项，每个菜单项占一个li。
- ``：超链接标签，href属性指定链接地址，这里用#表示空链接，实际开发中替换成具体页面地址。
注意：导航菜单的链接地址目前都是#，后续可以改成真实页面路径。列表项的数量可以根据实际需要增减。
3. 构建首页主体内容区域（Banner和介绍区）
导航栏下面通常是吸引眼球的Banner大图和核心介绍。在``后面继续添加：
```html
关于我们
我们是一支充满激情的团队，拥有多年的行业经验。我们相信，通过创新和专注，能够帮助每一位客户实现目标。
我们的使命是用技术驱动业务增长，用设计提升用户体验。
```
解释：
- `
`：主体内容标签，一个页面只有一个main，代表核心内容。 - `
`：区块标签，用于将内容分组。banner部分通常包含大标题、简短描述和一个按钮。 - `
`：二级标题，比h1低一级，用于区块标题。
- `
`：段落标签，包裹一段文字。
- ``：按钮样式的链接，class="btn"方便后续CSS设置按钮样式。
- 第二个section是“关于我们”介绍区，结构类似，但内容更偏向文字描述。
注意：banner的背景图片或颜色暂时没有设置，因为本教程只涉及HTML结构，背景美化将在CSS中完成。但结构已经完整，后续直接加样式即可。
4. 添加服务列表和页脚信息
网站首页通常还需要展示核心服务或产品，以及页面底部的版权信息。在``后面继续添加：
```html
我们的服务
网页设计
定制化网页设计，注重用户体验与视觉美感。
前端开发
使用最新技术栈，构建高性能、响应式网站。
SEO优化
搜索引擎优化，提升网站排名与曝光度。
© 2025 我的网站 版权所有 | 地址：北京市朝阳区某某路88号
```
操作细节：
- 服务列表使用三个`
`并列排列，每个item包含一个``三级标题和一段描述。这种结构非常适合用CSS的弹性布局（Flexbox）或网格布局（Grid）实现三列并排。
- `
- `©`：HTML实体，显示为版权符号©。注意分号不能省略。
- 页脚内容放在container中，保持与上面内容对齐。
至此，一个完整的首页HTML结构已经编写完成。完整的代码应该包含DOCTYPE声明、head、body，以及body中的header、main、section（banner、about、services）、footer。你可以对照检查自己的文件。
5. 验证代码并预览效果
代码写完后，需要验证是否有错误并查看实际显示效果。
第一步：检查标签是否闭合。重点检查`
`、``、` - `、`
- `等标签是否有对应的结束标签。在VS Code中，将鼠标放在开始标签上，对应的结束标签会高亮显示，非常方便检查。
第二步：保存文件（Ctrl+S或Command+S）。
第三步：在VS Code中，右键点击index.html文件，选择“Open with Live Server”（如果安装了Live Server插件）。浏览器会自动打开并显示页面。如果没有安装插件，可以直接在文件夹中找到index.html文件，双击用浏览器打开。
第四步：观察页面。目前页面看起来可能比较“丑”，因为没有任何CSS样式，所有元素都是默认的浏览器样式：黑色文字、白色背景、链接带下划线。但结构应该是清晰的：顶部有导航栏和标题，中间有banner、关于我们、服务列表，底部有版权信息。如果看到内容错乱或文字堆叠，请检查标签是否嵌套正确，特别是`
- `等标签是否有对应的结束标签。在VS Code中，将鼠标放在开始标签上，对应的结束标签会高亮显示，非常方便检查。
- `