sublime text3 中如何设置 Emmet输入标签自动闭合
1.1 标签 需要自动闭合的理由
- ⑴ 问题产生原因:早期的 html 规范中 <br > <hr >等标记元素是不需要“封闭自身”的
- 问题:造成了 html 规范本身的不严谨
- 解决办法:参考了更规范、严谨的 XML 语言的语法,推出了xhtml。
- ⑵ 孤立标签的自行封闭::在 xhtml 中规定,所有 br 、img 这样的孤立标签,都是需要自行封闭的
- 封闭的方法:在标签名字的后面写上斜杠 “/”,
- 比如,<br>——》 <br />
- 在逻辑上: <br>=<br>…</br>,
- 封闭的方法:在标签名字的后面写上斜杠 “/”,
- ⑶ 孤立标签 自身封闭的用途:代码 逻辑严谨,代码少。
- 尽量 减少代码量 的输入,同时能保持逻辑上的严谨。
1.2如何设置 Emmet 缩写 展开为自动闭合的标签
- ⑴ Emmet 孤立标签的缩写 刚在 sublime text3 中使用的时候,是不会自动闭合的,就是没有 斜杠 / ,如下图
- 为了生成更严谨的 html 代码,我们需要让孤立标签 自身闭合
<!-- base 自带空值的 href 属性少结束符号 /,没有闭合-->
<base href="">
<!-- basefont 少结束符号 /,没有闭合-->
<basefont>
- ⑵ 设置方法:
- (1)找代码,复制下来:在首选项- 插件设置 - Emmet - Settings—Default 默认设置中,找到 语法文件相关设置代码 “syntaxProfiles”,并复制下来
- 复制的是这段代码
// Output profiles for syntaxes(语法的输出配置文件)
// http://docs.emmet.io/customization/syntax-profiles/
"syntaxProfiles": {
// Enable XHTML dialect for HTML syntax
// "html": "xhtml"
//
// Write chained CSS abbreviations on single line:
// "css": "css_line"
}
- (2) 找到 代码需要插入的 文件: 选择首选项- 插件设置 - Emmet - 用户设置 Settings—user
- (3)插入两段代码:一定记得 写一个大括号,把刚才的代码复制进去,并其中 加上另一段代码,如下
// force XHTML profile for HTML syntax(对 HTML 语法,强制使用 XHTML文件)
"html": "xhtml",
// create our own profile for XML (为 XML 创建我们自己的配置文件)
"xml": {
"tag_case": "upper",
"attr_quotes": "single"
}
- 整段代码,如下:
{
"syntaxProfiles": {
// Enable XHTML dialect for HTML syntax(为HTML语法启用 XHTML)
// "html": "xhtml"
//
// Write chained CSS abbreviations on single line:(在单行上写出链接的CSS缩写)
// "css": "css_line"
// force XHTML profile for HTML syntax(对 HTML 语法,强制使用 XHTML文件)
"html": "xhtml",
// create our own profile for XML (为 XML 创建我们自己的配置文件)
"xml": {
"tag_case": "upper",
"attr_quotes": "single"
}
}
}
- (4)保存,重启,测试:保存代码,重启 sublime text3 ,现在 孤立标签的缩写 会自动拓展成 自动闭合的标签,语法更加严谨了。亲测有效。
<!-- base 自带空值的 href 属性少结束符号 /-->
<base href="">
<!-- basefont 少结束符号 /-->
<basefont>
<!-- base 自动闭合了,带/ -->
<base href="" />
<!-- basefont 自动闭合了,带/ -->
<basefont />
<!-- br 自动闭合了-->
<br />
-
感谢:♥♥♥ 如果这篇文章对您有帮助的话,可以点赞、评论、关注,鼓励下作者哦,感谢阅读 O(∩_∩)O哈哈~
-
转载 请注明出处 ,Thanks♪(・ω・)ノ
- 作者:Hey_Coder
- 来源:CSDN
- 原文:https://blog.csdn.net/VickyTsai/article/details/87893176
- 版权声明:本文为博主原创文章,转载请附上博文链接!