【Emmet】HTML速写之Emmet语法规则

最新推荐文章于 2022-10-07 10:08:12 发布

Sky-木落

最新推荐文章于 2022-10-07 10:08:12 发布

阅读量489

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43518425/article/details/119304399

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

1、id（#）、class（.）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- div#box div.box-->
		<div id="box"></div>
		<div class="box"></div>
	</body>
</html>

2、：重复（*）

在这里插入图片描述

3、子节点（>），兄弟节点（+），上级节点（^）

3.1、子节点（>）

在这里插入图片描述

3.2、兄弟节点（+)

在这里插入图片描述

3.3、上级节点（这里的span标签与ul标签处于同一级）

![在这里插入图片描述](https://img-blog.csdnimg.cn/18e6bae9e44e47cf9b142e9bdd5e506b.pn

4、分组（）

在这里插入图片描述
h1的父级元素为main的这个div

5、属性（[attr]）——id，class都有怎么能少了属性呢

在这里插入图片描述

6：编号（$）

在这里插入图片描述

6.1、改变起始数字即倒叙

在这里插入图片描述

7、隐式标签

在这里插入图片描述

7.1、在select标签中使用隐式标签

在这里插入图片描述

8、综合练习（文字乱码未解决）

在这里插入图片描述

9、源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<!-- div#box>p.title+ul.list>li.child${我是第$个}*3^div#box2 -->
		<div id="box">
			<p class="title"></p>
			<ul class="list">
				<li class="child1">???1?</li>
				<li class="child2">???2?</li>
				<li class="child3">???3?</li>
			</ul>
			<div id="box2"></div>
		</div>
		
		
		<!-- select>option.test*5 -->
		<select name="" id="">
			<option value="" class="test"></option>
			<option value="" class="test"></option>
			<option value="" class="test"></option>
			<option value="" class="test"></option>
			<option value="" class="test"></option>
		</select>
		
		<!-- ul>li.index$*5 -->
		<ul>
			<li class="index1"></li>
			<li class="index2"></li>
			<li class="index3"></li>
			<li class="index4"></li>
			<li class="index5"></li>
		</ul>
		
		<!-- div.box>ul>li.item$@5*3 -->
		<div class="box">
			<ul>
				<li class="item5"></li>
				<li class="item6"></li>
				<li class="item7"></li>
			</ul>
		</div>
		
		<!-- div.box>ul>li.item$@-5*3 -->
		<div class="box">
			<ul>
				<li class="item7"></li>
				<li class="item6"></li>
				<li class="item5"></li>
			</ul>
		</div>								
				
		
		<!-- div.box>ul>li.item$*3 -->
		<div class="box">
			<ul>
				<li class="item1"></li>
				<li class="item2"></li>
				<li class="item3"></li>
			</ul>
		</div>
		
		<!-- a[href='href' name='test'] -->
		<a href="href" name="test"></a>
		
		<!-- div#main>(ul>li>a)+(span#bottom>p)^h1 -->	
		<div id="main">
			<ul>
				<li><a href=""></a></li>
			</ul>
			<span id="bottom">
				<p></p></span>
		</div>
		<h1></h1>	
		
		<!-- div#main>(ul>li>a)+span#bottom>p -->
		<div id="main">
			<ul>
				<li><a href=""></a></li>
			</ul>
			<span id="bottom">
				<p></p>
			</span>
		</div>
		
		<!-- div#item${$}*3 -->
		<div id="item1">1</div>
		<div id="item2">2</div>
		<div id="item3">3</div>
		
		
		<!-- div#item*5 -->
		<div id="item"></div>
		<div id="item"></div>
		<div id="item"></div>
		<div id="item"></div>
		<div id="item"></div>
		
		<!-- div#box>ul>li^span.box3 -->
		<div id="box">
			<ul>
				<li></li>
			</ul>
			<span class="box3"></span>
		</div>


		<!-- div#box+span.box+h1 -->
		<div id="box"></div>
		<span class="box"></span>
		<h1></h1>

		<!-- div>ul>li -->
		<div>
			<ul>
				<li> </li>
			</ul>
		</div>


		<!-- div#box div.box-->
		<div id="box"></div>
		<div class="box"></div>
	</body>
</html>