Emmet 常用语法、HTML5元素基础知识
程序员文章站
2022-06-01 20:42:50
...
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>
预置属性
- 相当于人的肤色、血型，
href、src、rel
<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语法。
- 本期的学习目标是，学习到更多、更新的知识，顺利毕业。
上一篇： 认识元素、Ement语法
推荐阅读