企业官网建设流程全解析

很多人学 HTML 卡在第一步，不是卡在标签记不住，而是卡在"我该用什么写代码"这个看起来最不像问题的问题上。我见过太多零基础的朋友，打开系统自带记事本敲了半小时，保存出来一个乱码文件，双击打开浏览器一片空白，然后就开始怀疑自己是不是不适合学前端。说句实在话，HTML 编辑器这个话题被大多数教程一笔带过，它却是新手体验里最容易出事故的一环。这篇内容就专门讲清楚：HTML 编辑器到底是什么、它替你做了哪些你根本没注意到的事、零基础该怎么选、装好之后怎么配置、以及在哪几个地方几乎所有人都会翻车。哪怕你之前完全没碰过代码，照着往下读也能一步步跑出第一个属于自己的页面。

1. HTML编辑器不是在"写代码"，它是在替你消除干扰

先把一个容易混淆的概念摆正：HTML 编辑器不是"能让 HTML 跑起来的东西"，HTML 本身是纯文本，任何能保存纯文本的工具都能写它，包括手机备忘录。编辑器真正提供的价值，是把你在写页面过程中会遇到的大量与内容无关的杂事挡在外面，让你只管把结构和内容敲对。理解这一点，你后面选工具、配插件、判断"这个功能我要不要装"就有了主心骨。

1.1 用记事本写页面的真实体验：三个小时内必踩的四个坑

我让人做过一个很朴素的实验：给一位完全没接触过网页的同学一台干净的电脑，只允许用系统自带记事本写一个带标题、段落和一张图片的页面。三个小时后，他卡在四个地方，一个都没绕过去。

第一个坑是文件后缀。Windows 默认把已知类型的扩展名藏起来，他保存的时候文件名写了index.html，实际生成的是index.html.txt，资源管理器里看着图标还行，双击之后浏览器打开的是纯文本。第二个坑是编码。记事本在某些系统版本下默认存成 ANSI（简体中文环境里接近 GBK），文件里写了中文，浏览器按 UTF-8 解码，直接变一片问号或者方块。第三个坑是缩进和换行。记事本不会自动缩进，嵌套三层div之后结构全糊成一片，标签少闭合一个，肉眼根本看不出来。第四个坑是预览。他得手动保存、切到浏览器、按刷新，改一个字符重复一遍这套动作，半小时后彻底失去耐心。

这四个坑没有一个是"HTML 知识"层面的问题，全是工具层面的摩擦。而摩擦累积到一定程度，人就会把"我不适合"这个结论归因到自己身上，其实只是拿错了工具。

1.2 编辑器替你干的六件苦力活，以及它们背后的机制

专业编辑器看起来花里胡哨，但剥开外壳，对零基础真正有用的就六件事。理解它们各自的原理，你在遇到"功能不生效"的时候才知道从哪里查。

语法高亮。编辑器在后台跑一个轻量词法分析器，把文件内容切成一个个 token，标签名、属性名、属性值、文本内容、注释分别染上不同颜色。它不改变文件内容，纯视觉层。好处是你一眼能看出"这段文字是不是不小心写进标签内部了"，这在调试结构错位时非常有用。

自动补全与标签闭合。输入<di弹出div，敲下>自动补上</div>。它依赖编辑器内置的 HTML 语言服务，本质是一份标签和属性的字典加上上下文判断。

自动缩进与格式化。按层级把嵌套关系用空格表达出来。HTML 结构塌陷是新手最常见的错误来源，格式化能一次性把层级还原，很多"少了个闭合标签"的问题在格式化后立刻现形。

内置预览与自动刷新。保存文件后浏览器自动重载，省掉手动切换和刷新的动作。这一条对学习效率的提升，比前三条加起来还大。

工程级的查找替换。在一个目录里全局搜索某个字符串，或者把某个标签批量替换掉。学到 CSS 和 JavaScript 之后，这个能力会变得越来越重要。

编码与换行符的统一管理。编辑器会明确告诉你当前文件是什么编码、用什么换行符，并且可以一键转换。这是解决乱码问题的根本入口。

把这六条对照一下记事本，你就明白为什么几乎所有正规教程第一步都是"先装个编辑器"。它不是讲究，是省命。

2. 先弄清楚你要用编辑器做什么，再决定装哪个

网上关于"哪个编辑器最好"的争论能吵十年，但对零基础的人来说这个问题本身问错了。正确的问法是：我接下来三个月要拿它干什么？答案不同，选择完全不同。我按见过的大量真实情况，把零基础学习者粗分成三类，你可以对号入座。

2.1 三类零基础学习者的真实诉求差异

第一类，纯粹想搞懂网页是怎么回事。可能只是想改一改自己小站点的模板，或者给孩子做个生日页面。这类人一年打开编辑器的次数可能不超过二十次，最需要的是"装完就能用、不用配置、不占地方"。对这类人，我一般建议选体积小、启动快、开箱即用的轻量编辑器，甚至在线编辑器都够。

第二类，打算认真往前端方向走。要学 HTML、CSS、JavaScript，后面还要接触框架、包管理、构建工具。这类人应该一开始就用生态完整的主流代码编辑器，因为往后走它会一直陪着，中途换工具的迁移成本比一开始多花两小时配置要高得多。

第三类，工作里偶尔要动 HTML。比如做运营要改落地页、做数据分析要调报表模板。这类人需求最特殊：不追求功能全，追求"打开快、看得懂、改完不破坏原有结构"。语法高亮和格式化对这类人价值最高。

三类人的共性是：都不需要一开始就上重型集成开发环境。这一点我在 2.3 会展开说。

2.2 常见编辑器能力对照与选型建议

下面这张表是我按实际使用体验整理的，只列对零基础有意义的维度，不列那些听起来高级但一年用不上一次的功能。

我给的建议很直接：如果你是第二类，装主流代码编辑器，然后严格按第 3 节的清单配置，不要自己去扩展市场里瞎逛。如果你是第一类或第三类，轻量编辑器加一个能实时预览的扩展，五分钟就能开工。

2.3 "一步到位装重型工具"这个想法为什么不靠谱

有一种很流行的建议是"反正以后要用，不如一开始就装最全的"。我不太认同，理由有三个，都是实际踩出来的。

其一，重型工具默认带着一整套工程假设。它会要求你建项目、选模板、配运行环境，而这些概念对一个连<h1>都还没写熟的人完全是噪音。新手最需要的是"改一行、存一下、看到变化"这个正反馈闭环，任何挡在这个闭环前面的步骤都是负资产。

其二，报错信息会误导判断。集成环境抛出的错误往往牵扯构建、依赖、路径映射，一个标签没闭合可能被包装成一条完全看不懂的长日志。新手会把时间花在搜索那条日志上，而不是回头看一眼自己漏了什么。

其三，配置成本是有沉没效应的。花两小时配好一套复杂环境，人会本能地觉得"我必须用它"，哪怕后来发现它不适合自己，也不愿意换。轻量起步、按需升级，心理负担小得多。

我的实际做法是：先用一个中等重量的编辑器把 HTML 和 CSS 学完，等到开始写多文件项目、需要调试脚本的时候，再往同一套工具里加能力。工具是长出来的，不是一次装好的。

3. 从安装到跑出第一个页面：一份可以照着抄的配置流程

这一节是纯操作。我按"装完到看见页面"的顺序写，每一步都说明为什么这么做，你可以边读边做。整个流程走完大概二十分钟，不需要任何前置知识。

3.1 安装后的第一件事：把界面和编码调顺

安装过程没什么好说的，一路下一步即可，安装路径建议保持默认，别放在带中文或空格的目录里，这是后面很多奇怪报错的源头之一。装完打开，先做四件事。

第一，把自动保存打开。设置里搜auto save，改成afterDelay模式。零基础阶段最容易犯的错就是改了代码忘了存，然后对着浏览器怀疑人生。自动保存能从根上消灭这个问题。

第二，把文件编码统一。搜encoding，默认编码设为UTF-8。这一条几乎决定了你后面会不会遇到中文乱码。顺便看一下换行符的设置，Windows 上默认是 CRLF，跟别人协作时可能要转成 LF，个人学习阶段保持默认就行，知道有这么回事即可。

第三，把字体调大、行高拉开。搜font size调到 15 到 16，line height调到 1.6 左右。看起来是审美问题，实际上影响的是你能否一眼看清嵌套层级。缩进层级全靠视觉表达，行距挤在一起，错位就很难发现。

第四，把自动换行打开。搜word wrap设为on，这样一行长文本不会横向溢出，不用来回拖滚动条。HTML 里的段落文本经常很长，这一条对阅读体验改善明显。

提示：不要在这一步去装任何主题和图标包。新手阶段界面越素越好，花哨的主题会让语法高亮的颜色失去区分度。

3.2 必装扩展清单，以及每个扩展到底解决什么问题

扩展市场里 HTML 相关的插件有上千个，真正零基础需要的只有四类。我按重要性排序，并说清楚每类解决什么问题，这样你以后可以自己判断要不要替换。

第一类，实时预览。它的作用是起一个本地静态服务，你保存文件后浏览器自动刷新。装完之后右键 HTML 文件，选"Open with Live Server"之类的菜单项，浏览器会打开一个http://127.0.0.1:5500/开头的地址。注意这个地址很关键，它意味着你的页面是"被服务起来"的，而不是file://直接打开的，这两者在加载资源、路径解析上行为不同，后面第 4 节会用到。

第二类，代码格式化。作用是把缩进和换行一键整理成规范格式。快捷键通常是Shift + Alt + F。它对排查结构错误的价值极高：格式化之后，所有嵌套关系都会以缩进形式呈现，少一个闭合标签会立刻显现出一大片错位。

第三类，HTML 语法检查。它会在你写错属性名、漏掉必需的标签时给出波浪线提示。要提醒一句：这类插件的规则有时比较严格，会对你没打算深究的写法报错，看到波浪线不必紧张，先确认是不是真错误。

第四类，路径补全。你输入src="./的时候它会把目录下的文件列出来给你选。这个功能看起来小，实际能省掉大量拼错文件名的麻烦，尤其是图片多的时候。

装完这四类就停手。不要去装主题、不要去装各种花哨的动画插件，装得越多，互相冲突的概率越高，第 4.3 节会讲一个真实的冲突案例。

3.3 建目录、写第一个 HTML 文件、跑起来

目录结构建议从一开始就规范，哪怕只有三个文件。在你习惯放代码的位置建一个文件夹，名字用纯英文、不带空格，比如html-learn。在里面先建三个东西：

html-learn/ ├── index.html ├── images/ └── css/

images用来放图片，css用来放样式表。现在css是空的，但先建好，因为后面只要你开始学样式，就一定会用到，临时再建容易把路径搞乱。

index.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>你好，HTML</h1> <p>这是我第一次用编辑器写出来的页面。</p> <img src="images/demo.jpg" alt="示例图片"> </body> </html>

逐行说一下为什么这么写。第一行<!DOCTYPE html>是告诉浏览器用标准模式解析，不写会进入怪异模式，某些布局行为会莫名其妙不一样。<html lang="zh-CN">声明语言，影响的是浏览器判断是否弹出翻译提示、以及屏幕阅读器怎么读。<meta charset="UTF-8">必须出现在<head>里尽量靠前的位置，它告诉浏览器用什么编码解析这个文件，这条和文件本身的实际编码必须一致，不一致就是乱码，第 4.1 节专门讲。viewport那行是让移动端按设备宽度渲染，不写的话手机上页面会缩成很小一团。alt属性是图片加载失败时的替代文字，也是无障碍访问的基础，从一开始就养成写的习惯。

3.4 三种预览方式的适用场景与区别

页面写完了，有三种方式看效果，很多人不知道它们之间的差别，结果在后面遇到莫名其妙的路径问题。

第一种是直接双击文件，地址栏是file:///...开头。这种方式最快，但它有一个关键限制：浏览器出于安全策略，对file://协议下的某些资源加载和脚本行为有限制。你现在只写静态 HTML 和图片，看不出差别，但一旦开始加载字体文件、发起请求，就会撞墙。

第二种是用实时预览扩展起来的本地服务，地址是http://127.0.0.1:5500/之类。这种方式行为最接近真实的网站环境，几乎所有后续问题都能在这里复现，也方便排查。我建议你从一开始就养成用这种方式预览的习惯，别养成双击文件的依赖。

第三种是拖拽文件到浏览器窗口，效果和第一种一样，只是操作更慢，没有实际优势，知道就行。

三种方式对比记一句：学习阶段用第二种，快速查看用第一种，永远别用第三种。

4. 编辑器里最坑人的四个问题，以及完整排查链路

这一节是我最想写的部分。前面三节都是"顺利情况"，而真实的零基础学习过程，八成时间花在这四个坑上。我把每个坑的排查链路完整写出来，你遇到问题时可以照着一步步走，而不是靠猜。

4.1 中文乱码：编码、BOM 与 meta 声明三者的关系

乱码的本质只有一个：保存文件时用的编码，和浏览器读取时用的编码不一致。这句话听起来简单，但涉及三个环节，任何一个出问题都会乱。

环节一，文件实际保存的编码。编辑器状态栏右下角一般会显示当前编码，比如UTF-8或GBK。如果它显示的不是 UTF-8，中文就悬了。

环节二，文件里有没有 BOM。BOM 是文件开头一个不可见的字节标记，某些工具在保存 UTF-8 时会自动加上。它会导致页面顶部出现一条空白，或者在拼接文件时出现诡异字符。排查方式是看编辑器状态栏是否写着UTF-8 with BOM，如果是，点一下，选"以 UTF-8 保存"把它去掉。

环节三，HTML 里的meta charset声明。它告诉浏览器按什么编码解读。如果文件实际是 UTF-8，声明写的也是 UTF-8，一致，正常。如果文件实际是 GBK，声明写 UTF-8，浏览器就会按 UTF-8 去解 GBK 的字节，结果是满屏问号。

完整的排查顺序是这样的：先看编辑器状态栏的编码，不对就转成 UTF-8；再看有没有 BOM，有就去掉；最后确认<meta charset="UTF-8">在<head>里且拼写正确（注意是charset不是charst，这个拼错极其常见，拼错了浏览器会忽略整条声明）。三步走完还乱码，那基本可以确定是浏览器缓存了旧版本，硬刷新一次（Ctrl + F5）再试。

注意：如果你是从别处复制代码过来，复制的内容本身可能带着不可见字符。这种情况下的乱码不是编码问题，是字符问题，最省事的办法是把可疑部分删掉重敲一遍。

4.2 双击打开是记事本 / 图标是白纸：文件扩展名被藏起来了

这是零基础阶段出现频率最高、也最让人抓狂的问题。现象是：文件在文件夹里看着叫index.html，但图标是一张白纸，双击打开的是记事本而不是浏览器。

原因就是 1.1 提到的：系统的资源管理器默认隐藏已知类型的扩展名。你新建文件时输入index.html，实际得到的是index.html.txt。显示的名字把.txt藏了，看起来一切正常。

解决办法有两步。第一步，在资源管理器的查看选项里，勾上"文件扩展名"，让后缀显形。这一步做完，你会发现文件名后面多出来一个.txt，真相大白。第二步，重命名，把.txt删掉。系统会弹一个"改变扩展名可能导致文件不可用"的确认框，点确定。

改完之后图标会变，双击就能用浏览器打开了。这个问题我建议你一次性把"显示扩展名"这个开关打开并永久保留，它会帮你避开后面无数同类问题，包括.css存成.css.txt、.js存成.js.txt。

还有一个变体：文件后缀对了，但双击还是用编辑器打开。这是因为系统把.html的默认打开方式关联到了编辑器。右键文件，选"打开方式"，指定浏览器并勾选"始终使用此应用"。改一次就够。

4.3 图片和样式引不进来：相对路径的书写规则

页面能打开，但图片是个破图标，或者样式完全没生效。九成情况是路径写错了。路径这件事的规则其实很少，但新手特别容易混。

先记住三个符号：./表示当前文件所在目录，../表示上一级目录，/开头表示网站根目录。学习阶段只用到前两个。

以 3.3 的目录结构为例，index.html和images目录是并列的，所以引用图片要写images/demo.jpg，或者更明确地写./images/demo.jpg，两者等价。如果写成/images/demo.jpg，浏览器会去找网站根目录下的images，而你用file://打开时根目录就是盘符根，找不到，就破图了。这是第 3.4 节说的"别用双击打开"的另一个原因。

最容易出错的是文件名大小写。Demo.jpg和demo.jpg在 Windows 上不敏感，看起来一样，但一旦你把页面放到区分大小写的服务器上就全挂。建议从一开始文件名全小写，单词之间用短横线连接，不要用中文、不要用空格。中文文件名在某些环境下会变成一串百分号编码，排查起来极其痛苦。

排查顺序：第一步，在资源管理器里确认文件真实存在，且名字一字不差；第二步，确认路径是从 HTML 文件所在位置出发的相对关系；第三步，在浏览器开发者工具的 Network 面板里看请求的完整 URL，它会明确告诉你浏览器到底在找哪个地址，对着这个地址去核对，比对着代码猜快十倍。

4.4 改了代码浏览器没反应：缓存、端口与自动刷新

最后这个坑很隐蔽。你明明保存了，浏览器就是不更新。可能的原因有三个层次。

第一个层次，实时预览扩展没在跑。看编辑器状态栏有没有显示服务已启动，浏览器地址栏是不是127.0.0.1开头的。如果你双击的是文件，那自然不会自动刷新，手动按F5即可。

第二个层次，浏览器缓存。强制刷新是Ctrl + F5，或者在开发者工具的 Network 面板里勾上禁用缓存。开发阶段我一般建议把开发者工具一直开着并勾上禁用缓存，省得反复怀疑自己。

第三个层次，端口冲突。本地服务默认占用某个端口，如果这个端口被别的程序占了，扩展可能会静默失败或者换一个端口起服务，而你浏览器还停在旧地址上，看到的是上一次的内容。这时看一下编辑器状态栏实际给出的地址，用那个地址重新打开。

还有一种更隐蔽的情况：你的 HTML 里引用了外部样式或脚本，缓存的是那些外部文件而不是 HTML 本身。这时候清一下浏览器缓存最直接。

5. 把编辑器用出效率：Emmet、快捷键与自定义代码片段

前三节解决"能用"，这一节解决"快"。零基础阶段谈效率好像有点早，但我要说的是：效率工具的价值不在于省时间，而在于让你愿意多练。一个标签要敲十几个字符，人就会本能地少写几个页面；如果几个字符就能生成一段结构，练习量自然上去了。

5.1 Emmet 的写法逻辑：像 CSS 选择器一样写 HTML

几乎所有主流编辑器都内置或支持 Emmet，它是 HTML 输入效率提升最大的一项能力，原理很简单：用类似 CSS 选择器的方式描述结构，按 Tab 展开成完整标签。

最常用的几条，记住就能覆盖八成场景：

这套语法用起来很直观，写一个导航列表只要ul>li*5>a一行。但有两个前提必须满足，否则按 Tab 没反应：一是文件的语言模式必须是 HTML（看编辑器右下角是不是显示 HTML，显示 Plain Text 就不会展开）；二是 Tab 键没有被别的扩展抢走。第二种情况是真实存在的冲突，装了两个都绑定 Tab 的扩展时，展开会失效或者有时灵有时不灵，排查办法是禁用其中一个试。

5.2 十个零基础就能立刻用上的快捷键

不必一次记全，先挑三个最常用的练到肌肉记忆，再慢慢加。下面这些是各主流编辑器基本通用的，个别差异自己按Ctrl + K再Ctrl + S查看快捷键列表确认。

1. Ctrl + S保存。如果开了自动保存，这条可以省。
2. Ctrl + /注释当前行，HTML 里会变成<!-- -->。调试结构时非常有用，把可疑的一整段注释掉，看问题是否消失。
3. Shift + Alt + F格式化整个文件。结构错乱时第一反应就该按这个。
4. Alt + 上下方向键把当前行上移或下移。调整区块顺序时不用剪切粘贴。
5. Shift + Alt + 上下方向键复制当前行到上或下。
6. Ctrl + D选中当前光标所在的词，再按一次选下一个相同的词，可以同时改多处。
7. Alt + 鼠标点击在多处放光标，同时输入。改一批相同标签时极快。
8. Ctrl + F当前文件查找，Ctrl + H替换。
9. Ctrl + P按文件名快速跳转，项目文件多了之后必用。
10. Ctrl + G跳到指定行号。看到报错提示第几行时直接跳过去。

这十条里，我建议新手优先把Ctrl + /、Shift + Alt + F、Alt + 上下练熟。注释掉一段排查问题、格式化一眼看出结构、上移下移调整顺序，这三个动作覆盖了学习阶段大部分的重复操作。

5.3 自己造一段代码片段，把重复劳动一次性省掉

做到一定数量的练习之后，你会发现有些结构每次都要重敲：页面骨架、图片标签、带说明的区块。这时候可以把它做成自定义片段，输入几个字符就展开。

主流编辑器都支持用户自定义片段，配置文件是一个 JSON，结构大致如下：

{ "HTML5 页面骨架": { "prefix": "h5", "body": [ "<!DOCTYPE html>", "<html lang=\"zh-CN\">", "<head>", " <meta charset=\"UTF-8\">", " <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">", " <title>${1:页面标题}</title>", "</head>", "<body>", " $0", "</body>", "</html>" ], "description": "生成一个最小可用的 HTML5 页面骨架" } }

几个关键点解释一下：prefix是你输入的触发词；body是展开后的内容，数组里每一项是一行，缩进要自己写在字符串里；${1:页面标题}是带默认值的占位符，展开后光标先停在这里，按 Tab 跳到下一个；$0是最终光标位置。注意 JSON 里的双引号要转义，这是新手写片段配置最容易出错的地方。

写好保存，在 HTML 文件里输入h5，按 Tab，整段骨架就出来了。这个动作看起来只是省了几十次敲击，实际影响更大：它保证了你的每个页面骨架都完全一致，不会今天漏了viewport，明天忘了charset，然后花半小时排查为什么手机上显示不对。

提示：片段不要一口气写十几个。先写最常用的三四个，用一周，确认真的高频，再加。写太多记不住触发词，反而变成负担。

6. 在线编辑器和浏览器开发者工具：两个被低估的补充位

讲完本地编辑器，还有两个工具值得单独说。它们不能替代本地编辑器，但在特定场景下能解决本地工具解决不了的问题。

6.1 在线编辑器的适用边界与不适合的场景

在线编辑器的形态是左边写代码、右边实时出结果，打开网页就能用，不用安装。很多人第一次接触 HTML 就是在这种环境里，体验确实友好。

它真正适合的场景有三个。一是临时验证：你在别处看到一段代码，想快速确认它是干什么的，粘贴进去看效果，比在本机新建文件快得多。二是分享：想把一段效果发给别人看，给个链接比传文件方便。三是碎片时间：在公共电脑或者临时设备上想练两行，不用装环境。

但它有三个明确的边界，越过界就会出问题。第一，它不能管理完整的项目目录，你在第 3.3 建的那套images和css结构，在线环境里表达不出来，而真实开发恰恰是这个结构。第二，它不能加载本地图片，你要么上传要么用外链，一旦改成外链，你练的就不是相对路径了。第三，它隐藏了文件保存、编码、扩展名这些真实问题，而这些问题恰好是新手最需要建立的认知。

所以我的建议很明确：用在线编辑器做快速验证，用本地编辑器做主练习。两者不冲突，各管一段。

6.2 把开发者工具当成第二个编辑器来用

浏览器开发者工具是每个写页面的人都会用到的东西，零基础阶段它最大的价值不是调试，而是让你即时看到修改结果而不必改代码。这个能力对理解结构和样式的关系帮助极大。

打开方式通常是F12，或者在页面上右键选"检查"。打开后最重要的一个面板叫 Elements（元素），它显示的就是浏览器解析后的完整 DOM 树。你会注意到：它在左侧把标签层级用可折叠的缩进展示出来，这比你对着源码猜嵌套关系直观得多。如果某个标签的嵌套位置和你以为的不一样，这里一眼就能看出来。浏览器在解析 HTML 时会自动修正一些错误嵌套，所以这里显示的是"浏览器理解的样子"，不完全等于你写的样子，这个差别本身就是一个很好的学习点。

右侧是样式面板，你可以直接双击修改某个属性的值，页面立刻变化，改完不想要就刷新还原。我用这个方式确认过无数次"这个间距到底是哪个属性的"。在产品页面上改别人的样式来学习布局思路，是零基础阶段非常高效的一种练习方式，比读文档快。

另一个常用面板是 Console（控制台）。现在你只用 HTML，它可能一直是空的。但养成打开看看的习惯，等开始写脚本，这里会成为你最主要的排错窗口。

最后提醒一句：开发者工具里的修改不会保存回你的文件。它改的是浏览器内存里的那份 DOM，刷新就没了。这一点很多新手误解过，改了半小时发现全丢了。学到顺手之后，正确的循环是：在开发者工具里试出满意的效果，然后手动把改动抄回编辑器。

7. 我个人的一点配置习惯

踩了几年坑之后，我现在给零基础朋友的配置建议其实很短：安装后先开自动保存、统一 UTF-8、装一个实时预览加一个格式化，之后再不动配置。扩展总数控制在五个以内，主题和图标一律不装。目录结构第一次就建对，文件名全小写、不带空格、不用中文。写页面的第一个月，坚持用本地服务预览而不是双击文件。

还有一个我自己受益很大的小习惯：遇到问题时，先按Shift + Alt + F格式化一遍，再看效果。就这么一个动作，能解决掉我遇到的相当一部分"结构莫名错乱"的问题，因为格式化实际上是在把文件往规范结构上对齐，对不齐的地方就是问题所在。