HTML 输入扩展
与 CSS 编辑器相似,HTML 代码编辑同样支持 Emmet 提供的缩略语扩展功能。
HTML 固定标签
HTML 文档需要包含某些固定的标签,如、
、等,例如:输入“!”或“html:5”,按“Tab”生成。Document表9 可识别的 HTML 固定标签缩写
缩写
说明
html:5或!
用于 HTML5 文档类型
html:xt
用于 XHTML 文档类型
html:4s
用于 HTML4 严格文档类型
标签对
输入标签的名字,如 div 或者 p 来生成 HTML 的标签对,例如:输入div,按“Tab”生成
嵌套操作符
>:子级符号,表示嵌套的元素,例如:输入div>ul>li,按“Tab”生成。
+:同级标签符号,例如:输入div+p+bq,按“Tab”生成。
^:可以使该符号后的标签上升一级,例如:输入div+div>p>span+em^bq,按“Tab”生成。
*:该符号可以定义多行元素,例如:输入ul>li*5,按“Tab”生成。
():该符号把要囊括在一起的元素组成一组,例如:输入div>(header>ul>li*2>a)+footer>p,按“Tab”生成。
属性操作符
id 和 class:“#”后面是id的名字,“.”后面是 class 的名字,例如:输入div#header+div.page+div#footer.class1.class2.class3,按“Tab”生成。
自定义属性:可使用[attr]来标记自定义的元素,例如:输入td[title="Hello world!" colspan=3],按“Tab”生成。
$:该符号能对项目做标记,例如:输入ul>li.item$*5,按“Tab”生成。
或输入ul>li.item$$$*5,按“Tab”生成。
@:该符号能改变数列的方向(升序或降序)和基准(如起始值),例如:在$后加上@-是降序,输入ul>li.item$@-*5,按“Tab”生成。
在$后加上@N是含有基准的排序,输入ul>li.item$@3*5,按“Tab”生成。
亦可组合使用,如$@-N是含有基准的降序,输入ul>li.item$@-3*5,按“Tab”生成。
{}:大括号用来添加文本,例如:输入a{Click me},按“Tab”生成。
隐式标签
很多时候可以省略输入标签名,Emmet 会代替完成,例如:当需要输入div.content时,可以仅输入.content,按“Tab”生成。
Emmet 会根据父标签进行判定,例如:在
- 中输入.item,按“Tab”生成。
表10 可识别的隐式标签
缩写
允许使用范围
li
用于 ul 和 ol 中
tr
用于 table、tbody、thead 和 tfoot 中
td
用于 tr 中
option
用于 select 和 optgroup 中