[IDE] Emmet使用

1. HTML

(1)生成默认文档

! 
=> 生成HTML5文档类型

html:5
=> 生成HTML5文档类型

html:xt 
=> 生成XHTML过渡文档类型

html:4s 
=> 用于HTML4严格文档类型

例如:

!
=>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

(2)快速生成标签

div#test
=>
<div id="test"></div>

div.test
=>
<div class="test"></div>

div#test.test
=>
<div id="test" class="test"></div>

a[href=#]
=>
<a href="#"></a>

div{test}
=>
<div>test</div>

(3)嵌套标签
<u></u>>:子元素符号
<u></u>+:同级标签符号
<u></u>^:可以使该符号后的标签提升一行

div>span+div^p
=>
<div>
    <span></span>
    <div></div>
</div>
<p></p>

(4)分组

(.foo>h1)+(.bar>h2)
=>
<div class="foo">
    <h1></h1>
</div>
<div class="bar">
    <h2></h2>
</div>

(5)隐式标签
不写标签名,会根据父标签自动判断。
li:用于ul和ol中
tr:用于table、tbody、thead和tfoot中
td:用于tr中
option:用于select和optgroup中

select>.test^.test
=>
<select name="" id="">
    <option class="test"></option>
</select>
<div class="test"></div>

(6)多个元素

ul>li*3
=>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

2. CSS

(1)属性

body{
    w100p+h200
}
=>
body{
    width: 100%;
    height: 200px;
}

单位别名列表:
p 表示%
e 表示 em
x 表示 ex

(2)自动加供应商前缀

trf
=>
-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;

(3)手动加供应商前缀

-wm-trf
=>
-webkit-transform: ;
-moz-transform: ;
transform: ;

前缀缩写如下:

w 表示 -webkit-
m 表示 -moz-
s 表示 -ms-
o 表示 -o-

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 8,706评论 1 41
  • http://www.iteye.com/news/27580Emmet的前身是大名鼎鼎的Zen coding,如...
    冰J冰阅读 8,343评论 0 6
  • 一、快速编写HTML代码 1. 初始化 HTML文档需要包含一些固定的标签,比如、、等,现在你只需要1秒钟就可以输...
    aymincoder阅读 5,935评论 0 4
  • Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生。它使用仿CS...
    清风沐沐阅读 5,196评论 2 5
  • 爸爸眼里的断奶是什么样的呢? 我们一起读下这位爸爸的日记。 03-20 大事 老婆要给闺女断奶了! 从闺女出生以来...
    范范戴戴阅读 3,514评论 0 3

友情链接更多精彩内容