铁疾从第一次用记事本敲下<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>是个好习惯。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
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>
</head>
<body>
<h1>你好，我是小新</h1>
<p>这是我独立完成的第一个HTML页面。</p>
</body>
</html>
这里的<html lang="zh-cn">是声明页面语言是简体中文；<meta charset="utf-8">告诉浏览器用UTF-8编码读取文件，避免中文乱码；<meta name="viewport" content="width=device-width, initial-scale=1.0">则是为了让页面在手机等小屏幕上也能正常缩放，虽然做静态页面时可以暂时不管，但写上它不会错。
<head>区域里的内容不会直接显示在页面上，它主要给浏览器和搜索引擎看信息；<body>里面的内容才是用户真正看到的部分。我刚学的时候经常把标签写到head里，结果页面什么也不显示，后来才明白head和body的分工。你只需要记住：head是“后台配置”，body是“前台展示”。
2.2 常用标签怎么组合成一个“像样”的页面
我的个人主页需要的信息，我用了这些标签来完成：
<h1>到<h6>：标题标签，h1最大，h6最小。一个页面通常只建议一个h1，用来放最重要的标题。<p>：段落标签，适合放自我介绍。<ul>和<li>：无序列表，我的兴趣爱好就是列表项。<a>：超链接，点击后可以跳转到其它页面。<img>：图片标签，要注意它和<a>不一样，它是“自闭合”的，通常写作<img src="图片路径" alt="图片说明">，alt属性在图片加载失败时显示文字，不能省略。<table>：表格标签，虽然现在做页面很少用表格来布局，但用来展示有规律的数据还是很实用的。
当时我的页面大概长这样：
html复制<body>
<h1>小新的个人小站</h1>
<h2>关于我</h2>
<p>一个刚接触计算机的大一学生，正在努力学习HTML和CSS。</p>
<h2>我的兴趣爱好</h2>
<ul>
<li>写代码</li>
<li>打篮球</li>
<li>看电影</li>
</ul>
<h2>我常逛的网站</h2>
<a href="https://developer.mozilla.org/zh-CN/">MDN Web文档</a>
</body>
注意这里我故意用了https://developer.mozilla.org/zh-CN/这个真实且安全的开发者文档地址，不仅因为它是学习前端最权威的资料站，更因为它能帮助新手养成“看官方文档”的习惯，而不是只依赖二手教程。写链接时，href可以是一个完整的网址，也可以是一个本地HTML文件，这样就能在多个页面之间互相跳转。
2.3 保存文件并用浏览器查看效果
写完代码后要做两件事：第一，确保文件保存为.html后缀；第二，双击文件用浏览器打开。如果你用的是VS Code，可以右键文件选择“在终端中打开”后用命令行启动浏览器，但新手阶段最简单的操作是直接双击。
我第一次双击后，浏览器里很平静地显示出了我写的标题和段落，没有报错、没有乱码，那一瞬间特别有成就感。但紧接着我就发现一个问题：页面太朴素了，连颜色都没有。这就是接下来要引入CSS和开发工具的契机。
3. 把VS Code武装成顺手的HTML编辑器
3.1 为什么从记事本升级到Visual Studio Code
记事本写HTML虽然能跑，但效率很低。没有代码高亮，写错标签名也不提醒，更别说自动补全和格式化。VS Code是微软出品的免费编辑器，它内置了对HTML、CSS、JavaScript的语法高亮和基础智能提示，而且通过插件可以扩展出Live Server实时预览、代码格式化、标签自动闭合等功能。
很多新手分不清VS Code和Visual Studio。简单来说，VS Code是轻量级的代码编辑器，启动快，适合写网页、JavaScript、Python等；Visual Studio是重量级的IDE（集成开发环境），主要用来开发C#、C++等大型桌面程序。你如果是学HTML，“Visual Studio Code”才是正确选择。别傻乎乎地去官网下载了一个几个GB的Visual Studio 2022，结果发现里面全是自己用不上的功能。
3.2 安装VS Code并进行首轮配置
去VS Code官网下载安装包时，注意认准Visual Studio Code字样，不要下载成其它“Visual Studio”系列。安装时一路默认即可，但有一处建议手动勾选“添加到PATH环境变量”，这样以后可以在终端里直接用code命令打开文件。
安装完成后，再装两个我最常用的插件：
Live Server：右键HTML文件选“Open with Live Server”，它会自动启动一个本地服务器并在浏览器打开页面，而且你修改代码保存后浏览器会立刻自动刷新，不用手动刷新页面。Chinese (Simplified) Language Pack：汉化插件，装完重启VS Code就变成中文界面。虽然学编程最好适应英文，但新手期用中文界面能减少挫败感。
装完插件后，我还做了两步调试：第一，把“文件→首选项→设置”里的“Editor: Tab Size”改为4，符合大多数HTML缩进习惯；第二，开启“Auto Save”（自动保存），文件在失焦后自动存储，这样配合Live Server能实时看到效果。这个配置对于新手来说极其友好，你只管写代码，刷新的事情交给工具。
3.3 在VS Code里建立项目文件夹
随着页面越来越多，最好给每个网页项目单独建一个文件夹，把HTML、CSS、JS、图片分门别类。我的习惯是：右键工作区选择“新建文件”来创建index.html，再新建一个css文件夹和一个js文件夹。注意，如果你要引用同级目录下的styles.css，那么HTML里的路径就要写成css/styles.css，这是相对路径的基本规则。
我在第一次尝试时把所有图片和html文件都堆在一个文件夹里，后来文件一多连自己都找不到哪个是哪个。后来我把文件夹结构整理成：
text复制my-site/
├── index.html
├── css/
│ └── style.css
├── js/
│ └── script.js
└── images/
└── avatar.jpg
这样一眼看过去就知道项目里有什么。即使只有一个HTML文件，我也建议从开始就建立这样的“目录感”，这对以后学习框架项目会非常有帮助。
4. 让页面不只“能看”，更“好看”：CSS与JavaScript初体验
4.1 用CSS把白底黑字变成有设计感的页面
HTML相当于人的骨架，CSS则是衣服和妆容。我第一次写的页面就是白底黑字，看着绝对不像一个“作品”。后来我在<head>里引入了一个外部样式表：
html复制<link rel="stylesheet" href="css/style.css">
然后在css/style.css里写：
css复制body {
font-family: Arial, "Microsoft YaHei", sans-serif;
background-color: #f5f5f5;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
h1 {
color: #2c3e50;
text-align: center;
}
a {
color: #2980b9;
text-decoration: none;
}
这里有几个关键点值得说明。font-family里写了多个字体，浏览器会按顺序选择第一个可用的，中文用户一般会命中“Microsoft YaHei”；max-width: 800px加上margin: 0 auto可以让内容在宽屏浏览器里水平居中，避免整行文字拉得太长；line-height: 1.6提升了行距，阅读体验会舒服很多。这些细节看似零碎，但正是它们把一个“演示页”变成了“页面”。
4.2 用JavaScript让网页产生互动
CSS只能改样式，JavaScript才能让页面“动起来”。我给自己设计了一个最简单的互动：点击一个按钮，页面会弹出打招呼的消息。在index.html末尾、</body>之前加入：
html复制<button onclick="sayHello()">点我打招呼</button>
<script src="js/script.js"></script>
在js/script.js里写：
javascript复制function sayHello() {
alert("你好呀！欢迎来到我的第一个网页。");
}
这里要注意<script>标签放置的位置。传统做法是把它放在body的最后，因为JS文件可能要操作网页元素，如果放在head里而元素还没解析，就可能报“找不到元素”的错误。这种“把脚本放在底部”的做法是新手非常容易忽略的细节。
这些内容加完之后，整个网页已经具备“HTML结构 + CSS样式 + JS交互”的三种形态了。这个阶段你可以暂时不深究ES6、DOM、事件流，只需要知道它们是三种不同角色的技术即可。
4.3 使用Live Server预览和调试
我强烈建议从第四步开始就用Live Server来打开页面。原因有两个：第一，直接双击HTML文件打开的是file://协议，而Live Server启动的是http://localhost:5500这样的本地服务器，某些浏览器的功能（比如模块化引入、跨域请求）在file://下会被限制，早早养成在服务器环境下预览的习惯，以后学Ajax、Fetch时会少踩很多坑；第二，Live Server的自动刷新实在是太方便了，你每次保存代码，浏览器立刻更新，这个“所见即所得”的循环能让学习过程提速不少。
启动方式很简单：在VS Code里打开index.html，右键选择“Open with Live Server”，浏览器会打开一个带端口号地址的页面。如果你想改端口或设置默认浏览器，可以在插件设置里调整。但新手通常不需要动它。
5. 新手必踩的坑：文件无法预览、中文乱码和路径问题
5.1 为什么双击HTML文件打不开或预览空白
我遇到过很多次“HTML文件无法预览”的求助，绝大多数情况出在这几个地方：
- 文件扩展名被隐藏，实际是
index.html.txt。浏览器打开后要么显示一大段源代码，要么直接弹出记事本。解决办法是显示文件扩展名，然后把.txt删掉，或者另存为时在文件名上加英文双引号。 - 文件名用了中文或空格。虽然现代浏览器基本能处理，但有时会导致路径引用错乱。建议所有文件名和文件夹名都用英文小写加连字符，比如
my-home-page.html，不要用我的首页.html。 - 代码保存后没有刷新浏览器。如果你没装Live Server，每次修改代码后都要手动按
F5刷新。很多新手改完代码后盯着没有变化的页面发呆，以为代码写错了，其实是没刷新。 - 文件编码不匹配。例如文件本身是GBK编码，但HTML里写的是
<meta charset="utf-8">，就会导致乱码。解决办法是用VS Code右下角“选择编码”把文件转成UTF-8。
这里我做了一个常见问题速查表，方便你以后排查：
| 现象 | 大概率原因 | 解决方法 |
|---|---|---|
| 浏览器显示HTML源代码 | 文件为.txt或服务器没解析 | 检查扩展名并重命名为.html |
| 页面中文乱码 | 文件编码和meta声明不一致 | 统一转为UTF-8 |
| 图片无法显示 | 图片路径不对或文件名大小写敏感 | 用相对路径并严格匹配文件名 |
| 改了代码没变化 | 浏览器缓存/没刷新 | 用Live Server或Ctrl+F5强制刷新 |
| 页面显示“Not allowed to load local resource” | 用file://直接打开本地资源 | 改用Live Server或本地服务器 |
5.2 关于<meta charset="utf-8">这个细节
热词里很多次出现<meta charset="utf-8">，可见这是新手最常检索的内容。它出现的意义是什么呢？当浏览器读取一个HTML文件时，首先要确定这个文件里的字节流应该如何解码成字符。charset="utf-8"就相当于告诉浏览器：“用UTF-8规则来读我”。如果文件实际编码和声明不一致，浏览器就会猜，猜错了就是乱码。
所以正确做法是：在VS Code里养成“保存为UTF-8”的习惯。你可以在设置里搜索“files.encoding”，把它设为utf8。另外，在使用记事本另存为时，编码框里也要选择“UTF-8”，不要选“ANSI”。很多同学在Windows记事本里写HTML，默认保存为ANSI（也就是GBK），然后网页声明UTF-8，于是中文全乱套了。这个坑可以说是新手期最经典的一个。
5.3 相对路径与绝对路径：为什么你的图片总是裂开
在HTML里引入图片，可以用绝对路径或相对路径。绝对路径是https://example.com/images/a.jpg这种带域名的完整地址；相对路径是相对于当前HTML文件的位置，比如images/a.jpg。
新手最常见的问题是：本地写<img src="C:\Users\我\Desktop\1.jpg">，结果图片总是显示不出来。这是因为浏览器出于安全考虑，在很多情况下不允许网页直接访问本地硬盘的绝对路径，而且Windows的反斜杠路径在HTML里也不规范。正确的做法是把图片复制到项目文件夹里，然后用相对路径引用。如果你把HTML和图片放在同一个目录下，直接写<img src="1.jpg">即可；如果图片放在images子目录，写<img src="images/1.jpg">。
我在第一次写网页时，因为图片名是中文，而且带空格，导致路径解析一直有问题。后来我把图片改名为avatar.jpg并放到images目录，问题立刻解决。所以给你的建议是：项目里所有文件、文件夹一律使用英文小写命名，这能减少90%以上的路径问题。
6. 从“一个网页”迈向更远：VS Code之外的Visual家族
6.1 分清VS Code、Visual Studio和Visual C++ Redistributable
搜“Visual”相关关键词时，很多新手会被一堆名字搞晕。这里我帮你理一下：
Visual Studio Code：轻量编辑器，写前端、Python等脚本语言的首选，我们这篇文章全程使用的就是它。Visual Studio：微软的重量级IDE，主要用于C#、C++、.NET等大型项目开发，体积大、启动慢，新手学HTML用不上。Visual C++ Redistributable：这是一个运行库，不是开发工具。很多Windows软件运行时会要求安装它，因为那些软件是用C++写的，需要对应的运行环境。如果你安装某软件时提示缺少Microsoft Visual C++ Redistributable，去微软官网下载对应版本安装即可，它和写网页没有直接关系。Visual Assist：一个Visual Studio插件，用来增强C++代码提示的，和网页开发无关，新手可以忽略。
搞清楚这些名字，至少不会被搜索引擎推荐的无用软件带跑偏。我自己就曾误下过Visual Studio 2022，安装过程占用了几十个GB磁盘空间，最后发现对写HTML几乎没有帮助，只能默默卸载，换回VS Code。这个教训也算替大家踩了个大坑。
6.2 接下来可以怎么继续探索
当你已经能独立完成一个“结构+样式+交互”的纯静态页面，接下来的学习路径通常有两条。第一条是往深走：学习HTML5的语义化标签（如<header>、<main>、<footer>）、CSS3的Flexbox和Grid布局、ES6的常用语法，然后慢慢接触前端框架Vue或React。第二条是往宽走：尝试给自己的电脑配置一个简单的本地服务器，学习HTTP协议的基本概念，然后把你的静态页面部署到免费的托管平台，让别人也能通过网址访问。
我个人的建议是，先把HTML和CSS的基础打牢，至少要能独立还原一个“看起来还不错的”网页布局，再进入JavaScript的深水区。别太早接触构建工具，否则各种配置会让你怀疑人生。我第一次接触“打包工具”时完全不知道它在干什么，后来才慢慢理解了它是把多个文件合并、压缩、转译成浏览器能直接运行的版本。这些高级内容现在不需要碰，但可以先知道它们的存在。
6.3 从“跟着教程抄”到“自己创造”的转变
说了这么多工具和步骤，最后我想聊聊“独立创作”这件事。我见过很多同学把教程里的代码敲了一遍又一遍，但让他“脱离教程自己写一个页面”时就完全不知道从何下手。这种“照抄”和“创作”之间的差距，关键在于有没有形成自己的“代码地图”。
什么叫代码地图？就是你看到“一个页面”，能在脑海里把它拆分成“一个header里面有个logo和导航栏，下面有banner区域，中间是内容区，底部是footer”，然后你清楚地知道这些结构分别对应HTML里的哪个标签、CSS里的哪种布局方式。这种能力需要大量练习，但不是通过一遍遍抄写了练习出来的，而是通过“给自己定一个小页面需求，然后自己从头写”来练出来的。
哪怕你一开始写的页面很丑，布局歪歪扭扭，也一定要坚持先动手再参考。我第一次独立写个人主页时，连水平居中都是查了好几遍资料才实现，但现在回过头看，那些卡壳的瞬间反而成了我印象最深刻的记忆点。所以，看完这篇文章，不要只是收藏，立刻打开VS Code，新建一个index.html，把上面的代码结构敲进去，再换成你自己的名字和爱好。等你亲手做出一版页面，你会发现，屏幕上的每一行字都来自你的键盘，这种创造的快乐，才是你继续在计算机路上走下去的真正燃料。