安装vcode插件
chinese(simplified ...): 简体中文语言包live server: 实时预览markdown preview...: markdown 实时预览markdownlint: markdown 语法检查器helium icon theme: 一款我喜欢的文件图标主题
Emmet语法使用
- 生成通用属性 class id
- p.test 生成
- p#test 生成
- 内容用 {}
- p.test{大家好}
- 层级关系: > +
- 兄弟 div+p 生成
- 父子 div>p 生成
- 重复: *
- div*3
- 分组: ()
- div.test>h2{购物车}+(nav>li*3>a{商品})+p{总计3件}
- 序号：$
- ul.list>li.item*5>a{$item}
属性的分类
- 通用属性
- class, id, style
- 预置属性
- href, src, alt, rel
- 事件属性 on + click
- onclick, oninput
- 自定义属性
- data-email
常用的布局标签
- 尽量不要用id
<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div> - 语义化的布局 html5标签
<header></header>
<main></main>
<footer></footer>
<article></article>
<nav></nav><aside></aside>
为什么大多数程序员,都喜欢 div + class ?
- 目前项目90%以上是基于移动端, 不依赖或不在乎搜索引擎/seo
- 语义化的标签数量是有限的,不如class的自定义字符串的精准