HTML第二次作业全攻略：从骨架搭建到在线部署的完整指南-代码聚汇网

HTML第二次作业全攻略：从骨架搭建到在线部署的完整指南

初夏之菡·2026-09-01·阅读 24 GEO检测（免费）

HTML网页制作HTML简单网页代码HTML模板

|难度：普通|阅读约 28 分钟

1. 先搞清楚作业背后的真实逻辑：HTML到底在学什么

说实话，"第二次作业html"这个标题一出来，很多过来人都会心一笑。第一次作业大概率是写一个"我的第一个网页"，当时你可能花了一个下午研究怎么让文字变红、怎么插一张图片，然后交上去。到了第二次作业，老师的要求往往不会再停留在"能显示内容"这个层面，而是会开始和你谈语义结构、谈页面布局、谈代码规范。换句话说，第二次作业是一个分水岭：从"我把代码敲出来了"变成"我写出来的东西像样了"。

在开始动手之前，先想明白一件事：HTML、CSS、JavaScript这三样东西，在网页里各自扮演什么角色。用个简单的类比来说，HTML是一套房子的承重墙和房间结构，决定了哪里是客厅、哪里是卧室、哪里是卫生间；CSS是装修，决定墙壁刷什么颜色、地板铺木纹还是瓷砖、家具摆哪里；JavaScript则是水电和智能家居，让灯能开关、门铃会响、空调能自动调温。很多同学做第二次作业时手忙脚乱，根源就在于想用HTML干CSS的活，比如用一堆<font>标签改颜色、用<table>布局，这在技术上能跑通，但从作业验收角度看，恰恰暴露了你没搞清楚这三者的分工。

从热搜词里也能看出，大家搜索"html网页制作""html简单网页代码""html css js网页设计"的热情很高。这说明第二次作业的典型需求，已经从单页展示变成了"一个结构完整、有基本样式、最好带点交互的小型网页"。所以这篇内容不会只教你背标签，而是会从作业交付的完整链路出发：从骨架搭建到样式美化，从本地预览到上线部署，把那些容易被扣分、容易踩坑的地方一条条讲透。

这篇文章适合谁？正在赶第二次HTML作业的同学、想从"会抄代码"过渡到"能自己组织页面"的自学者，以及被"文件无法预览"逼到崩溃的新手。我尽量不写教科书式的术语堆砌，所有内容都以"你能直接复现、直接交作业"为标准。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 从doctype到meta：完整的网页骨架拆解

第二份作业如果还拿第一份作业那种"想到哪写到哪"的方式去写，大概率会在结构上丢分。先看一个最标准的骨架长什么样，这也是热搜里反复出现的那段代码模板的完整版：

html复制<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="这里是页面描述">
  <meta name="keywords" content="HTML, 作业, 网页制作">
  <title>我的第二次作业</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>页面主标题</h1>
    <nav>
      <ul>
        <li><a href="#section1">第一部分</a></li>
        <li><a href="#section2">第二部分</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section id="section1">
      <h2>第一部分</h2>
      <p>这里写内容。</p>
    </section>
    <section id="section2">
      <h2>第二部分</h2>
      <p>这里写内容。</p>
    </section>
  </main>

  <footer>
    <p>版权信息</p>
  </footer>
</body>
</html>

很多同学看这段代码会觉得"我写作业时也写了这些标签啊"，但区别往往在细节里。先说 <!DOCTYPE html>，这一行不是可有可无的。它告诉浏览器"请按现代标准模式来渲染这个页面"，没有它时浏览器会进入一种叫"怪异模式"的状态，盒模型的计算方式、margin和padding的默认值都可能和你预期的不一样。你在作业里设置了一个宽度100%的div，预览时却莫名其妙多出滚动条，很多时候根子就在这。

接着看 <html lang="zh-cn">，这个 lang 属性看起来不起眼，但老师在检查代码规范时经常看它。它的作用是声明页面内容的主要语言，帮助屏幕阅读器正确发音，也帮助搜索引擎更好识别内容语言。中文页面写 zh-cn，英文页面写 en，不要随手写成 en 就完事。热搜里那些 "<html lang="zh-cn">" 的片段能一直出现在检索结果里，恰恰说明基础HTML模板是每个人的刚需。

<head> 里的 <meta charset="utf-8"> 是另一个高频扣分点。如果你不写这行，或者写的是 gb2312 但内容里有特殊符号，浏览器就可能把中文渲染成乱码。判断标准很简单：页面里的中文变成"锟斤拷"或者一堆菱形问号，先检查是不是这里出了问题。

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 这一行很多人会忽略，但它直接决定页面在手机上打开时的表现。没有这行时，手机浏览器会按照桌面宽度去渲染，然后整体缩小，用户双击才能看清文字，体验非常差。作业要求里如果写了"页面能自适应"，这行就是基础的基础。

然后说语义化标签。第二次作业和第一次作业最大的区别，就是你在用 <div> 一把梭，还是使用了 <header>、<nav>、<main>、<section>、<article>、<footer> 这些有意义的标签。语义化的价值不只是让代码"看起来专业"，它是在告诉浏览器和搜索引擎：这块区域是页头、这块是导航、这块是主要内容。Chrome的开发者工具里有一个"无障碍树"面板，打开后能直观看到标题层级被识别成了什么结构。如果一个页面全是 <div>，浏览器根本分不清哪里是重点内容，在线评测或老师用自动化工具检查页面结构时，分数自然就下来了。

另外，<h1> 到 <h6> 的层级也不要乱用。一个页面最好只有一个 <h1>，它通常放主标题；下面用 <h2> 分章节；如果 <h2> 下面还要细分，再用 <h3>。有些同学为了让字号更大，把副标题直接写成 <h4>，这在语义上是错的。想调字号用CSS，不要本末倒置。

写代码时还要养成一个习惯：<img> 标签永远带上 alt 属性，<a> 标签如果是外部链接，加上 rel="noopener noreferrer"。前者在图片加载失败时能显示替代文字，后者能避免新打开的页面通过 window.opener 反向控制你的页面。这些细节单独看都不起眼，但叠在一起就是"作业被夸规范"和"作业被挑刺"的区别。

3. 文件无法预览？排查链路的完整复盘

做作业时最崩溃的场景不是代码写得慢，而是代码写完了、文件保存了，双击打开却看到一片空白、一个404、或者"文件无法预览"的提示。这个问题的出现频率之高，从热搜词"html文件无法预览"常年在榜就能看出来。我直接按排查链路一步步讲，每一步都是真实操作中会遇到的。

第一步：确认文件保存路径和文件名。 新建一个文本文档，把内容粘贴进去，然后重命名为 index.html，此时会有一个确认弹窗提醒"修改文件扩展名可能导致文件不可用"，要点确认。很多新手栽在这一步：文件名看起来是 index.html，但文件的实际扩展名仍然是 .txt，因为系统默认隐藏了已知文件类型的扩展名。解决方法是在Windows的资源管理器里勾选"文件扩展名"显示，在macOS的Finder设置里勾选"显示所有文件扩展名"。检查文件是否真的变成了HTML文件，看图标是不是浏览器图标或者类似网页文件的图标。

第二步：用右键选择打开方式。 双击文件时，系统可能默认用文本编辑器（比如记事本、VS Code）打开，你会看到一堆代码而不是渲染好的页面。这不是文件坏了，只是关联程序不对。正确做法是右键文件 -> "打开方式" -> 选择Chrome、Edge、Firefox或Safari。如果列表里没有浏览器，点击"选择其他应用"，再到浏览器安装目录里找。这一步能解决80%的"无法预览"问题。

第三步：检查编码格式。 文件内容能打开，但中文全部变成乱码，或者页面是空白，那问题大概率出在编码上。用VS Code或记事本重新打开HTML文件，查看右下角或另存为对话框里的编码格式，确保是UTF-8。记事本保存时有一个"编码"下拉框，默认是ANSI，需要手动改成UTF-8再保存。这里有一个容易忽略的细节：改完编码后，<head> 里的 <meta charset="utf-8"> 要和文件编码保持一致。如果文件保存成GBK但声明是UTF-8，中文照样乱码。

第四步：检查文件内部结构。 如果以上都没问题，用浏览器打开后依然是空白，按F12打开开发者工具，看Console（控制台）和Network（网络）两个面板。Console里如果有红色报错，定位到具体行号检查是不是标签没闭合、属性少了引号、CSS文件路径错误、JS文件404。新手最常见的一个低级错误是 <style> 和 <script> 标签的位置写反了，或者 <link> 标签的 href 写成了本地绝对路径，比如 C:\Users\...\style.css。这种路径在自己的电脑上能打开，但一旦把文件拷给老师或上传到服务器，就必然404。正确做法是使用相对路径，只要HTML和CSS文件在同一目录下，直接写 <link rel="stylesheet" href="style.css"> 就行。

第五步：确认图片和资源文件路径。 页面能打开但图片裂了、CSS样式没了，基本都是资源路径的问题。用相对路径，并注意大小写和文件名是否完全一致，photo.jpg 和 Photo.jpg 在某些服务器上是两个不同的文件。如果是作业要求里给了素材文件夹，检查你的HTML文件是否放在正确的位置，比如要求是 images/ 目录下的图片，你用了 ../images/，层级错了就会全裂掉。

说到"nginx配置访问静态html"，看起来是服务器端的操作，但思路和本地是一致的。nginx默认会在 /usr/share/nginx/html 或你自己指定的 root 目录下找 index.html。把做好的文件丢进去，启动nginx后访问 http://你的服务器IP/，如果看到的是目录列表而不是你的页面，通常是因为没有 index.html 这个默认入口，或者nginx的 location 配置里没有 index index.html;。用nginx部署静态页面的最大好处是，别人可以通过一个稳定的URL访问你的作业，而不是靠微信传文件然后出各种编码问题。

4. 从一片白到配色协调：CSS美化的三条路线

HTML骨架搭好之后，页面还是白底黑字的素颜状态，要让它看起来像一份认真做的作业，必须引入CSS。这里有三条路线，我可以直接摊开来说各自的适用场景。

路线一：内联样式，写在标签的 style 属性里。 比如 <p style="color: red;">文字</p>。优点是写起来快，单看一处代码就知道这个标签长什么样；缺点是多个标签需要同样样式时反复复制，改一个颜色要改好几处。作业里如果大量使用内联样式，老师在代码审查环节很可能会说"这是错误示范"。所以我建议内联样式仅用于快速调试，比如临时把某个元素背景改成红色，看它的实际尺寸范围，确认完再移除。

路线二：内部样式表，把 <style> 写在 <head> 里。 这种方式适合单页作业，所有样式集中在一个地方，方便统一修改。它是作业中最常用的方式，但页面内容多了之后样式会越来越长，后期维护会有点吃力。

路线三：外部样式表，通过 <link rel="stylesheet" href="style.css"> 引入一个独立的CSS文件。 这是实际开发中的标准做法，也是我建议第二次作业就该开始尝试的方式。它的优势在于一个CSS文件可以控制多个HTML页面，改一处全局生效。作业如果包含多个页面（比如一个首页、一个二级页），用外部样式表是最合适的。在 style.css 里，我会建议开头先清一遍默认样式：

css复制* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  color: #333;
  background-color: #f5f5f5;
  line-height: 1.6;
}

这段代码的 box-sizing: border-box 值得专门解释。默认情况下，一个元素的宽度是内容宽度，padding 和 border 会往外扩展，这就导致你给一个div设置了 width: 50%，加完左右各10px的padding后，实际占的宽度变成50%+20px，在弹性布局里很容易直接把一行挤成两行。border-box 则让 padding 和 border 在已声明的宽度内部计算，设置50%就是真的50%。我见过太多作业因为忘了这一行，布局在缩放窗口时各种错乱。

CSS里还有个新手容易迷惑的点：选择器的优先级。#header 是ID选择器，一个页面里只能出现一次；.menu-item 是类选择器，可以重复使用；div 是标签选择器，命中所有包含这个标签的元素。优先级从高到低是：内联样式 > ID选择器 > 类选择器 > 标签选择器。当你的 .menu-item 设置了红色，但内联样式写了 color: blue，最终显示的是蓝色。这个规则在实际调样式时非常实用，因为很多时候你改了CSS文件但不生效，大概率就是优先级被更高的选择器压住了。

字体和配色方面，如果老师没有指定，我建议不要用浏览器默认外观。常见做法是给 body 设置一个统一字体栈，中文用 "Microsoft YaHei" 或 "PingFang SC"，英文用 sans-serif 作为兜底。配色方面，不建议大红大绿直接怼上去，可以选一个主色调，比如深蓝 #2c3e50，配一个辅助色 #3498db，背景用浅灰 #f8f9fa，文字用深灰 #333。整套下来页面会显得干净很多，不用花太多心思就有基本的设计感。

5. 交互不是加分项而是基本功：几个能直接用的JS片段

HTML是骨架，CSS是外观，JavaScript则是让页面"动起来"的手段。但第二次作业不需要你去啃完整的JS语法，先把几个高频需求的代码片段拿下来用就行。

5.1 一键返回顶部

这个功能在热搜词里单独出现，说明很多人确实需要。一个常见的实现方案是：在页面右下角放一个按钮，点击后平滑滚动回顶部。代码如下：

html复制<button id="backToTop" style="position: fixed; bottom: 30px; right: 30px; display: none;">返回顶部</button>

<script>
  const backToTop = document.getElementById('backToTop');
  
  window.addEventListener('scroll', () => {
    if (window.scrollY > 300) {
      backToTop.style.display = 'block';
    } else {
      backToTop.style.display = 'none';
    }
  });
  
  backToTop.addEventListener('click', () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  });
</script>

window.scrollY 是页面当前滚动距离，大于300像素时显示按钮。window.scrollTo 的 behavior: 'smooth' 实现平滑滚动，不用自己写缓动算法。如果希望滚动速度更可控或者要做缓动效果，可以用 requestAnimationFrame 来自定义动画，每次都推进一小步，直到到达顶部。

这里提一个作业里常见的坑：如果把这个JS代码放在 <head> 里，浏览器解析到这一行时 body 还没加载出来，document.getElementById('backToTop') 会返回 null，然后报错。所以要么把 <script> 放到HTML末尾、</body> 之前，要么在代码外层包一个 document.addEventListener('DOMContentLoaded', function() { ... })。我建议从一开始就养成把脚本放在末尾的习惯，这也是很多教程里"为什么script要放底部"的经典解释。

5.2 表单的基本交互

如果作业里包含一个表单，比如留言板或联系我页面，那光是按下提交按钮页面就刷新到空白页，体验其实很粗糙。可以先拦截默认提交行为，然后做校验：

html复制<form id="myForm">
  <input type="text" id="name" placeholder="请输入姓名">
  <button type="submit">提交</button>
</form>

<script>
  document.getElementById('myForm').addEventListener('submit', (event) => {
    const nameInput = document.getElementById('name');
    if (nameInput.value.trim() === '') {
      event.preventDefault();
      alert('姓名不能为空');
      nameInput.focus();
    } else {
      // 这里可以继续做提交逻辑
      alert('提交成功' + nameInput.value.trim());
    }
  });
</script>

event.preventDefault() 的作用是阻止表单的默认提交行为，也就是阻止页面刷新。trim() 去除首尾空格，防止用户只输入空格就提交。这个逻辑虽然简单，但它体现了一个页面从"能用"到"好用"的差别。

5.3 轮播图和图片切换

页面里放几张图片时，最朴素的轮播实现是JavaScript切换 src 属性，或者切换显示隐藏的 display。基础思路是维护一个当前索引，点击左右箭头时对索引加一或减一，然后通过CSS样式控制可见性。如果是纯展示，也可以直接用CSS的 animation 配合 opacity 做淡入淡出，省去JS代码。但要注意：CSS自动播放的轮播图，用户没法手动控制暂停或切换，交互体验会打折扣。

5.4 一个容易被忽略的交互：菜单高亮

导航栏的当前页面或当前栏目高亮，也是作业里经常出现的需求。用JS给当前页面对应的菜单项添加一个 active 类，配合CSS里的 .active { color: #3498db; font-weight: bold; } 就能实现。也可以用纯CSS的 :target 伪类，但需要把锚点链接写成 #section1 的形式，点击后URL会带锚点，浏览器会自动找到对应区块。

JS不必写得太复杂，先能跑通这三个场景就够了。核心是理解 事件监听、DOM操作 和 样式切换 这三个基本动作，第二次作业能独立写出这三个片段，就已经比大部分同学领先了。

6. 想拿高分？爱心代码和动效的合理运用

热搜词里"html爱心代码""html爱心烟花特效代码"这类词条的搜索量一直不低。做一个会动的爱心确实很吸睛，尤其适合个人网站、表白页面或课程设计展示。但这里我想先泼一盆冷水：不要把整页都堆特效，更不能让动效影响页面内容的可读性。老师的验收标准是"内容完整、结构清晰、视觉协调"，动效是锦上添花，不是主体。

6.1 爱心代码的原理

网上流传的爱心代码主要有两类：一类是纯CSS的，用 transform 和圆角旋转做一个爱心形状；另一类是基于Canvas和JavaScript粒子系统的动态爱心，也就是刷屏最多的那种。

CSS爱心的基础逻辑是：先把一个正方形旋转45度，再在它的上方和左侧分别放一个圆形，最后组合成一个爱心形状。用CSS ::before 和 ::after 伪元素能实现：

css复制.heart {
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  transform: rotate(-45deg);
  position: relative;
}

.heart::before,
.heart::after {
  content: '';
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  border-radius: 50%;
  position: absolute;
}

.heart::before {
  top: -50px;
  left: 0;
}

.heart::after {
  top: 0;
  left: 50px;
}

这段代码里，主元素旋转后是一个菱形，两个圆形分别放在上边和右边，圆形的圆心正好在菱形两条边的中点，相加之后就是肉眼可见的爱心。理解这个几何关系，比直接抄代码更有价值——以后遇到类似的组合图形需求，你就能自己拆解了。

6.2 Canvas粒子爱心

如果想把爱心做成动态粒子效果，核心是使用Canvas API在 requestAnimationFrame 循环里不断重绘。思路是先把爱心的轮廓点计算出来，然后让粒子沿着这些点运动。一个简易的爱心参数方程是：

javascript复制for (let t = 0; t < 2 * Math.PI; t += 0.01) {
  x = 16 * Math.pow(Math.sin(t), 3);
  y = 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t);
}

这个方程根据输入的角度 t 计算出 x 和 y，把所有点连起来就是一个爱心轮廓。粒子系统在这个轮廓的基础上增加随机偏移和缓动，再用 ctx.fillRect 或 ctx.arc 画出一个个小点，就产生了"无数粒子汇聚成爱心"的视觉效果。帧率控制在60fps，每帧都 clearRect 一下再重新绘制，就能形成动画。

6.3 这里我必须提醒一个性能问题

Canvas动画在作业演示时看起来很酷，但如果页面上同时跑着好几个特效，或者你的电脑性能一般，页面可能会卡到掉帧。建议在动画启动前判断一下 window.innerWidth，在移动设备上降低粒子数量。另外，给 requestAnimationFrame 的循环加一个退出条件，页面离开可视区域时停止动画，能用很短的代码增加不必要的负担。

6.4 还有哪些性价比高的动效

如果不想写复杂的粒子系统，下面几个小效果花费时间少，效果也不错：

鼠标悬停时卡片上浮：用 transition 和 transform: translateY(-5px)，加一点阴影。
页面加载时的淡入动画：给关键元素加 animation: fadeIn 1s ease;。
背景渐变动画：background: linear-gradient 配合 background-size 和动画，让背景缓慢流动。
礼花或字符雨效果：用Canvas生成随机小圆点或字符下落，这也是很多课程设计里"网页特效"的常见选题。

做这些之前先确认内容是否完整，结构是否清晰。一个内容空洞但拼命上特效的页面，老师看完后的评价往往是"华而不实"；一个结构完整、有基本交互、再点缀一点动效的页面，才是高分作业的正常形态。

7. 作业写完后，怎么让别人打开你的网页

代码写完只是第一步，怎么把页面交付出去，同样有讲究。我不建议直接把 .html 文件丢到微信或邮箱里，因为接收方打开时，很可能遇到路径失效、编码乱码、样式丢失等问题。更可靠的方案是部署到线上环境，给别人一个可以直接访问的URL。

方案一：使用在线代码转换链接的工具。 搜索引擎里出现"html2.link-免费html转链接""data:text/html"这类关键词，说明需求确实存在。把HTML代码粘贴到一个在线工具中，它会生成一个短链接，任何设备打开浏览器访问这个链接，就能看到渲染后的页面。这类工具适合临时分享，但注意如果代码量很大、包含外部CSS和JS文件，就不太适合了，而且多数免费工具的稳定性一般，不适合作为正式作业提交的长期入口。

方案二：把静态页面部署到服务器上。 如果你有一台云服务器，最简单的方式就是把 .html 文件放到nginx的网站根目录里。以Ubuntu为例，基本的操作是：

bash复制sudo apt update
sudo apt install nginx -y
sudo cp index.html /var/www/html/
sudo cp -r assets /var/www/html/
sudo systemctl restart nginx

然后访问 http://服务器IP/index.html 就能看到页面。这里有几个常见问题值得提前注意。

/var/www/html 目录下如果没有 index.html，nginx会返回403或列出目录文件。所以确认你的默认入口文件名是 index.html，在nginx配置文件的 server 块里加上 index index.html;。如果页面有CSS、JS、图片等资源文件，建议统一放在一个子目录里，HTML里用相对路径引用，这样拷贝整个目录就能完整部署。

还有权限问题。如果你用 cp 把文件放进去后发现页面能打开但样式加载不出来，先别怀疑代码，去检查一下CSS文件是否有读取权限：chmod 644 /var/www/html/style.css。nginx运行用户通常是 www-data，如果文件权限是600，别人就没法读取。

方案三：使用GitHub Pages或类似平台。 注册GitHub账号，创建一个仓库，把HTML文件推上去，然后在仓库的Settings里找到Pages，选择部署分支，等一两分钟就能得到一个 https://用户名.github.io/仓库名/ 的地址。这个方案对作业场景特别友好：免费、稳定、支持自定义域名，而且还可以展示你用了Git做版本管理。如果不想用GitHub，Gitee也提供类似功能，国内访问速度会更快。

方案四：本地开一个简易HTTP服务。 如果只是想在班级内演示、不想公网部署，在项目目录里执行 python3 -m http.server 8080，然后让同学访问 http://你的局域网IP:8080，也能共享页面。注意这种方式只能在同一个局域网内访问，而且需要暂时关闭防火墙或放行对应端口。优势是不需要额外安装任何软件，Python是很多系统自带的。

不管用哪种方案，部署前都做一次完整性检查：打开页面后按F12看Console有没有报错，逐一点击所有链接确认不404，缩放窗口看布局是否错乱，最后在手机上打开确认响应式表现。这四步全过了，再提交作业，基本不会因为"打不开"被扣分了。

8. 从第二次作业往后走：我的一些习惯建议

如果你已经完成了一份结构完整、样式协调、有基本交互、还能在线访问的HTML页面，那第二次作业的目标其实是超额达成了。但既然已经掌握了从零搭建一个静态网页的能力，我还想顺手分享三个实战中的小习惯，它们会在后面的课程和真实项目里持续给你回报。

第一个习惯是：坚持写注释。写HTML时在 <header>、<main>、<footer> 前加一句注释说明用途，写CSS时在每个区块前标注对应模块，写JS时在函数上方写清参数和返回值。这不是为了增加代码量，而是训练自己组织和梳理逻辑。代码写完一周后再打开，注释就是你的"第二脑子"；老师看作业时也能快速理解你的设计意图，印象分会更好。

第二个习惯是：同名文件保持目录结构一致。建立一套自己的文件组织方式，比如 css/、js/、images/ 三个子目录，HTML文件放在根目录。后续做多页面项目时，这套结构会让页面之间互相引用资源非常顺手。我见过很多同学把所有文件平铺在桌面一个文件夹里，文件多了以后连自己都分不清哪个是哪个，这个习惯越早改掉越省事。

第三个习惯是：用浏览器开发者工具进行调试，而不是靠猜。按F12进入开发者工具，Elements面板能实时调整样式并即时预览效果，Console能看到JS报错，Sources面板可以打断点逐步执行。花一个下午熟悉这三个面板，效率能提升好几倍。调试时多利用"删除标签对比效果"的方法：先把可疑元素删掉看页面变化，找到问题后再撤销，比盯着代码一行行猜更快。