零基础新手用VS Code从零创建HTML网页指南

从第一次用记事本敲下<html>这个标签，到看着浏览器里出现自己做的第一个页面，那种“原来网页真的能由我创造”的兴奋感，我到现在还记得。作为一个计算机新手学生，HTML是最适合入门的语言，它不要求你懂复杂的算法，也不用先背一堆数学公式，只需要一个文本编辑器和一个浏览器，就可以开始探索网页世界。而这趟旅程里，Visual Studio Code（以下简称VS Code）是我用过最顺手的“画板”，它让我从“写代码”慢慢变成了“做作品”。如果你也刚接触计算机，不知道怎么迈出第一步，这篇博文就和你聊聊如何从零创建一个HTML网页，并且把这些代码放进Visual Studio Code里管理起来。

我当时的目标很简单：不看教程里的完整成品，完全靠自己的理解写出一个能展示个人介绍的网页。这个看似简单的项目，其实串起了一系列关键知识点：HTML的文档结构、标签的语义、文件编码、开发工具的使用、浏览器预览的原理，甚至还包括了后续CSS和JavaScript的引入方式。整个过程走下来，我发现“第一次独立创作”真正的价值不在于页面有多漂亮，而在于你亲手把一串串字符变成了可视化的结果，这种正反馈是支撑你继续学下去的最大动力。

下面就把我从选题、构思、写代码、选工具到踩坑修复的完整过程拆开讲。有些内容可能会让天生会“照着教程走”的同学觉得啰嗦，但相信我，当你自己动手时，每一步背后的“为什么”都比“怎么做”更重要。

1. 别急着写代码，先想清楚你要做一个什么样的网页

1.1 为什么新手应该从纯HTML静态页面开始

我在学习之前看过很多前端课程的第一章，一般来说都会让你写一个“Hello World”，但“Hello World”只展示了文本，很难让人产生“这就是网页”的感觉。我当时的做法是给自己定一个更真实的小目标：做一个“我的个人主页”，页面里包含自我介绍、兴趣爱好、还有一张我喜欢的图片。这个目标不复杂，但已经足够覆盖HTML里的标题、段落、列表、图片、链接和表格等常用内容。

为什么推荐这种“成品导向”的学习方式？因为当你有了一个具体页面要还原，你就会主动去搜索“HTML怎么插入图片”“怎么让文字居中”“怎么做一个跳转链接”，这种带着问题去查资料获得的记忆，比从头到尾看一遍教程要牢固得多。而且，纯HTML页面完全不依赖服务器、数据库和框架，你只要双击文件就能在浏览器里打开，这个“即时反馈”对新手非常重要。

我开始前还专门在纸上画了一个简单的草图：顶部是网站标题，中间分左右两部分，左边放头像和基本信息，右边放一段自我介绍和几个技能列表。是的，手绘草图这个动作看起来很土，但它能帮你理清页面结构，之后写代码时也不会东一榔头西一棒子。

1.2 了解HTML文件从保存到显示的完整旅程

很多新手第一次双击HTML文件，发现它直接在浏览器里显示了，却没想过中间发生了什么。我简单梳理一下：你写好的文件是一个以.html为后缀的纯文本文件；当你用浏览器打开它时，浏览器会把文件里的字符按照HTML标准解析成内部结构，然后渲染成我们看到的页面。浏览器就是一个“翻译官”，它负责把HTML标签转成可视元素。

这个过程的第一个关键点是“文件扩展名”。如果你新建了一个文本文件，里面写好了HTML代码，但保存时名字叫index.txt，浏览器就不会把它当网页处理。我在第一次练习时甚至遇到过一个诡异的情况，文件名显示是index.html，但实际上还是index.html.txt，这是Windows系统默认隐藏已知文件扩展名导致的。解决办法是在文件资源管理器里勾选“查看→文件扩展名”，让真实扩展名露出来。

第二个关键点是“文档类型声明”。HTML文件开头那一行<!doctype html>不是普通的标签，它是告诉浏览器“请用现代标准模式来解析我这个文档”。如果不写这一行，有些浏览器会进入怪癖模式，导致页面元素的位置、大小和预期不符。新手可能感觉不明显，但越往后写CSS越容易遇到“样式不生效”的怪问题，所以从一开始就写上<!doctype html>是个好习惯。

2. 第一次写HTML：从空文件到完整页面

2.1 手写一个规范的HTML基础结构

打开记事本或VS Code，新建一个文件，我建议第一行就写：

html复制<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网页</title