VSCode快速生成HTML骨架_Emmet语法的高级使用技巧

　　发布于2026-04-24　阅读（0）

扫一扫，手机访问

Emmet缩写不生效？检查VSCode的文件关联和触发设置

Emmet缩写不生效？检查VSCode的文件关联和触发设置

很多开发者都遇到过这个情况：在VSCode里敲下经典的!+Tab，却毫无反应。问题出在哪？其实，Emmet默认只对html、htm、jsx、tsx等特定文件类型生效。如果你正在编辑.vue或.svelte这类文件，第一步就该看看右下角的状态栏——当前语言模式如果显示“Plain Text”或其他非HTML模式，Emmet自然无法识别。手动点开语言标签，切换成HTML或对应的模板语言，往往就能解决问题。

另一个常见的“拦路虎”是触发键被占用。VSCode默认用Tab键来展开Emmet缩写，但如果你安装了某些插件（比如Auto Rename Tag），或者自定义过keybindings.json，Tab键的功能就可能被覆盖。这时候，可以尝试一个诊断方法：按下Ctrl+Shift+P打开命令面板，输入Emmet: Expand Abbreviation并执行。如果命令能正常展开缩写，那就证明语法本身没问题，只是触发方式需要调整。

确保旧版设置中的"emerald.emmet": true未被禁用（新版本VSCode已内置Emmet，此项通常无需理会）。
检查settings.json中是否存在"emerald.triggerExpansionOnTab": false这类显式关闭Tab触发的配置项。
记住，!+Tab必须在空行或行首使用；如果前面有空格或其他字符，Emmet会直接忽略它。

快速生成带语义结构的HTML骨架：不只是`!`

说起Emmet，!确实是入门第一课，它能快速生成一个基础的HTML5文档骨架。但你知道吗？!仅仅是html:5这个缩写的别名。真正体现效率的，是组合使用各种操作符来构建复杂结构。比如，你需要一个包含头部导航、主内容区和页脚的页面结构，只需输入：

html:5>head+na v+main+footer

按下回车，一个完整的HTML结构瞬间生成，连里的和</code>占位符都准备好了。这里的秘诀在于操作符：<code>></code>用于创建子元素，<code>+</code>用于创建同级元素，<code>^</code>则能让元素跳出当前嵌套层级，回到上一级。</p> <p><span>立即学习</span>“前端免费学习笔记（深入）”；</p> <ul> <li><code>section>h2{标题}+p{段落}*3</code> → 生成一个带标题和3个段落文字的<code>section</code>区块。</li> <li><code>ul>li.item$*5</code> → 生成一个无序列表，包含5个类名依次为<code>item1</code>到<code>item5</code>的列表项，自动编号功能非常省心。</li> <li><code>div.container>(header>h1)+main+footer</code> → 生成一个带<code>container</code>类名的<code>div</code>，内部按顺序包含带<code>h1</code>的<code>header</code>、<code>main</code>和<code>footer</code>。</li> </ul> <h3>动态属性与内容填充：用<code>{}</code>和<code>[]</code>减少手动编辑</h3> <p>厌倦了反复敲打<code>class</code>、<code>id</code>这些属性？Emmet允许你在缩写中直接声明它们。看这个例子：</p> <pre class="brush:php;toolbar:false;">div#app.container[data-id="123"]{Vue App}</pre> <p>展开后，你会得到：<code><div id="app" class="container" data-id="123">Vue App</div></code>。这里有几个关键规则：<code>{}</code>大括号用来包裹元素的文本内容，<code>[]</code>中括号则用来定义属性键值对，键和值之间用等号连接，并且属性值必须加上引号。</p> <ul> <li>当属性值包含空格时，必须使用单引号或双引号包裹，否则解析会失败（例如<code>[data-role=main]</code>可行，但<code>[data-role=main na v]</code>不行）。</li> <li><code>{}</code>里的内容支持简单的变量替换，比如<code>span{Item $}*3</code>会生成<code>Item 1</code>、<code>Item 2</code>、<code>Item 3</code>。</li> <li>需要注意，<code>{}</code>里只适合放置纯文本内容，不要试图在里面写复杂的HTML标签；嵌套结构请务必使用<code>></code>操作符来完成。</li> </ul> <h3>在非HTML文件中启用Emmet：比如Markdown或CSS里的快捷片段</h3> <p>别把Emmet局限在HTML里。它的能力范围要广得多。在<code>.md</code>Markdown文件中，输入<code>ul>li*3</code>并按<code>Tab</code>，它会自动生成Markdown格式的列表（以<code>- </code>开头）。在<code>.css</code>样式文件里，<code>m10</code>会展开为<code>margin: 10px;</code>，<code>bgc#f00</code>则会变成<code>background-color: #f00;</code>。这些功能依赖于VSCode对不同语言文件的Emmet支持配置。</p> <ul> <li>通常，新版VSCode已为常见语言内置了支持，无需额外配置。但如果失效，可以检查<code>settings.json</code>中是否有针对特定语言的变量设置（例如旧版中的<code>"emerald.variables": { "lang": "markdown" }</code>）。</li> <li>CSS中有大量实用缩写：<code>bd1s#000</code> → <code>border: 1px solid #000;</code>，<code>fw700</code> → <code>font-weight: 700;</code>。</li> <li>在Markdown中，<code>a[href=]{link}</code>会展开为<code>[link](href)</code>，但务必注意所有括号和符号都需使用英文半角格式。</li> </ul> <p>最后提醒一个最容易被忽略的细节：Emmet的CSS缩写只在<code><style></code>标签内部或纯粹的<code>.css</code>文件中生效。如果你在<code><script></code>标签里输入<code>dn</code>，它可不会变成<code>display: none</code>——Emmet严格遵循当前光标所在的语言上下文。 </div> <div class="laiyuan"> 本文转载于：https://www.php.cn/faq/2317114.html 如有侵犯，请联系zhengruancom@outlook.com删除。<br/>免责声明：正软商城发布此文仅为传递信息，不代表正软商城认同其观点或证实其描述。 </div> <div class="zrSypBox"> <p>上一篇：<a href="https://www.zhengruan.com/news/629064" title="Linux环境下Golang如何进行代码调试" class="aRed">Linux环境下Golang如何进行代码调试</a></p> <p class="right">下一篇：<a href="https://www.zhengruan.com/news/629066" title="Golang在Linux中如何实现安全性" class="aRed">Golang在Linux中如何实现安全性</a></p> <div class="clear"></div> </div> <div class="zrDtxwBox"> <div class="zrByddTitle"> <span><h2>产品推荐</h2></span> </div> <ul class="zrTxdmList3"> <li class="one"> <div class="zrTxdmCont5"> <div class="zrTxdmImg4 dianji"> <a href="https://www.zhengruan.com/news/soft69" class="img"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20200428/cd14258f0172a172f8a80798c38c1577.jpg" alt="DAEMON Tools Lite 10"></a> <span class="xianshi"> <p>售后无忧</p> <em><a href="https://www.zhengruan.com/news/soft69" title="立即购买>">立即购买></a></em> </span> </div> <div class="zrTxdmIn4"> <dl> <dt><a href="https://www.zhengruan.com/news/soft69" title="DAEMON Tools Lite 10" class="aBlack">DAEMON Tools Lite 10</a></dt> <dd> <span>￥0.00</span> <p>office旗舰店</p> </dd> </dl> </div> </div> </li> <li > <div class="zrTxdmCont5"> <div class="zrTxdmImg4 dianji"> <a href="https://www.zhengruan.com/news/soft67" class="img"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20200428/fbf473d4d30833324962e441c0f18265.jpg" alt="DAEMON Tools Ultra 5"></a> <span class="xianshi"> <p>售后无忧</p> <em><a href="https://www.zhengruan.com/news/soft67" title="立即购买>">立即购买></a></em> </span> </div> <div class="zrTxdmIn4"> <dl> <dt><a href="https://www.zhengruan.com/news/soft67" title="DAEMON Tools Ultra 5" class="aBlack">DAEMON Tools Ultra 5</a></dt> <dd> <span>￥0.00</span> <p>office旗舰店</p> </dd> </dl> </div> </div> </li> <li > <div class="zrTxdmCont5"> <div class="zrTxdmImg4 dianji"> <a href="https://www.zhengruan.com/news/soft68" class="img"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20200428/1ae250399abf4ff584d86d52c79b5bb6.jpg" alt="DAEMON Tools Pro 8"></a> <span class="xianshi"> <p>售后无忧</p> <em><a href="https://www.zhengruan.com/news/soft68" title="立即购买>">立即购买></a></em> </span> </div> <div class="zrTxdmIn4"> <dl> <dt><a href="https://www.zhengruan.com/news/soft68" title="DAEMON Tools Pro 8" class="aBlack">DAEMON Tools Pro 8</a></dt> <dd> <span>￥0.00</span> <p>office旗舰店</p> </dd> </dl> </div> </div> </li> <li > <div class="zrTxdmCont5"> <div class="zrTxdmImg4 dianji"> <a href="https://www.zhengruan.com/news/soft29" class="img"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20200428/77d3c04866e1b842d9b6ff0e9368bdf8.jpg" alt="CorelDRAW X8 简体中文"></a> <span class="xianshi"> <p>售后无忧</p> <em><a href="https://www.zhengruan.com/news/soft29" title="立即购买>">立即购买></a></em> </span> </div> <div class="zrTxdmIn4"> <dl> <dt><a href="https://www.zhengruan.com/news/soft29" title="CorelDRAW X8 简体中文" class="aBlack">CorelDRAW X8 简体中文</a></dt> <dd> <span>￥0.00</span> <p>office旗舰店</p> </dd> </dl> </div> </div> </li> <div class="clear"></div> </ul> </div> </div> <ul class="zrZbrjList" style="padding-top:10px;"> <li> <a href="https://www.zhengruan.com/news/425221" class="img1" title="～a在C语言中是按位取反操作符，用于对变量a的每一位进行取反操作。具体来说，如果某一位是0，则变为1；如果是1，则变为0。需要注意的是，C语言中并没有“～”这个"> <img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20250629/175120179723334.jpg" alt="～a在C语言中是按位取反操作符，用于对变量a的每一位进行取反操作。具体来说，如果某一位是0，则变为1；如果是1，则变为0。需要注意的是，C语言中并没有“～”这个"> <span>正版软件</span> </a> <dl> <dt><a href="https://www.zhengruan.com/news/425221" title="～a在C语言中是按位取反操作符，用于对变量a的每一位进行取反操作。具体来说，如果某一位是0，则变为1；如果是1，则变为0。需要注意的是，C语言中并没有“～”这个" class="aBlack">～a在C语言中是按位取反操作符，用于对变量a的每一位进行取反操作。具体来说，如果某一位是0，则变为1；如果是1，则变为0。需要注意的是，C语言中并没有“～”这个</a></dt> <dd class="cont1">在C语言中，~操作符的作用是对操作数的每一位进行取反操作。1）对于整数5，取反后变为-6；2）在嵌入式系统中，可用于控制LED灯开关；3）需注意有符号整数取反可能导致符号位变化；4）在网络编程中，可用于快速切换标志位状态。</dd> <dd class="cont2">  <span class="cont2"><b></b>5天前</span> <span class="cont4"><b></b>150</span> </dd> </dl> </li> <li> <a href="https://www.zhengruan.com/news/736200" class="img1" title="using namespace 使用中遇到的问题怎么解决"> <img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20260807/178605885655125.webp" alt="using namespace 使用中遇到的问题怎么解决"> <span>正版软件</span> </a> <dl> <dt><a href="https://www.zhengruan.com/news/736200" title="using namespace 使用中遇到的问题怎么解决" class="aBlack">using namespace 使用中遇到的问题怎么解决</a></dt> <dd class="cont1">命名空间的基本概念与常见引入问题在C++等编程语言中，命名空间（namespace）是一种将代码标识符（如变量、函数、类名）封装在特定名称下的机制，其主要目的是避免命名冲突，尤其是在大型项目或使用多个第三方库时。使用“using namespace”指令可以将指定命名空间中的所有名称引入当前作用域，</dd> <dd class="cont2">  <span class="cont2"><b></b>16天前</span> <span class="cont4"><b></b>0</span> </dd> </dl> </li> <li> <a href="https://www.zhengruan.com/news/736199" class="img1" title="c语言函数递归实操经验总结：这些技巧很实用"> <img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20260807/178605879214771.webp" alt="c语言函数递归实操经验总结：这些技巧很实用"> <span>正版软件</span> </a> <dl> <dt><a href="https://www.zhengruan.com/news/736199" title="c语言函数递归实操经验总结：这些技巧很实用" class="aBlack">c语言函数递归实操经验总结：这些技巧很实用</a></dt> <dd class="cont1">理解递归的基本原理在C语言中，递归是一种函数调用自身的编程技术。要掌握它，首先需要理解其核心思想：将一个复杂的大问题，分解为一个或几个与原问题相似但规模更小的子问题，直到子问题足够简单，可以直接求解。这个过程通常包含两个关键部分：递归出口和递归体。递归出口定义了问题何时不再继续分解，即最简单、可直接</dd> <dd class="cont2">  <span class="cont2"><b></b>16天前</span> <span class="cont4"><b></b>0</span> </dd> </dl> </li> <li> <a href="https://www.zhengruan.com/news/736198" class="img1" title="c语言函数递归怎么选？常见方案对比分析"> <img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20260807/178605874187563.webp" alt="c语言函数递归怎么选？常见方案对比分析"> <span>正版软件</span> </a> <dl> <dt><a href="https://www.zhengruan.com/news/736198" title="c语言函数递归怎么选？常见方案对比分析" class="aBlack">c语言函数递归怎么选？常见方案对比分析</a></dt> <dd class="cont1">递归函数的基本概念与适用场景在C语言编程中，递归是一种函数调用自身的编程技巧。它并非适用于所有问题，但在处理某些具有自相似结构的问题时，能提供极其清晰和优雅的解决方案。递归的核心思想是将一个大规模问题分解为一个或多个同类型但规模更小的子问题，直到子问题简单到可以直接求解。典型的适用场景包括树形结构的</dd> <dd class="cont2">  <span class="cont2"><b></b>16天前</span> <span class="cont4"><b></b>0</span> </dd> </dl> </li> <li> <a href="https://www.zhengruan.com/news/736197" class="img1" title="Objective-C 内存管理入门：从 alloc 到 dealloc 的生命周期详解"> <img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20260807/178605862499192.webp" alt="Objective-C 内存管理入门：从 alloc 到 dealloc 的生命周期详解"> <span>正版软件</span> </a> <dl> <dt><a href="https://www.zhengruan.com/news/736197" title="Objective-C 内存管理入门：从 alloc 到 dealloc 的生命周期详解" class="aBlack">Objective-C 内存管理入门：从 alloc 到 dealloc 的生命周期详解</a></dt> <dd class="cont1">理解内存管理的基石在Objective-C的编程世界中，内存管理是开发者必须掌握的核心技能之一。它直接关系到应用的性能、稳定性与资源利用效率。与一些采用自动垃圾回收机制的语言不同，Objective-C在很长一段时间里，依赖一套基于引用计数的、需要开发者部分介入的管理规则。这套规则的核心思想是明确的</dd> <dd class="cont2">  <span class="cont2"><b></b>16天前</span> <span class="cont4"><b></b>0</span> </dd> </dl> </li> </ul> </div>   <div class="zrZuoRight">  <div class="zrByddBox"> <div class="zrByddTitle"><span><h2>最新发布</h2></span></div> <ul class="zrByddList"> <li> <a href="https://www.zhengruan.com/news/1561" class="img"> <img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/upload/news/20191220/1576825692n90594/2019-12-20-15-08-12-5dfc735c5581a-1.jpg" alt="微软公布全新开源编程语言Bosque：正则化告别for循环"> <span>1</span> </a> <dl> <dt><a href="https://www.zhengruan.com/news/1561" title="微软公布全新开源编程语言Bosque：正则化告别for循环" class="aBlack">微软公布全新开源编程语言Bosque：正则化告别for循环</a></dt> <dd><b></b>2438天前</dd> </dl> <div class="clear"></div> </li> <li> <a href="https://www.zhengruan.com/news/1562" class="img"> <img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/upload/news/20191220/1576825776n3925/2019-12-20-15-09-36-5dfc73b032cee-1.jpg" alt="微软推出最新程序语言Bosque 以Functors取代Loop循环"> <span>2</span> </a> <dl> <dt><a href="https://www.zhengruan.com/news/1562" title="微软推出最新程序语言Bosque 以Functors取代Loop循环" class="aBlack">微软推出最新程序语言Bosque 以Functors取代Loop循环</a></dt> <dd><b></b>2438天前</dd> </dl> <div class="clear"></div> </li> <li> <a href="https://www.zhengruan.com/news/467167" class="img"> <img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20250908/175730816420885.jpg" alt="C语言中\n是什么意思？换行转义字符详解"> <span>3</span> </a> <dl> <dt><a href="https://www.zhengruan.com/news/467167" title="C语言中\n是什么意思？换行转义字符详解" class="aBlack">C语言中\n是什么意思？换行转义字符详解</a></dt> <dd><b></b>349天前</dd> </dl> <div class="clear"></div> </li> <li> <a href="https://www.zhengruan.com/news/63159" class="img"> <img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="" alt="探析Spring Boot框架的优点和特色"> <span>4</span> </a> <dl> <dt><a href="https://www.zhengruan.com/news/63159" title="探析Spring Boot框架的优点和特色" class="aBlack">探析Spring Boot框架的优点和特色</a></dt> <dd><b></b>665天前</dd> </dl> <div class="clear"></div> </li> <li> <a href="https://www.zhengruan.com/news/85739" class="img"> <img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="" alt="深入比较PyCharm社区版和专业版的功能"> <span>5</span> </a> <dl> <dt><a href="https://www.zhengruan.com/news/85739" title="深入比较PyCharm社区版和专业版的功能" class="aBlack">深入比较PyCharm社区版和专业版的功能</a></dt> <dd><b></b>603天前</dd> </dl> <div class="clear"></div> </li> <li> <a href="https://www.zhengruan.com/news/89680" class="img"> <img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="" alt="专家观点：谷歌是否会继续支持Golang的探讨"> <span>6</span> </a> <dl> <dt><a href="https://www.zhengruan.com/news/89680" title="专家观点：谷歌是否会继续支持Golang的探讨" class="aBlack">专家观点：谷歌是否会继续支持Golang的探讨</a></dt> <dd><b></b>579天前</dd> </dl> <div class="clear"></div> </li> <li> <a href="https://www.zhengruan.com/news/16338" class="img"> <img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20230427/168257005787096.jpg" alt="提升 Python 编程效率：推荐使用 VSCode 的 Python 扩展"> <span>7</span> </a> <dl> <dt><a href="https://www.zhengruan.com/news/16338" title="提升 Python 编程效率：推荐使用 VSCode 的 Python 扩展" class="aBlack">提升 Python 编程效率：推荐使用 VSCode 的 Python 扩展</a></dt> <dd><b></b>1211天前</dd> </dl> <div class="clear"></div> </li> <li> <a href="https://www.zhengruan.com/news/16470" class="img"> <img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20230427/168257472829656.jpg" alt="Python实战教程：批量转换多种音乐格式"> <span>8</span> </a> <dl> <dt><a href="https://www.zhengruan.com/news/16470" title="Python实战教程：批量转换多种音乐格式" class="aBlack">Python实战教程：批量转换多种音乐格式</a></dt> <dd><b></b>1211天前</dd> </dl> <div class="clear"></div> </li> <li> <a href="https://www.zhengruan.com/news/41129" class="img"> <img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="" alt="如何在在线答题中实现试卷的自动批改和自动评分"> <span>9</span> </a> <dl> <dt><a href="https://www.zhengruan.com/news/41129" title="如何在在线答题中实现试卷的自动批改和自动评分" class="aBlack">如何在在线答题中实现试卷的自动批改和自动评分</a></dt> <dd><b></b>1039天前</dd> </dl> <div class="clear"></div> </li> </ul> </div> <div class="zrRmgzBox" style="margin-top:20px;"> <div class="zrByddTitle"> <span><h2>相关推荐</h2></span> </div> <ul class="zrXwdtList"> <li><a href="https://www.zhengruan.com/news/736200" title="using namespace 使用中遇到的问题怎么解决" class="aBlack">using namespace 使用中遇到的问题怎么解决</a></li> <li><a href="https://www.zhengruan.com/news/736199" title="c语言函数递归实操经验总结：这些技巧很实用" class="aBlack">c语言函数递归实操经验总结：这些技巧很实用</a></li> <li><a href="https://www.zhengruan.com/news/736198" title="c语言函数递归怎么选？常见方案对比分析" class="aBlack">c语言函数递归怎么选？常见方案对比分析</a></li> <li><a href="https://www.zhengruan.com/news/736197" title="Objective-C 内存管理入门：从 alloc 到 dealloc 的生命周期详解" class="aBlack">Objective-C 内存管理入门：从 alloc 到 dealloc 的生命周期详解</a></li> <li><a href="https://www.zhengruan.com/news/736196" title="如何正确使用 dealloc 以避免 iOS 应用中的内存泄漏" class="aBlack">如何正确使用 dealloc 以避免 iOS 应用中的内存泄漏</a></li> <li><a href="https://www.zhengruan.com/news/736195" title="深入理解 Objective-C 中的 dealloc 方法：内存管理核心机制" class="aBlack">深入理解 Objective-C 中的 dealloc 方法：内存管理核心机制</a></li> <li><a href="https://www.zhengruan.com/news/736194" title="理解 native2ascii：Java 国际化开发中的字符编码工具" class="aBlack">理解 native2ascii：Java 国际化开发中的字符编码工具</a></li> <li><a href="https://www.zhengruan.com/news/736193" title="如何使用 native2ascii 转换中文字符为 Unicode 转义序列" class="aBlack">如何使用 native2ascii 转换中文字符为 Unicode 转义序列</a></li> <li><a href="https://www.zhengruan.com/news/736192" title="Java native2ascii 命令详解：解决属性文件乱码问题" class="aBlack">Java native2ascii 命令详解：解决属性文件乱码问题</a></li> </ul> </div> <div class="zrRmgzBox" style="margin-top:30px;"> <div class="zrByddTitle"> <span><h2>热门关注</h2></span> </div> <ul class="zrRmgzList"> <li> <span><a href="https://www.zhengruan.com/news/soft50" title="ZBrushCore 2018 简体中文"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20200428/d1fa39352e43851176461d0cb5d2fa4a.jpg" alt="ZBrushCore 2018 简体中文"></a></span> <dl> <dt><a href="https://www.zhengruan.com/news/soft50" title="ZBrushCore 2018 简体中文" class="aBlack">ZBrushCore 2018 简体中文</a></dt> <dd class="unstar unstar5"></dd> <dd class="cont1">￥0.00-￥0.00</dd> </dl> <div class="clear"></div> </li> <li> <span><a href="https://www.zhengruan.com/news/soft9" title="MindMapper 17 英文"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20200428/ea7aec177ceae593b3087c8883a39f9f.jpg" alt="MindMapper 17 英文"></a></span> <dl> <dt><a href="https://www.zhengruan.com/news/soft9" title="MindMapper 17 英文" class="aBlack">MindMapper 17 英文</a></dt> <dd class="unstar unstar5"></dd> <dd class="cont1">￥0.00-￥0.00</dd> </dl> <div class="clear"></div> </li> <li> <span><a href="https://www.zhengruan.com/news/soft66" title="Listary 5 Pro"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20200428/4b0dc9f65ce760eaad6876ae16635b41.jpg" alt="Listary 5 Pro"></a></span> <dl> <dt><a href="https://www.zhengruan.com/news/soft66" title="Listary 5 Pro" class="aBlack">Listary 5 Pro</a></dt> <dd class="unstar unstar5"></dd> <dd class="cont1">￥0.00-￥0.00</dd> </dl> <div class="clear"></div> </li> <li> <span><a href="https://www.zhengruan.com/news/soft34" title="Exposure X5 简体中文"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20200428/032e139d392ab49c541248e47b8052b4.jpg" alt="Exposure X5 简体中文"></a></span> <dl> <dt><a href="https://www.zhengruan.com/news/soft34" title="Exposure X5 简体中文" class="aBlack">Exposure X5 简体中文</a></dt> <dd class="unstar unstar5"></dd> <dd class="cont1">￥0.00-￥0.00</dd> </dl> <div class="clear"></div> </li> <li> <span><a href="https://www.zhengruan.com/news/soft114" title="Exposure X5 简体中文"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20200428/032e139d392ab49c541248e47b8052b4.jpg" alt="Exposure X5 简体中文"></a></span> <dl> <dt><a href="https://www.zhengruan.com/news/soft114" title="Exposure X5 简体中文" class="aBlack">Exposure X5 简体中文</a></dt> <dd class="unstar unstar5"></dd> <dd class="cont1">￥0.00-￥0.00</dd> </dl> <div class="clear"></div> </li> </ul> </div> </div>  <div class="clear"></div> </div>    <div class="zrFoot"> <div class="zrFootIn"> <div class="zrFootMsg">网站备案号： <a href="https://beian.miit.gov.cn/" target="" style="text-decoration: none;"> <font color="#9b9db0">苏ICP备2026018738号-1 联系邮箱：bd@zhengruan.com<br> Copyright ©2018-2020</font> </a> </div> </div> </div>  <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?3835539565b311d85319cd21da8fd0d9"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script>  <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '36']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script>   <script> function countView(){ $.ajax({ type: "post", url: "/countView?&time="+new Date().getTime(), data:{'type':'news','id':"629065"}, async:false, dataType: "json", success: function(result){ console.log(result) }, error:function(){ } }); } function code_highlight() { SyntaxHighlighter.all() } $(function(){ code_highlight(); countView(); $("#qrcode").qrcode({width:150,height:150,text:"https://m.zhengruan.com/news/629065"}) }) </script> </body> </html>

VSCode快速生成HTML骨架_Emmet语法的高级使用技巧

Emmet缩写不生效？检查VSCode的文件关联和触发设置

Emmet缩写不生效？检查VSCode的文件关联和触发设置

快速生成带语义结构的HTML骨架：不只是!

快速生成带语义结构的HTML骨架：不只是`!`