Emmet语法-HTML速写

最新推荐文章于 2023-05-23 18:46:19 发布

Lucy0612

最新推荐文章于 2023-05-23 18:46:19 发布

阅读量171

点赞数

分类专栏： css 文章标签： html

本文链接：https://blog.csdn.net/weixin_49752665/article/details/107870871

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Emmet是一款插件，只要能安装他的编辑器都能使用，大部分编辑器都可以使用该语法规则,我们平时开发的Sublime Text、Eclipse、Notepad++、VS code、Atom、Dreamweaver等等编辑器都可以使用。

安装方式和平时安装插件一样搜索这个emmet插件安装，每个编辑器安装方式不同，请各自尝试

1.html初始结构(!)

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
</head>
<body>
	
</body>
</html>

2.id（#）,class（.）

div#test

<div id="test"></div>

div.test

<div class="test"></div>

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

div>ul>li>p

<div>
   <ul>
     <li>
       <p></p>
     </li>
   </ul>
 </div>

div>ul>li^div
div>(ul>li)+div

<div>
   <ul>
     <li></li>
   </ul>
   <div></div>
 </div>

4.重复（*）

div*5（*号后面添加数字表示重复的元素个数）

   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>

5.属性（[attr]）

a[href=’###’ name=‘xiaoA’]

<a href="###" name="xiaoA"></a>

ul>li.test$＊3 （＄代表一位数，后面更上*数字就代表从1递增到填写的数字）

<ul>
   <li class="test1"></li>
   <li class="test2"></li>
   <li class="test3"></li>
 </ul>

ul>li.test$@3*4

<ul>
	<li class="test3"></li>
	<li class="test4"></li>
	<li class="test5"></li>
	<li class="test6"></li>
</ul>

６．文本（{}）

ul>li.test＄*3{测试＄} （{里面填写内容，可以和$一起组合使用哦}）

<ul>
  <li class="test1">测试1</li>
  <li class="test2">测试2</li>
  <li class="test3">测试3</li>
</ul>

７．隐式标签

这个标签没有指令，而是部分标签可以不使用输入标签，直接输入指令，即可识别父类标签。

.test

<div class="test"></div>

ul>.test$*3

 <ul>
   <li class="test1"></li>
   <li class="test2"></li>
   <li class="test3"></li>
 </ul>

select>.test$*5

<select name="" id="">
  <option class="test1"></option>
  <option class="test2"></option>
  <option class="test3"></option>
  <option class="test4"></option>
  <option class="test5"></option>
</select>

隐私标签有如下几个：

li：用于 ul 和 ol 中
tr：用于 table、tbody、thead 和 tfoot 中
td：用于 tr 中
option：用于 select 和 optgroup 中

Lucy0612

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Emmet语法-HTML速写

Emmet是一款插件，只要能安装他的编辑器都能使用，大部分编辑器都可以使用该语法规则,我们平时开发的Sublime Text、Eclipse、Notepad++、VS code、Atom、Dreamweaver等等编辑器都可以使用。安装方式和平时安装插件一样搜索这个emmet插件安装，每个编辑器安装方式不同，请各自尝试1.html初始结构！<!DOCTYPE html><html lang="zh"><head> <meta charset="UT
复制链接

扫一扫