一个菜鸡JAVA后端的博客~

Emmet语法规则

Emmet语法规则作为一个加快HTML编写方式,只需要一行的代码就能快速的生成HTML的结构。如,在前端相关视频中常见的在编辑器中输入 div#(id名) 就能快速的生成一个带id的div结构,这些都是Emmet语法的一部分。目前Emmet被Atom,Vscode等大多数的编辑器所支持。。


示例

如以下代码:

div.contain#main>div.content>ul>li$*3{列表$}^img[src="img.jpg" alt="test"]+select>.test$$@10*5

此段代码包含了Emmet大多数的语法规则。
当在编辑器中桥下tab会生成如下代码(此处用的是Vscode):

    <div class="contain" id="main">
        <div class="content">
            <ul>
                <li1>列表1</li1>
                <li2>列表2</li2>
                <li3>列表3</li3>
            </ul>
            <img src="img.jpg" alt="test">
            <select name="" id="">
                <option class="test10"></option>
                <option class="test11"></option>
                <option class="test12"></option>
                <option class="test13"></option>
                <option class="test14"></option>
            </select>
        </div>
   </div>

语法

id和类名:.与#

说明:.与#分别对应class名和id名,在标签,如div标签的后面加上.或者#可以指定相应的class名和id名。
示例:

<!-- 输入:div#main.contain -->
   <div id="main" class="contain"></div>

节点:>与+与^

说明:>代表当前节点的子节点,+代表当前节点的兄弟节点,代表当前节点的父节点。如div>div表示div下嵌套了另外一个div。div+div表示两个同层次下的div,divdiv表示后者div嵌套在前者div的父层下。
示例:

<!-- 输入:ul>li -->
   <ul>
        <li></li>
   </ul>
<!-- 输入:li+li -->
   <li></li>
   <li></li>
<!-- 输入:a^div -->
   <a href=""></a>
   <div>
   </div>

重复:*

说明:*后面加上数字代表标签重复的个数。
示例:

<!-- 输入:li*2 -->
   <li></li>
   <li></li>

分组:()

说明:不是很好说明,简单理解为括号里的是单独的一块,有点类似敲代码时括号的作用。
示例:

<!-- 输入:div>(ul>li)+div -->
  <div>
       <ul>
           <li></li>
       </ul>
  </div>
  <div>
  </div>

属性:[]

说明:在标签后面加上[]可以指定相关的属性。使用属性名=属性的形式,多个之间使用空格隔开
示例:

<!-- 输入:a[href="#"] -->
   <a href="#"></a>

编号:$

说明:代表一位数,多个连用可以代表多个数,如$$代表两位数,一般与*连用。@@开始数可以指定开始的数值。@-可以指定倒序。

<!-- 输入:li.test$*3 -->
   <li class="test1"></li>
   <li class="test2"></li>
   <li class="test3"></li>
<!-- 指定开始数:li.test$@3*3 -->
   <li class="test3"></li>
   <li class="test4"></li>
   <li class="test5"></li>
<!-- 倒序:li.test$@-*3   Vscode默认不可用-->
   <li class="test3"></li>
   <li class="test2"></li>
   <li class="test1"></li>

文本内容:{}

说明:通过使用{}来指定标签之间的文本内容。
示例:

<!-- 输入:p{test} -->
   <p>test</p>

自动识别标签

说明:可以直接通过#id名或者.类名来输入标签,会自动识别当前标签类型。默认情况下直接输入为div,ul子节点为li等。
示例:

<!-- 输入:.main -->
   <div class="main"></div>
<!-- 输入:ul>.list -->
   <ul>
        <li class="list"></li>
   </ul>
<!-- 输入:tr>.list -->
   <tr>
        <td class="list"></td>
   </tr>

使用习惯后撸HTML的速度能起飞。


NOTE: 文章若无特别说明均为原创文章,如果要转载请保留出处!
0 #HTML
分享