Emmet语法知识
1 生成标准html文档框架
第一种是 空文档上 敲入 html: 5 然后按Tab键
第二种是 空文档上 敲入！ 然后 回车
两种方式都可以生成标准的html文档框架
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body></body></html>
2 快速生成带class和ID的代码
（1）生成class
输入 P.first
回车
<p class="first"></p>
（2）生成ID
输入 P#last
回车
<p id="last"></p>
（3）带文本内容
输入 .title{大家晚上好}
回车
<div class="title">大家晚上好</div>
3 层级关系
输入 div>p>a
回车
<div><p><a href=""></a></p></div>
4 兄弟
输入 div+p
回车
<div></div><p></p>
5 向上一级
输入 div>p^a
回车
<div><p></p></div><a href=""></a>
6 重复
输入 ul>li*3>a{link}
回车
<ul><li><a href="">link</a></li><li><a href="">link</a></li><li><a href="">link</a></li></ul>
7 分组
输入 .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>
8 tag[属性]
输入 a[href="https://php.cn/"]{php中文网}回车a [href="https://php.cn/"]{php中文网}
9 序号
(1)给item加从1开始的升序编号
输入 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>
(2) 给item加从5开始的升序编号
输入 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> -->
(3)给item加从5开始的降序编号
输入 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>
(4)给class内的item标签加升序编号
输入 ul>li.item.item$*5{demo}
回车
<ul><li class="item item1">demo</li><li class="item item2">demo</li><li class="item item3">demo</li><li class="item item4">demo</li><li class="item item5">demo</li></ul>
通过下列代码可以直接给.item3赋属性
<style>
.item3 {
background-color: red;
}
</style> —>
（5）给item加 li类标签
输入 ul.list>li.item{demo}*3
回车
<ul class="list"><li class="item">demo</li><li class="item">demo</li><li class="item">demo</li></ul>
（6）省略li的结果
输入 ul.list>.item{demo}*3
回车
<ul class="list"><li class="item">demo</li><li class="item">demo</li><li class="item">demo</li>
</ul>
（7）快速生成表格
输入 table>tr5>td10{xxxx}
回车
<table border="1"><tr><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td></tr><tr><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td></tr><tr><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td></tr><tr><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td></tr><tr><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td></tr></table>
元素的属性
通用属性 class, id, style
<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="admin@php.cn">用户信息</div>
<button onclick="this.nextElementSibling.textContent = this.previousElementSibling.dataset.email">
获取用户邮箱
</button><p>这里显示用户邮箱</p>
常用的布局标签
1
尽量不要用id 尽量只用class,实现样式复用
<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>
2 语义化的布局标签
<header>header</header>
<main>main</main>
<footer>footer</footer>
<article></article>
<nav></nav>
<aside></aside>
html5语义化标签的优缺点
优点: 简洁
缺点
1 目前网页90%以上是基于移动端, 所以语义化的标签是否被搜索引擎关注意兴趣不大
2 大量同名的语义化标签容易混淆，不知道谁是谁的。不如class的自定义字符串精准。