前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版

Emmet常用快捷键

首页2016-09-09 21:00:08工欲善其事必先利其器
Emmet

# 基本语法


  • div+div>p>span+em^bq
<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>
@前端进阶之旅: 代码已经复制到剪贴板
  • div+div>p>span+em^^bq
<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>
@前端进阶之旅: 代码已经复制到剪贴板
  • div>(header>ul>li*2>a)+footer>p
<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>
@前端进阶之旅: 代码已经复制到剪贴板
  • (div>dl>(dt+dd)*3)+footer>p
<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>
@前端进阶之旅: 代码已经复制到剪贴板
  • ul>li.item$*5
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>
@前端进阶之旅: 代码已经复制到剪贴板
  • h$[title=item$]{Header $}*3
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>
@前端进阶之旅: 代码已经复制到剪贴板
  • ul>li.item$$$*5
<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>
@前端进阶之旅: 代码已经复制到剪贴板
  • ul>li.item$@-*5
<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>
@前端进阶之旅: 代码已经复制到剪贴板
  • ul>li.item$@3*5
<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>
@前端进阶之旅: 代码已经复制到剪贴板
  • form#search.wide
<form id="search" class="wide"></form>
@前端进阶之旅: 代码已经复制到剪贴板
  • p.class1.class2.class3
<p class="class1 class2 class3"></p>
@前端进阶之旅: 代码已经复制到剪贴板
  • td[rowspan=2 colspan=3 title]
<td rowspan="2" colspan="3" title=""></td>
@前端进阶之旅: 代码已经复制到剪贴板

# HTML


  • !
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    
</body>
</html>
@前端进阶之旅: 代码已经复制到剪贴板
  • a:link
<a href="http://"></a>
@前端进阶之旅: 代码已经复制到剪贴板
  • a:mail
<a href="mailto:"></a>
@前端进阶之旅: 代码已经复制到剪贴板
  • link:css
<link rel="stylesheet" href="style.css" />
@前端进阶之旅: 代码已经复制到剪贴板
  • link:favicon
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
@前端进阶之旅: 代码已经复制到剪贴板
  • link:rss
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />
@前端进阶之旅: 代码已经复制到剪贴板
  • meta:utf
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
@前端进阶之旅: 代码已经复制到剪贴板
  • script:src
<script src=""></script>
@前端进阶之旅: 代码已经复制到剪贴板
  • form:get
<form action="" method="get"></form>
@前端进阶之旅: 代码已经复制到剪贴板

  • input:hidden, input:h
<input type="hidden" name="" />
@前端进阶之旅: 代码已经复制到剪贴板
  • input:text, input:t
  • input:password, input:p
  • input:checkbox, input:c
  • input:radio, input:r
  • input:file, input:f
  • input:submit, input:s
  • input:image, input:i
  • input:button, input:b

  • option, opt
<option value=""></option>
@前端进阶之旅: 代码已经复制到剪贴板
  • button:disabled, button:d, btn:d
<button disabled="disabled"></button>
@前端进阶之旅: 代码已经复制到剪贴板
  • ifr
<iframe src="" frameborder="0"></iframe>
@前端进阶之旅: 代码已经复制到剪贴板
  • btn
<button></button>
@前端进阶之旅: 代码已经复制到剪贴板
  • ul+
<ul>
    <li></li>
</ul>
@前端进阶之旅: 代码已经复制到剪贴板
  • dl+
<dl>
    <dt></dt>
    <dd></dd>
</dl>
@前端进阶之旅: 代码已经复制到剪贴板
  • table+
<table>
    <tr>
        <td></td>
    </tr>
</table>
@前端进阶之旅: 代码已经复制到剪贴板
  • tr+
<tr>
    <td></td>
</tr>
@前端进阶之旅: 代码已经复制到剪贴板
  • select+
<select name="" id="">
    <option value=""></option>
</select>
@前端进阶之旅: 代码已经复制到剪贴板
  • c
<!-- -->
@前端进阶之旅: 代码已经复制到剪贴板
  • cc:ie6
<!--[if lte IE 6]>
    ${child}
<![endif]-->
@前端进阶之旅: 代码已经复制到剪贴板

# CSS

# visual formating


  • pos:s
position:static;
@前端进阶之旅: 代码已经复制到剪贴板
  • pos:a
position:absolute;
@前端进阶之旅: 代码已经复制到剪贴板
  • pos:r
position:relative;
@前端进阶之旅: 代码已经复制到剪贴板
  • pos:f
position:fixed;
@前端进阶之旅: 代码已经复制到剪贴板
  • t
top:;
@前端进阶之旅: 代码已经复制到剪贴板
  • b:a
bottom:auto;
@前端进阶之旅: 代码已经复制到剪贴板
  • l
left:;
@前端进阶之旅: 代码已经复制到剪贴板
  • l:a
left:auto;
@前端进阶之旅: 代码已经复制到剪贴板
  • z
z-index:;
@前端进阶之旅: 代码已经复制到剪贴板
  • z:a
z-index:auto;
@前端进阶之旅: 代码已经复制到剪贴板
  • fl
float:left;
@前端进阶之旅: 代码已经复制到剪贴板
  • fl:n
float:none;
@前端进阶之旅: 代码已经复制到剪贴板
  • fl:l
float:left;
@前端进阶之旅: 代码已经复制到剪贴板
  • fl:r
float:right;
@前端进阶之旅: 代码已经复制到剪贴板
  • cl
clear:both;
@前端进阶之旅: 代码已经复制到剪贴板
  • cl:n
clear:none;
@前端进阶之旅: 代码已经复制到剪贴板
  • cl:l
clear:left;
@前端进阶之旅: 代码已经复制到剪贴板
  • cl:r
clear:right;
@前端进阶之旅: 代码已经复制到剪贴板
  • cl:b
clear:both;
@前端进阶之旅: 代码已经复制到剪贴板
  • d
display:block;
@前端进阶之旅: 代码已经复制到剪贴板
  • d:n
display:none;
@前端进阶之旅: 代码已经复制到剪贴板
  • d:b
display:block;
@前端进阶之旅: 代码已经复制到剪贴板
  • d:i
display:inline;
@前端进阶之旅: 代码已经复制到剪贴板
  • d:ib
display:inline-block;
@前端进阶之旅: 代码已经复制到剪贴板
  • d:itb
display:inline-table;
@前端进阶之旅: 代码已经复制到剪贴板
  • d:tbc
display:table-cell;
@前端进阶之旅: 代码已经复制到剪贴板
  • v
visibility:hidden;
@前端进阶之旅: 代码已经复制到剪贴板
  • v:v
visibility:visible;
@前端进阶之旅: 代码已经复制到剪贴板
  • v:h
visibility:hidden;
@前端进阶之旅: 代码已经复制到剪贴板
  • ov
overflow:hidden;
@前端进阶之旅: 代码已经复制到剪贴板
  • ov:v
overflow:visible;
@前端进阶之旅: 代码已经复制到剪贴板
  • ov:h
overflow:hidden;
@前端进阶之旅: 代码已经复制到剪贴板
  • ov:s
overflow:scroll;
@前端进阶之旅: 代码已经复制到剪贴板
  • zoo, zm
zoom:1;
@前端进阶之旅: 代码已经复制到剪贴板
  • cur:d
cursor:default;
@前端进阶之旅: 代码已经复制到剪贴板
  • cur:ha
cursor:hand;
@前端进阶之旅: 代码已经复制到剪贴板
  • cur:p
cursor:pointer;
@前端进阶之旅: 代码已经复制到剪贴板

# Margin & Padding


  • m:a
margin:auto;
@前端进阶之旅: 代码已经复制到剪贴板
  • mt
margin-top:;
@前端进阶之旅: 代码已经复制到剪贴板
  • mt:a
margin-top:auto;
@前端进阶之旅: 代码已经复制到剪贴板
  • mr
margin-right:;
@前端进阶之旅: 代码已经复制到剪贴板
  • mr:a
margin-right:auto;
@前端进阶之旅: 代码已经复制到剪贴板
  • mb
margin-bottom:;
@前端进阶之旅: 代码已经复制到剪贴板
  • mb:a
margin-bottom:auto;
@前端进阶之旅: 代码已经复制到剪贴板
  • ml
margin-left:;
@前端进阶之旅: 代码已经复制到剪贴板
  • ml:a
margin-left:auto;
@前端进阶之旅: 代码已经复制到剪贴板
fe
  • 基本语法
  • HTML
  • CSS
    • visual formating
    • Margin & Padding
    • Font
    • Background
    • Color
    • 其他

← DOM编程之API学习总结篇hasLayout知多少 →