html 基础:Emmet 常用语法与布局标签实例

Emmet 常用语法

基础代码快速生成

1 如何快速生成 html5 文档结构

  • 使用感叹号“!” + Tab 按键
  • 使用“html:5” + Tab 按键
<!DOCTYPE html>
<html lang="zh-CN">
<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 如何快速生成 id 和 class

  • id 可以直接使用“#”,例如:“#item”则生成
    <div id="item"></div>
  • class 则可以直接使用“.”,例如:“.item”则生成
    <div class="item"></div>
  • 由于默认标签为“div” 如需更改为其他标签则在 id 和 class 前加标签即可,例如:“p.item”或“p#item”则生成
    <p class="item"></p>以及<p id="item"></p>

3 "p"标签内如何加文本内容

  • 使用花括号加文本的形式,例如:“p{你好啊}”则生成
    <p>你好啊</p>

各类层级的快速生成

1 包含关系的父子元素使用">"来表示,例如:“div>p>a”则生成

    <div>
      <p><a href=""></a></p>
    </div>

2 并列关系的兄弟元素使用"+"来表示,例如:“div+p+a”则生成


    <div></div>
    <p></p>
    <a href=""></a>

3 并列关系与父级元素使用"脱字符"来表示,例如:“div>p 脱字符 a”则生成

    <div>
      <p></p>
    </div>
    <a href=""></a>

其他分组功能的快速生成

1 重复操作快速生成使用""来表示,例如:“ul>li3>a{item$}”则生成


    <ul>
      <li><a href="">item1</a></li>
      <li><a href="">item2</a></li>
      <li><a href="">item3</a></li>
    </ul>

2 分组功能的快速生成使用"()"来表示,例如:“div>h2{购物车}+(ul>li*5>a{item$})”则生成


    <div>
      <h2>购物车</h2>
      <ul>
        <li><a href="">item1</a></li>
        <li><a href="">item2</a></li>
        <li><a href="">item3</a></li>
        <li><a href="">item4</a></li>
        <li><a href="">item5</a></li>
      </ul>
    </div>

3 tag[属性]快速生成使用中括号表示,例如:“a[href="https://bbs.yinliuhui.cn/”]{笔记网}”则生成

<a href="https://bbs.yinliuhui.cn/">笔记网</a>

4 序号的写法使用美元符号表示(通常和层级指令和文本指令组合使用)例如:“ul.list>li.item*3>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>
    </ul>
  • 序号前加多个 0 则使用多个美元符号对应“001,002….”例如:“ul.list>li.item*3>a{item$$$}”则生成
 <ul class="list">
      <li class="item"><a href="">item001</a></li>
      <li class="item"><a href="">item002</a></li>
      <li class="item"><a href="">item003</a></li>
    </ul>

5 若需在某个数字作为起始编号则需要加“@”符号,倒序则再加负号“-”

  • 正序示例:“ul>li{item$@3}*3”则生成:
 <ul>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
    </ul>
  • 倒序示例:“ul>li{item$@-3}*3”则生成:
  <ul>
      <li>item5</li>
      <li>item4</li>
      <li>item3</li>
    </ul>

元素的属性

1 通用属性 class, id, style 示例:

<div class="top">top</div>
<div id="header">header</div>
<div style="color: red">Hello</div>

2 预置属性:通常用在引用第三方资源的标签上

<a href="https://baidu.com">php.cn</a>
<img src="" alt="" />
<link rel="stylesheet" href="" />

3 事件属性 onclick (on 是前缀,click 是事件)

<button onclick="alert('提交成功')">确定</button>

4 自定义属性 (保存一些信息,当前的状态等…)

<div data-email="admin@php.cn">用户信息</div>

常用布局标签

1 经典版本:

简写:
#header{header}
#main{main}
#footer{footer}
示例:
<div id="header">header</div>
<div id="main">main</div>
<div id="footer">footer</div>

2 改进版本:将 id 换成 class,class 权重小于 id,有利于样式复用
快捷修改:Alt+鼠标连选或者 Ctrl + D 快捷键修改

简写:
.header{header}
.main{main}
.footer{footer}
示例:
<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>

3 html5 语义化标签

<header>header</header>
<main>main</main>
<footer>footer</footer>
<article></article>
<nav></nav>
<aside></aside>

但是现在绝大多数的程序猿使用的是 div + class

  • 目前项目 90%以上是基于移动端, 不依赖或不在乎搜索引擎/不需要做 seo,例如拼多多,抖音
  • 语义化的标签数量是有限的,而且语义不如 class 的自定义字符串明确
  • 程序猿的个人习惯导致的

示例:

语义化:<header>我是文章头部</header>
div+class:<div class="articl-header">我是文章头部</div>
语义化标签不如直接的articl-header的class更加明确的语义