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

Emmet 常用语法、HTML5元素基础知识

程序员文章站 2022-05-26 12:54:56
...

Emmet 常用语法

  • Emmet 插件: 快速生成 html 元素结构与内容，是 vscode 内置插件，无需安装
    

  1. <body>
    2. 

  2.   <!-- 快速生成 class 标签.类名-->
    3. 

  3.   <!-- 默认标签是div, .title -->
    4. 

  4.   <div class="title"></div>
    5. 

  5.   <!-- 标签.类名,img.arrtical -->
    6. 

  6.   <img src="" alt="" class="arrtical" />
    7. 

    8. 

  8.   <!-- 快速生成id，标签#id名，默认标签是div -->
    9. 

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

  10.   <!-- 标签#id名, p#msnv-->
    11. 

  11.   <p id="msnc"></p>
    12. 

    13. 

  13.   <!-- 快速生成标签内容，{} div{hello word!} -->
    14. 

  14.   <div>hello word!</div>
    15. 

    16. 

  16.   <!-- 层级关系 -->
    17. 

  17.   <!-- 创建父子层级元素 > , div>span>a-->
    18. 

  18.   <div>
    19. 

  19.     <span><a href=""></a></span>
    20. 

  20.   </div>
    21. 

  21.   <!-- 创建同级层级元素 > , div+p-->
    22. 

  22.   <div></div>
    23. 

  23.   <p></p>
    24. 

    25. 

  25.   <!-- 重复 * div*3-->
    26. 

  26.   <div></div>
    27. 

  27.   <div></div>
    28. 

  28.   <div></div>
    29. 

    30. 

  30.   <!-- 分组: () -->
    31. 

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

  32.   <div class="cart">
    33. 

  33.     <h2>购物车</h2>
    34. 

  34.     <ul>
    35. 

  35.       <li><a href="">商品</a></li>
    36. 

  36.       <li><a href="">商品</a></li>
    37. 

  37.       <li><a href="">商品</a></li>
    38. 

  38.     </ul>
    39. 

  39.     <p>总计: 3 件</p>
    40. 

  40.   </div>
    41. 

    42. 

  42.   <!-- 序号 $, div{item$}, 指定开始数字：$@5, 倒序排序：$-1-->
    43. 

  43.   <div>item1</div>
    44. 

  44.   <div>item2</div>
    45. 

  45.   <div>item3</div>
    46. 

    47. 

  47.   <!-- table>tr*3>td -->
    48. 

  48.   <table>
    49. 

  49.     <tr>
    50. 

  50.       <td></td>
    51. 

  51.     </tr>
    52. 

  52.     <tr>
    53. 

  53.       <td></td>
    54. 

  54.     </tr>
    55. 

  55.     <tr>
    56. 

  56.       <td></td>
    57. 

  57.     </tr>
    58. 

  58.   </table>
    59. 

  59. </body>
    60.

元素四类属性

通用属性

  • 标签基本都有的三个基本属性，class、id、style 
    

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

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

  3. <div style="color: green;">10086</div>
    4.

预置属性

  • 相当于人的肤色、血型，href、src、rel 
    

  1. <a href="baidu.com">baidu</a>
    2. 

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

  3. <link rel="stylesheet" href="" />
    4.

事件属性

  • 相当于走、吃等动作
    

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

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

自定义属性

  • 相当于兴趣爱好，根据需要自定义
  1. <div old_msnv="TH045386">用户信息</div>

布局标签、分析 div+class 与 html5 语义化标签的优缺点

  • header、footer、main、nav、article 等标签
  • 语义化标签顾名思义，一眼看上去就能明白该标签的含义，浏览器搜索引擎比较喜欢，有利于 SEO 搜索优化
  • 缺点是数量不完全，不是所有的标签都能语义话
  • 涉及 CSS 布局，平时尽量使用 class，方便实现 css 样式复用
    

  1. <!-- 语义化的布局标签 -->
    2. 

  2. <header>header</header>
    3. 

  3. <main>main</main>
    4. 

  4. <footer>footer</footer>
    5. 

  5. <article></article>
    6. 

  6. <nav></nav>
    7. 

  7. <aside></aside>
    8.

新的收获

  • Emmet语法有了更多了解，新学了不少Emmet语法。
  • 本期的学习目标是，学习到更多、更新的知识，顺利毕业。

上一篇： 求正责表达式,该如何解决

下一篇： 认识元素、Ement语法

推荐阅读