零基础教你学前端——17、快速创建标签小技巧

一起来学习一些 快速创建标签的小技巧，来提高书写代码的速度。例如，百度首页  (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语法还有很多实用的语法    我们在后面的学习中还会遇到。

文章配套视频链接点我