范仁义Emmet课程---1、HTML速写之Emmet语法规则

一、总结

一句话总结：

Emmet是一款能够飞速书写html代码的工具，能大大提高代码书写速率，语法使用也比较简单

 

1、Emmet中如何快速敲出html初始结构？

!(英文状态下的感叹号)，然后按tab键

 

2、Emmet中id和class分别对应的符号是什么？

和css中的一样，id是#号，class是.点号

 

3、Emmet中表示层次节点的符号？

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

 

4、Emmet中表示重复和变量的符号分别是什么？

重复（*），变量（$）：一个$ 代表一位数，$$就是两位数了,以此类推就可以形成$(1),$$(01),$$$(001)

 

 

5、Emmet中中的分组用什么符号？

小括号()：英文状态下的小括号

 

6、Emmet中表示属性的是什么符号？

英文状态下的中括号[attr]，比如a[href='###' name='xiaoA']

 

 

7、Emmet中的隐式标签是什么？

某些情况下，Emmet可以自动识别标签，比如.test识别为div.test，比如ul>.test$*3识别为ul>li.test$*3等等

 

 

 

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

博客对应课程的视频位置：1、HTML速写之Emmet

https://fanrenyi.com/video/18/72

 

 

转自或参考：【Emmet】HTML速写之Emmet语法规则_Y.Cheng的博客-CSDN博客

https://blog.csdn.net/qq_33744228/article/details/80910377

 

emmet官网语法地址

Abbreviations Syntax

https://docs.emmet.io/abbreviations/syntax/

 




Emmet—写HTML/CSS快到飞起

在前端开发的过程中，最费时间的工作就是写 HTML、CSS 代码。一堆的标签、属性、括号等，头疼。这里推荐一个Emmet语法规则，让你写的时候爽到飞起，能大大提高代码书写，只需要敲一行代码就能生成你想要的完整HTML结构，下面会介绍如何使用。

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

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


先来个例子：

范仁义Emmet课程---1、HTML速写之Emmet语法规则_html

这个普通的HTML结构，你需要多久打出来呢？

我只需要几秒钟，写好下面这条语句，按下键盘​​Tab​​键即可看到上图中的结构了

div#box>p.title+ul.list>li.child${我是第$个}*3^div#box2


是不是很爽，很快~~啊 ~ 啊~，仅仅一行代码就生成了一个复杂的HTML结构，并且id，class，内容都对应的上


开始讲解语法吧

1：html初始结构

下图中的结构，偷懒的都会直接一个！=> Tab 解决，这样可以快速生成基础的结构，同时防止手写时忘记某个代码块，输入错误的代码。

范仁义Emmet课程---1、HTML速写之Emmet语法规则_微信_02

 

 

2：id（#）,class（.）

​​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+p
<div></div>
<ul></ul>
<p></p>


  • div>ul>li^div (这里的​​^​​是接在​​li​​后面所以在​​li​​的上一级，与​​ul​​成了兄弟关系,当然两个^^就是上上级）
<div>
   <ul>
     <li></li>
   </ul>
   <div></div>
 </div>


4：重复（*）

​​重复指令：*​​

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


5：分组（()）

​​分组指令：()​​

  • div>(ul>li>a)+div>p
    （括号里面的内容为一个代码块，表示与括号内部嵌套和外面的的层级无关）
<div>
   <ul>
     <li><a href=""></a></li>
   </ul>
   <div>
     <p></p>
   </div>
 </div>


解释：这里如果不加括号的话，猜想下，​​a+div​​这样div就是和a是兄弟关系了，会包含在li里面。懂了吧哈哈

 <div>
   <ul>
     <li>
       <a href=""></a>
       <div>
         <p></p>
       </div>
     </li>
   </ul


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

​​属性指令：[]​​

  • a[href=’###’ name=‘xiaoA’] （中括号内填写属性键值对的形式，并且空格隔开）
<a href="###" name="xiaoA"></a>


###6：编号（）‘编号指令：） `编号指令：）‘编号指令： `

  • ul>li.test$*3 （$代表一位数，后面更上*数字就代表从1递增到填写的数字）
 <ul>
   <li class="test1"></li>
   <li class="test2"></li>
   <li class="test3"></li>
 </ul>


注意：

  • 一个$ 代表一位数，$$就是两位数了,以此类推就可以形成$(1),$$(01),$$$(001)
  • 如果想自定义从几开始递增的话就利用：$@+数字数字
    例如：ul>li.test$@3    3
 <ul>
   <li class="test3"></li>
   <li class="test4"></li>
   <li class="test5"></li>
 </ul>


7：文本（{}）

​​文本指令：{}​​

  • ul>li.test$*3{测试$} （{里面填写内容，可以和$一起组合使用哦}）
<ul>
  <li class="test1">测试1</li>
  <li class="test2">测试2</li>
  <li class="test3">测试3</li>
</ul>


8：隐式标签

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

例如：​​.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 中

最后就是：看没用，操作几遍，几分钟你就能掌握这些指令，然后飞快的撸码

 


 


三、课程代码

1、HTML速写之Emmet语法规则.html



1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>HTML速写之Emmet语法规则</title>
 6 </head>
 7 <body>
 8 
 9 <!--.box>p.title+ul.list>.child${我是第$个}*3^div#box2-->
10 <div class="box">
11     <p class="title"></p>
12     <ul class="list">
13         <li class="child1">我是第1个</li>
14         <li class="child2">我是第2个</li>
15         <li class="child3">我是第3个</li>
16     </ul>
17     <div id="box2"></div>
18 </div>
19 
20 ---------------------------------------------
21 <div id="box">
22     <p class="title"></p>
23     <ul class="list">
24         <li class="child1">我是第1个</li>
25         <li class="child2">我是第2个</li>
26         <li class="child3">我是第3个</li>
27     </ul>
28     <div id="box2"></div>
29 </div>
30 
31 </body>
32 </html>


 

2、Emmet语法



1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport"
  6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>Document</title>
  9 </head>
 10 <body>
 11 <!--1、生成html基本结构-->
 12 <!--
 13 英文状态下的感叹号! ==> 按tab键
 14 -->
 15 
 16 <!--
 17 2、id用#号键表示，class用.号表示
 18 -->
 19 <!--div#div1-->
 20 <div id="div1"></div>
 21 <div class="class1"></div>
 22 
 23 <!--
 24 3、emmet中没有内置的标签，所有的东西写好我们都可以按tab键来生成标签
 25 -->
 26 <!--fry-->
 27 <fry></fry>
 28 
 29 <!--
 30 4、emmet中如何表示层级关系
 31 emmet的语法和css选择器的语法很像
 32 
 33 >：子元素
 34 +：表示同级
 35 ^：表示上一级
 36 -->
 37 <div>
 38     <table></table>
 39 </div>
 40 <!--ul+div-->
 41 <ul></ul>
 42 <div></div>
 43 <!--div>div.test^ul-->
 44 <div>
 45     <div class="test"></div>
 46 </div>
 47 <ul></ul>
 48 <!--这个^符号可以用多次，每一次的话相当于往上面爬一级-->
 49 <!--div>div>div>div^^^table-->
 50 <div>
 51     <div>
 52         <div>
 53             <div></div>
 54         </div>
 55     </div>
 56 </div>
 57 <table></table>
 58 <!--div>div>div>div^^table-->
 59 <div>
 60     <div>
 61         <div>
 62             <div></div>
 63         </div>
 64     </div>
 65     <table></table>
 66 </div>
 67 
 68 <!--
 69 5、Emmet中的重复 和变量
 70 *：重复
 71 $：变量
 72 $符号可以写多位，如果是两个$$，表示从01开始，
 73 如果是$$$，表示从001开始
 74 -->
 75 <div></div>
 76 <div></div>
 77 <div></div>
 78 <!--div.div$*3-->
 79 <div class="div1"></div>
 80 <div class="div2"></div>
 81 <div class="div3"></div>
 82 <!--div.div$$*3-->
 83 <div class="div01"></div>
 84 <div class="div02"></div>
 85 <div class="div03"></div>
 86 
 87 <!--
 88 6、分组：英文状态下的括号来表示的
 89 -->
 90 <!--(div+ul)*3-->
 91 <div></div>
 92 <ul></ul>
 93 <div></div>
 94 <ul></ul>
 95 <div></div>
 96 <ul></ul>
 97 <!--(div>dl>(dt+dd)*3)+footer>p-->
 98 <div>
 99     <dl>
100         <dt></dt>
101         <dd></dd>
102         <dt></dt>
103         <dd></dd>
104         <dt></dt>
105         <dd></dd>
106     </dl>
107 </div>
108 <footer>
109     <p></p>
110 </footer>
111 
112 <!--
113 7、属性：[]
114 如果有多个属性，多个属性也是要写在一个中括号里面的，中间用空格隔开
115 -->
116 a[href='https://fanrenyi.com']
117 <a href="https://fanrenyi.com"></a>
118 a[href='https://fanrenyi.com' title='fry']
119 <a href="https://fanrenyi.com" title="fry"></a>
120 <a href="https://fanrenyi.com" title="fry"></a>
121 
122 <!--
123 8、标签里面的文字：英文状态下的 大括号 {}
124 {}也是可以和$符号以及乘号配合使用
125 -->
126 div{123}
127 <div>123</div>
128 div{我是第$$个div}*3
129 <div>我是第01个div</div>
130 <div>我是第02个div</div>
131 <div>我是第03个div</div>
132 
133 <!--
134 9、隐式标签
135 a、就是如果在最外面，如果没有写标签名，默认就是div
136 例如.test
137 b、子标签默认已知的情况下
138 ul>.test$*3 比如ul(ol)下面只能是li
139 table，tbody，thead，tfoot下面的tr
140 select(optgrout)下面的option标签
141 tr下面的td
142 -->
143 <div class="test"></div>
144 <!--ul>.test-->
145 <ul>
146     <li class="test"></li>
147 </ul>
148 ul>.test$*3
149 <ul>
150     <li class="test1"></li>
151     <li class="test2"></li>
152     <li class="test3"></li>
153 </ul>
154 <table>
155     <tr class="test"></tr>
156     <tr>
157         <td class="test"></td>
158         <td class="test"></td>
159         <td class="test"></td>
160     </tr>
161 </table>
162 <select name="" id="">
163     <option value="" class="test"></option>
164 </select>
165 </body>
166 </html>