1. 实例演示Ement常用语法 2. 实例演示元素四类属性 3. 实例演示布局标签,并分析div+class与 html5语义化标签的优缺点

Emmet

id 和 class

• 通用

默认标签为div .title #title
<div class="title"></div>
<div id="title"></div>

内容用 {} .title{大家好} #title{大家好}
<div class="title">大家好</div>
<div id="title">大家好</div>

1.class

• 快捷键为 . (英文的点)

p.title
<p class="title"></p>

2.id

• 快捷键为#(英文的井号)

p#title
<p id="title"></p>

标签关系

• 关系: > + ^ ()
• 父子: >

父>子 div>p
<div>
  <p></p>
</div>

• 兄弟: +

同级 div+p
<div></div>
<p></p>

• 向上一级 ^

div>p^div
<div>
  <p></p>
</div>
<div></div>

• 重复 *

div*4
<div></div>
<div></div>
<div></div>
<div></div>

• 分组 ()

div>(div>p>ul)>p
<div>
  <div>
    <p>
      <ul></ul>
    </p>
  </div>
  <p></p>
</div>

-数字替换 $

ul.class$*5
<ul class="class1"></ul>
<ul class="class2"></ul>
<ul class="class3"></ul>
<ul class="class4"></ul>
<ul class="class5"></ul>

ul.class$*5{mode$}
<ul class="class1">
  mode1
</ul>
<ul class="class2">
  mode2
</ul>
<ul class="class3">
  mode3
</ul>
<ul class="class4">
  mode4
</ul>
<ul class="class5">
  mode5
</ul>

• 组合

.cart>h1{购物车}+(ul>li*3>a{商品})+p{总计3件}

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

• 列表

html里的列表 table>tr*3{asd}>td*5{123}

<table>
  <tr>
    asd
    <td>123</td>
    <td>123</td>
    <td>123</td>
    <td>123</td>
    <td>123</td>
  </tr>
  <tr>
    asd
    <td>123</td>
    <td>123</td>
    <td>123</td>
    <td>123</td>
    <td>123</td>
  </tr>
  <tr>
    asd
    <td>123</td>
    <td>123</td>
    <td>123</td>
    <td>123</td>
    <td>123</td>
  </tr>
</table>

• md 里的列表

asd	asd	asd
123	123	123
123	123	123
123	123	123

元素属性

<div></div>
div标签
<div id=""></div>
id属性
<div id="title">123</div>

• 通用属性

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

• 预置属性

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

• 事件属性 on + click

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

• 自定义属性

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

布局元素

• 经典

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

• 语义化

<header>header</header>
<main>main</main>
<footer>footer</footer>

经典可以多种多样，语义化描述多的标签是有限的，不如 class 的精准