zoukankan      html  css  js  c++  java

  • Atom

    一、Emmet的安装与介绍

    Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的工具，能够实现 HTML、CSS 的快速编写。

    1，使用Emmet的好处

    • 通常大多数的文本编辑器都会允许我们存储和重用一些代码块，我们称之为“片段”。虽然片段能很好地推动我们的生产力，但大多数的实现都有这样一个缺点：我们必须先定义代码片段，并且不能再运行时进行拓展。
    • 而 Emmet 把片段这个概念提高到了一个新的层次：我们可以设置 CSS 形式的能够动态被解析的表达式，然后根据输入的缩写来得到相应的内容。Emmet 很成熟的并且非常适用于编写 HTML/XML 和 CSS 代码的前端开发人员，但也可以用于编程语言。

    2，安装Emmet

    Emmet 为大部分流行的编辑器都提供了安装插件，本文演示如何在 Atom 中使用 Emmet 插件。
    （1）点击 Atom 的“Preferences”菜单选项（Windows 下是“Settings”菜单选项）
    （2）进入到 Install 页面。
    （3）搜索“Emmet”包，点击 Install 按钮即可安装。
    原文:Atom - Emmet插件的使用详解（HTML/CSS代码自动补全）

    3，简单的使用样例

    （1）我们在编辑器中输入如下代码：
    1
    ul>li*6

    （2）接着按下 tab 键，之前的缩写代码就会自动扩展为完整的 html 代码片断。

    原文:Atom - Emmet插件的使用详解（HTML/CSS代码自动补全）

    二、基本语法

    1，后代：>

    缩写：nav>ul>li
    1
    2
    3
    4
    5
    <nav>
        <ul>
            <li></li>
        </ul>
    </nav>
     

    2，兄弟：+

    缩写：div+p+bq
    1
    2
    3
    <div></div>
    <p></p>
    <blockquote></blockquote>

    3，上级：^

    （1）缩写：div+div>p>span+em^bq
    1
    2
    3
    4
    5
    <div></div>
    <div>
        <p><span></span><em></em></p>
        <blockquote></blockquote>
    </div>

    （2）缩写：div+div>p>span+em^^bq
    1
    2
    3
    4
    5
    <div></div>
    <div>
        <p><span></span><em></em></p>
    </div>
    <blockquote></blockquote>

    4，分组：()

    （1）缩写：div>(header>ul>li*2>a)+footer>p
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div>
        <header>
            <ul>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </header>
        <footer>
            <p></p>
        </footer>
    </div>

    （2）缩写：(div>dl>(dt+dd)*3)+footer>p
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <div>
        <dl>
            <dt></dt>
            <dd></dd>
            <dt></dt>
            <dd></dd>
            <dt></dt>
            <dd></dd>
        </dl>
    </div>
    <footer>
        <p></p>
    </footer>

    5，乘法：*

    缩写：ul>li*5
    1
    2
    3
    4
    5
    6
    7
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    6，自增符号：$

    （1）缩写：ul>li.item$*5
    1
    2
    3
    4
    5
    6
    7
    <ul>
        <li class="item1"></li>
        <li class="item2"></li>
        <li class="item3"></li>
        <li class="item4"></li>
        <li class="item5"></li>
    </ul>

    （2）缩写：h$[title=item$]{Header $}*3
    1
    2
    3
    <h1 title="item1">Header 1</h1>
    <h2 title="item2">Header 2</h2>
    <h3 title="item3">Header 3</h3>

    （3）缩写：ul>li.item$$$*5
    1
    2
    3
    4
    5
    6
    7
    <ul>
        <li class="item001"></li>
        <li class="item002"></li>
        <li class="item003"></li>
        <li class="item004"></li>
        <li class="item005"></li>
    </ul>

    （4）缩写：ul>li.item$@-*5
    1
    2
    3
    4
    5
    6
    7
    <ul>
        <li class="item5"></li>
        <li class="item4"></li>
        <li class="item3"></li>
        <li class="item2"></li>
        <li class="item1"></li>
    </ul>

    （5）缩写：ul>li.item$@3*5
    1
    2
    3
    4
    5
    6
    7
    <ul>
        <li class="item3"></li>
        <li class="item4"></li>
        <li class="item5"></li>
        <li class="item6"></li>
        <li class="item7"></li>
    </ul>


    7，ID和类属性

    （1）缩写：#header
    1
    <div id="header"></div>

    （2）缩写：.title
    1
    <div class="title"></div>

    （3）缩写：form#search.wide
    1
    <form id="search" class="wide"></form>

    （4）缩写：p.class1.class2.class3
    1
    <p class="class1 class2 class3"></p>

    8，自定义属性

    （1）缩写：p[title="Hello world"]
    1
    <p title="Hello world"></p>

    （2）缩写：td[rowspan=2 colspan=3 title]
    1
    <td rowspan="2" colspan="3" title=""></td>

    （3）缩写：[a='value1' b="value2"]
    1
    <div a="value1" b="value2"></div>


    9，文本：{}

    （1）缩写：a{Click me}
    1
    <a href="">Click me</a>

    （2）缩写：p>{Click }+a{here}+{ to continue}
    1
    <p>Click <a href="">here</a> to continue</p>

    10，隐式标签

    （1）缩写：.class
    1
    <div class="class"></div>

    （2）缩写：em>.class
    1
    <em><span class="class"></span></em>
    （3）缩写：ul>.class
    1
    2
    3
    <ul>
        <li class="class"></li>
    </ul>

    （4）缩写：table>.row>.col
    1
    2
    3
    4
    5
    <table>
        <tr class="row">
            <td class="col"></td>
        </tr>
    </table>
     

    三、HTML标签语法

    1，所有未知的缩写都会转换成标签

    缩写：hangge
    1
    <hangge></hangge>
     

    2，基本html标签

    （1）缩写：!
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
       
    </body>
    </html>

    （2）缩写：a
    1
    <a href=""></a>

    （3）缩写：a:link
    1
    <a href="http://"></a>

    （4）缩写：a:mail
    1
    <a href="mailto:"></a>

    （5）缩写：abbr
    1
    <abbr title=""></abbr>

    （6）缩写：acronym
    1
    <acronym title=""></acronym>

    （7）缩写：base
    1
    <base href="" />

    （8）缩写：basefont
    1
    <basefont />

    （9）缩写：br
    1
    <br />

    （10）缩写：frame
    1
    <frame />

    （11）缩写：hr
    1
    <hr />

    （12）缩写：bdo
    1
    <bdo dir=""></bdo>

    （13）缩写：bdo:r
    1
    <bdo dir="rtl"></bdo>

    （14）缩写：bdo:l
    1
    <bdo dir="ltr"></bdo>

    （15）缩写：col
    1
    <col />

    （16）缩写：link
    1
    <link rel="stylesheet" href="" />

    （17）缩写：link:css
    1
    <link rel="stylesheet" href="style.css" />

    （18）缩写：link:print
    1
    <link rel="stylesheet" href="print.css" media="print" />

    （19）缩写：link:favicon
    1
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

    （20）缩写：link:touch
    1
    <link rel="apple-touch-icon" href="favicon.png" />

    （21）缩写：link:rss
    1
    <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />

    （22）缩写：link:atom
    1
    <link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />

    （23）缩写：meta
    1
    <meta />

    （24）缩写：meta:utf
    1
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

    （25）缩写：meta:win
    1
    <meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />

    （26）缩写：meta:vp
    1
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

    （27）缩写：meta:compat
    1
    <meta http-equiv="X-UA-Compatible" content="IE=7" />

    （28）缩写：style
    1
    <style></style>

    （29）缩写：script
    1
    <script></script>

    （30）缩写：script:src
    1
    <script src=""></script>

    （31）缩写：img
    1
    <img src="" alt="" />

    （32）缩写：iframe
    1
    <iframe src="" frameborder="0"></iframe>

    （33）缩写：embed
    1
    <embed src="" type="" />

    （34）缩写：object
    1
    <object data="" type=""></object>

    （35）缩写：param
    1
    <param name="" value="" />

    （36）缩写：map
    1
    <map name=""></map>

    （37）缩写：area
    1
    <area shape="" coords="" href="" alt="" />

    （38）缩写：area:d
    1
    <area shape="default" href="" alt="" />

    （39）缩写：area:c
    1
    <area shape="circle" coords="" href="" alt="" />

    （40）缩写：area:r
    1
    <area shape="rect" coords="" href="" alt="" />

    （41）缩写：area:p
    1
    <area shape="poly" coords="" href="" alt="" />

    （42）缩写：form
    1
    <form action=""></form>

    （43）缩写：form:get
    1
    <form action="" method="get"></form>

    （44）缩写：form:post
    1
    <form action="" method="post"></form>

    （45）缩写：label
    1
    <label for=""></label>

    （46）缩写：input
    1
    <input type="text" />

    （47）缩写：inp
    1
    <input type="text" name="" id="" />

    （48）缩写：input:hidden 
    别名：input[type=hidden name]
    1
    <input type="hidden" name="" />

    （49）缩写：input:h 
    别名：input:hidden
    1
    <input type="hidden" name="" />

    （50）缩写：input:text, input:t 
    别名：inp
    1
    <input type="text" name="" id="" />

    （50）缩写：input:search 
    别名：inp[type=search]
    1
    <input type="search" name="" id="" />

    （51）缩写：input:email 
    别名：inp[type=email]
    1
    <input type="email" name="" id="" />

    （52）缩写：input:url 
    别名：inp[type=url]
    1
    <input type="url" name="" id="" />

    （53）缩写：input:password 
    别名：inp[type=password]
    1
    <input type="password" name="" id="" />

    （54）缩写：input:p 
    别名：input:password
    1
    <input type="password" name="" id="" />

    （55）缩写：input:datetime 
    别名：inp[type=datetime]
    1
    <input type="datetime" name="" id="" />

    （56）缩写：input:date 
    别名：inp[type=date]
    1
    <input type="date" name="" id="" />

    （57）缩写：input:datetime-local 
    别名：inp[type=datetime-local]
    1
    <input type="datetime-local" name="" id="" />

    （58）缩写：input:month 
    别名：inp[type=month]
    1
    <input type="month" name="" id="" />

    （59）缩写：input:week 
    别名：inp[type=week]
    1
    <input type="week" name="" id="" />

    （60）缩写：input:time 
    别名：inp[type=time]
    1
    <input type="time" name="" id="" />

    （61）缩写：input:number 
    别名：inp[type=number]
    1
    <input type="number" name="" id="" />

    （62）缩写：input:color 
    别名：inp[type=color]
    1
    <input type="color" name="" id="" />

    （63）缩写：input:checkbox 
    别名：inp[type=checkbox]
    1
    <input type="checkbox" name="" id="" />

    （64）缩写：input:c 
    别名：input:checkbox
    1
    <input type="checkbox" name="" id="" />

    （65）缩写：input:radio 
    别名：inp[type=radio]
    1
    <input type="radio" name="" id="" />

    （66）缩写：input:r 
    别名：input:radio
    1
    <input type="radio" name="" id="" />

    （67）缩写：input:range 
    别名：inp[type=range]
    1
    <input type="range" name="" id="" />

    （68）缩写：input:file 
    别名：inp[type=file]
    1
    <input type="file" name="" id="" />

    （69）缩写：input:f 
    别名：input:file
    1
    <input type="file" name="" id="" />

    （70）缩写：input:submit
    1
    <input type="submit" value="" />

    （71）缩写：input:s 
    别名：input:submit
    1
    <input type="submit" value="" />

    （72）缩写：input:image
    1
    <input type="image" src="" alt="" />

    （73）缩写：input:i 
    别名：input:image
    1
    <input type="image" src="" alt="" />

    （74）缩写：input:button
    1
    <input type="button" value="" />

    （75）缩写：input:b 
    别名：input:button
    1
    <input type="button" value="" />

    （76）缩写：isindex
    1
    <isindex />

    （77）缩写：input:reset 
    别名：input:button[type=reset]
    1
    <input type="reset" value="" />

    （78）缩写：select
    1
    <select name="" id=""></select>

    （79）缩写：option
    1
    <option value=""></option>

    （80）缩写：textarea
    1
    <textarea name="" id="" cols="30" rows="10"></textarea>

    （81）缩写：menu:context 
    别名：menu[type=context]> 
    1
    <menu type="context"></menu>

    （82）缩写：menu:c 
    别名：menu:context
    1
    <menu type="context"></menu>

    （83）缩写：menu:toolbar 
    别名：menu[type=toolbar]> 
    1
    <menu type="toolbar"></menu>

    （84）缩写：menu:t 
    别名：menu:toolbar
    1
    <menu type="toolbar"></menu>

    （85）缩写：video
    1
    <video src=""></video>

    （86）缩写：audio
    1
    <audio src=""></audio>

    （87）缩写：html:xml
    1
    <html xmlns="http://www.w3.org/1999/xhtml"></html>

    （88）缩写：keygen
    1
    <keygen />

    （89）缩写：command
    1
    <command />

    （90）缩写：bq 
    别名：blockquote
    1
    <blockquote></blockquote>

    （91）缩写：acr 
    别名：acronym
    1
    <acronym title=""></acronym>

    （92）缩写：fig 
    别名：figure
    1
    <figure></figure>

    （93）缩写：figc 
    别名：figcaption
    1
    <figcaption></figcaption>

    （94）缩写：ifr 
    别名：iframe
    1
    <iframe src="" frameborder="0"></iframe>

    （95）缩写：emb 
    别名：embed
    1
    <embed src="" type="" />

    （96）缩写：obj 
    别名：object
    1
    <object data="" type=""></object>

    （97）缩写：src 
    别名：source
    1
    <source></source>

    （98）缩写：cap 
    别名：caption
    1
    <caption></caption>

    （99）缩写：colg 
    别名：colgroup
    1
    <colgroup></colgroup>

    （100）缩写：fst, fset 
    别名：fieldset
    1
    <fieldset></fieldset>

    （101）缩写：btn 
    别名：button
    1
    <button></button>

    （102）缩写：btn:b 
    别名：button[type=button]
    1
    <button type="button"></button>

    （103）缩写：btn:r 
    别名：button[type=reset]
    1
    <button type="reset"></button>

    （104）缩写：btn:s 
    别名：button[type=submit]
    1
    <button type="submit"></button>


    原文出自：www.hangge.com  转载请保留原文链接：http://www.hangge.com/blog/cache/detail_1537.html
  • 相关阅读:
    Junit单元测试
    win7的6个网络命令
    WOJ1024 (POJ1985+POJ2631) Exploration 树/BFS
    WOJ1022 Competition of Programming 贪心 WOJ1023 Division dp
    woj1019 Curriculum Schedule 输入输出 woj1020 Adjacent Difference 排序
    woj1018(HDU4384)KING KONG 循环群
    woj1016 cherry blossom woj1017 Billiard ball 几何
    woj1013 Barcelet 字符串 woj1014 Doraemon's Flashlight 几何
    woj1012 Thingk and Count DP好题
    woj1010 alternate sum 数学 woj1011 Finding Teamates 数学
  • 原文地址：https://www.cnblogs.com/tangdrogn/p/9671913.html
Copyright © 2011-2022 走看看