不少人第一次接触网页开发是被HTMLCSSJS这串字母劝退的。总觉得这是三套完全陌生的语言还没开始学就已经觉得自己不行。但实际把它们拆开看网页开发的核心并没有想象中那么高深。这篇文章我尽量用最直白的方式把从零到能独立做一个完整网页所需的基础知识全部串一遍HTML负责内容骨架CSS负责长相和排版JS负责交互响应。不管你是要做课程作业还是自学入门或者想搞清楚网页设计到底是什么读完这篇你至少能看懂一个网页是怎么拼出来的也知道自己下一步该学什么。先说个真实现象很多人学网页开发前两周就放弃了。原因不是难而是学习路径太散。今天刷到一段讲CSS的明天复制一段JS特效代码东拼西凑出了问题不知道去哪排查最后心态崩了。所以这篇我不会按教程顺序给你摆知识点而是按做网页的真实流程来讲——你平时是怎么一步步把一个网页做出来的我就按这个步骤带你走一遍。全程只有干货没有废话。1. 网页开发是什么拆掉写代码很难的门槛1.1 三件套的分工一张桌子就讲明白把网页想象成一张桌子。HTML就是桌子的骨架——几条桌腿、一块桌面对应网页里的标题、文字、图片、按钮这些内容元素。CSS是桌子的外观——你可以给它刷白漆、贴木纹膜、把桌腿换成金属的对应网页里的颜色、字体、间距、边框。JS则是桌子的自动功能——比如按下某个开关桌面自动升起对应网页里按钮点击、菜单弹出、表单校验这些交互行为。三者的关系是层层叠加的先有HTML把内容摆出来再用CSS把内容变好看最后用JS让内容动起来、能响应操作。任何网页前端本质都是在做这三件事。如果你现在只是做网页设计作业很多时候只用HTMLCSS就够了。但懂一点JS能让你的作品立刻和其他人拉开差距——别人提交的是静态页面你交的是一个能点、能弹、能交互的完整作品。1.2 打开浏览器看清网页源码的真面目在你急着写代码之前先做一个动作随便打开一个你常逛的网站在页面空白处右键选择查看网页源代码。你会看到一屏一屏的尖括号标签不用慌。这里面最外层通常是一个html标签里面包着head和body两个部分。head放的是页面的元信息比如标题、编码、引入的样式文件和脚本body放的是你在页面上看得见的全部内容。浏览器做的工作其实就是把这些带尖括号的标签渲染成你看到的图文页面。这一步能帮你建立最关键的认知网页代码不是神秘文件它就是浏览器能识别的特定格式文本。你写的每一个页面本质上都是这样一个文本文件用.html后缀保存浏览器就能打开。1.3 静态页面和动态网站你现阶段不需要纠结会有人告诉你要学PHP、学数据库、学服务器说你才能做真正的网站。这种话对初学者基本是噪音。网页开发分为前端和后端。前端就是用户在浏览器里看到、操作的部分对应HTML/CSS/JS。后端是在服务器上处理数据、生成内容的程序常见的是PHP、Java、Python、Node.js等。你现在做的静态页面、网页设计作业全部属于前端范畴。先把前端三件套搞清楚做出来的页面已经能非常像样了。后端是后续的事跟你现在的关系不大别被绕进去。2. 开工前的三个选择编辑器、浏览器和项目目录2.1 编辑器为什么推荐VS Code而不是记事本写网页代码需要一个编辑器常见的有VS Code、Sublime、Atom也有人直接用记事本。我的建议很简单直接用VS Code免费、跨平台、插件生态强基本是现在前端开发的事实标准。装好之后务必安装下面这几个插件能解决你后面80%的麻烦Live Server——在本地起一个虚拟服务器保存代码后浏览器自动刷新不用自己来回手动刷新页面。Prettier - Code formatter——自动格式化代码让缩进、引号、换行保持一致代码看起来干净很多。Auto Rename Tag——修改HTML标签时自动同步修改闭合标签少犯低级错误。记事本或者系统自带的文本编辑器也能写但没有提示、没有高亮、没有自动补全。等你写100行代码的时候就知道有语法高亮和没有语法高亮效率差出好几倍。2.2 浏览器Chrome和它的开发者工具浏览器是网页的运行环境建议主力开发用Google Chrome或新版的Edge两者内核一样操作方式也几乎一致。Chrome最核心的调试武器是开发者工具F12快捷键可以打开。它能干这些事Elements元素面板查看当前页面的HTML和CSS实时修改样式并立刻预览效果。Console控制台面板查看JS报错信息调试JavaScript。对新手来说最重要的习惯是当页面效果和预期不一样时第一时间打开F12去看而不是盯着代码瞎猜。后面第7章我会专门讲怎么用它排查问题。2.3 项目目录第一次建站就养成好习惯很多初学者喜欢把代码文件随手丢在桌面上一个页面只有一个文件。等页面多了图片、样式、脚本全乱在一起改起来就是灾难。从第一个项目开始就按下面的目录结构来组织你的文件my-website/ ├── index.html ├── css/ │ └── style.css ├── js/ │ └── script.js └── images/ ├── logo.png └── banner.jpgindex.html是网站的首页文件浏览器打开目录时默认加载它。css目录放样式文件js目录放脚本文件images目录放图片素材。这样分开之后找一个文件只需看一眼路径不用在整个项目里翻来翻去。2.4 第一个页面最小可用的HTML文档在项目目录里新建index.html用VS Code打开输入!英文感叹号然后按Tab键编辑器会自动生成一个HTML5的标准文档框架长这样!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个网页/title /head body h1你好网页开发/h1 /body /html简单解释一下!DOCTYPE html告诉浏览器这是HTML5文档。html是根标签langzh-CN表示页面语言是简体中文。meta charsetUTF-8指定字符编码防止中文乱码。meta nameviewport ...是移动端适配的视口设置做响应式页面必须保留。title是浏览器标签栏显示的标题。h1是一级标题通常一个页面只有一个。保存文件右键选择Open with Live Server浏览器里就会出现一个你好网页开发的标题页面。恭喜你第一个网页已经跑起来了。3. HTML骨架把内容变成浏览器认识的标签3.1 内容模块化页面是由区块组成的大多数网页设计不管是新闻门户还是学校官网结构都可以拆成页头、导航、主体内容、侧边栏、页脚。HTML5引入了语义化标签直接把这种结构变成代码header页头区域logo、导航栏/header nav导航菜单/nav main主体内容区/main aside侧边栏/aside footer页脚版权信息、友情链接/footer相比过去动不动就div包div的老写法语义化标签有两个实打实的好处一是方便维护扫一眼HTML就知道每个区域是干嘛的二是利于SEO搜索引擎能更准确地识别页面重点内容。3.2 文本类标签最常用的几个页面里离不开文本。下面这些是出现频率最高的h1到h6六级标题从大到小h1一个页面只写一次用来放页面的主要标题。p普通段落。a超链接href属性指定链接地址。strong或b加粗em或i斜体。br换行。hr水平分割线。blockquote长引用自带缩进样式。ulli无序列表olli有序列表。写链接的时候有一个高频坑a href#是一个空链接点击会跳转到页面顶部。如果你暂时不知道链接地址又不想让页面跳走可以先用hrefjavascript:void(0);占位或者干脆不填href配合JS事件。3.3 图片、表格和表单做作业和做项目的三大主力图片img srcimages/banner.jpg alt网站横幅src是图片路径alt是图片加载失败时显示的替代文字。alt千万别乱省一方面它是网页无障碍访问的基础另一方面图片挂掉时你的页面至少不会是一块空白区域访问者能知道这里原本是什么。表格表格由table包裹tr表示行td表示单元格th表示表头单元格。想合并单元格时行合并用rowspan列合并用colspan。table tr th姓名/th th成绩/th /tr tr td张三/td td95/td /tr /table表单表单是网页里收集用户输入的组件常见的input类型有text单行文本框password密码框输入内容默认用圆点隐藏radio单选按钮同组单选按钮必须name属性一致checkbox多选复选框email、number自动校验格式的输入框textarea多行文本域select下拉选择框配合option使用button按钮submit提交按钮点击后提交表单一个最简单的登录表单示例form action methodpost label forusername用户名/label input typetext idusername nameusername placeholder请输入用户名 label forpassword密码/label input typepassword idpassword namepassword placeholder请输入密码 button typesubmit登录/button /form注意label的for属性要和input的id对应。这个小细节很多人不知道点label文字时能自动聚焦到对应输入框用户操作体验完全不一样。还有每个输入框都要有name属性不然表单提交后后端拿不到数据。3.4 属性、class与idCSS和JS的挂钩点HTML标签可以带属性。除了src、href、alt这些功能性属性class和id是CSS选择器和JS操作DOM的挂钩点。class给元素分组。同一个class可以用在多个元素上CSS里用.类名选中它们。id给元素唯一标识。一个页面内id不能重复CSS里用#id名选中。新手经常纠结用什么命名。我的习惯是有复用可能的样式用class需要定位到唯一元素时用id。比如导航栏里的logo用id卡片列表统一用class。4. CSS外观从选择器、盒子模型到页面布局4.1 三种引入CSS的方式优先用外部样式表CSS有三种写进页面的方式外部样式表单独的.css文件用link引入。内部样式表写在HTML的style标签里。行内样式直接写在HTML标签的style属性里。推荐的做法是外部样式表link relstylesheet hrefcss/style.css这种方式把结构HTML和表现CSS完全分离一个样式文件可以被多个页面共用。改一个网站的风格只需要改style.css一个文件不用挨个页面去翻。行内样式优先级最高但也最难维护除非特殊场景比如JS动态改样式否则不用。4.2 选择器与优先级为什么你写的样式不生效CSS的核心是选中目标元素然后设置样式。选择器常见的有*通配符选中所有元素div标签选择器.class类选择器#idID选择器div p后代选择器选中div内部所有pdiv p子元素选择器只选中div直接子元素中的p优先级从低到高大致是通配符 标签选择器 类选择器/属性选择器 ID选择器 行内样式 !important。举个例子p { color: blue; } .text { color: red; } #highlight { color: green; }如果一个p标签同时命中了这三条规则那么最终颜色是#highlight生效因为ID选择器优先级最高。这就是你经常遇到的我明明写了样式怎么没变化的常见原因——你的样式被优先级更高的规则覆盖了。排查方法很简单F12打开开发者工具选中那个元素看右侧Styles面板里哪些样式被划掉了那就是被更高优先级覆盖的。4.3 盒子模型一切页面布局的地基在CSS的世界里页面上任何一个元素都是一个矩形盒子。盒子从内到外分四层content内容区放文字、图片的区域。padding内边距内容到边框之间的距离。border边框盒子的边框线。margin外边距盒子与盒子之间的间距。盒子模型最经典的问题是box-sizing。默认情况下width和height只指定内容区的宽高padding和border会额外增加盒子的实际宽高。这导致一个极其常见的现象你给一个盒子设置了width: 300px; padding: 20px;实际渲染宽度却是340px左右各20px整个布局就乱了。解决办法是在你的CSS开头加上这一行* { box-sizing: border-box; }border-box的含义是width和height直接指定盒子最终占用的宽高padding和border在这个宽度内部挤压内容区。这让宽度的计算自然很多强烈建议作为全局默认。4.4 布局方案浮动、Flexbox与Grid怎么选布局是网页设计中最让新手头疼的部分因为方案太多了。这里给你一个清晰的选型思路浮动float老方案现在主要用于文字环绕效果不推荐再用来做整体布局。Flexbox一维布局适合按行或按列排布元素。导航栏、卡片列表、水平居中、等间距分布都是它的主场。Grid二维布局适合同时考虑行和列的场景比如整个页面的骨架、九宫格图片墙、商品列表。以Flexbox为例核心用法是.container { display: flex; justify-content: space-between; /* 水平方向两端对齐 */ align-items: center; /* 垂直方向居中 */ flex-wrap: wrap; /* 超出换行 */ gap: 20px; /* 子元素间距 */ }justify-content控制主轴对齐方式align-items控制交叉轴对齐方式这两个属性是Flexbox最常用的。配合flex: 1之类的flex简写你可以很轻松地做出等分布局。用Grid做最外层的页面骨架.page { display: grid; grid-template-columns: 1fr 3fr; /* 左栏窄右栏宽 */ grid-template-rows: auto 1fr auto; /* 顶部自适应主体占满底部自适应 */ }1fr是Grid里的等分单位1fr 3fr表示左栏占1份右栏占3份。相比老的百分比布局这个写法直观太多。4.5 响应式设计一个页面适配手机和电脑现在打开一个网站电脑、平板、手机上的显示效果应该都正常。实现这种适配的方法叫响应式设计核心是媒体查询Media Query/* 默认样式先写电脑端的 */ /* 屏幕宽度小于768px时重写导航栏为纵向排列 */ media (max-width: 768px) { .nav-menu { flex-direction: column; } }常规的做法是移动端优先先写手机样式再用min-width从小到大适配或者反过来桌面优先用max-width从大到小适配。初学者用哪种都行关键是要记住断点不是随便定的常用的设备断点是576px手机竖屏、768px平板竖屏、992px平板横屏/小桌面、1200px桌面。另外别忘了viewport这个meta标签不写它手机浏览器会把页面当成电脑宽度来缩小渲染整个页面就会变得又小又挤前端适配直接崩塌。4.6 美化页面的常用细节字体font-family指定字体族中文字体最好加引号例如font-family: Microsoft YaHei, PingFang SC, sans-serif;。文本居中水平居中用text-align: center;段落首行缩进用text-indent: 2em;。块元素水平居中margin: 0 auto;让块级元素在父容器内水平居中前提是需要设宽度。圆角border-radius: 8px;给盒子加圆角设成50%就变成圆形。阴影box-shadow: 0 2px 8px rgba(0,0,0,0.1);给盒子加阴影立刻有立体感。渐变background: linear-gradient(135deg, #667eea, #764ba2);做渐变色背景很多页面的视觉逼格靠它撑起来。5. JavaScript交互让按钮可点、内容可变的底层逻辑5.1 JS在网页里到底扮演什么角色HTML和CSS做出来的页面是静态的JS负责让页面动起来。这个动指的不仅是动画效果更核心的是响应用户操作、操作数据、更新页面内容。比如你点一个按钮页面弹出弹窗你提交表单它检查你填的邮箱格式对不对你点击导航菜单页面平滑滚动到对应章节。这些全是JS的活儿。5.2 变量、数据类型与函数够用就行JS的变量声明现在应该用let和const而不是老教程里的var。区别简单说const声明后不可重新赋值let可以。默认能用const就用const需要重新赋值时再改let。const userName 张三; // 常量 let age 18; // 变量 age 19; // 可以重新赋值常见数据类型有字符串、数字、布尔值、数组、对象。数组用[]表示一组值对象用{}表示键值对集合const colors [red, green, blue]; // 数组 const user { name: 张三, age: 19 }; // 对象函数是一段可复用的代码块function greet(name) { return 你好 name; } console.log(greet(李四)); // 控制台输出你好李四5.3 DOM操作网页的执行器DOMDocument Object Model文档对象模型简单理解就是浏览器把HTML解析成一棵树JS可以通过这棵树增删改页面元素。这也是JS能动态操作页面的本质。最常用的几个方法// 选中元素 document.querySelector(.class-name); // 选中第一个匹配的元素 document.querySelectorAll(.card); // 选中所有匹配元素返回节点列表 document.getElementById(username); // 按id选中 // 修改内容 element.textContent 新的文字; // 修改文本 element.innerHTML p新的HTML/p; // 插入HTML // 修改样式 element.style.color red; element.style.display none; // 添加/移除类名 element.classList.add(active); element.classList.remove(active); element.classList.toggle(active);classList.toggle特别好用一个点击切换导航栏显示/隐藏的状态一行代码就搞定了。5.4 事件监听让页面听到用户的操作用户点按钮、输入文字、滚动页面都是事件。用addEventListener监听事件const btn document.querySelector(.btn); btn.addEventListener(click, function() { alert(按钮被点击了); });常用事件有click鼠标单击mouseenter/mouseleave鼠标移入/移出input输入框内容变化submit表单提交scroll滚动5.5 三个马上就能用的小交互示例返回顶部按钮button idbackTop返回顶部/buttonconst backTop document.getElementById(backTop); backTop.addEventListener(click, function() { window.scrollTo({ top: 0, behavior: smooth }); });导航栏滚动高亮window.addEventListener(scroll, function() { const nav document.querySelector(nav); if (window.scrollY 100) { nav.classList.add(shadow); } else { nav.classList.remove(shadow); } });表单简单校验const form document.querySelector(form); form.addEventListener(submit, function(event) { const email document.querySelector(#email).value; if (!email.includes()) { alert(请输入有效邮箱); event.preventDefault(); // 阻止表单提交 } });6. 综合实战不抄模板从零做一个完整网页6.1 先画草图动手写代码前最重要的一步做网页设计最忌讳上手就写代码。先拿纸画一个简易线框图想清楚你的页面有哪些区块每个区块放什么内容用什么布局。以个人学习作品展示页为例页面规划如下顶部导航Logo 三个导航链接首页/项目/联系我Banner区一个大的渐变背景 一句介绍语 一个按钮项目展示区用三张卡片展示自己做的三个小项目页脚版权信息这个结构对应到代码就是前面说的header、main、footer框架很模板化但又很实用。6.2 搭HTML结构先不管样式把内容放进去写HTML的时候我习惯先把内容裸写出来再逐步加class。这样可以避免在html和css之间反复横跳。header div classlogo我的学习笔记/div nav a href#home首页/a a href#projects项目/a a href#contact联系我/a /nav /header main section idhome classbanner h1你好我是正在学习网站开发的初学者/h1 p这个页面是我综合运用 HTML、CSS、JS 制作的响应式页面。/p a href#projects classbtn查看我的项目/a /section section idprojects classproject-list h2我的项目/h2 div classcards article classcard img srcimages/project1.jpg alt项目一 h3项目一个人主页/h3 p用HTML和CSS制作的一个简单的个人主页包含头像、简介和社交链接。/p /article article classcard img srcimages/project2.jpg alt项目二 h3项目二文章列表页/h3 p练习Flexbox布局和语义化标签写的一个新闻资讯列表页。/p /article article classcard img srcimages/project3.jpg alt项目三 h3项目三待办清单/h3 p用JavaScript实现了一个简单的待办事项添加和删除功能。/p /article /div /section /main footer p© 2025 我的学习笔记/p /footer这里注意section用id标明区域目的是让导航链接能跳转到对应区块。6.3 写CSS把线框图变成真实页面先重置默认样式再从上往下依次处理每个区块。核心代码如下* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Microsoft YaHei, PingFang SC, sans-serif; line-height: 1.6; color: #333; } header { display: flex; justify-content: space-between; align-items: center; padding: 16px 40px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.08); position: sticky; top: 0; z-index: 100; } nav { display: flex; gap: 24px; } nav a { text-decoration: none; color: #333; } .banner { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 100px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; text-align: center; } .banner h1 { font-size: 36px; margin-bottom: 12px; } .btn { display: inline-block; margin-top: 24px; padding: 12px 32px; background: #fff; color: #667eea; border-radius: 24px; text-decoration: none; font-weight: bold; } .project-list { max-width: 1200px; margin: 0 auto; padding: 60px 20px; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 32px; } .card { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .card img { width: 100%; height: 180px; object-fit: cover; } .card h3 { padding: 16px 20px 0; } .card p { padding: 8px 20px 20px; } footer { text-align: center; padding: 24px; background: #f5f5f5; }这里有几个关键点要额外说明position: sticky; top: 0;让导航栏在滚动时吸在顶部是很常见的布局手法。grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))是一行实现卡片自适应的神技当容器宽度不够时卡片自动换行每张卡片最小280px剩下来空间平均分配。这个写法强烈建议抄进自己的代码库。object-fit: cover让图片在不改变宽高比的情况下填满卡片的图片区域避免图片被拉伸变形。6.4 加JS交互从能看到能用给页面加几个实际的交互效果导航栏滚动阴影——用户往下滚动后导航条多一点阴影视觉上有立体层次const header document.querySelector(header); window.addEventListener(scroll, function() { header.classList.toggle(scrolled, window.scrollY 50); });对应的CSSheader.scrolled { box-shadow: 0 4px 16px rgba(0,0,0,0.15); }移动端菜单展开——页面的导航菜单在手机上需要折叠。先加一个菜单按钮再用JS控制展开const menuBtn document.getElementById(menuBtn); const navMenu document.getElementById(navMenu); menuBtn.addEventListener(click, function() { navMenu.classList.toggle(show); });对应的响应式CSS#menuBtn { display: none; } media (max-width: 768px) { #menuBtn { display: block; background: none; border: none; font-size: 24px; cursor: pointer; } nav { display: none; flex-direction: column; width: 100%; } nav.show { display: flex; } header { flex-wrap: wrap; } }思路是桌面端隐藏按钮、显示导航移动端显示按钮、隐藏导航点击按钮后加show类把导航展开。平滑滚动——点击导航链接时页面平滑滚动到对应区域。CSS可以直接搞定html { scroll-behavior: smooth; }一行代码不需要JS。6.5 测试与发布本地能开不算完页面完成后至少要在手机和电脑两种屏幕上都看一眼。手机上没实名工具的话可以直接用浏览器的设备模拟功能F12打开后点击工具栏里的小手机图标检查移动端效果。确定没问题后如果你想把网站发布到公网就需要购买域名和服务器空间再通过FTP或运维面板把文件传上去。但对于现阶段的学习目的本地使用Live Server跑起来已经足够了。7. 新手排错看不见的坑与开发者工具的正确用法7.1 图片显示不出来图片是新手翻车重灾区。排查顺序如下路径对不对images/logo.png是相对路径表示相对于当前html文件所在目录去找images文件夹。如果你把html放在css同级的目录但路径写错了层级浏览器就找不到。文件名和后缀图片格式对不对logo.png写成logo.PNG在Windows本地可能没事部署到Linux服务器上一定挂。图片本身是否损坏用浏览器直接打开图片URL看能不能显示。路径问题建议在浏览器F12的Console面板看报错信息或者在Elements面板找到img标签看它的src值有没有生效。7.2 样式不生效优先级问题是频率最高的坑。前面说过!important 行内样式 ID 类 标签。你不应该为这个去堆!important正确的做法是把优先级写对并检查选择器是否真的选中了目标元素。F12的Elements面板是排错神器选中元素右侧Styles会显示所有匹配的样式规则哪些被覆盖了会划线。如果样式列表里根本没出现你写的规则那就是选择器写错了或者样式文件没引入。7.3 布局乱、出现横向滚动条页面出现横向滚动条最常见的原因是某个子元素的宽度超过了屏幕宽度。排查技巧是在Elements面板里从body开始点击任意元素看右侧有没有一个元素的实际渲染宽度明显超出父容器。常见元凶有宽度写死width: 1000px把1000px改成max-width: 1000px让它在窄屏时自动收缩。没有用box-sizing: border-box导致padding让盒子撑破容器。图片宽度超出容器给图片统一加max-width: 100%;可以避免。7.4 JS完全没反应JS不执行先分两种情况脚本根本没加载还是脚本执行了但逻辑写错。先用console.log()在你的JS代码开头打一条日志刷新页面打开F12的Console面板看有没有输出。如果没有说明脚本文件没引入或路径有问题。如果有输出但点击没反应那就是事件或选择器的问题选择器选不到元素因为脚本执行顺序在HTML渲染之前。解决方法是把script标签放到/body之前或者用DOMContentLoaded事件包一层document.addEventListener(DOMContentLoaded, function() { // 在这里写代码 });事件没绑定上检查你选择器有没有拼错类名、id名或者元素是不是在动态数据里才出现的。7.5 养成F12排错的肌肉记忆最后说一个观念排错不是看代码猜原因而是用工具看实际状态。代码里的逻辑问题光盯着看往往很难发现但浏览器已经把页面渲染后的状态、样式继承关系、报错信息全摆在那里了。每次遇到问题我自己的排查顺序永远是固定的先看Console有没有报错信息。再看Elements里目标元素的HTML和CSS实际状态。最后根据状态反推代码哪里出了问题。这个顺序能帮你省掉大量盲改代码的时间。改一次代码刷新看一眼页面确认有效后再改下一处比一次性大改然后对着一堆新问题发呆要高效得多。说到底网页开发没有多神秘无非是用HTML组织内容、用CSS控制外观、用JS处理交互。掌握这三样基础上再学一点响应式设计和调试工具的使用就已经具备独立完成一个像样网页的能力了。剩下的就是多做练习把文档里的知识变成手上的手感。
