Emmet语法使用、属性的分类、常用的布局标签

安装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的自定义字符串的精准