Emmet语法
程序员文章站
2022-05-30 16:17:45
...
一、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>li*3>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/"]{}，但写的字符太多，没意义了。
<a href="https://php.cn"></a>
上一篇： VMware虚拟机安装archlinux
下一篇： 注册、登陆、退出请求分发器实例