HTML 编辑器与浏览器

工欲善其事,必先利其器。本章带你认识写 HTML 的常用工具,新建第一个文件,用浏览器打开,并掌握开发者工具的基本用法。整个过程不超过 5 分钟。

1. 写 HTML 用什么编辑器?

理论上,任何能编辑文本的软件都能写 HTML——记事本、TextEdit 都行。但用专业编辑器能让你语法高亮、自动补全、格式化、错误提示,效率天差地别。下面是主流选择:

VS Code(推荐新手):Microsoft 出品的免费编辑器,生态最丰富。装上插件就能写 HTML/CSS/JS,内置 Live Server 插件可以保存即自动刷新浏览器。
Sublime Text:轻量级编辑器,启动飞快,适合临时改个小文件。免费试用,弹窗提示购买。
WebStorm:JetBrains 出品的付费 IDE,功能最强,适合专业前端。
Atom / Brackets:已停止维护,不推荐新用户使用。
记事本 / TextEdit:仅用于"没有编辑器时的应急",体验极差不推荐。

本教程示例全部基于 VS Code。去 https://code.visualstudio.com/ 下载对应系统的安装包,双击安装即可,无需任何配置。

2. VS Code 必装插件

装好 VS Code 后,点左侧扩展图标(或按快捷键 Ctrl+Shift+X / Cmd+Shift+X),搜索并安装下面几个:

Live Server(必装):右键 HTML 文件选 Open with Live Server,浏览器会自动打开,之后每次保存文件浏览器自动刷新——告别手动刷新的痛苦。
Prettier - Code formatter:保存时自动格式化代码,缩进、引号、换行全部统一。
Auto Rename Tag:改开始标签时,结束标签同步改名。
HTML Snippets:快速输入常用代码片段,如输入 ! 后按 Tab 自动生成完整骨架。

3. 新建第一个 HTML 文件

打开 VS Code,按下面步骤操作:

新建一个文件夹(比如 my-site),用 VS Code 打开它。
在文件夹内新建文件,命名为 index.html。
在文件里输入下面内容并保存。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一个网页</title>
</head>
<body>
  <h1>你好,世界</h1>
  <p>这是我的第一个 HTML 页面。</p>
</body>
</html>

小技巧:在 VS Code 的空白文件里输入 ! 然后按 Tab,会自动生成完整的 HTML5 骨架,只需要改标题和正文就行。

4. 用浏览器打开

有三种方式:

双击文件:用系统默认浏览器打开,简单直接。
拖拽:把 html 文件拖到已打开的浏览器窗口里。
Live Server(推荐):右键文件选 Open with Live Server,会在 http://127.0.0.1:5500/ 启动本地服务器并打开,之后保存即自动刷新。

地址栏里如果是 file:/// 开头,说明是直接打开本地文件;如果是 http:// 开头,说明走了本地服务器。后者更接近线上环境,推荐用 Live Server。

5. HTML 注释

注释是写给人看的,浏览器不会渲染出来。HTML 注释用  结束,可以跨多行:

<!-- 这是 HTML 注释,浏览器不会渲染出来 -->

<!--
  多行注释
  常用于说明一大段结构
-->

<h1>可见标题</h1>
<!-- <p>这段被注释掉了,不会显示</p> -->

<!--
  注释的两个常见用途:
  1. 给自己或同事留下说明
  2. 临时禁用某段代码不删它
-->

注释的两个常见用途:给自己或同事留说明、临时禁用一段代码(不删它,留着以后用)。VS Code 里选中代码按 Ctrl+/ 或 Cmd+/ 可以快速加/取消注释。

6. VS Code 常用快捷键

记住几个高频快捷键,效率翻倍:

<!-- VS Code 中常用快捷键(Windows/Linux 用 Ctrl,Mac 用 Cmd) -->

<!-- 注释/取消注释选中行 -->
<!--   Windows: Ctrl + / -->
<!--   Mac:     Cmd + / -->

<!-- 整行复制 -->
<!--   Windows: Shift + Alt + 下 -->
<!--   Mac:     Shift + Option + 下 -->

<!-- 全局查找 -->
<!--   Windows: Ctrl + Shift + F -->
<!--   Mac:     Cmd + Shift + F -->

7. 浏览器开发者工具(F12)

这是前端最重要的调试工具。在浏览器里按 F12(Mac 是 Cmd+Option+I),或右键页面选检查,就能打开开发者工具。常用面板:

Elements(元素):实时查看页面 HTML 结构,选中元素能看到它的样式、盒模型。可以直接在面板里改 HTML/CSS,效果立刻显示——这是学习别人网站的神器。
Console(控制台):运行 JS 代码、查看报错。
Network(网络):查看页面加载的所有资源(html、css、js、图片)及耗时。
Application(应用):查看 Cookie、localStorage 等本地存储。

新手最常用的是 Elements 面板:看到别人网站某块效果,右键检查,就能看到对应的 HTML 结构,直接拿来学习。

8. 推荐浏览器

开发调试首选 Chrome 或 Edge(都基于 Chromium,开发者工具强大)。Firefox 也不错,有独立的开发者版。Safari 开发者工具相对弱一些,但在 Mac 上调试 iOS Safari 必备。不要用 IE 测试,它已停止维护,对新标准支持极差。

小结

到这里你已经装好了 VS Code、装上了 Live Server、新建并打开了自己的第一个网页,还学会了 F12 调试。环境就绪,下一篇我们正式学 HTML 的文档骨架——看懂每一行的作用。

← 上一篇 HTML 简介

下一篇 HTML 文档骨架 →

✈️💬