码迷,mamicode.com
首页 > 其他好文 > 详细

用Emmet写前端代码

时间:2018-05-18 00:25:44      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:pos   idt   一个   div   安装方法   device   前端   for   导航   

Emmet插件:可以用 emmet代码+Tap  写出更多并快捷的html代码,主流编辑器均可安装,安装方法也均不相同!

 

 

<!-- html:5或者!可以生成html5文档 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 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=edge">
    
    <!-- link -->
    <link rel="stylesheet" href="">
    <!-- link:css -->
    <link rel="stylesheet" href="style.css">
    <!-- script -->
    <script></script>    
    <!-- script:src -->
    <script src=""></script>


    <title>Document</title>
</head>
<body>

    1,生成带类样式的标签
    <!-- P.info -->
    <P class="info"></P>
    <!-- div.red -->
    <div class="red"></div>
    <!-- .red -->
    <div class="red"></div>

    2,生成带id的标签
    <!-- h2#header -->
    <h2 id="header"></h2>
    <!-- #header -->
    <div id="header"></div>

    3,a标签
    <!-- a -->
    <a href=""></a>
    <!-- a:link -->
    <a href="http://"></a>
    <!-- a:mail -->
    <a href="mailto:"></a>

    4,根据标签之间的位置来生成标签

    生成同级,兄弟标签 
<!--     h2.header+p#info{信息} -->
    <h2 class="header"></h2>
    <p id="info">信息</p>
    
    后代标签
    <!-- ul>li -->
    <ul>
        <li></li>
    </ul>
    <!-- ul>li+li+li -->
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    <!-- ul>li*3 -->
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    生成当前标签的父级,也叫上级标签
    <!-- h2>span^p -->
    <h2><span></span></h2>
    <p></p>

    5,你也可以在生成标签的时候,同时创建内部的文本
    <!-- ul>li.info{demo}*4+li.info{index} -->
    <ul>
        <li class="info">demo</li>
        <li class="info">demo</li>
        <li class="info">demo</li>
        <li class="info">demo</li>
        <li class="info">index</li>
    </ul>
    <!-- p[title="这是一段说明文字"] -->
    <p title="这是一段说明文字"></p>
    <!-- form[action="{:url(‘index/demo‘)}" method="post"]>input[type="text" name="info"]{内容} -->
    <form action="{:url(‘index/demo‘)}" method="post"><input type="text" name="info">内容</input></form>

    6,快速生成一个有8个列表项的导航
    <!-- ul.list>li.item*8>a{导航} -->
    <ul class="list">
        <li class="item"><a href="">导航</a></li>
        <li class="item"><a href="">导航</a></li>
        <li class="item"><a href="">导航</a></li>
        <li class="item"><a href="">导航</a></li>
        <li class="item"><a href="">导航</a></li>
        <li class="item"><a href="">导航</a></li>
        <li class="item"><a href="">导航</a></li>
        <li class="item"><a href="">导航</a></li>
    </ul>

    7,给标签自动添加编号和排序:$.@
    <!-- ul.list>li.item*4>a{导航$} -->

    <ul class="list">
        <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>
    </ul>

    <!-- ul.list>li.item*4>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>
    </ul>
    ul.list>li.item*4>a{导航$$@-}
    <ul class="list">
        <li class="item"><a href="">导航04</a></li>
        <li class="item"><a href="">导航03</a></li>
        <li class="item"><a href="">导航02</a></li>
        <li class="item"><a href="">导航01</a></li>
    </ul>
    ul.list>li.item*4>a{导航$$$$@100}
    <ul class="list">
        <li class="item"><a href="">导航0100</a></li>
        <li class="item"><a href="">导航0101</a></li>
        <li class="item"><a href="">导航0102</a></li>
        <li class="item"><a href="">导航0103</a></li>
    </ul>
    ul.list>li.item*4>a{导航$$@-100}
    <ul class="list">
        <li class="item"><a href="">导航103</a></li>
        <li class="item"><a href="">导航102</a></li>
        <li class="item"><a href="">导航101</a></li>
        <li class="item"><a href="">导航100</a></li>
    </ul>

</body>
</html>

 

用Emmet写前端代码

标签:pos   idt   一个   div   安装方法   device   前端   for   导航   

原文地址:https://www.cnblogs.com/cl94/p/9053748.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!