徐翊人最近总有朋友问我同一个问题：现在开发工具、AI辅助、可视化建站都这么成熟，还有必要手把手从零开发第一个网页吗？我的回答一直是——非常有必要，而且最好在没有任何框架、任何生成器的前提下，亲手敲完一个能跑的页面。你也别把这个“第一个网页”想得太小，它其实是三条知识线的交汇点：内容怎么组织、样式怎么表现、交互怎么生效。这三样一旦在动手过程中形成直觉，后面再去学框架、学工程化，都会轻松很多。
这篇文章就是写给零基础或者基础薄弱的朋友的。我会按照我自己摸爬滚打走过来的一条路，从准备工作、HTML骨架、CSS美化、JavaScript交互，一直讲到把网页发到线上让别人能访问。全程不依赖复杂工具，只需要一个文本编辑器加浏览器，就能完成“开发我的第一个网页”这件事。如果你能跟着敲下来，得到的不仅是一个页面，更是一套理解Web开发的最小模型。
1. 为什么建议从手写第一个网页开始
1.1 从零写一个页面的真实价值
很多人觉得“开发第一个网页”这个目标太基础，不如直接去学Vue、React或者当下流行的一些框架。但框架本身就是建立在HTML、CSS、JavaScript之上的脚手架。我见过不少一开始就跳进框架的同学，写了两三个月，组件、状态管理都会用，却说不清一个网页从浏览器输入地址到出现内容之间发生了什么。亲手写一个不带任何框架的静态页面，可以把“网页到底是什么”这件事彻底弄清楚。
这个价值具体体现在三个地方：第一，你能准确区分内容和样式的边界，HTML负责搭建信息结构，CSS负责视觉呈现，JavaScript负责行为逻辑；第二，你能真正理解文件之间的引用关系，样式表、脚本文件、图片资源是怎么被页面加载进来的；第三，你会对浏览器产生亲切感，知道打开开发者工具看哪些信息可以定位问题。这三样东西，恰恰是后续所有前端进阶的地基。
1.2 手写网页的适合人群与学习路径
第一种是完全没有接触过代码的人。你不需要担心“不会编程”，因为HTML和CSS严格来说不是编程语言，它们更像是一种结构描述和排版指令，入门门槛比大多数人想象的低得多。第二种是学过一些编程但没碰过Web方向的人，比如写过Python脚本、C语言作业，转过来做网页时会发现思路完全是另一套，正好借一个小项目把Web思维建立起来。
我建议的学习路径很直接：不要一上来就啃大部头教材，而是先做一个“个人信息展示页”。内容可以是一段自我介绍、几个兴趣爱好列表、一张喜欢的图片，再加上一个小按钮。这个页面麻雀虽小，却能覆盖HTML核心标签、CSS基本布局、JavaScript事件处理、页面发布全部环节。等你把这个流程完整跑一遍，再把页面内容改成你自己想要的主题，加一个导航、多写几个页面，能力自然就长出来了。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 开工前的最小装备：编辑器、目录与第一个文件
2.1 编辑器不用纠结，但要理解它帮你做了什么
第一次做网页的人总爱在编辑器选择上花太多时间。我的建议很简单：能写代码的文本编辑器都可以，系统自带的记事本都能完成这个任务，但为了体验更好，可以选一款支持语法高亮和自动补全的轻量编辑器。语法高亮的好处是能让你一眼分清标签、属性、内容，这对新手来说非常友好；自动补全则可以减少不少尖括号匹配的麻烦。
不过这里要提醒一个误区：编辑器不是编译器，它只是帮你写代码的工具。真正运行网页的是浏览器，你写好的文件最终要在浏览器里打开，由浏览器把HTML、CSS、JavaScript解释成你看到的页面。理解这一点，你就不大会纠结“用哪个编辑器写出来的网页更高级”这类问题。我自己的习惯是保持工具轻量化，打开快、界面干净，设备再普通也能流畅使用，这就足够了。
2.2 目录结构和文件命名的基本规矩
开发第一个网页时，项目目录不用复杂，但最好从一开始就养成好习惯。我在本地习惯建一个以项目命名的文件夹，里面放着入口HTML文件、样式文件夹、脚本文件夹和资源文件夹。以一篇文章介绍过的“个人信息展示页”为例，目录大概长这样：
code复制my-first-page/
├── index.html
├── css/
│ └── style.css
├── js/
│ └── script.js
└── images/
└── avatar.jpg
入口文件命名为index.html是有原因的。在绝大多数静态网站的约定中，index.html天然承担了“默认首页”的角色，你在地址栏里访问某个路径时，服务器如果没有特别指定文件名，就会优先寻找index.html。所以把第一个网页命名为index.html，对后面上线部署非常友好。
命名规矩方面，建议全部使用小写英文字母、数字和连字符，不要用中文文件名，也不要使用空格。很多人第一次就栽在文件名上：图片名写成了“我的 头像.jpg”，空格和中文在一些老版本服务器或者部分浏览器环境下会引发路径解析问题。你也许不一定会立刻撞上，但养成规范以后省心很多。
2.3 一个能跑起来的HTML骨架
接下来创建一个新文件，命名为index.html，敲入下面这段最基础的内容：
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>这是我手写的第一个网页，欢迎来看。</p>
</body>
</html>
这段代码看似简单，每一行都有讲究。开头的<!DOCTYPE html>是在告诉浏览器“这是一份遵循现代HTML标准文档”；<html lang="zh-CN">声明页面主语言是简体中文，既方便浏览器识别，也有助于后续理解无障碍阅读场景；<meta charset="UTF-8">负责让中文正常显示，如果漏了这行，标题和文字经常会变成乱码；<meta name="viewport">是让页面在手机上也能用合理宽度展示的关键，移动端适配的第一步就在这里。
写完以后，双击index.html文件，它会在浏览器里打开，你就能看到“你好，世界”几个大字。这是你开发第一个网页的里程碑时刻，后面所有工作，都在这个文档的基础上不断加工。
3. 从空文档到像样内容：HTML标签怎么选
3.1 页面结构和文本标签
HTML的核心思维是用标签描述“内容是什么”，而不是直接描述“内容长什么样”。比如你想写一个大标题，用<h1>而不是把<p>里的文字调大——因为<h1>表示这段文字是页面最重要的标题，浏览器、搜索引擎和读屏软件都依赖这个语义。
文本内容中，最常打交道的是标题、段落、强调和换行。标题从<h1>到<h6>一共六级，一级最大权重最高，但一个页面通常只建议出现一个<h1>，相当于文章的题目。段落用<p>包裹；一段文字里想突出关键词，可以用<strong>表示重要内容、<em>表示强调语气。需要注意的是，<strong>和<em>是带语义的，而<b>和<i>只是让文字看起来变粗、变斜，并不表达“重要”或“强调”的含义，新手容易混，顺手使用语义化标签会更好。
3.2 链接、图片与多媒体
网页与网页之间靠超链接串起来，链接的标签是<a>，最基本写法如下：
html复制<a href="https://example.com">一个链接</a>
href属性指明点击后要去哪里。如果链接指向站内另一个页面，可以直接写相对路径，比如href="about.html"；如果指向外部站点，则需要写完整的地址。还有一个新手容易忽略的细节：如果想让链接在新标签页打开，可以加target="_blank"，但与此同时建议加上rel="noopener"，这是出于安全考量，避免新打开的页面拿到当前页面的部分控制权限。这个知识点很细，但值得从第一天就养成习惯。
图片标签<img>和链接不同，它没有成对闭合的结束标签，而是自带属性：src是图片地址，alt是图片无法显示时替代的文字。alt不只是给搜索引擎看的，它对视觉障碍用户也非常重要，务必写一句能描述图片内容的话。另外你还会发现，<img>默认显示在文字流里面，想要精确控制它的位置，就要交给后面的CSS来解决。
3.3 表格、列表和表单
第二个常用内容是列表。你几乎一定会在页面上用到它，比如兴趣爱好列表、步骤清单。无序列表更适合列举并列项目，有序列表适合需要顺序的步骤。结构上都是嵌套关系：
html复制<ul>
<li>晨跑</li>
<li>摄影</li>
</ul>
<ol>
<li>打开浏览器</li>
<li>输入网址</li>
</ol>
列表的嵌套层级可以很深，比如一个<ul>里的<li>再套一层<ul>，适合做导航菜单和目录树。花点时间把列表掌握好，后面做导航栏会轻松很多。
表格标签<table>在现在的实际项目中虽然不像以前那么遍地都是，但遇到数据展示时仍然是最清晰的方案：行用<tr>，表头单元格用<th>，普通单元格用<td>。表单则是网页互动的大门，用户名输入框、按钮、单选、下拉选择都来自表单系列标签。最简单的一组表单结构是<form>里放一个<input>和一个<button>，后面加起来用JavaScript进行处理。
在开发第一个网页时，我建议不要一张表格、一个表单、一堆列表全塞进一个页面。信息结构越清晰越好，先挑你最想展示的三类内容来组织。你真正要锻炼的，是看到零散信息时能自然判断“这个适合做列表，那个适合做标题”的能力。
4. 让页面美起来：CSS的核心逻辑
4.1 样式写在哪：内联、内部与外部样式表
写了几行HTML之后，你多半会嫌默认样式太单调。这时候就该CSS上场了。样式有三种存放方式：内联样式、内部样式表、外部样式表。内联样式直接写在元素的style属性里，比如：
html复制<p style="color: red;">这样写很直接，但不建议多用</p>
内联样式的缺点非常明显：只能作用于当前这一个元素，改动起来要在每个标签里找，代码很快会变得繁琐。内部样式表是写在HTML文件<head>区域里的<style>标签，对整个页面生效，适合极小的演示场景。而外部样式表是把样式单独存成一个.css文件，再通过<link>标签引入。你在前面的骨架里其实已经看到这个写法了：
html复制<link rel="stylesheet" href="css/style.css">
外部样式表是实际项目中最值得养成的习惯。它能把结构和表现彻底分离，改样式时不用翻HTML，多个页面也可以共用同一个样式文件。开发第一个网页时我建议从一开始就走这条路，哪怕只有一个文件，也把HTML和CSS拆开。
4.2 选择器与盒模型
CSS真正的核心概念有两个：选择器和盒模型。选择器决定“这一条样式生效在哪些元素上”，盒模型决定“元素在页面上占多大地方”。写一个简单示例：
css复制body {
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
max-width: 720px;
margin: 0 auto;
padding: 2rem;
line-height: 1.7;
color: #333;
background: #fafafa;
}
h1 {
color: #1a73e8;
border-bottom: 3px solid #1a73e8;
padding-bottom: 0.5rem;
}
我给body设置了最大宽度720px并让它居中，这个细节在电脑屏幕上很舒服，文字不会从头延伸到屏幕两端，阅读体验会好很多。line-height设成1.7，行距不太挤也不太散。
盒模型这个说法听起来抽象，说白了就是浏览器把每个元素都看作一个盒子，盒子从里到外分别是内容、内边距、边框、外边距。改 padding 相当于在盒子里塞棉花，让内容和边框之间留空隙；改 margin 相当于在盒子外预留空地，让这个盒子和旁边的盒子保持距离。新手最容易困惑的是用 margin 和 padding 调来调去都不居中，本质是没搞清楚到底调的是哪个圈层的距离。你只要在开发者工具里选中一个元素看它的盒模型示意，这个概念立刻就能通。
4.3 布局的起步：Flexbox和网格
当页面里出现好几块内容时，你就会遇到布局问题：怎么让导航链接排在一条横线上，怎么让图片和文字并排。传统的方式是用浮动，但浮动对新手来说是个大坑，容易引发各种各样的奇怪高度塌陷。如果是从零学起，我强烈建议直接从Flexbox开始。
Flexbox的典型用法是在父元素上写一行：
css复制.nav-list {
display: flex;
gap: 1rem;
justify-content: center;
}
子元素会自动排成一行，gap控制间距，justify-content: center表示所有元素整体居中。很多新手写布局时习惯给每个元素都设置宽度，然后靠margin一个一个怼位置，麻烦且不灵活；换成Flexbox之后，这些困扰基本消失。
再进阶一点可以接触CSS Grid网格布局，擅长处理二维布局，比如多行多列的卡片墙。但对于第一个网页，Flexbox已经足够撑起绝大多数页面结构。我建议你先把“父元素设置display: flex，子元素顺着主轴排列”这一句话实践熟练，再做横向和纵向的混排。布局经验只能靠大量实际组合获得，没有捷径。
5. 让页面动起来：第一段JavaScript交互
5.1 事件、DOM与简单交互
做到这一步，页面已经有内容也有样子了，但它是静止的。JavaScript的任务就是让页面能对外界输入做出反应。先理解最关键的几个名词：DOM是浏览器把HTML结构变成的一棵对象树；事件是用户或浏览器触发的一个动作，比如点击、按下键盘、滚动页面；而JavaScript通过监听事件，对DOM里的元素进行修改。
最简单的例子是点击标题后修改文字。你在HTML里写了一个<h1>你好，世界</h1>，在script.js里写：
javascript复制const heading = document.querySelector('h1');
heading.addEventListener('click', function () {
heading.textContent = '你点中我了！';
heading.style.color = '#e8453c';
});
document.querySelector('h1')是在DOM里找到第一个h1元素；addEventListener('click', ...)是告诉浏览器“有人点击这个标题的时候，执行后面的函数”；函数内部改写了文字和颜色。这个过程概括下来就是：找元素、听事件、改内容。你的第一个网页至此不再是一个静态文档，而是一个可以回应用户的界面了。
5.2 推荐的第一批小功能
学习JavaScript最容易失去兴趣的点，是练习内容太抽象，看不出实际价值。所以我建议第一批功能选择那些“肉眼可见变化”的尝试。比如点击按钮切换网页背景色，或者用列表做一个简单的待办事项记录。
按钮切换背景色的代码非常简单：
html复制<button id="change-bg">换个背景色</button>
javascript复制const button = document.getElementById('change-bg');
const palette = ['#fafafa', '#f0e6d6', '#dce8f2', '#eaf2dc'];
button.addEventListener('click', function () {
const current = document.body.style.backgroundColor;
const index = palette.indexOf(current);
document.body.style.backgroundColor = palette[(index + 1) % palette.length];
});
做这个练习的价值不只是学会按钮交互，你还会顺带体会数组、字符串、取模运算这些基础概念在真实页面中的用法。等做待办事项时，你又会接触到创建元素、追加子节点、删除元素，一步到位把DOM更新练熟。保持简单，保持立刻能看到变化，是你继续走下去最好的动力。
5.3 调试：开发者工具的正确用法
网页开发过程中的报错和异常几乎是不可避免的，区别只在于你能不能快速定位。浏览器的开发者工具是必须掌握的调试场地。打开方式通常是右键页面任意位置，选择“检查”，或者直接按快捷键。面板里最常用的是“元素”和“控制台”。
“元素”面板能看到HTML结构和每个元素最终生效的CSS，临时修改某个文字、颜色、内边距的效果可以立刻反映在页面上。这个玩法非常适合新手做CSS实验，改到自己满意再回头把代码更新到文件里，效率非常高。“控制台”面板会显示JavaScript运行时的错误信息，一旦有语法错误或变量未定义，红色的报错信息会直接展示出来，还带行列号。养成打开控制台的习惯，你的排错速度会以倍速提升。
我还想提醒一个新手常有的错觉：在开发者工具里改样式只是临时调整，刷新页面就会恢复原样。所有真实代码必须回到编辑器里修改并保存，浏览器只是帮你预览和验证，别搞混了。
6. 把第一个网页发出去：本地预览与上线发布
6.1 本地预览和手机预览
在浏览器里双击打开HTML文件，对开发初期已经够用，但如果你打算让网页结构变得复杂一点，直接双击文件的方式会带来两个隐患：一是浏览器地址栏显示的路径是本地文件路径，有些浏览器对本地文件的权限限制比较严格，会影响到部分资源加载；二是以后写异步请求时会遇到跨域问题。因此我建议尽早学会使用本地开发服务器。
这个词儿听上去很高级，实际做起来毫不复杂。很多轻量编辑器自带“启动服务器”的能力，一键就能在本地跑起来，然后自动打开浏览器；如果没有这个功能，也可以使用开发工具里的Live Server类似的扩展，保存文件时页面自动刷新，开发体验会舒服很多。
想用手机看效果也很简单：让手机和电脑连在同一个局域网里，启动本地开发服务器后，通常会在终端或界面里显示一个类似http://192.168.x.x:端口号的地址，把这个地址在手机浏览器里输入，就能看到你正在开发中的页面。第一次在手机里看到自己写的网页，这种成就感还是相当真实的。
6.2 发布到静态托管的流程
开发完成后，如果把整个文件夹打包发给朋友，对方拿到的只是一堆文件，必须本地打开才能浏览，体验并不好。要让全世界的人通过网址访问，你需要一个静态网站托管服务。我的建议是把第一步和第二步分开对待：第一步是最小发布，先把页面挂到网上能访问；第二步再考虑绑定自己的域名。
静态托管的基本流程是：把项目里的文件上传到托管服务，托管服务会为你的项目生成一个默认的访问地址。由于我们的项目里没有数据库和后端程序，只有HTML、CSS、JS和图片，托管变得极其简单。比较常见的做法是用代码托管平台的Pages服务，这类服务通常这样操作：上传代码到仓库，在项目设置里开启Pages功能，选择分支和目录，几秒钟后就会得到一个访问链接。
操作细节上，不同平台的界面不完全一样，但核心步骤是通用的：上传代码、指定入口文件、开启服务、拿到链接。发布之后，你在浏览器里访问线上地址，看到的内容和本地完全一致，这说明从文件到线上正常跑通了。到这里，“开发我的第一个网页”才真正画上句号。
6.3 域名、HTTPS与后续迭代
线上地址默认通常是一长串由平台生成的名字，不好记，也不够像自己的“门牌号”。所以很多人会想绑定自定义域名。绑定流程一般是：在托管平台添加你的自定义域名，然后去你购买域名的地方配置解析记录，把域名指向托管平台给出的目标地址。解析记录生效可能需要几分钟到几小时，等它生效后，别人就能通过你的域名访问这个页面。
这些托管平台一般都默认提供HTTPS证书，也就是地址栏里的那把锁。HTTPS的意义在于加密浏览器与服务器之间的传输内容，只要涉及密码、个人信息，就绝对不能被明文传输。做第一个网页时你可能还没有表单提交，但尽早理解“有数据提交的地方就应该用HTTPS”这个原则很重要，它会影响你后续写真实项目时的安全判断。
页面发布之后，你完全可以把它当作一块试验田：加一张自己的简历页，做一份旅游日记图册，或者把某个爱好整理成专题页。每加一个新页面，你就会多遇到一个新问题，然后学会一个新技能，这比闷头看教材有效得多。
7. 写给刚刚上路的你：避坑清单与我的体会
7.1 新手最容易踩的坑
先快速盘一盘我自己以及身边小伙伴开发第一个网页时踩过的坑，每一条都真实发生过。
第一，忘记保存文件就刷新浏览器。很多人在编辑器里敲了代码，浏览器里看不到任何变化，回头一看，文件压根没保存。养成随时保存的习惯，Ctrl加S这个动作要接到肌肉记忆里。
第二，拼写错误和大小写混乱。HTML标签不区分大小写，但通常小写；而class和id的值是区分大小写的，包括文件名。写了 styles.css却在HTML里写style.css，或者Id写成了ID，都会造成找不到目标的困惑。遇到问题先回头核对名字是否一字不差。
第三，标签闭合错位。嵌套结构是严格的树形结构，如果有标签没有正确闭合，浏览器会强行解析，最终页面布局就会千奇百怪。建议写标签时就成对写完，再向里面填充内容，而不要先写内容再补标签。
第四，CSS选择器没选对。样式不生效时，首先怀疑选择器写错，或者被优先级更高的样式覆盖。可以先在开发者工具里查看这个元素实际应用了哪些样式，很快就能定位问题是没选中还是被覆盖。
第五，路径问题。HTML文件引用外部资源时，相对路径需要理清当前文件与目标文件的位置关系。./表示当前目录，../表示上一级目录。如果图片显示不出来，先看看相对路径是不是走错了。
7.2 我总结的一条最小可用学习路线
如果从头再来一遍，我仍然会按这个顺序走：先只写HTML，把语义化标签理清楚；再引入CSS，做颜色、间距、边框、圆角这些表面样式；然后把布局从简单横向排布升级到复杂多列结构；之后才碰JavaScript，先做点击事件和DOM修改；最后再把项目部署上线。
这条路线之所以有效，是因为每一步的成果都能立刻被看见。试想一下，你第一天就看到了一个虽然朴素但结构完整的页面，第二天它变漂亮了，第三天它能响应你的点击了，这种正向反馈是坚持下去最重要的一股劲。相比之下，如果一开始就用框架、配环境，光是各种报错就能劝退一大批人。
开发第一个网页，本质上是在建立一种手感：看到需求，能想到用哪些标签组织内容；看到美感，能想到用哪些样式来实现；看到交互，能想到事件和DOM该怎么配合。这种手感不能靠看视频获得，只能靠一行一行敲出来。等你的第一个网页在手机和电脑上都能打开时，你已经不是那个只会打开网页看内容的普通用户了。