生成html5代码--笔记回顾
1、生成html5代码
!+回车
html:5+回车
(vscode)
2、生成子代的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 子代结构:div > p > span > strong -->
<!-- div>p>span>strong -->
<div>
<p>
<span>
<strong></strong>
</span>
</p>
</div>
</body>
</html>
3、生成兄弟元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 兄弟结构:h2+div+p -->
<h2></h2>
<div></div>
<p></p>
</body>
</html>
4、子代+兄弟结构练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- emment:div>h2+a+p>span -->
<div>
<p>
<h2></h2>
<a href=""></a>
<span></span>
</p>
</div>
</body>
</html>
5、生成多个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 生成多个元素:div>p*5 -->
<div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<!-- div>p*3+div*3 -->
<div>
<p></p>
<p></p>
<p></p>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
6、生成上一个层级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- *多个和^上一层级 -->
<!-- emmet:div>p>span+h2+a -->
<div>
<p>
<span></span>
<h2></h2>
<a href=""></a>
</p>
</div>
<!-- 等效 -->
<!-- emmet:div>p>span^h2+a -->
<div>
<p><span></span></p>
<h2></h2>
<a href=""></a>
</div>
<!-- emmet:div>p>span^^h1+strong -->
<div>
<p><span></span></p>
</div>
<h1></h1>
<strong></strong>
</body>
</html>
7、对元素进行分组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- emmet:div>p>span^^h1+strong -->
<div>
<p><span></span></p>
<h2></h2>
<a href=""></a>
</div>
<h1></h1>
<strong></strong>
<!-- emmet:div>(p>span)+h2+a -->
<div>
<p><span></span></p>
<h2></h2>
<a href=""></a>
</div>
<!-- emmet:(div>(p>span)+h1+a)+h1+strong -->
<div>
<p><span></span></p>
<h2></h2>
<a href=""></a>
</div>
<h1></h1>
<strong></strong>
</body>
</html>
8、生成元素的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- div#main -->
<div id="main"></div>
<!-- div.box -->
<div class="box"></div>
<!-- div[title] -->
<div title=""></div>
<!-- div[title="title1"] -->
<div title="title1"></div>
<!-- emmet:div#main>div.box+p.p1+span.title^div#footer>div.box2 -->
<div id="main">
<div class="box"></div>
<p class="p1"></p>
<span class="title"></span>
</div>
<div id="footer">
<div class="box2"></div>
</div>
<!-- emmet:div#header.box1[title="title1"] -->
<div id="header" class="box1" title="title1"></div>
</body>
</html>
9、生成元素的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- emmet:div{我是div元素} -->
<div>我是div元素</div>
<!-- emmet:div#main.box{我是div元素} -->
<div id="main" class="box">我是div元素</div>
</body>
</html>
10、生成结构有数字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 1.属性结构有数字 -->
<!-- emmet:div.box$*4 -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<!-- 2.内容中有数字 -->
<!-- emmet:div>p{文字内容$}*5} -->
<div>
<p>文字内容1</p>
<p>文字内容2</p>
<p>文字内容3</p>
<p>文字内容4</p>
<p>文字内容5</p>
</div>
<!-- 练习 -->
<!-- ul>li.item$*5 -->
<!-- ul>li.item$$$*5 -->
</body>
</html>
11、隐式标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- div是隐藏的标签 -->
<!-- emmet:#main -->
<div id="main"></div>
<!-- emmet:.box -->
<div class="box"></div>
<!-- emmet: ul>li.item${列表元素$}*5 -->
<!-- li可以隐藏 -->
<!-- emmet: ul>.item${列表元素$}*5 -->
<ul>
<li class="item1">列表元素1</li>
<li class="item2">列表元素2</li>
<li class="item3">列表元素3</li>
<li class="item4">列表元素4</li>
<li class="item5">列表元素5</li>
</ul>
<!-- 练习 -->
<!-- emmet:table>#row$*4>[clospan="2"] -->
<table>
<tr id="row1">
<td colspan="2"></td>
</tr>
<tr id="row2">
<td colspan="2"></td>
</tr>
<tr id="row3">
<td colspan="2"></td>
</tr>
<tr id="row4">
<td colspan="2"></td>
</tr>
</table>
</body>
</html>
12、CSS的emmet用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
/* emmet: w200+h200+m20+p30 */
/* emmet: w200 */
width: 200px;
/* emmet: h200 */
height: 200px;
/* emmet: m20 */
margin: 20px;
/* emmet: p30 */
padding: 30px;
/* emmet: fz20 (font-size px)*/
font-size: 20px;
/* emmet: fz1.5 (font-size em)*/
font-size: 1.5em;
/* emmet: fw700 (font-weight)(默认无单位)*/
font-weight: 700;
/* emmet: lh50 (line-high)(默认无单位) */
line-height: 50;
/* emmet: bgc */
background-color: #fff;
/* emmet: dib */
display: inline-block;
}
/* emmet: m20-30-40-50 (上右下左) */
/* emmet: m10px20px */
/* emmet: p-10-20--30 (上右下左) */
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>