前端-4-Emmet总结

最新推荐文章于 2024-08-02 13:35:44 发布

bdevy

最新推荐文章于 2024-08-02 13:35:44 发布

阅读量78

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/qq_38328762/article/details/99767371

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

div.div0${content0$}*5 然后tab键

<div class="div01">content01</div>
<div class="div02">content02</div>
<div class="div03">content03</div>
<div class="div04">content04</div>
<div class="div05">content05</div>

(div#div0$.d0$-css{content0$}>p.p0${content$}*3)*5

<div id="div01" class="d01-css">content01
    <p class="p01">content1</p>
    <p class="p02">content2</p>
    <p class="p03">content3</p>
</div>
<div id="div02" class="d02-css">content02
    <p class="p01">content1</p>
    <p class="p02">content2</p>
    <p class="p03">content3</p>
</div>
<div id="div03" class="d03-css">content03
    <p class="p01">content1</p>
    <p class="p02">content2</p>
    <p class="p03">content3</p>
</div>
<div id="div04" class="d04-css">content04
    <p class="p01">content1</p>
    <p class="p02">content2</p>
    <p class="p03">content3</p>
</div>
<div id="div05" class="d05-css">content05
    <p class="p01">content1</p>
    <p class="p02">content2</p>
    <p class="p03">content3</p>
</div>

这里只总结了一些常用的及实例，有些此处未介绍的见参考文档

HTML
!

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>

<a href=""></a>

a:link

<a href="http://"></a>

link

<link rel="stylesheet" href="">

link:css

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

link:print

<link rel="stylesheet" href="print.css" media="print">

link:favicon

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

meta:utf

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

script:src

<script src=""></script>

form

<form action=""></form>

form:get

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

input
input

<input type="text">

inp

<input type="text" name="" id="">

input:hidden 或 input:h （input:text，input:email…类似）

<input type="hidden" name="">

select
select

<select name="" id=""></select>

option

<option value=""></option>

button
btn

<button></button>

btn:b

<button type="button"></button>

btn:r

<button type="reset"></button>

btn:s

<button type="submit"></button>

多个 *
ul>li*5

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

自增符号 $
ul>li.li0$*5

<ul>
    <li class="li01"></li>
    <li class="li02"></li>
    <li class="li03"></li>
    <li class="li04"></li>
    <li class="li05"></li>
</ul>

后代 >
nav>ul>li

<nav>
    <ul>
        <li></li>
    </ul>
</nav>

兄弟 +
div+p+bq

<div></div>
<p></p>
<blockquote></blockquote>

类
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>

id
ul>li#item$$$*5

<ul>
    <li id="item001"></li>
    <li id="item002"></li>
    <li id="item003"></li>
    <li id="item004"></li>
    <li id="item005"></li>
</ul>

属性
h$[title=item$]{Header$}*3

<h1 title="item1">Header1</h1>
<h2 title="item2">Header2</h2>
<h3 title="item3">Header3</h3>

上级 ^
div+div>p>span+em^bq

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

分组
div>(header>ul>li*2)+footer>p

<div>
    <header>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

form
form#search.wide

<form action="" id="search" class="wide"></form>

p
p>{Click}+a{here}+{to continue}

<p>Click<a href="">here</a>to continue</p>

隐式标签

em>.class

<em><span class="class"></span></em>

ul>.class

<ul>
    <li class="class"></li>
</ul>

table>.row>.col

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

bdevy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端-4-Emmet总结

这里只总结了一些常用的及实例，有些此处未介绍的见参考文档HTML!<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, u...
复制链接

扫一扫

专栏目录