共计 1841 个字符，预计需要花费 5 分钟才能阅读完成。
一起来学习一些 疾速创立标签的小技巧，来进步书写代码的速度。例如，百度首页 (https://www.baidu.com/) 右侧的 百度热搜，应用到了列表布局。
如果应用无序列表实现的话，须要在 ul 外面搁置 10 个 li，先编写一个 ul，而后在 ul 里编写十个 li，或者编写一个 li，再复制 10 次，显然这样来写代码效率很低。那如果在创立 h1 的同时，把标签外部的文本也书写进去，该如何实现呢？这要得益于 Emmet，它是一个能大幅度提高前端开发效率的工具，手动编写 HTML 代码的时候，因为须要敲打很多尖括号，而且很多标签还须要闭合，大量反复的标签须要拷贝粘贴等，于是就有了 Emmet 它能够极大的进步代码编写的效率 它提供了一种十分简练的语法规定 能够立即生成对应的 HTML 构造 VSCode 内置了 Emmet 语法 开箱即用。
比方下面的需要，利用 Emmet 工具，只有先编写标签名、花括号、标签文本内容，再通过 tab 键或回车键来触发代码补全，(标签名{标签文本内容}+tab) 就能实现了。咱们来练习一下：关上编辑器，新建一个 shortcut_key.html 页面。应用 ! 配合 tab 键补全根本代码。大家留神，这里创立根本构造的操作，其实就是在应用 Emmet。持续编写代码，在 body 外面应用 ctrl 配合斜杠 (/) 补全正文，在正文外面书写：No.1 创立一个标签并且标签外面有文本。回到正文外边，书写 h1 花括号 (h1{})，花括号外面填入：这是一级题目 (h1{这是一级题目})，配合 tab 键 主动补全代码，编辑器中显示进去了一个 h1 题目标签，并且外面带有对应的文本，应用快捷键 alt+b 在浏览器中运行一级题目成果失常显示。
须要揭示大家的是 这里的 h1 标签只是一个例子 任意非法 HTML 标签都能够应用 Emmet 来实现代码主动补全再拓展一下需要，如果想要创立多个 h1，同时外部又要别离蕴含对应的文本，该如何实现呢？Emmet 的语法是：(标签名 {标签文本内容} 标签反复次数)咱们来实现一下：回到编辑器中，在代码前面再次应用 ctrl 配合斜杠 (/) 增加正文，正文外面填写 No.2 创立多个雷同的标签并且标签外面有文本，回到该正文的下一行，书写 h1 花括号 (h1{}) 花括号外面写入 这是一级题目 (h1{这是一级题目}) 而后在花括号的前面，增加上一个乘号 ( )，乘号前面跟上你想创立的个数，(h1{这是一级题目}*4) 最初在按 tab 键，在编辑器中曾经显示进去了四个 h1 题目标签，并且每一个标签外面都有了对应的文本，保留。回到浏览器 刷新 成果实现了。
持续跟我一起思考，如果想要实现，H1-H6 六个题目标签，同时里 有对应的 带有序号 的文本，该如何实现呢？Emmet 的语法是：(标签 ${标签 $ 文本内容}标签反复次数)咱们来练习一下。回到编辑器，在以后代码前方持续编写一个正文，内容为 No.3 创立多个不同题目标签，并且外面有文本，在正文的内部，换行，书写一个 h 字母，前面跟上一个 $ 符，($) 在 $ 符前方，写上花括号，(h${}) 花括号外面写上对应的文本：这是 $ 级别的题目，通过键盘的方向键，管制光标移出花括号外侧，前面书写乘以 6，(h${这是 $ 级别的题目}6) 配合 tab 主动补全代码，在编辑器外面曾经呈现了 6 个题目标签，并且每个标签里都有对应的不同的文本，保留。回到浏览器，刷新，成果实现了。
单个标签的 Emmet 代码补全咱们学会了 嵌套标签如何疾速书写？如果一个 ul 标签外面有五个 li，每一个 li 中都有对应的文本。Emmet 的语法是，父标签名 > 字标签名 {字标签文本} 字标签反复次数咱们来实现一下回到编辑器中 在以后代码开端地位 回车 进行换行。再次编写一段正文：内容为 No.4 嵌套构造标签。回到正文内部，书写一个 ul 字符，前面跟上一个大于号 (>)，在大于号前面书写 li，在 li 前面跟上花括号，在花括号外面填入文本，这是 ul 外面的 li，而后在花括号前面持续书写乘以 5，( ) 最初按下 tab 键主动补全代码，在编辑器中立即呈现了一个 ul，外面蕴含五个 li 的全副代码。如果把乘以 5 放在 ul 后边 是不是也能实现同样的成果呢
利用 Emmet 疾速创立标签，须要留神的是 以上咱们介绍的语法、能够利用在任何标签下面 能够利用在任何正当嵌套的构造下面 另外 Emmet 语法还有很多实用的语法 咱们在前面的学习中还会遇到。
文章配套视频链接点我