赛林格

VS Code 编写 HTML 小技巧大全（非程序员也能快速上手的实用技巧指南）

2014字 10.1分钟 经验分享

🎉 本文将整理常见的 VS Code 编写 HTML 实用小技巧，包括 Emmet 快速生成结构、标签自动补全、多光标编辑、代码格式化、实时预览（Live Server）等功能，专为非程序员和新手用户总结，提升写网页效率，减少重复输入与低级错误，新手必看喔。

随着 Ai 的迅速发展，越来越多的非程序员普通用户，也开始尝使用 Visual Studio Code 来试编写 html 网页代码了，但由于经验欠缺，在打开 Visual Studio Code 后，发现虽然它界面看着很专业，功能很多，但真正开始写代码时，却发现自己在做一件很原始，一直重复的事情：

一行一行敲标签，来回复制粘贴，切浏览器刷新，再回来改代码。

写得不算难，但很累。

博主也是非程序员出生，跟大家一样，也遇到了同样的问题，所以博主后来专门梳理过这个问题，发现一个很有意思的现象：

其实 Viscode 编辑 html 有很多小技巧，而多数普通用户压根就不知道，也没用到 VS Code 真正能帮你“省力”的地方。你在用一辆自动挡汽车，却一直用手推着走。

下面这些小技巧，是博主专门给新手准备的，解决上述问题的方法，特地写出来分享给大家。

1. html 结构快速生成

很多新手在创建一个 HTML 文件时，会老老实实写一大堆代码，比如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

其实你只需要在空白文件里输入：

! + Enter (或者 Tab)

即：英文感叹号 ! 和 Enter 键一起按，上述完整 HTML5 模板结构，就会自动生成了。

这可不是插件，是内置功能喔。发现了吧？就这个快捷键实在是太方便了。

当你知道这个之后，就很难再回去手敲那一大段了。

对非程序员来说，这一步最大的意义不是“快”，而是不会漏标签、不会结构写错。

2. 标签 - 自动补全

(1). 比如你想写 <div> → 通用容器：

<div></div>

不用完整打出来，直接输入：

div + Enter (或者 Tab)

就可以了。

(2). 比如你想写 class / class：

<div class="card"></div>

不用一整句打出来。

直接输入：

div.card + Enter (或者 Tab)

(3). 如果是class / id：

直接输入：

div#app + Enter (或者 Tab)

就得到：

<div id="app"></div>

(4). 比如你想输入 <a> → 超链接：

直接输入：

a + Enter (或者 Tab)

就得到：

<a href=""></a>

(5). 比如你想输入 <img> → 图片：

直接输入：

img + Enter (或者 Tab)

就得到：

<img src="" alt="">

其它 html 标签，比如 <head>、<title>、<h1> 到 <h6>、<p>、<strong>、<span>、<main>、<ul>、<li>等等，都可以这样快速输入。

当你写页面结构比较多时，这种 “标签名 + Enter” 的输入方式方式，几乎可以节省一半输入量。

3. 重复结构 - 自动输入

做列表时，很多人会这样写：

<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

其实可以直接输入：

li*5

按 Tab 自动生成五个 <li></li>。

如果是嵌套结构：

ul>li*3

展开后：

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

当你开始用这种方式写导航栏、文章目录时，会发现页面结构搭起来非常快。

4. 多光标编辑

假设页面里有：

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

要把 box 改成 card。

不用逐个修改。

选中一个 box，按 Ctrl + D， 每按一次，就会多选一个相同的内容。这里按2次就能选中3个 box，并一起修改。

最后一起改成：

<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

这个功能对非程序员特别友好，因为它解决的是“重复修改”的烦躁感。

5. 代码格式化

当结构变成这样：

<div><ul><li>1</li><li>2</li></ul></div>

不用自己敲回车调整。

按：

Shift + Alt + F

自动变成：

<div>
  <ul>
    <li>1</li>
    <li>2</li>
  </ul>
</div>

这相当于给代码自动排版。 对于不熟悉嵌套层级的人来说，这是救命功能，也不用去网上找什么 html 代码美化了。

6. 文字包成标签

有时候你已经写好了内容：

Hello World

想把它包进一个容器。

选中内容 → 按 Ctrl + Shift + P 搜索：

Emmet: Wrap with Abbreviation

输入：

div

回车后自动变成：

<div>Hello World</div>

不用剪切、重写、对齐。

7. 实时预览（Live Server）

默认情况下，VS Code 不会自动刷新浏览器。 如果你现在的流程是：

保存 → 切浏览器 → 刷新 → 再切回来

那确实会很累。

安装一个插件：Live Server

安装后：

右键 HTML 文件 → Open with Live Server

浏览器会自动打开页面。 以后每次保存，页面都会自动刷新。

这一步其实是很多人效率突然提升的关键。

8. 小结

很多非程序员觉得写 HTML 累，是因为你在“逐行输入代码”。 而 VS Code 的设计逻辑是“输入结构指令，让编辑器生成代码”。

当你开始用：

!
div.card
li*5
Ctrl + D
Shift + Alt + F

写页面的感觉会明显不同。
它不再是机械敲代码，而更像是在搭结构。
工具没有变，变的是使用方式。

9. 常见 html 标签

为帮助理解，博主也顺手把常见的 html 标签，按实际使用场景，整理如下，

(1)、页面基础结构标签（每个网页都会用）

这是网页最基本的骨架。

<!DOCTYPE html>
<html>
<head>
<meta>
<title>
<body>

简单理解：

  • <!DOCTYPE html> → 声明 HTML5
  • <html> → 整个页面的根
  • <head> → 页面设置区（不直接显示）
  • <meta> → 字符编码、描述等
  • <title> → 浏览器标题
  • <body> → 页面可见内容

这几乎是每个页面的必备结构。

(2)、文本类标签（最常用）

做内容页面时用得最多。

<h1> 到 <h6>
<p>
<br>
<hr>
<strong>
<b>
<em>
<i>
<span>

作用说明：

  • <h1>~<h6> → 标题
  • <p> → 段落
  • <br> → 换行
  • <hr> → 分割线
  • <strong> → 强调（语义加粗）
  • <em> → 强调（语义斜体）
  • <span> → 行内容器（常配合样式）

如果你是做文章页面，这一组是最常用的。

(3)、布局结构标签（搭页面框架）

现在写网页，不只是堆 <div>，HTML5 提供了更语义化的标签。

<div>
<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>

简单理解：

  • <div> → 通用容器（最常见）
  • <header> → 头部区域
  • <nav> → 导航
  • <main> → 主要内容
  • <section> → 分区块
  • <article> → 独立内容
  • <aside> → 侧边栏
  • <footer> → 底部

非程序员最容易用到的是 <div>，但如果做正规页面，语义标签会更清晰。

(4)、列表标签（导航和目录必用）

<ul>
<ol>
<li>
  • <ul> → 无序列表
  • <ol> → 有序列表
  • <li> → 列表项

导航栏、目录、产品列表都会用到。

(5)、链接和媒体标签

<a>
<img>
<video>
<audio>
<source>
  • <a> → 超链接
  • <img> → 图片
  • <video> → 视频
  • <audio> → 音频
  • <source> → 媒体资源路径

做网站几乎一定会用到 <a> 和 <img>。

(6)、表单标签（登录、搜索框必备）

<form>
<input>
<textarea>
<select>
<option>
<button>
<label>
  • <form> → 表单容器
  • <input> → 输入框
  • <textarea> → 多行文本
  • <select> → 下拉菜单
  • <option> → 下拉选项
  • <button> → 按钮
  • <label> → 标签说明

做登录页、搜索框时会用到。

(7)、表格标签（数据展示）

<table>
<tr>
<td>
<th>
<thead>
<tbody>
  • <table> → 表格
  • <tr> → 行
  • <td> → 单元格
  • <th> → 表头
  • <thead> / <tbody> → 分区

做数据展示页会用到。

给非程序员小白的真实建议:

不需要记住所有 HTML 标签。 真正高频的，其实不到 30 个。

写页面时，思路可以这样：

标题 → <h1> 正文 → <p> 分区 → <div> 或 <section> 链接 → <a> 图片 → <img> 列表 → <ul><li>

  • 等用熟了，再慢慢接触更细分的语义标签。
  • HTML 并不复杂。
  • 它本质上只是“用标签描述结构”。
  • 理解用途，比死记名字重要。

参考：

Viscode Html 新手必看
相关阅读