还记不记得你打开的第一个网页是什么可能是百度首页可能是某个门户网站也可能是学校官网。但你亲手写出来的第一个网页那种感觉完全不一样——哪怕只是一行“Hello World”在浏览器里亮起来的时候真的会有一种“这玩意儿是我造出来的”的满足感。我这些年带过不少人入门发现一个规律凡是能坚持学下去的人几乎都在第一天就亲手写出了自己的第一个网页。而那些上来就啃理论、背标签的人大多撑不过两周。原因很简单写网页是典型的“上手就会越写越上瘾”的事尤其现在有了Kimi、DeepSeek这些AI工具帮忙你甚至不需要先把HTML语法背熟就能做出一个像模像样的个人主页。这篇文章就打算带你完完整整走一遍“第一个网页”的全过程。我会从思路设计、核心知识点、实操代码一直讲到部署上线和常见问题排查全程都是用大白话讲的亲身经验。不管你是完全零基础的小白还是写过几行代码但没系统梳理过的人跟着这篇文章走完你就拥有一个真正能在手机上打开、能发给朋友看的网页了。顺便说一句2025年了“第一个网页”这件事的玩法已经完全不同了AI辅助生成、网页一键打包成exe、网页数据采集这些进阶玩法咱们一文说清。1. 内容整体设计与思路拆解1.1 为什么第一课一定要做“静态网页”很多人上来就问能不能直接学Vue、React我的回答永远是先别急。第一个网页老老实实从纯HTML加CSS做起。为什么因为静态网页是整栋大楼的地基。你后面学的所有框架、工具链、构建流程本质上都是在解决“如何更高效地生成这堆标签和样式”的问题。如果你连最基础的HTML结构都看不懂那学Vue的时候连模板语法在改什么都不明白。更重要的是静态网页有即时反馈。你写一行代码刷新一下浏览器马上能看到变化。这种反馈速度对新手来说是极其珍贵的它能让你在短时间内建立“代码是可控的”这个信心。我做过的第一个网页就是一个只有标题和段落的空白页但我当时盯着那个页面看了足足五分钟觉得神奇得不行。选一个什么样的主题来做第一个网页也很关键。我建议做个人名片页或者个人主页不要做那些花里胡哨的落地页。原因有三个内容自己熟悉不用到处找文案写起来顺手信息量小结构简单适合用来理解页面布局做完之后有实用价值能当个人介绍用发给别人看1.2 第一个网页要学会的四个核心能力不管你的第一个网页长什么样本质上都在练四件事结构、样式、布局、发布。这四件事也是整个前端开发的四条主线后面所有内容都是它们的延伸和深化。结构对应的是HTML它决定页面上有哪些内容以及这些内容的层级关系。就好比盖房子时的框架和承重墙。样式对应的是CSS它决定内容长什么样——颜色、大小、位置、间距。相当于装修和软装。布局对应的是CSS里最核心的盒模型、Flexbox这些概念。它解决的是“元素怎么排列”的问题。很多人CSS学了很久还是不会排版就是因为一开始没有把这部分吃透。发布对应的是把网页文件放到服务器上让别人通过网址访问。这是最容易让新手兴奋的环节因为瞬间从“本地自己看”升级成“全世界都能看”。现在我写第一个网页还会额外加一条学会和AI工具配合。2025年了再用“手敲每一个标签”的方式学确实太慢了。正确的姿势是让Kimi网页版或者DeepSeek网页版帮你打草稿然后你来改、你来理解、你来决定哪些地方调整。代码是你开的车AI只是副驾驶。2. 核心细节解析与实操要点2.1 HTML骨架每个网页都必须有的基础结构先明确一个概念HTML不是编程语言它是一门标记语言。它的作用是用一套约定好的标签把内容的结构描述清楚。你告诉浏览器“这是一级标题”“这是一个段落”“这里有一张图片”浏览器就按照这些标签的含义把内容渲染出来。一个最简单的完整HTML文档长这样!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个网页/title /head body h1你好世界/h1 p这是我亲手写的第一个网页。/p /body /html这段代码里的每一行都值得你搞清楚是干什么的!DOCTYPE html声明文档类型告诉浏览器用标准模式渲染。没有这行浏览器会进入怪癖模式页面显示可能出现各种诡异问题。html langzh-CN是根标签lang属性声明页面主要语言是简体中文对搜索引擎和屏幕阅读器都比较友好。meta charsetUTF-8声明字符编码如果不写或者写错中文会变成乱码。这个坑我见过太多次了。meta nameviewport contentwidthdevice-width, initial-scale1.0是移动端适配的关键没有这行手机浏览器会把网页当成电脑页面缩小显示字体小到看不清。title里的内容会显示在浏览器标签页上也是搜索引擎判断页面主题的重要依据。body里面就是用户实际能看到的所有内容。2.2 常用标签速查先学会这几个就够了新手的误区是想把几十个HTML标签全部背下来才动手。完全没必要。第一个网页掌握下面这几个就足够了其他的用到再查。标签作用使用场景h1-h6六级标题页面标题、模块标题p段落正文文字a超链接点击跳转到其他页面img图片展示图片ul/li无序列表导航菜单、项目列表div块级容器划分页面区块span行内容器包裹一小段文字button按钮可点击的按钮input输入框表单输入这里说两个容易踩的坑。第一个div只是用来区分区域的容器本身没有任何语义。能用h1、p这些有语义的标签表达清楚的就不要用div包一层。第二个a标签必须带href属性才能实现跳转有些人写半天发现点了没反应十有八九是忘了写href。2.3 CSS三件套引入方式、选择器优先级、盒模型写完HTML页面上只有干巴巴的文字堆在那里接下来就得靠CSS上妆了。CSS有三种引入方式外部样式表、内部样式表、行内样式。第一个网页我强烈建议用外部样式表也就是单独建一个.css文件然后在HTML的head里用link标签引进来。这样做的好处是内容和样式完全分离。样式文件可以在多个页面之间复用修改一处全站生效。link relstylesheet hrefstyle.cssCSS里最需要花时间理解的是选择器和盒模型。选择器决定了“哪些元素应用这些样式”。常见的有标签选择器p { color: red; }、类选择器.highlight { color: yellow; }、ID选择器#header { height: 60px; }、后代选择器.nav a { color: blue; }。新手最容易搞混的是类选择器和ID选择器一个页面里同一个ID只能出现一次而类可以反复使用。所以绝大多数情况下用类选择器就够了。CSS选择器的优先级有一条口诀ID 类 标签 通配符。另外行内样式的优先级比所有选择器都高!important又是一个更高层的“暴力”手段。写代码时尽量别用!important那是拆东墙补西墙的做法。盒模型是整个CSS布局的基石。每个HTML元素都可以理解成一个盒子从内到外依次是内容区content、内边距padding、边框border、外边距margin。理解盒模型的核心要点是默认情况下你设置的width和height只是内容区的尺寸元素实际占的宽度还要加上padding和border。这导致一个很常见的坑你设置两个元素各占50%宽度但它们都有padding和border结果加起来超过父容器宽度第二个元素被挤到下一行去了。解决办法很简单在CSS开头加一行* { box-sizing: border-box; }这行代码的意思是把设置的width和height当成元素最终的总宽高padding和border都在这个尺寸内部计算。实际开发中这个声明几乎成了标配新手直接在第一个网页里就用上后面少踩无数坑。3. 实操过程与核心环节实现3.1 搭建目录动手前的最后一步准备现在我们正式开始。无论你是Windows还是macOS先找个地方建一个项目文件夹名字就叫my-first-page。在这个文件夹里建两个文件index.html和style.css。目录结构是这样的my-first-page/ ├── index.html └── style.cssindex.html是网站默认的首页文件名部署到服务器后用户访问你的域名时服务器会自动去找这个文件。养成用index.html做主文件的习惯后面做任何项目都用得着。如果你想再加一张头像或者背景图可以在文件夹里再建一个images目录把图片放进去。图片路径写成相对路径images/my-photo.jpg这样整个文件夹拷贝到任何地方都能正常显示不会因为绝对路径变化而挂掉。3.2 完整代码一个能直接上线的个人名片页下面这段代码是我觉得最适合当第一个网页的模板它包含了你需要练的所有核心技能但又不复杂。代码整体是一个个人名片页包含顶部导航、头像和个人简介、技能标签、一个按钮、底部版权信息这几个典型区块。先看index.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title阿杰的个人名片/title link relstylesheet hrefstyle.css /head body header classsite-header div classcontainer span classlogo阿杰/span nav classnav a href#about关于我/a a href#skills技能/a a href#contact联系/a /nav /div /header section idabout classabout div classcontainer img classavatar srcimages/my-photo.jpg alt阿杰的头像 h1你好我是阿杰/h1 p一名正在学习前端开发的网页爱好者。这是我用HTML和CSS写出来的第一个网页。/p /div /section section idskills classskills div classcontainer h2我的技能/h2 ul classskill-list liHTML 基础/li liCSS 样式入门/li li正在学习 JavaScript/li /ul /div /section footer idcontact classsite-footer div classcontainer p联系我a hrefmailto:exampleemail.comexampleemail.com/a/p p© 2025 阿杰/p /div /footer /body /html再看style.css* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: PingFang SC, Microsoft YaHei, sans-serif; line-height: 1.6; color: #333; background-color: #f5f7fa; } .container { max-width: 960px; margin: 0 auto; padding: 0 20px; } .site-header { background-color: #2c3e50; color: #fff; padding: 16px 0; } .site-header .container { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 24px; font-weight: bold; } .nav a { color: #fff; text-decoration: none; margin-left: 20px; } .nav a:hover { color: #3498db; } .about { text-align: center; padding: 60px 0; } .avatar { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 20px; } .about h1 { font-size: 32px; margin-bottom: 12px; } .about p { font-size: 18px; color: #555; } .skills { background-color: #fff; padding: 40px 0; } .skills h2 { text-align: center; margin-bottom: 24px; } .skill-list { list-style: none; display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; } .skill-list li { background-color: #ecf0f1; padding: 8px 20px; border-radius: 20px; } .site-footer { background-color: #2c3e50; color: #fff; text-align: center; padding: 24px 0; } .site-footer a { color: #3498db; }3.3 代码逐段拆解每一段都要知道为什么先看CSS开头的*通配符。这里把box-sizing设为border-box同时把margin和padding都清零。为什么要把margin和padding清零因为不同的浏览器给HTML元素设置的默认样式不一样比如h1和p在浏览器里自带不同的上下间距如果不统一清零实际渲染时会发现不同浏览器的页面对不齐。清零之后所有间距都由你自己控制。body里的font-family设置的是字体栈。PingFang SC是苹果系统的默认中文字体Microsoft YaHei是Windows的微软雅黑sans-serif是最后的兜底告诉浏览器如果前面两个都没有就随便用个无衬线字体。写字体栈的时候一定把“最想用的”放在最前面。.container是一个经典的居中容器。max-width: 960px限制了内容最大宽度margin: 0 auto实现水平居中padding: 0 20px保证小屏幕下文字不会贴到屏幕边缘。这套写法是CSS布局里的黄金组合你后面做的任何页面几乎都会用到。display: flex是另一个重点。.site-header .container里用flex配合justify-content: space-between让左边logo和右边导航各站一端这是做导航栏最常用的方式。.skill-list里也用flex配合gap: 16px实现标签之间的间距比传统margin方案简洁得多。text-decoration: none是去掉链接的下划线。很多新手都会问为什么我的链接有下划线去掉的方法就是这一行。加个hover伪类鼠标悬停时颜色变成蓝色这是最基础但也最实用的交互效果。.avatar里的border-radius: 50%把图片变成圆形。注意这里的圆角不是固定的像素而是百分比百分比的计算基准是元素自身的尺寸50%刚好等于一个圆。配合object-fit: cover图片会被裁剪填满整个圆形容器不管原图比例是什么都不会变形。我把代码写好了你现在应该在浏览器里看到自己的第一个网页了。等等如果你是纯新手我建议亲自动手敲一遍这些代码哪怕是从我这儿复制也请逐行敲一遍见过和写过完全不一样。敲完保存后双击index.html浏览器就会打开这个页面。3.4 用AI工具辅助把Kimi和DeepSeek当“结对编程搭档”2025年了光靠自己一个人干巴巴地敲代码已经过时。我现在做页面尤其是做这种入门练习都会开着Kimi网页版或者DeepSeek网页版在旁边辅助。怎么用我给你几个具体提示词场景。比如你对CSS的Flex布局不熟不知道怎么让导航栏里的链接垂直居中直接问“我的导航栏用的flex布局logo在左导航链接在右怎么让它们垂直居中”AI会直接给出align-items: center这行代码并且解释为什么。再比如你想换一个配色方案可以问“帮我推荐一个适合个人名片页的配色背景要浅色系主色调是蓝色。”AI会给你一套完整的色值。如果你觉得哪个颜色不满意让它换一个几秒钟就行。还有一个特别好用的用法代码报错排查。如果你照着敲的代码页面显示不出来把报错信息或者你的代码原样粘贴给AI它会帮你定位问题。我见过太多新手卡在“CSS文件不起作用”这种问题上其实检查一下href路径就能解决但自己就是看不出来。不过必须提醒一句AI工具生成的内容不能无脑照抄。关键代码哪怕看不懂也要跑一遍、改一改至少知道每一行在干什么。AI是帮你加速的“副驾驶”方向盘和油门始终要握在自己手里。3.5 部署上线把第一个网页分享给全世界本地双击index.html打开地址栏显示的是file:///开头的本地路径这个页面只有你自己能看到。想让别人通过网址访问你需要把文件部署到服务器上。现在最简单的免费方案有两个全世界最流行的Gitee Pages/GitHub Pages以及Vercel。对于纯静态页面Gitee或GitHub Pages就足够了而且免费。拿GitHub Pages举例步骤很简单注册一个GitHub账号创建一个新的仓库Repository把刚才的my-first-page文件夹里的所有文件上传到这个仓库打开仓库的Settings → Pages在Source处选择main分支保存后等几十秒他会给你一个https://你的用户名.github.io/仓库名/的地址个地址就可以直接发给朋友访问了。第一次看到自己写的网页有了公网地址时那种感觉比考试得高分还爽你试过就懂了。不想折腾GitHub的话可以用Vercel把文件夹直接拖拽到网页里就能完成部署对新手极其友好。此外还有个场景很多人爱玩把网页打包成exe文件在Windows上双击就能打开。实现方式是用Electron这类框架把网页包进一个桌面壳子里。不过这是进阶玩法了你先把在线部署搞定再说别一口吃成胖子。3.6 进阶好玩的项目网页转exe、网页数据采集和浏览器插件既然你已经在做第一个网页了我不妨提前透露几个接下来你会用到的有趣方向都跟网页技术直接相关这样你学的时候也知道这些东西能往哪儿用。第一个是网页转exe。你把个人网页做好了想让不懂技术的朋友双击就打开不发网址也行那就可以用Electron把你的index.html打包成Windows桌面程序。体积虽然不小但胜在体验完整。很多桌面软件其实就是这么套了一层网页壳。第二个是网页数据采集。网页看起来是给人看的但底层是结构化的HTML标签所以可以用代码把它们批量读出来。这就是Python里requests加BeautifulSoup那一套或者直接用浏览器插件。做采集之前切记一点只看公开数据别碰涉及账号、隐私、版权的信息这是必须守住的底线。第三个是网页视频下载插件。你在B站、抖音网页版看视频时有没有想过视频文件本身是怎么加载的浏览器扩展的原理就是拦截网页请求把视频地址找出来。很多浏览器商店里的下载插件就是基于这个思路做的。同样是只用于个人学习场景注意版权问题。这些方向能让你的网页技术真正变成生产力工具。但眼下先把第一个网页做完、做透。4. 常见问题与排查技巧实录4.1 页面打不开的典型场景第一个网页完成之后新手遇到的坑其实高度集中我见过最多的问题就那几种。这里我整理成一张速查表你遇到问题时先对照一遍能解决绝大多数报错。现象最大概率原因快速排查方法双击index.html没反应文件关联错误或文件名不是.html结尾右键文件选择用浏览器打开中文显示乱码HTML缺少meta charsetUTF-8声明检查head区补上字符编码声明CSS样式完全不生效link标签的href路径写错打开浏览器F12控制台看网络面板是否有404图片显示不出来图片路径错误或文件名大小写没对上确认图片真实文件名和路径注意扩展名导航链接点了没反应锚点href忘了加#号检查链接格式#about而不是about页面在手机上显示很小缺少viewport meta标签补上meta nameviewport那段代码布局错乱元素重叠盒模型宽度计算问题检查是否有box-sizing: border-box以前我遇到过最经典的案例是一个学员花了半天时间找“CSS为什么没生效”最后发现他把CSS文件命名成了style.css.txt。Windows系统默认隐藏文件扩展名导致他实际创建了一个文本文件而不是样式文件。解决方法是把文件扩展名显示打开打开文件资源管理器查看选项卡里勾选“文件扩展名”然后再改文件名。如果你用的是谷歌浏览器页面打开后发现跟预期不一样按F12打开开发者工具看Console面板里的报错信息。浏览器控制台是前端开发最忠实的伙伴学会看报错信息你的排错能力直接提升一个档次。4.2 AI辅助排错用对提示词效率翻倍使用Kimi网页版、DeepSeek网页版这类AI工具排错时最忌讳的是直接把大段代码扔过去说“帮我看错在哪”。AI能看但效率很低。我推荐的提示词结构是明确说明需求场景、描述当前效果和预期效果的差异、只贴相关的代码片段。比如你可以这样问“我在写第一个网页用的是HTML加CSS。现在CSS里的hover效果不生效鼠标悬停在导航链接上颜色不变。以下是我导航栏的HTML和CSS代码请帮我看看哪里写错了。”这样做的好处是AI能在几秒钟内定位到具体问题。而如果你直接扔整个项目文件夹的代码过去AI容易因为信息过载给出不够精准的建议。还有一点要注意AI给出的代码也要审视。它强大的地方在于知识面广、给出答案的速度快但它并不了解你的页面整体结构。AI建议的某个样式可能会跟你的其他样式冲突所以每次应用AI建议后都刷新页面看效果确认没有引入新的问题。4.3 部署阶段的常见翻车现场部署到GitHub Pages或者Vercel看着步骤少但翻车点也不少。最常见的有三个。第一个是文件没传全。有些人只传了index.html忘了传style.css和images文件夹结果在线页面光秃秃的只有文字没有样式。部署之前把这个目录下的所有文件都检查一遍。第二个是大小写问题。Index.html和index.html在Windows本地没区别但在Linux服务器上是两个完全不同的文件。GitHub Pages跑在Linux服务器上文件名大小写写错了直接404。所以命名文件时养成统一用小写的习惯能省掉很多麻烦。第三个是部署完了看不到更新。GitHub Pages有时会有缓存你推送了新代码页面却还是旧版本。这时候在浏览器里强制刷新CtrlF5或者等一两分钟再访问。别急着怀疑自己部署步骤有问题很多时候只是缓存没刷新而已。4.4 新手最值得养成的三个习惯最后分享几个我反复叮嘱新手的话。第一个习惯是“一次只改一个地方”。写完一个页面想调整样式时每次只改一个属性刷新看效果。改完确认了再改下一个。很多人喜欢一次性改五六个地方结果页面出了问题根本不知道是哪次改动导致的。学会控制变量是程序员最重要的基本功之一。第二个习惯是“先跑通再做复杂的”。你的第一个网页用最简单的布局、最基础的样式先跑通再逐步加图片、加动画、加交互。不要一开始就想做一个炫酷的3D全屏动画网站那样只会让你在第一天就失去信心。第三个习惯是“多看不等于多做”。收藏夹里吃灰的教程够学十年了重要的是跟着动手敲。你看到这篇文章看到这里已经把该了解的都了解得差不多了下一步就是亲手把那个index.html建出来。我的第一个网页目前还躺在某个不为人知的角落里简陋得没法看但我永远记得它双击打开的那个瞬间。你现在去写也一样会记得。