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

Emmet常用语法、元素属性、布局标签

程序员文章站 2022-04-08 18:22:29
...

一、Emmet常用语法

Emmet官方文档http://yanxyz.github.io/emmet-docs/
Markdown官方文档http://markdown.p2hp.com/basic-syntax/

1.快速生成html得稳当结构通过html:5+tab或！+tab来实现。

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    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>
    10. 

    11. 

  11. </body>
    12. 

  12. </html>
    13.

2.常用语法

常用符号 意义
. 代表class
# 代表id
默认标签 . 前面什么也不写，默认的标签为div
｛｝ 表示要添加的内容
> 代表父子层级
+ 代表兄弟层级
^ 代表上一个层级
* 代表重复
$ 代表序号递增
@ 代表从某个序号递增
-1 代表倒序

下面依次举例

    

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

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

  3.     <!-- p#id -->
    4. 

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

  5.     <!-- .title  -->
    6. 

  6.     <div class="title"></div>
    7. 

  7.     <!-- .title{括号的演示}   -->
    8. 

  8.     <div class="title">括号的演示</div>
    9. 

  9.     <!-- p>a>li -->
    10. 

  10.     <p>
    11. 

  11.       <a href="">
    12. 

  12.         <li></li>
    13. 

  13.       </a>
    14. 

  14.     </p>
    15. 

  15.     <!-- p+a+li  -->
    16. 

  16.     <p></p>
    17. 

  17.     <a href=""></a>
    18. 

  18.     <li></li>
    19. 

  19.     <!-- p>a^li  -->
    20. 

  20.     <p><a href=""></a></p>
    21. 

  21.     <li></li>
    22. 

  22.     <!-- p>td*3  -->
    23. 

  23.     <p>
    24. 

  24.       <td></td>
    25. 

  25.       <td></td>
    26. 

  26.       <td></td>
    27. 

  27.     </p>
    28. 

  28.     <!-- ul.list>li.item*5>a{item$} -->
    29. 

  29.     <ul class="list">
    30. 

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

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

  32.       <li class="item"><a href="">item3</a></li>
    33. 

  33.       <li class="item"><a href="">item4</a></li>
    34. 

  34.       <li class="item"><a href="">item5</a></li>
    35. 

  35.     </ul>
    36. 

  36.     <!-- ul.list>li.item*3>a{item$@2} -->
    37. 

  37.     <ul class="list">
    38. 

  38.       <li class="item"><a href="">item2</a></li>
    39. 

  39.       <li class="item"><a href="">item3</a></li>
    40. 

  40.       <li class="item"><a href="">item4</a></li>
    41. 

  41.       <li class="item"><a href="">item5</a></li>
    42. 

  42.       <li class="item"><a href="">item6</a></li>
    43. 

  43.     </ul>
    44. 

  44.     ul.list>li.item*5>a{item$@-1}
    45. 

  45.     <ul class="list">
    46. 

  46.       <li class="item"><a href="">item5</a></li>
    47. 

  47.       <li class="item"><a href="">item4</a></li>
    48. 

  48.       <li class="item"><a href="">item3</a></li>
    49. 

  49.       <li class="item"><a href="">item2</a></li>
    50. 

  50.       <li class="item"><a href="">item1</a></li>
    51. 

  51.     </ul>
    52.

二、实例演示元素四类属性

元素属性分为通用属性，预置属性，事件属性，自定义属性。

属性分类 简介
通用属性 class，id，style。
预置属性 a标签中的href，img标签中的src，link标签的rel属性，该属性多出现在引用第三方资源的标签中。
事件属性 button标签中的onclick，on是前缀，click是事件。
自定义属性 用于存放用户数据。

四类属性演示实例

1.通用属性
    

  1. <div class="top">top</div>
    2. 

  2. <div id="header">header</div>
    3. 

  3. <div style="color: red">Hello</div>
    4.
2.预置属性
    

  1. <a href="https://php.cn">php.cn</a>
    2. 

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

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

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

  2. <div>
    3. 

  3.    <input type="text" oninput="this.nextElementSibling.textContent = this.value" />
    4. 

  4. <p>实时显示输入的内容</p>
    5. 

  5. </div>
    6.
4.自定义属性
    

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

  2. <button onclick="this.nextElementSibling.textContent = this.previousElementSibling.dataset.email">
    3. 

  3.       获取用户邮箱
    4. 

  4. </button>
    5. 

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

生动的举例：
通用: 相当于姓名, 性别, 年龄
预置: 肤色, 血型
事件: 走, 吃, 跑…
自定义: 职业, 爱好…. `

三、实例演示布局标签,并分析div+class与 html5语义化标签的优缺点

    

  1.     <!-- 经典 -->
    2. 

  2.     <div id="header">header</div>
    3. 

  3.     <div id="main">main</div>
    4. 

  4.     <div id="footer">footer</div>
    5. 

  5.     <!-- 尽量不要用id  -->
    6. 

    7. 

  7.     <div class="header">header</div>
    8. 

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

  9.     <div class="footer">footer</div>
    10. 

    11. 

  11.     <!-- 尽量只用class,实现样式复用 -->
    12. 

    13. 

  13.     <!-- html5  -->
    14. 

  14.     <!-- 语义化的布局标签 -->
    15. 

  15.     <header>header</header>
    16. 

  16.     <main>main</main>
    17. 

  17.     <footer>footer</footer>
    18. 

  18.     <article></article>
    19. 

  19.     <nav></nav>
    20. 

  20.     <aside></aside>
    21. 

  21.     <article class="articl-header">header</article>
    22.

html5的语义化标签应用不广泛的原因：
1. 基于移动端的开发，不依赖于搜索引擎和SEO。
2. 语义化标签数量有限，不能函告所有的标签，反到不如是用传统的div+class的方式能更加准确的表达开发者的意图。

上一篇： css初识：元素的样式来源，选择器类型及权重

下一篇： 前端环境搭建

推荐阅读