Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Emmet 语法
Blogger Information
Blog 4
fans 0
comment 0
visits 814
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 语法
cqjuyu
Original
257 people have browsed it

1 复习环境配置

  • chrome
  • code

2 Emmet 语法

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

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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></body>
  10. </html>

2. class 和 # id ```html

  1. <!-- p. -->
  2. <p class=""></p>
  3. <p class="first"></p>
  4. <!-- p# -->
  5. <p id=""></p>
  6. <p id="last"></p>

3.titke:默认标签为 DIV

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

4. 内容用{}

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

5. 层级关系 > +

  • 1.父子关系: >
  1. <!-- div>p>a -->
  2. <div>
  3.   <p><a href=""></a></p>
  4. </div>
  • 2.兄弟关系： +
  1. <!-- div+p  -->
  2. <div></div>
  3. <p></p>
  • 3.向上一级: ^
  1. <!-- div>p^a -->
  2. <div>
  3.   <p></p>
  4. </div>
  5. <a href=""></a>

6 重复: *

  • 1 快速生成*
  1. <!-- ul>li*3>a{link} -->
  2. <ul>
  3.   <li><a href="">link</a></li>
  4.   <li><a href="">link</a></li>
  5.   <li><a href="">link</a></li>
  6. </ul>

  • 2 分组 （）

    <!-- .cart>h2{购物车}+(ul>li*3>a{商品})+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>

7 tag[属性]

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

8 序号

  1. <!-- ul.list>li.item*5>a{item} -->
  2. <ul class="list">
  3.   <li class="item"><a href="">item</a></li>
  4.   <li class="item"><a href="">item</a></li>
  5.   <li class="item"><a href="">item</a></li>
  6.   <li class="item"><a href="">item</a></li>
  7.   <li class="item"><a href="">item</a></li>
  8. </ul>
  9. <!-- ul.list>li.item*5>a{item$} 带序号_顺序 -->
  10. <ul class="list">
  11.   <li class="item"><a href="">item1</a></li>
  12.   <li class="item"><a href="">item2</a></li>
  13.   <li class="item"><a href="">item3</a></li>
  14.   <li class="item"><a href="">item4</a></li>
  15.   <li class="item"><a href="">item5</a></li>
  16. </ul>
  17. <!-- ul.list>li.item*5>a{item$@5} 按指定顺序-->
  18. <ul class="list">
  19.   <li class="item"><a href="">item5</a></li>
  20.   <li class="item"><a href="">item6</a></li>
  21.   <li class="item"><a href="">item7</a></li>
  22.   <li class="item"><a href="">item8</a></li>
  23.   <li class="item"><a href="">item9</a></li>
  24. </ul>
  25. <!-- ul.list>li.item*5>a{item$@-1}  按倒序-->
  26. <ul class="list">
  27.   <li class="item"><a href="">item5</a></li>
  28.   <li class="item"><a href="">item4</a></li>
  29.   <li class="item"><a href="">item3</a></li>
  30.   <li class="item"><a href="">item2</a></li>
  31.   <li class="item"><a href="">item1</a></li>
  32. </ul>
  34. <!-- ul>li.item.item$*5{demo} -->
  35. <ul>
  36.   <li class="item item1">demo</li>
  37.   <li class="item item2">demo</li>
  38.   <li class="item item3">demo</li>
  39.   <li class="item item4">demo</li>
  40.   <li class="item item5">demo</li>
  41. </ul>
  42. <!-- 应用 带入CSS 中 选中-->
  43. <style>
  44.   .item3 {
  45.     background-color: red;
  46.   }
  47. </style>

3 元素属性

  • 1 通用属性
  1. <!-- <女朋友 身高=“170” 体重=“60kg” 性别=女>  </女朋友> -->
  3. <!-- 元素:女朋友 
  4.    标签:<女朋友>
  5.    属性:身高， 体重 性别 -->
  7. <!-- 通用属性 class id style--- -->
  8. <div class="class"></div>
  9. <div id="header"></div>
  10. <div style="color:red">hello</div>
  • 2 预置属性
  1. <!-- 预置属性 -->
  2. <a href="http://php.cn">php.cn</a>
  3. <img src="" alt="" />
  4. <link rel="stylesheet" href="" />
  • 3 事件属性
  1. <!-- 事件属性 on+click -->
  2. <!-- 弹窗 -->
  3. <button onclick="alert('提交成功')">确定</button>
  4. <!-- 数据双向绑定 -->
  5. <div>
  6.   <input type="text" oninput="this.nextElementSibling.textContent=this.value" />
  7.   <p>实时显示输入内容</p>
  8. </div>
  • 4 事件属性
  1. <!--自定义属性 -->
  2. <div data-email="admin@php.cn">用户信息</div>
  3. <button onclick="this.nextElementSibling.textContent = this.previousElementSibling.dataset.email">获取用户邮箱</button>
  4. <p>这里显示用户邮箱</p>
Correcting teacher：PHPzPHPz

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