首页 > 博客列表 > Emmet语法

博主信息

博文 18

粉丝 0

访问量 15473

专题推荐

更多>

一、Emmet语法的作用

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

二、Emmet例子

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

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

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

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

3. p.class

 <p class="class"></p>

4. p#last

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

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

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

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

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

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

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

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

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

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

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

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

<ul>
  <li><a href="">link</a></li>
  <li><a href="">link</a></li>
  <li><a href="">link</a></li>
</ul>

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

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

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

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

<div class="cart">
  <h2>购物车</h2>
  <ul>
    <li><a href="">商品</a></li>
    <li><a href="">商品</a></li>
    <li><a href="">商品</a></li>
  </ul>
  <p>总计：3件</p>
</div>

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

 <a href="https://php.cn">php中文网</a>

批改老师：

autoload

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

table标签用法

2021-12-23 16:56:17

一、Emmet语法的作用

二、Emmet例子

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

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

3. p.class

4. p#last

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

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

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

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

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

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

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

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

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

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

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

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

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