初识前端Emmet与Html

Emmet的常用语法

Emmet的作用

emmet可以快速的生成我们需要的一些代码，使得我们编写代码更加轻便。

Emmet是什么

emmet语法不是说可以直接在前端软件中运用，Emmet是一种插件，大部分编辑器都支持。

Emmet的层级关系

• 父子关系之间用 ‘>’ 来表示，如div>a>b生成代码为

  
  <div>
     <a href="">
        <p></p>
     </a>
  </div>
  

• 兄弟关系之间用 ‘+’ 来表示，如div+span生成代码为

  
  <div></div>
  <span></span>
  

  常用的Emmet语法

• ‘.’号可以生成‘class’属性，例如p.text可以自动生成标签<p class="text"></p>
• ‘#’号可以生成’id’属性，例如p#text可以自动生成标签<p id="text"></p>
• ‘{}’号用于生成标签内的内容，例如p{大家好}可以自动生成标签<p>大家好</p>
• ‘*’号用于重复生成该标签，例如p*3可以自动生成标签

  
  <p></p>
  <p></p>
  <p></p>
  

• ()表示分组，可以划分标签之间的关系，例如.cart>h2{购物车}+(ul>li*3>a{商品})+p{总计: 3 件}

  
  <div class="cart">
        <h2>购物车</h2>
        <ul>
          <li><a href="">商品</a></li>
          <li><a href="">商品</a></li>
          <li><a href="">商品</a></li>
        </ul>
        <p>总计: 3 件</p>
      </div>
  

• ‘$’符号可以用于生成序号,例如ul.list>li.item*5>a{item$}将生成标签段

  
  <ul class="list">
        <li class="item"><a href="">item1</a></li>
        <li class="item"><a href="">item2</a></li>
        <li class="item"><a href="">item3</a></li>
        <li class="item"><a href="">item4</a></li>
        <li class="item"><a href="">item5</a></li>
      </ul>
  

• ‘@’号用于选择开始序号，例如ul.list>li.item*5>a{item$@5}将生成代码段

  
  <ul class="list">
        <li class="item"><a href="">item5</a></li>
        <li class="item"><a href="">item6</a></li>
        <li class="item"><a href="">item7</a></li>
        <li class="item"><a href="">item8</a></li>
        <li class="item"><a href="">item9</a></li>
      </ul>
  

• ‘@-1’用于表示从倒序开始，例如ul.list>li.item*5>a{item$@-1}将生成代码段

  
  <ul class="list">
        <li class="item"><a href="">item5</a></li>
        <li class="item"><a href="">item4</a></li>
        <li class="item"><a href="">item3</a></li>
        <li class="item"><a href="">item2</a></li>
        <li class="item"><a href="">item1</a></li>
      </ul>
  

  元素四类属性

• 通用属性，如class、id、style

  
  <div class="top">top</div>
  <div id="header">header</div>
  <div style="color: red">Hello</div>
  

• 预置属性 rel、href、src

  
  <a href="https://php.cn">php.cn</a>
  <img src="" alt="" />
  <link rel="stylesheet" href="" />
  

• 事件属性 例如onclick,onkeyboard，oninpput

  
  <button onclick="alert('提交成功')">确定</button>
    <div>
      <input type="text" oninput="this.nextElementSibling.textContent = this.value" />
      <p>实时显示输入的内容</p>
    </div>
  

• 自定义属性,为data-开头的变量,无固定名称

  
    <div data-email="[e-mail]">用户信息</div>
    <button onclick="this.nextElementSibling.textContent = this.previousElementSibling.dataset.email">
      获取用户邮箱
    </button>
    <p>这里显示用户邮箱</p>
  

  布局标签

• 经典的布局标签 - div中设置各种类

  
    <div class="header">header</div>
    <div class="main">main</div>
    <div class="footer">footer</div>
  

• 语义化的布局标签

  
    <header>header</header>
    <main>main</main>
    <footer>footer</footer>
    <article></article>
    <nav></nav>
    <aside></aside>
  

• 语义化布局的优缺点

1. 目前项目90%以上是基于移动端, 不依赖或不在乎搜索引擎
2. 语义化的标签数量是有限的,不如class的自定义字符串再精准