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更加明确的语义

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