PHP学习笔记五（插件emmet）

最新推荐文章于 2021-04-05 10:14:46 发布

原创最新推荐文章于 2021-04-05 10:14:46 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

PHP 专栏收录该内容

21 篇文章

订阅专栏

本文介绍Emmet这一高效前端开发工具的基本使用方法，包括如何快速生成HTML结构、利用变量进行序列化填充等实用技巧。

emmet

Welcome中，搜索emmet，安装

如：table>tr*4>td*3 然后按tab键，会自动生成表格4行3列

<table>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>

h1{hello} 按tab键

<h1>hello</h1>

a[href="www.sds.com"]{慕课} 按tab

<a href="www.sds.com">慕课</a>

<p> ul>li.item${haha $$}*4 按tab键 </p>

（$表示的是排序，$$表示的是两位的排序）

<ul>
	<li class="item1">haha 01</li>
	<li class="item2">haha 02</li>
	<li class="item3">haha 03</li>
	<li class="item4">haha 04</li>
</ul>

(select>.wrap>h1>p>a)+(select>.hah>p+p) 按tab

<select name="" id="">
	<option class="wrap">
		<h1>
			<p><a href=""></a></p>
		</h1>
	</option>
</select><select name="" id="">
	<option class="hah">
		<p></p>
		<p></p>
	</option>
</select>