欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Emmet 语法

程序员文章站 2022-03-16 09:09:25
...

1 复习环境配置

  • chrome
  • code

2 Emmet 语法

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

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>Document</title>
    8. 

  8.   </head>
    9. 

  9.   <body></body>
    10. 

  10. </html>
    11.

2. class 和 # id ```html

    

  1. <!-- p. -->
    2. 

  2. <p class=""></p>
    3. 

  3. <p class="first"></p>
    4. 

  4. <!-- p# -->
    5. 

  5. <p id=""></p>
    6. 

  6. <p id="last"></p>
    7.

3.titke:默认标签为 DIV

    

  1. <!-- .title -->
    2. 

  2. <div class="title"></div>
    3.

4. 内容用{}

    

  1. <!-- .title{大家晚上好} -->
    2. 

  2. <div class="title">大家晚上好</div>
    3.

5. 层级关系 > +

  • 1.父子关系: >
    

  1. <!-- div>p>a -->
    2. 

  2. <div>
    3. 

  3.   <p><a href=""></a></p>
    4. 

  4. </div>
    5.
  • 2.兄弟关系： +
    

  1. <!-- div+p  -->
    2. 

  2. <div></div>
    3. 

  3. <p></p>
    4.
  • 3.向上一级: ^
    

  1. <!-- div>p^a -->
    2. 

  2. <div>
    3. 

  3.   <p></p>
    4. 

  4. </div>
    5. 

  5. <a href=""></a>
    6.

6 重复: *

  • 1 快速生成*
    

  1. <!-- ul>li*3>a{link} -->
    2. 

  2. <ul>
    3. 

  3.   <li><a href="">link</a></li>
    4. 

  4.   <li><a href="">link</a></li>
    5. 

  5.   <li><a href="">link</a></li>
    6. 

  6. </ul>
    7.

  • 2 分组 （）

    <!-- .cart>h2{购物车}+(ul>li*3>a{商品})+p{共计3件} --> 

    

  1. <div class="cart">
    2. 

  2.   <h2>购物车</h2>
    3. 

  3.   <ul>
    4. 

  4.     <li><a href="">商品</a></li>
    5. 

  5.     <li><a href="">商品</a></li>
    6. 

  6.     <li><a href="">商品</a></li>
    7. 

  7.   </ul>
    8. 

  8.   <p>共计3件</p>
    9. 

  9. </div>
    10.

7 tag[属性]

    

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

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

8 序号

    

  1. <!-- ul.list>li.item*5>a{item} -->
    2. 

  2. <ul class="list">
    3. 

  3.   <li class="item"><a href="">item</a></li>
    4. 

  4.   <li class="item"><a href="">item</a></li>
    5. 

  5.   <li class="item"><a href="">item</a></li>
    6. 

  6.   <li class="item"><a href="">item</a></li>
    7. 

  7.   <li class="item"><a href="">item</a></li>
    8. 

  8. </ul>
    9. 

  9. <!-- ul.list>li.item*5>a{item$} 带序号_顺序 -->
    10. 

  10. <ul class="list">
    11. 

  11.   <li class="item"><a href="">item1</a></li>
    12. 

  12.   <li class="item"><a href="">item2</a></li>
    13. 

  13.   <li class="item"><a href="">item3</a></li>
    14. 

  14.   <li class="item"><a href="">item4</a></li>
    15. 

  15.   <li class="item"><a href="">item5</a></li>
    16. 

  16. </ul>
    17. 

  17. <!-- ul.list>li.item*5>a{item$@5} 按指定顺序-->
    18. 

  18. <ul class="list">
    19. 

  19.   <li class="item"><a href="">item5</a></li>
    20. 

  20.   <li class="item"><a href="">item6</a></li>
    21. 

  21.   <li class="item"><a href="">item7</a></li>
    22. 

  22.   <li class="item"><a href="">item8</a></li>
    23. 

  23.   <li class="item"><a href="">item9</a></li>
    24. 

  24. </ul>
    25. 

  25. <!-- ul.list>li.item*5>a{item$@-1}  按倒序-->
    26. 

  26. <ul class="list">
    27. 

  27.   <li class="item"><a href="">item5</a></li>
    28. 

  28.   <li class="item"><a href="">item4</a></li>
    29. 

  29.   <li class="item"><a href="">item3</a></li>
    30. 

  30.   <li class="item"><a href="">item2</a></li>
    31. 

  31.   <li class="item"><a href="">item1</a></li>
    32. 

  32. </ul>
    33. 

    34. 

  34. <!-- ul>li.item.item$*5{demo} -->
    35. 

  35. <ul>
    36. 

  36.   <li class="item item1">demo</li>
    37. 

  37.   <li class="item item2">demo</li>
    38. 

  38.   <li class="item item3">demo</li>
    39. 

  39.   <li class="item item4">demo</li>
    40. 

  40.   <li class="item item5">demo</li>
    41. 

  41. </ul>
    42. 

  42. <!-- 应用 带入CSS 中 选中-->
    43. 

  43. <style>
    44. 

  44.   .item3 {
    45. 

  45.     background-color: red;
    46. 

  46.   }
    47. 

  47. </style>
    48.

3 元素属性

  • 1 通用属性
    

  1. <!-- <女朋友 身高=“170” 体重=“60kg” 性别=女>  </女朋友> -->
    2. 

    3. 

  3. <!-- 元素:女朋友 
    4. 

  4.    标签:<女朋友>
    5. 

  5.    属性:身高， 体重 性别 -->
    6. 

    7. 

  7. <!-- 通用属性 class id style--- -->
    8. 

  8. <div class="class"></div>
    9. 

  9. <div id="header"></div>
    10. 

  10. <div style="color:red">hello</div>
    11.
  • 2 预置属性
    

  1. <!-- 预置属性 -->
    2. 

  2. <a href="http://php.cn">php.cn</a>
    3. 

  3. <img src="" alt="" />
    4. 

  4. <link rel="stylesheet" href="" />
    5.
  • 3 事件属性
    

  1. <!-- 事件属性 on+click -->
    2. 

  2. <!-- 弹窗 -->
    3. 

  3. <button onclick="alert('提交成功')">确定</button>
    4. 

  4. <!-- 数据双向绑定 -->
    5. 

  5. <div>
    6. 

  6.   <input type="text" oninput="this.nextElementSibling.textContent=this.value" />
    7. 

  7.   <p>实时显示输入内容</p>
    8. 

  8. </div>
    9.
  • 4 事件属性
    

  1. <!--自定义属性 -->
    2. 

  2. <div data-email="admin@php.cn">用户信息</div>
    3. 

  3. <button onclick="this.nextElementSibling.textContent = this.previousElementSibling.dataset.email">获取用户邮箱</button>
    4. 

  4. <p>这里显示用户邮箱</p>
    5.

上一篇： vue中axios请求的封装的介绍（代码）

下一篇： 怎么隐藏任务栏中的运行任务图标

推荐阅读