一、Emmet常用语法
Emmet官方文档http://yanxyz.github.io/emmet-docs/
Markdown官方文档http://markdown.p2hp.com/basic-syntax/
1.快速生成html得稳当结构通过html:5+tab或！+tab来实现。
<!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 |
| 默认标签 | . 前面什么也不写，默认的标签为div |
| ｛｝ | 表示要添加的内容 |
| > | 代表父子层级 |
| + | 代表兄弟层级 |
| ^ | 代表上一个层级 |
| * | 代表重复 |
| $ | 代表序号递增 |
| @ | 代表从某个序号递增 |
| -1 | 代表倒序 |
下面依次举例
<!-- p.first --><p class="first"></p><!-- p#id --><p id="id"></p><!-- .title --><div class="title"></div><!-- .title{括号的演示} --><div class="title">括号的演示</div><!-- p>a>li --><p><a href=""><li></li></a></p><!-- p+a+li --><p></p><a href=""></a><li></li><!-- p>a^li --><p><a href=""></a></p><li></li><!-- p>td*3 --><p><td></td><td></td><td></td></p><!-- 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*3>a{item$@2} --><ul class="list"><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><li class="item"><a href="">item6</a></li></ul>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。 |
| 预置属性 | a标签中的href，img标签中的src，link标签的rel属性，该属性多出现在引用第三方资源的标签中。 |
| 事件属性 | button标签中的onclick，on是前缀，click是事件。 |
| 自定义属性 | 用于存放用户数据。 |
四类属性演示实例
1.通用属性
<div class="top">top</div><div id="header">header</div><div style="color: red">Hello</div>
2.预置属性
<a href="https://php.cn">php.cn</a><img src="" alt="" /><link rel="stylesheet" href="" />
3.事件属性
<button onclick="alert('提交成功')">确定</button><div><input type="text" oninput="this.nextElementSibling.textContent = this.value" /><p>实时显示输入的内容</p></div>
4.自定义属性
<div data-email="admin@php.cn">用户信息</div><button onclick="this.nextElementSibling.textContent = this.previousElementSibling.dataset.email">获取用户邮箱</button><p>这里显示用户邮箱</p`
生动的举例：
通用: 相当于姓名, 性别, 年龄
预置: 肤色, 血型
事件: 走, 吃, 跑…
自定义: 职业, 爱好…. `
三、实例演示布局标签,并分析div+class与 html5语义化标签的优缺点
<!-- 经典 --><div id="header">header</div><div id="main">main</div><div id="footer">footer</div><!-- 尽量不要用id --><div class="header">header</div><div class="main">main</div><div class="footer">footer</div><!-- 尽量只用class,实现样式复用 --><!-- html5 --><!-- 语义化的布局标签 --><header>header</header><main>main</main><footer>footer</footer><article></article><nav></nav><aside></aside><article class="articl-header">header</article>
html5的语义化标签应用不广泛的原因：
1. 基于移动端的开发，不依赖于搜索引擎和SEO。
2. 语义化标签数量有限，不能函告所有的标签，反到不如是用传统的div+class的方式能更加准确的表达开发者的意图。