博客列表 >emmet基础语法

emmet基础语法

二花的博客
二花的博客原创
2017年09月17日 13:02:15597浏览


html:5

<!doctype html>
<html>
<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>


link:css

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


script:src

<script src=""></script>


meta:utf

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


meta:vp

<meta name="viewport"
 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
meta:compat
<meta http-equiv="X-UA-Compatible" content="IE=7">

类样式
div.info

<div class="info"></div>


div#info

<div id="info"></div>


.info

<div class="info"></div>


#info

<div id="info"></div>


a:link

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


a:mail

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


根据标签之间的位置关系来生成标签
h1.info+p.info

<h1 class="info"></h1><p class="info"></p>


后代标签,下级标签
ul>li+li

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

生成当前标签的父级标签
h2>span^p.info

<h2><span></span></h2><p class="info"></p>


在生成标签的时候生成里边的内容
a:link{腾讯网}

<a href="https://">腾讯网</a>



p[title='腾讯网']

<p title="腾讯网"></p>
a[href='www.qq.com' ]{腾讯网}
<a href="www.qq.com">腾讯网</a>

重复生成
ul>li*5

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

生成一个导航
ul.list>li.item*8>a:link{导航}

<ul class="list">
    <li class="item"><a href="https://">导航</a></li>
    <li class="item"><a href="https://">导航</a></li>
    <li class="item"><a href="https://">导航</a></li>
    <li class="item"><a href="https://">导航</a></li>
    <li class="item"><a href="https://">导航</a></li>
    <li class="item"><a href="https://">导航</a></li>
    <li class="item"><a href="https://">导航</a></li>
    <li class="item"><a href="https://">导航</a></li>
</ul>

带序号的导航
ul.list>li.item*8>a{导航$$}

<ul class="list">
    <li class="item"><a href="">导航01</a></li>
    <li class="item"><a href="">导航02</a></li>
    <li class="item"><a href="">导航03</a></li>
    <li class="item"><a href="">导航04</a></li>
    <li class="item"><a href="">导航05</a></li>
    <li class="item"><a href="">导航06</a></li>
    <li class="item"><a href="">导航07</a></li>
    <li class="item"><a href="">导航08</a></li>
</ul>

倒序
ul.list>li.item*8>a{导航$$@-}

<ul class="list">
    <li class="item"><a href="">导航01</a></li>
    <li class="item"><a href="">导航00</a></li>
    <li class="item"><a href="">导航-1</a></li>
    <li class="item"><a href="">导航-2</a></li>
    <li class="item"><a href="">导航-3</a></li>
    <li class="item"><a href="">导航-4</a></li>
    <li class="item"><a href="">导航-5</a></li>
    <li class="item"><a href="">导航-6</a></li>
</ul>

  

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议