美文网首页Other
[IDE] Emmet使用

[IDE] Emmet使用

作者: 何幻 | 来源:发表于2016-03-05 08:07 被阅读9次

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-

相关文章

  • [IDE] Emmet使用

    1. HTML (1)生成默认文档 例如: (2)快速生成标签 (3)嵌套标签 >:子元素符号 +:同级标签符...

  • Atom常用插件

    Atom Beautify Atom Ide Ui Docblockr Emmet File Icons Ide ...

  • [IDE] Emmet安装

    (1)安装Notepad++ (2)下载PythonScript插件 (3)安装到Notepad++根目录 (4)...

  • 2018-08-31 学习笔记3

    前端代码模板:Emmet Emmet 的使用 Emmet 的介绍 Emmet 的前身叫做:Zen Coding,也...

  • ZendStudio 常用插件

    emmet使用Emmet开发html,效率会很高。在welcome页面查找emmet,或者在welcome页面的E...

  • Emmet使用

    1、创建H5页面 html:5 TAB键 或者直接!+TAB效果 Docum...

  • Emmet语法

    使用Emmet语法可快速生成html框架和标签,以及css代码 ps~本人使用的vscode编辑器 Emmet语法...

  • Sublime Text无法使用Emmet插件(附带手动安装)

    先贴一个演示Emmet技巧的帖子,前端一般看了就离不开Emmet了,哈哈。 今天发现Emmet插件无法使用,半天也...

  • vscode v1.15.0 使用了emmet2.0,Tab键不

    新版本的vs code使用,emmet2.0,tab键不在是触发emmet了,在html文件中将无法使用tab键快...

  • Emmet快捷键

    Emmet的前身是Zen coding,它使用缩写,来提高html/css的编写速度。Emmet在webstorm...

网友评论

    本文标题:[IDE] Emmet使用

    本文链接:https://www.haomeiwen.com/subject/qlynkttx.html