1.Ement常用语法、元素属性和布局标签

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

---

Ement常用语法

1.属性

• class : .attr (默认标签是div)

  <!-- .attr -->
  <div class="attr"></div>

• id : #attr (默认标签是div)

  <!-- #attr -->
  <div id="attr"></div>

2.标签

• p标签

  <!-- p.attr -->
  <p class="attr"></p>

3.内容

• {}

  <!-- p.attr{内容} -->
  <p class="attr">内容</p>

4.属性内容

• []

  <!-- p[class=attr]{内容} -->
  <p class="attr">内容</p>

5.层级关系

• 父子: >

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

• 兄弟: +

  <!-- div>p+p -->
  <div>
    <p></p>
    <p></p>
  </div>

• 上一级: ^

  <!-- div>p>a^p -->
  <div>
    <p><a href=""></a></p>
    <p></p>
  </div>

6.重复

• *

  <!-- ul>li*3 -->
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>

7.分组

• ()

未分组时

  <!-- div.shop>h2{购物}+ul>li{商品}*3+p{共3件商品} -->
  <div class="shop">
    <h2>购物</h2>
    <ul>
      <li>商品</li>
      <li>商品</li>
      <li>商品</li>
      <p>共3件商品</p>
    </ul>
  </div>

分组时

  <!-- div.shop>h2{购物}+(ul>li{商品}*3)+p{共3件商品} -->
  <div class="shop">
    <h2>购物</h2>
    <ul>
      <li>商品</li>
      <li>商品</li>
      <li>商品</li>
    </ul>
    <p>共3件商品</p>
  </div>

8.序号

• 正常序号: $

  <!-- ul>li{item$}*3 -->
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>

• 倒序: $@-n (这里是指倒数到n)

  <!-- ul>li{item$@-2}*3 -->
  <ul>
    <li>item4</li>
    <li>item3</li>
    <li>item2</li>
  </ul>

• 从某个数开始: $@n (这里是指从n开始正数)

  <!-- ul>li{item$@2}*3 -->
  <ul>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
  </ul>

---

元素属性

1.通用属性

• class

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

• id

  <div id="userId">userId</div>

• style

  <div style="color: blue">颜色</div>

2.预置属性

• 根据标签不同各不相同

  <a href=""></a>

  <img src="" alt="">

  <link rel="stylesheet" href="">

3.事件属性

• 前缀 + 事件

  <!-- on + click-->
  <button onclick="alert('提交成功')">确定</button>

  <!-- on + input-->
  <div>
    <input type="text" oninput="this.nextElementSibling.   = this.value" />
    <p>实时显示输入的内容</p>
  </div>

• 自定义属性: data-

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

---

布局标签

1.常用布局标签

• class

  <!-- 尽量不要用id，用class -->
  <div class="header">header</div>
  <div class="main">main</div>
  <div class="footer">footer</div>

2.语义化布局标签

• head、main、footer...

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

3.为什么大多数程序员,再喜欢 div + class ?

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