Emmet 常用语法
- Emmet 插件: 快速生成 html 元素结构与内容，是 vscode 内置插件，无需安装
<body> <!-- 快速生成 class 标签.类名--> <!-- 默认标签是div, .title --> <div class="title"></div> <!-- 标签.类名,img.arrtical --> <img src="" alt="" class="arrtical" /> <!-- 快速生成id，标签#id名，默认标签是div --> <div id="msnv"></div> <!-- 标签#id名, p#msnv--> <p id="msnc"></p> <!-- 快速生成标签内容，{} div{hello word!} --> <div>hello word!</div> <!-- 层级关系 --> <!-- 创建父子层级元素 > , div>span>a--> <div> <span><a href=""></a></span> </div> <!-- 创建同级层级元素 > , div+p--> <div></div> <p></p> <!-- 重复 * div*3--> <div></div> <div></div> <div></div> <!-- 分组: () --> <!-- .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> <!-- 序号 $, div{item$}, 指定开始数字：$@5, 倒序排序：$-1--> <div>item1</div> <div>item2</div> <div>item3</div> <!-- table>tr*3>td --> <table> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> </table></body>
元素四类属性
通用属性
- 标签基本都有的三个基本属性，
class、id、style
<div class="top">top</div><div id="header">header</div><div style="color: green;">10086</div>
预置属性
<a href="baidu.com">baidu</a><img src="" alt="" /><link rel="stylesheet" href="" />
事件属性
<!-- 3. 事件属性 on + click--><button onclick="alert('提交成功')">确定</button>
自定义属性
<div old_msnv="TH045386">用户信息</div>
布局标签、分析 div+class 与 html5 语义化标签的优缺点
- header、footer、main、nav、article 等标签
- 语义化标签顾名思义，一眼看上去就能明白该标签的含义，浏览器搜索引擎比较喜欢，有利于 SEO 搜索优化
- 缺点是数量不完全，不是所有的标签都能语义话
- 涉及 CSS 布局，平时尽量使用 class，方便实现 css 样式复用
<!-- 语义化的布局标签 --><header>header</header><main>main</main><footer>footer</footer><article></article><nav></nav><aside></aside>
新的收获
- Emmet语法有了更多了解，新学了不少Emmet语法。
- 本期的学习目标是，学习到更多、更新的知识，顺利毕业。
