2020-03-25html3 分钟读完 (大约 425 个字)

Emmet常用写法

整理一下Emmet常用写法。

Emmet一般IDE都支持，tab即可生成dom树，非常快捷，再tab既可依次输入内容。

编辑器需要安装插件。

选择器生成

p

p{content}

p.class

p#id

a[href="https://baidu.com"]

div>span

h1+p

div>ul>li^span

<div>
    <ul>
        <li></li>
    </ul>
    <span></span>
</div>

这里 ^ 是代表上级节点，这里就是让 span 成为 li 的上级节点，也就是成为 ul 的兄弟节点。

然后tab生成结构。

连写

li*3>a

效果：

1
2
3

<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>

自动编号

div#id_name$.class_name$$*3

其中 $ 表示位数为一的序号， $$ 表示拥有两位的序号。

效果：

1
2
3

<div id="id_name1" class="class_name01"></div>
<div id="id_name2" class="class_name02"></div>
<div id="id_name3" class="class_name03"></div>

从指定序号开始生成：

div#id_name$@3*5

倒序生成：

div#id_name$@-*5

倒序并指定序号：

div#id_name$@-10*5

综合方式

header+nav+article

效果：

1
2
3

<header></header>
<nav></nav>
<article></article>

nav>ul>(li>a[href=#]{Link})*5

效果：

<nav>
    <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</nav>

table>(thead>tr>th*5)(tbody>tr>td*5)

这里 () 里为一个代码块。

{} 里面写内容

效果：

<table>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

生成html基本结构

!

效果：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

</body>

</html>

隐式标签:未指定标签

.class_name

效果：

1	<div class="class_name"></div>

ul>.item$*3

效果：

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

生成属性

标签:属性
form

form:
form:get

form:post

input:
input:b or input:button

input

select:
select>option*3

select>[value="item$"]*3

XML的生成

root>player*3

root>player#$*3

root[match="nba" title="1nba"]>player#$$*4

name+age+sex+address

root>player#$*3>name+age+sex+address
css的生成

margin:
m

m10

m10p

m10r

m10-20-10-20

m10p20p

mt10

mr10

mb10

ml10

m-10

m-10--20

padding:
p

color:
c

c#f

c#f0

color:rgb

color:rgba

常用生成写法：
pore : position: relative;

posa : position: absolute;

d:n : display: none;

d:b : display: block

d:i : display: inline

ov:h : overflow: hidden;

cur:p : cursor: pointer;

ta:c : text-align: center;

以此类推。

cheatsheet

发掘更多：https://docs.emmet.io/cheat-sheet/

支付宝

微信

Emmet常用写法

喜欢这篇文章？打赏一下作者吧

评论

链接

分类

最新文章

归档

标签

订阅更新