Emmet 语法

1 复习环境配置

chrome
code

2 Emmet 语法

1. html 文档结构 - ！或者 html5

<!DOCTYPE html>
<html lang="zh-CN">
  <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. class 和 # id ```html

<!-- p. -->
<p class=""></p>
<p class="first"></p>
<!-- p# -->
<p id=""></p>
<p id="last"></p>

3.titke:默认标签为 DIV

<!-- .title -->
<div class="title"></div>

4. 内容用{}

<!-- .title{大家晚上好} -->
<div class="title">大家晚上好</div>

5. 层级关系 > +

1.父子关系: >

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

2.兄弟关系： +

<!-- div+p  -->
<div></div>
<p></p>

3.向上一级: ^

<!-- div>p^a -->
<div>
  <p></p>
</div>
<a href=""></a>

6 重复: *

1 快速生成*

<!-- 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>

2 分组（）

<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>

7 tag[属性]

<!-- a[href=https://php.cn/]{PHP中文网} -->
<a href="https://php.cn/">PHP中文网</a>

8 序号

<!-- ul.list>li.item*5>a{item} -->
<ul class="list">
  <li class="item"><a href="">item</a></li>
  <li class="item"><a href="">item</a></li>
  <li class="item"><a href="">item</a></li>
  <li class="item"><a href="">item</a></li>
  <li class="item"><a href="">item</a></li>
</ul>
<!-- ul.list>li.item*5>a{item$} 带序号_顺序 -->
<ul class="list">
  <li class="item"><a href="">item1</a></li>
  <li class="item"><a href="">item2</a></li>
  <li class="item"><a href="">item3</a></li>
  <li class="item"><a href="">item4</a></li>
  <li class="item"><a href="">item5</a></li>
</ul>
<!-- ul.list>li.item*5>a{item$@5} 按指定顺序-->
<ul class="list">
  <li class="item"><a href="">item5</a></li>
  <li class="item"><a href="">item6</a></li>
  <li class="item"><a href="">item7</a></li>
  <li class="item"><a href="">item8</a></li>
  <li class="item"><a href="">item9</a></li>
</ul>
<!-- ul.list>li.item*5>a{item$@-1}  按倒序-->
<ul class="list">
  <li class="item"><a href="">item5</a></li>
  <li class="item"><a href="">item4</a></li>
  <li class="item"><a href="">item3</a></li>
  <li class="item"><a href="">item2</a></li>
  <li class="item"><a href="">item1</a></li>
</ul>
<!-- ul>li.item.item$*5{demo} -->
<ul>
  <li class="item item1">demo</li>
  <li class="item item2">demo</li>
  <li class="item item3">demo</li>
  <li class="item item4">demo</li>
  <li class="item item5">demo</li>
</ul>
<!-- 应用 带入CSS 中 选中-->
<style>
  .item3 {
    background-color: red;
  }
</style>

3 元素属性

1 通用属性

<!-- <女朋友 身高=“170” 体重=“60kg” 性别=女>  </女朋友> -->
<!-- 元素:女朋友 
   标签:<女朋友>
   属性:身高， 体重 性别 -->
<!-- 通用属性 class id style--- -->
<div class="class"></div>
<div id="header"></div>
<div style="color:red">hello</div>

2 预置属性

<!-- 预置属性 -->
<a href="http://php.cn">php.cn</a>
<img src="" alt="" />
<link rel="stylesheet" href="" />

3 事件属性

<!-- 事件属性 on+click -->
<!-- 弹窗 -->
<button onclick="alert('提交成功')">确定</button>
<!-- 数据双向绑定 -->
<div>
  <input type="text" oninput="this.nextElementSibling.textContent=this.value" />
  <p>实时显示输入内容</p>
</div>

4 事件属性

<!--自定义属性 -->
<div data-email="admin@php.cn">用户信息</div>
<button onclick="this.nextElementSibling.textContent = this.previousElementSibling.dataset.email">获取用户邮箱</button>
<p>这里显示用户邮箱</p>

1 复习环境配置

2 Emmet 语法

1. html 文档结构 - ！或者 html5

2. class 和 # id ```html

3.titke:默认标签为 DIV

4. 内容用{}

5. 层级关系 > +

6 重复: *

7 tag[属性]

8 序号

3 元素属性

相关文章