前言介绍很多零基础的朋友想学习网页制作，但一看到密密麻麻的代码就感到头疼。其实，一个网页的骨架并没有想象中那么复杂。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