Emmet学习笔记

WEB前端 waitig 498℃ 百度已收录 0评论

摘要:

  1. 参考文章:前端开发必备!Emmet使用手册
  2. 记录Emmet的一些语法

语法

注意:

Emmet符号前后不要有空格

兄弟

+ 类似于css中的兄弟

上级

^ 设置上一级的节点,^^连着向上返回两级

div+div>p>span+em^bq
-------------------
<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

可以理解是一层一层地进入>,然后在这层建立兄弟+,或者返回上级^

分组

()将括号内的元素变成一个代码块

乘法

*将某个元素重复几次

自增符号

$,一个$代表一位数字,@可以设置倒序和起始数字

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>
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$@-3*5
----------------
<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>
<!-- @后的-代表是倒序,3表示从3开始,顺序不可颠倒。 -->

文本

p>{Click }+a{here}+{ to continue}
---------------------------------
<p>click<a href="">here</a>to continue</p>

生成隐式标签

不用强记,系统会自动判断生成,准确率却不知道啦。

table>.row>.col
---------------
<table>
    <tr class="row">
        <td class="col"></td>
    </tr>
</table>

缩写

h5的首部

!
--------
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

</body>
</html>

CSS链接

link:css
--------
<link rel="stylesheet" href="style.css">

favicon的链接

link:favicon
------------
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

设置字符编码

meta:utf
--------
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

表单

form:get
--------
<form action="" method="get"></form>

input

<!-- text,search,radio等type都可以通过类似的方法 -->
input:hidden
------------
<input type="hidden" name="">

参考资料

前端开发必备!Emmet使用手册
Emmet官方文档


本文由【waitig】发表在等英博客
本文固定链接:Emmet学习笔记
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)