emmet语法？使用HBuilder的Emmet语法： 步骤：在HBuilder的代码编辑区域输入ul>li*5，然后按住Tab键。 结果：HBuilder会自动生成一个包含五个
朋友推荐用Hbuilder编辑器，看了下Hbuilder官网和那视频，感觉牛逼哄哄的，
自己也就体验了一下，打开Hbuilder的快捷键列表，每个快捷键都体验了一下，以下展示出来的，每一个都是精华，每一个快捷键都要知道怎么用，而且会经常用。
HBuilder是当前最快的HTML开发工具，强大的代码助手帮你快速完成开发，最全的语法库和浏览器兼容性数据让浏览器碎片化不再头痛。
利用HBuilder快捷键可以代替鼠标做一些工作，可以利用键盘快捷键打开、关闭和导航“开始”菜单、桌面、菜单、对话框以及网页，Word里面也可以用到快捷键。
那就几乎可以脱离鼠标来写前端代码了。
另外还有一些实用的组合键：
Alt+T→V(检验语法文档)
Alt+L→H(代码历史版本)
Hbuilder也要吐槽一下：
1.打开相对慢。
2.新建文件，为什么不能存放到电脑的目录。
3.emmet输入 w100，变成了w1→white-space: ;，弄得每次都要w→Tab→再输入100px，这个体验超级繁琐。
4.style，script标签默认就不要带'type=***'了，所有浏览器都支持。
5.图片不能自动获取宽高。
下面是其他网友的补充：
Alt+[匹配括号
Alt+↓跳转到下一个可编辑区
Ctrl+Alt+j合并下一行
Ctrl+Alt+←选择助手
Shift+回车
Shift+空格
Ctrl+回车换行
Strl+Shift+回车向上换行
Ctrl+d删除一行
Ctrl+Shift+d复制上一行
创建HTML结构： h 8 （敲h激活代码块列表，按8选择第8个项目，即HTML代码块，或者敲h t Enter）
中途换行： 'Ctrl+Enter'
设置charset： m e 6 Enter
引用外部js： s 2 Enter 'Ctrl+Enter'
创建js区块： s Enter
创建函数： f u n 3 （或者 f u n n Enter）
为函数命名：W h o i s E
跳转到函数末尾： End 'Alt+[' ↓ 'Ctrl+Enter' （Alt+[是跳转到匹配括号的意思）
创建style节点： s t Enter ↓ 'Ctrl+Enter'
引用外部css： l Enter Enter
跳转到下一个可编辑区： 'Alt+↓'
创建img标签： i m Enter Enter 'Ctrl+Enter'
插入换行符： 'Shift+Enter' Enter
创建div并设id和class： d i Enter d 1 → Space c Enter Enter （这里提示的class列表是在test.css里定义的）
转到class的定义处：'Ctrl+Alt+D' （按Alt点击鼠标也可以）
关闭标签页：'Ctrl+w' （切换标签页则可以用Ctrl+e）
添加自定义属性data-test并赋值1： → Space d 7 t e s t Tab 1
合并下行：'Ctrl+Alt+j' 'Ctrl+Enter'
创建超链接并设id： a Enter Enter → Space i Enter a 1
使用选择助手选中#d1：'Ctrl+Alt+←' 'Ctrl+Alt+←' 'Ctrl+Alt+←' (如果快捷键冲突,可使用Alt+S U，或者鼠标双击引号)
重新修改链接指向新创建的a1： BackSpace 'Alt+/' Enter 'Ctrl+Enter'
创建ul： u Enter
折叠代码：'Ctrl+Alt+-'
向上插入空行：'Ctrl+Shift+Enter' Tab （一般Ctrl+某字母的快捷键，变成Ctrl+Shift+相同字母，大多代表相反意义）
没有代码块时，使用emmet语法创建标签：n a v Tab （如果不知道emmet技术，请搜索学习，前端必学）
使用shift转码输入空格：'Shift+Space' （如果与输入法快捷键冲突，也可输入& n 2）
创建按钮：'Ctrl+Enter' i n Enter Enter Tab Tab w h o Space i s Space e →
添加点击事件： Space o n c k Enter w h o Enter → （onck是模糊匹配，不用输入完整单词也会模糊匹配，除代码块外所有语法提示都支持模糊匹配）
使用转到定义到js函数：'Ctrl+Alt+D' ↓
------以下为js部分
定义一个变量e： v a r Space e ; Enter
为e赋值：e Space = Space d o Enter . g 6 " Enter （可提示样式列表）
使用回车或Tab跳转光标到绿色竖线（若没有绿色竖线请使用End到行尾）：Enter ; Enter
为e赋值2：e Space = Space d o Enter . g 8 " d 8 Enter ; Enter （可提示标签列表）
为e赋值3(这个代码块很常用)：e Space = Space $ (或者dg) Enter 2 Enter ; Enter （可提示id列表，注意选择d1）
为e设置algin属性： e . s e 2 " a l Enter → , " c Enter Enter ; Enter
设置自定义属性：e . s e 2 " d Enter → , " 2 Enter ; Enter
提示字体列表： e . s t Enter . f o 2 = " Enter Enter ; Enter
提示图片列表： e . s t Enter . b 7 = " h b Enter Enter ; Enter
还能这么写css： e . s t Enter . c s 2 = " b 7 h b Enter → ; Enter
写switch对e判断：s w 2 e . s t Enter . d i s Enter Tab
case处提示display的值域：" - w e Enter
跳转到switch结尾（有绿色竖线）：Enter Enter
写if代码块：i f f Enter (或者使用i f 2)
为if添加条件判断属性里的样式：e . g e t a t Enter " c Enter Enter ! = " Enter ↓
设置e的样式：e . c l 2 (此处也可以用c l n Enter) = " Enter Enter ; ↓ Enter
js里可以提示html： e . i n n Enter = " < f o Enter Space c o Enter Enter Enter ; Enter
e赋值改为超链接：e Space = Space $ Enter Enter Enter ; Enter
给a1加链接地址：e . h r Enter = " Enter Enter ; Enter
给a1加target：e . t 5 = " Enter Enter ; Enter
e赋值改为image对象：e Space = Space n e w Space i m 6 Enter ; Enter
为img增加图片： e . s r Enter = " Enter Enter ; Enter
e赋值改为indexedDB对象：e Space = Space w i Enter . i Enter Space | | Space w i Enter . i n d e x e d 5 Space | | Space w i Enter . i n d e x e d 3 Space | | Space w i Enter . i n d e x e d 2 ; Enter
确认e可被浏览器识别：i f f Enter (也可以使用i f 2) t y 4 e Enter ↓
执行indexdb的方法：e . o p Enter " t e s t Enter ; ↓ Enter
------以下为删除又添加上外部css引用
定义head变量：v a r Space h e a d Space = Space d o Enter . g 8 " h e Enter Enter [ 0 → ; Enter
with里也可以提示： w i t h h (或者w i t 2) Enter h Enter ↓
获取head的最后一个子节点：v a r Space l Space = Space l e c Enter ; Enter （with里的head可直接识别子对象）
去掉该子节点：r e m 6 l → ; ↓ Enter （head的lastElementChild就是外部引用的css）
动态生成一个css文件引用：e Space = Space d c Enter l 5 Enter ; Enter
添加属性：e . r 3 = " s t y Enter Enter ; Enter
设置type： e . t y Enter = " c Enter Enter ; Enter
设置href：e . h r Enter = " . c Enter Enter ; Enter
将e加入head中：h Enter . a p Enter e Enter Enter ; Enter
------演示重构，即重命名变量
用代码块定义一个变量s：v a r s Enter Tab e Space i s Space 'Ctrl+Enter'
判断e的属性：i f e（或i f 3） Enter e . g 2 " d Enter Enter = = n u 2 ↓
为s赋值：s = s + e . o u Enter ; 'Alt+↓'
为s赋值：s = s + " u n k n o w → ; ↓ Enter
将s打印出来：a l Enter s
选择s并转到定义：'Shift+←' 'Ctrl+Alt+D'（按Alt点击鼠标也可以）
重构s的命名为ss：'Ctrl+F2' Enter s s Enter Enter (弹出对话框可预览重构结果)
跳转到函数末尾：'Alt+↓' 'Alt+↓' Enter
添加一个启动事件： a d Enter " d o m l o Enter → , f u n a Enter (此处也可以是f u 6) ↓
提示自定义函数的jsdoc： f i n i Enter 1
------css部分
跳转到CSS：'Alt+↓'
给body加样式：b o Enter { Enter
emmet方式增加textalign：t c Tab Enter
模糊匹配增加user-select：u s e r s 4 5
写下一个样式：↓ Enter
为input增加样式：i n Enter [ t y Enter = Enter → { Enter
使用代码块设置宽度：w 9 9 0 ↓ Enter
为ul加样式：u l { d n Enter 'Ctrl+Enter'
ID也可以提示：# 2 { Enter
提示字体列表：f f Enter Enter Enter
回车自动补行尾分号：Enter
增加background-image：b i Enter h b Enter
大功告成，保存并运行起来看看：'Ctrl+s' 'Ctrl+r'
如果你屏幕够宽，也可以点击右上角视图切换，换到边改边看视图Ctrl+P，左边保存右边自动刷新
HBuilder快捷键：
中途换行： 'Ctrl+Enter'
向上插入空行：'Ctrl+Shift+Enter' Tab （一般Ctrl+某字母的快捷键，变成Ctrl+Shift+相同字母，大多代表相反意义）
跳转到函数末尾： End 'Alt+[' ↓ 'Ctrl+Enter' （Alt+[是跳转到匹配括号的意思）
插入换行符： 'Shift+Enter'
转到class的定义处/转到function的定义处：'Ctrl+Alt+D' （按Alt点击鼠标也可以）
合并下行：'Ctrl+Alt+j'
折叠代码：'Ctrl+Alt+-'
使用shift转码输入空格：'Shift+Space'
本文将教你零基础快速创建前端标签，提升编写效率。如百度首页的热搜榜，通过无序列表实现时，手动编写大量重复代码效率低下。这时，Emmet这个强大的前端开发工具就派上用场了。Emmet的简练语法规则允许你在书写标签名和文本内容后，通过tab键自动补全HTML结构，如在VSCode中，只需输入"(标签名{标签文本内容}+tab)"即可快速生成。
实践一下：新建一个"shortcut_key.html"页面，使用"!"配合tab键自动生成基本结构，然后在body中使用"ctrl/"添加注释创建标签。例如，输入"h1{这是一级标题}"并按tab，即可得到一个带有文本的h1标签。Emmet不仅可以用于单个标签，还能创建多个相同或不同标签，如"h1{这是一级标题}*4"会生成四个带有对应文本的h1。
嵌套标签的书写也一样简便，如"ul>li{这是ul里面的li}*5"会创建一个包含五个li的ul。Emmet的语法广泛适用于各种标签和嵌套结构，只需记住这些基本规则，后续学习中会有更多实用语法等待你发现。
Notepad++中常用的前端开发插件包括：
Emmet，这款插件原名Zen Coding，它使用仿CSS选择器的语法来快速生成HTML和CSS代码，显著提升了代码书写速度。Emmet无视了编辑器的自动提示和自动完成，可以秒杀各种自定义快捷键或AHK热字符串。它通过智能简洁的方式，大幅减少了输入，让你能够快速地编写复杂和枯燥的HTML和CSS代码。现在你可以在Notepad++的插件管理器里直接安装Emmet。
Finger Text是一个标签代码替换和文本自动完成插件，它能够显著提高代码的书写速度，提升工作效率。例如，输入"if"然后按Tab键，它会自动替换为一个完整的if结构。当然，具体替换方式可以进行配置。
TextFx号称是Notepad++上最好用的插件，具有超强的文本处理能力，如文本编码处理等。编程很大程度上是文本工作，因此这个插件对开发人员非常有用。以前是默认安装的，现在需要手动安装。
Task List可以自动扫描当前文档，将所有"TODO:"开头的注释找出来，并列在右边的面板中，双击可以跳转到该行。这和Eclipse里的TODO功能很相似，方便标记和查找未完成的工作。
HTML Tag插件在编辑HTML代码时非常有用，主要功能包括匹配选择的标签，对HTML标签进行编码和解码，以及对JS进行编码和解码。
HBuilder使用教程：
一、安装HBuilder下载地址：访问HBuilder官网http://www.dcloud.io/，点击“免费下载”获取最新版的HBuilder安装包。 版本选择：根据操作系统选择对应的版本。
二、新建项目操作步骤：依次点击“文件”>“新建”>“Web项目”。 填写信息：在弹出窗口中，填写项目名称、选择或填写项目保存路径，并选择使用的模板。
三、创建HTML页面操作步骤：在项目资源管理器中选择新建的项目，依次点击“文件”>“新建”>“HTML文件”，并选择空白文件模板。
四、边改边看功能进入模式：按下Ctrl+P进入边改边看模式。 效果预览：在该模式下，保存HTML、JS、CSS文件时，会自动刷新浏览器以显示当前页面效果。
在Sublime Text 3中创建HTML文件没有提示的原因可能是没有正确设置文件的语法模式。以下是可能导致该问题的原因及解决方法：
未设置正确的语法模式：
Sublime Text 3不会自动识别新建的文档为HTML文件，需要手动设置。
解决方法：使用快捷键Ctrl + Shift + P打开命令模式，输入“sshtml”进行模糊匹配，选择“Set Syntax: HTML”将语法切换到HTML模式。
未使用HTML5模板：
仅仅设置语法模式为HTML，可能不会立即显示HTML5的整体结构提示。
解决方法：在新建的HTML文档中，输入“!”，然后按下Tab键或者Ctrl + E，这会自动补全为HTML5的整体结构。
插件未安装或未启用：
Sublime Text 3的一些插件可以提供更丰富的HTML代码提示功能。
解决方法：确保已安装相关插件，并在设置中启用它们。对于Emmet插件，它通常默认包含在Sublime Text 3中，只需确保语法模式正确即可使用其提供的代码提示功能。
以上就是emmet语法的全部内容，HBuilder 中的 Emmet 插件使用方法如下：1. 基本使用： 快速生成HTML结构：在HBuilder的编辑器中，输入HTML标签的简写，然后按Tab键或Enter键，Emmet会自动将其扩展为完整的HTML结构。例如，输入div.container>ul>li*3，然后按Tab键，会生成一个包含三个列表项的ul元素，内容来源于互联网，信息真伪需自行辨别。如有侵权请联系删除。
