初始化 html

  • html:5 或 !: 用于 HTML5 文档类型
  • html:xt 用于XHTML过度文档类型
  • html:4s 用于HTML4 严格文档类型

添加类、ID、文本和属性

类和ID

p.bar

1
<p class="bar"></p>

p.bar#foo

1
<p class="bar" id="foo"></p>

元素内容和属性

h1{foo}

1
<h1>foo</h1>

a[href=#]

1
<a href="#"></a>

h1{foo}a[href=#]

1
2
<h1>foo</h1>
<a href="#"></a>

嵌套

Emmet 嵌套使用方法的例子

> 子元素

ul>li*10{test}

1
2
3
4
5
6
7
8
9
10
11
12
<ul>
	<li>tset</li>
	<li>tset</li>
	<li>tset</li>
	<li>tset</li>
	<li>tset</li>
	<li>tset</li>
	<li>tset</li>
	<li>tset</li>
	<li>tset</li>
	<li>tset</li>
</ul>

ul.ul-wrapper>li.item*10{test}

1
2
3
4
5
6
7
8
9
10
11
12
<ul class="ul-wrapper">
    <li class="item">test</li>
    <li class="item">test</li>
    <li class="item">test</li>
    <li class="item">test</li>
    <li class="item">test</li>
    <li class="item">test</li>
    <li class="item">test</li>
    <li class="item">test</li>
    <li class="item">test</li>
    <li class="item">test</li>
</ul>

+ 同级标签符号

h1{foo}+a[href=#]

1
2
<h1>foo</h1>
<a href="#"></a>

p.ptest+div.divtest#one+img.img*3

1
2
3
4
5
<p class="ptest"></p>
<div class="divtest" id="one"></div>
<img src="" alt="" class="img">
<img src="" alt="" class="img">
<img src="" alt="" class="img">

p.ptest+div.divtest#one+img[src=test.jpg].img*3

1
2
3
4
5
<p class="ptest"></p>
<div class="divtest" id="one"></div>
<img src="test.jpg" alt="" class="img">
<img src="test.jpg" alt="" class="img">
<img src="test.jpg" alt="" class="img">

^ 可以使该符号前的标签提升一行

分组

(.foo>h1>a[href=https://zsf90.com])+(.bar>h2.title)

1
2
3
4
5
6
<div class="foo">
    <h1><a href="https://zsf90.com"></a></h1>
</div>
<div class="bar">
    <h2 class="title"></h2>
</div>

定义多个带属性的元素

ul>li.item$*3

1
2
3
4
5
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

.wrapper>.one{One}+.two{Two}+.three{Three}+.four{Four}+.five{Five}+.six{Six}

1
2
3
4
5
6
7
8
<div class="wrapper">
    <div class="one">One</div>
    <div class="two">Two</div>
    <div class="three">Three</div>
    <div class="four">Four</div>
    <div class="five">Five</div>
    <div class="six">Six</div>
</div>

CSS 缩写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.demo {
	/* w100 */
	width: 100px;

	/* h10p+m5rem */
	height: 10%;
	margin: 5rem;

	/* 单位名称
		p 表示 %
		e 表示 em
		x 表示 ex
		rem 表示 rem
	*/

	/* bc */
	background-color: red;

	/* bi */
	background-image: url();
}