• ヾ(⌐ ■_■)— HTML-Emmet语法速查表

    Emmet是一款文本编辑器/IDE的插件，用来快速生成复杂的HTML代码，只要掌握一些常用的语法（类似于CSS选择器），就可以减少重复编码的工作。

    1.调用方法

    Emmet使用Tab作为自动生成HTML代码的触发器。输入完生成HTML的缩写语句后，按下Tab，即可生成对应的HTML代码。

    • html:5 或!：用于HTML5文档类型

    • html:xt：用于XHTML过渡文档类型

    • html:4s：用于HTML4严格文档类型

    2.相关语法

    (1)后代：>             表父层与子层的关系，例：div>ul>li 

    1.      <div>
    2.          <ul>
    3.              <li>li>
    4.          ul>
    5.      div>

    (2)兄弟：+             表并列的关系，例：div+p+bq

    1.      <div>div>
    2.      <p>p>
    3.      <blockquote>blockquote>

    (3)上级元素：^        例：div+div>p>span+em^bq

    1.  <div>div>
    2.      <div>
    3.          <p>
    4.              <span>span>
    5.              <em>em>
    6.          p>
    7.          <blockquote>blockquote>
    8.      div>

    (4)分组：（）        例：div>(header>ul>li*2>a)+footer>p 

    1. <div>
    2.          <header>
    3.              <ul>
    4.                  <li><a href="">a>li>
    5.                  <li><a href="">a>li>
    6.              ul>
    7.          header>
    8.          <footer>
    9.              <p>p>
    10.          footer>
    11.      div>

    (5)重复多份：*        例：ul>li*5

    1.  <ul>
    2.          <li>li>
    3.          <li>li>
    4.          <li>li>
    5.          <li>li>
    6.          <li>li>
    7.      ul>

    (6)编号：$        例：ul>li.item$*5

    1. <ul>
    2.          <li class="item1">li>
    3.          <li class="item2">li>
    4.          <li class="item3">li>
    5.          <li class="item4">li>
    6.          <li class="item5">li>
    7.      ul>

    (7)ID和类属性

    #header                        

    <div id="header">div>

    .title

     <div class="title">div>

    form#search.wide

     <form action="" id="search" class="wide">form>

    p.class1.class2.class3

    <p class="class1 class2 class3">p>

    自定义属性            p[title="Hello world"]

    <p title="Hello world">p>

    文本：{ }    a{Click me}  

    <a href="">Click mea>

    3.HTML

    *所有未知的缩写都会转换成标签，例如，foo → *    例：!

    1. html>
    2.  <html lang="en">
    3.  <head>
    4.      <meta charset="UTF-8">
    5.      <title>Documenttitle>
    6.  head>
    7.  <body>
    8.      
    9.  body>
    10.  html>

     本文所列仅为最常用的一些语法和缩写，有关其他较为少用的可参考Emmet官方文档!!!!!

    (小编也在努力学习更多哟!以后再慢慢分享的啦!)

    希望对友友们有所帮助!!!!

  • 相关阅读:
    Go语言学习之路（二）
    python 实验7
    艾美捷FcyRl (CD64)，FCGR1A，生物活性活动分析结果
    前端需要学习哪些技术？
    【Prometheus】Relabeling机制
    uni-app 5小时快速入门 9 基础组件
    elasticsearch面试题
    第一个Spring程序
    【题解】Educational Codeforces Round 82
    JavaScrip练习
  • 原文地址：https://blog.csdn.net/naoguoteng/article/details/127991688