一起来学习一些 疾速创立标签的小技巧,来进步书写代码的速度。例如,百度首页 (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 语法还有很多实用的语法 咱们在前面的学习中还会遇到。
文章配套视频链接点我