快速编写html，css代码
1. 认识emmet语法
- Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具
- 在前端开发的过程中，一大部分的工作是写 HTML、CSS 代码，如果手动来编写效果会非常低
- VsCode内置了Emmet语法，在后缀为.html/.css中输入缩写后按Tab/Enter键即会自动生成相应代码
2. !和html:5
1
2
3
4
5
6
7
8
9
10
11
12
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
|
3. >(子代)和+(兄弟)
3.1. div>ul>li
1
2
3
4
5
| <div>
<ul>
<li></li>
</ul>
</div>
|
3.2. div+div>p>span+i
1
2
3
4
| <div></div>
<div>
<p><span></span><i></i></p>
</div>
|
3.3. div+p+ul>li
1
2
3
4
5
| <div></div>
<p></p>
<ul>
<li></li>
</ul>
|
4. *(多个)和^(上一级)
4.1. ul>li*5
1
2
3
4
5
6
7
| <ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
|
4.2. div+div>p>span^h1
1
2
3
4
5
| <div></div>
<div>
<p><span></span></p>
<h1></h1>
</div>
|
4.3. div+div>p>span^^^^h1
1
2
3
4
5
| <div></div>
<div>
<p><span></span></p>
</div>
<h1></h1>
|
5. ()(分组)
div>(header>ul>li*2>a)+footer>p
1
2
3
4
5
6
7
8
9
10
11
| <div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
|
6. 属性
6.1. #(id属性)
div#header
6.2. .(class属性)
div.container
1
| <div class="container"></div>
|
6.3. [](普通属性)
a[href]
img[src]
6.4. 综合
div#header+div#main>.container>a[href ]
1
2
3
4
| <div id="header"></div>
<div id="main">
<div class="container"><a href=""></a></div>
</div>
|
7. {}(内容)
a[href=”http://www.baidu.com"]{百度一下}
1
| <a href="http://www.baidu.com">百度一下</a>
|
8. $(数字)
ul>li*5{$}
1
2
3
4
5
6
7
| <ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
|
9. CSS Emmet
9.1. w100
9.2. w20+h30+m40+p50
1
2
3
4
| width: 20px;
height: 30px;
margin: 40px;
padding: 50px;
|
9.3. bd1#cs
9.4. m20-30-40-50
1
| margin: 20px 30px 40px 50px;
|
9.5. dib