Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Emmet语法
Blogger Information
Blog 18
fans 0
comment 2
visits 10464
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Emmet语法
go0
Original
528 people have browsed it

一、Emmet语法的作用

简单来说,就是可以快速构建 HTML 结构的快捷语法。

二、Emmet例子

1. 输入“div>ul>li”+回车或者Tab键，就可以生成下列html代码，简单不少。

  1. <div>
  2.   <ul>
  3.     <li></li>
  4.   </ul>
  5. </div>

2. vscode中支持Emmet语法，不用安装插件。感叹号加Tab键，自动弹出下列html骨架，用“html:5”也行，不推荐，打字相对较多。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>

3. p.class

  1.  <p class="class"></p>

4. p#last

  1. <p id="last"></p>

5. .title,当没有指定标签的时候默认是div

  1. <div class="title"></div>

6. 用花括号指定内容.title{hello}

  1. <div class="title">hello</div>

7. 表示父子关系用“>”,例如：“div>p>a”

  1. <div>
  2.   <p><a href=""></a></p>
  3. </div>

8. 表示兄弟关系用“+”，例如：“div+p”

  1. <div></div>
  2. <p></p>

9. 表示上一级用“^”，例如：“div>p^a”

  1. <div>
  2.   <p></p>
  3. </div>
  4. <a href=""></a>

10. 比较有用的符号：“*”，可以重复多次。例如：“ul>li*3>a{link}”

  1. <ul>
  2.   <li><a href="">link</a></li>
  3.   <li><a href="">link</a></li>
  4.   <li><a href="">link</a></li>
  5. </ul>

11. 上面的不太好理解，写成这样好理解一些：“ul>(li>a{link})*3”,小括号是用来分组的。

12. 练习：下面两种写法是一样的

.cart>h2{购物车}+(ul>li*3>a{商品})+p{总计：3件}

.cart>h2{购物车}+ul>(li>a{商品})*3+p{总计：3件}

  1. <div class="cart">
  2.   <h2>购物车</h2>
  3.   <ul>
  4.     <li><a href="">商品</a></li>
  5.     <li><a href="">商品</a></li>
  6.     <li><a href="">商品</a></li>
  7.   </ul>
  8.   <p>总计：3件</p>
  9. </div>

13. 中括号可以指定属性，例如：a[href="https://php.cn/"]{php中文网}，但写的字符太多，没意义了。

  1.  <a href="https://php.cn">php中文网</a>
Correcting teacher：autoloadautoload

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post