Emmet语法
程序员文章站
2022-03-24 09:07:34
...
<!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>
<!-- #id 自动生成 id -->
<div id="id"></div>
<!-- p#pid{pID} {}:内容 -->
<p id="pid">pID</p>
<!-- .class 自动生成 class-->
<div class="class"></div>
<!-- p.pclass{p类名} -->
<p class="pclass">p类名</p>
<!-- div>(table>tr*5>td*3>a{导航$})+p{emmet自动生成} -->
<!-- *:重复生成元素 , >:下一层 ,+: 同层 , $ : 自动编号, ():分组 , -->
<div>
<table>
<tr>
<td><a href="">导航1</a></td>
<td><a href="">导航2</a></td>
<td><a href="">导航3</a></td>
</tr>
<tr>
<td><a href="">导航1</a></td>
<td><a href="">导航2</a></td>
<td><a href="">导航3</a></td>
</tr>
<tr>
<td><a href="">导航1</a></td>
<td><a href="">导航2</a></td>
<td><a href="">导航3</a></td>
</tr>
<tr>
<td><a href="">导航1</a></td>
<td><a href="">导航2</a></td>
<td><a href="">导航3</a></td>
</tr>
<tr>
<td><a href="">导航1</a></td>
<td><a href="">导航2</a></td>
<td><a href="">导航3</a></td>
</tr>
</table>
<p>emmet自动生成</p>
</div>
<!-- .div+p -->
<div class="div"></div>
<p></p>
<!-- .div>p{上一层}>a{子元素}^p{父元素层} ^:上层位置 -->
<div class="div">
<p>上一层<a href="">子元素</a></p>
<p>父元素层</p>
</div>
<!-- .div>table>tr.item$*2>td*3{序号$@5} @: 指定从特殊号码开始编号-->
<div class="div">
<table>
<tr class="item1">
<td>序号5</td>
<td>序号6</td>
<td>序号7</td>
</tr>
<tr class="item2">
<td>序号5</td>
<td>序号6</td>
<td>序号7</td>
</tr>
</table>
</div>
<style>
.item1 {
background-color: red;
}
</style>
<!-- div[style] []:属性-->
<div style=""></div>
<!-- .userdata[data-use] data- :自定义属性以 data- 开头 -->
<div class="userdata" data-use="自定义属性">自定义属性</div>
</body>
</html>
上一篇: javascript和js之间有区别吗
下一篇: html5的应用-图像裁剪效果图