首页 > 博客列表 > Emmet常用的九种语法形式

博主信息

博文 5

粉丝 0

访问量 3960

专题推荐

更多>

Emmet常用的八种语法形式

1. !+tab:快速生成html5源码模板

<!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>
</body>
</html>

2. 标签与内容 `{text}`

<!--h3{title}-->
<h3>title</h3>

3. 属性和“语法糖”：`[attr]`

<!--[id=app]{app1}-->
<div id="app">app1</div>
<!--[class=title]{title}-->
<div class="title">title</div>

id,class是高频通用属性，Emmet为他们定制了“语法糖”
id->#,class->.

<!--#app{app1}-->
<div id = "app">
app1
</div>
<!--.title{title}-->
<div class = "title">
title
</div>

4. 重复：`*`

<!--.container{box}*3-->
<div class="container">box</div>
<div class="container">box</div>
<div class="container">box</div>

5. 父子：`>`

<!--ul>li{item}*3-->
<ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

6. 兄弟：`+`

<!--h3{标题}+p{段落}-->
<h3>标题</h3>
<p>段落</p>

7. 回到上一级（父级）：`^`

<!--.box>span{text}^h3{666}-->
<div class="box">
    <span>text</span>
</div>
<h3>666</h3>

8. 分组（…）

<!--nav>h3{导航}+ul>li*3>a{link}-->
<!--nav>h3{导航}+(ul>li*3>a{link})-->
<nav>
    <h3>导航</h3>
    <ul>
        <li><a href="">link</a></li>
        <li><a href="">link</a></li>
        <li><a href="">link</a></li>
    </ul>
</nav>

9. 序号：`$`,`$@`

<!--默认从1开始: ul>li{item-$}*3 -->
    <ul>
      <li>item-1</li>
      <li>item-2</li>
      <li>item-3</li>
    </ul>
<!--自定义起始序号: ul>li{item-$@6}*3 -->
    <ul>
      <li>item-6</li>
      <li>item-7</li>
      <li>item-8</li>
    </ul>
<!--逆序: ul>li{item-$@-1}*3 -->
    <ul>
      <li>item-3</li>
      <li>item-2</li>
      <li>item-1</li>
    </ul>

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

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

0条评论

作者最新博文

Markdown 语法

2022-10-14 13:16:24

Emmet常用的八种语法形式

1. !+tab:快速生成html5源码模板

2. 标签与内容 {text}

3. 属性和“语法糖”：[attr]

4. 重复：*

5. 父子：>

6. 兄弟：+

7. 回到上一级（父级）：^