手机版 | 登陆 | 注册 | 投稿 | 反馈留言 | 设首页 | 加收藏
网站首页 > 开发工具 > sublime text >快速编写HTML代码和CSS代码

快速编写HTML代码和CSS代码

时间:2019-03-15    点击: 次    发布者:佚名 - 小 + 大

一、快速编写HTML代码 

1.  初始化 

HTML
文档需要包含一些固定的标签,比如<html><head><body>等,现在你只需要1秒钟就可以输入这些标签。比如输入“!”“html:5”,然后按Tab键: 

 

  • html:5 !:用于HTML5文档类型

  • html:xt:用于XHTML过渡文档类型

  • html:4s:用于HTML4严格文档类型

    2.  轻松添加类、id、文本和属性 

    连续输入元素名称和IDEmmet会自动为你补全,比如输入p#foo 



    连续输入类和id,比如p.bar#foo,会自动生成: 

    Html代码 

1.     <p class="bar" id="foo"></p>  


下面来看看如何定义HTML元素的内容和属性。你可以通过输入h1{foo}a[href=#],就可以自动生成如下代码: 

Html代码 

1.     <h1>foo</h1>  

2.     <a href="#"></a>  

 



3.  嵌套 

现在你只需要1行代码就可以实现标签的嵌套。 

  • >:子元素符号,表示嵌套的元素

  • +:同级标签符号

  • ^:可以使该符号前的标签提升一行

    效果如下图所示: 



    4.  分组 

    你可以通过嵌套和括号来快速生成一些代码块,比如输入(.foo>h1)+(.bar>h2),会自动生成如下代码: 

    Html代码 

1.     <div class="foo">  

2.       <h1></h1>  

3.     </div>  

4.     <div class="bar">  

5.       <h2></h2>  

6.     </div>  

 



5.  隐式标签 

声明一个带类的标签,只需输入div.item,就会生成<div class="item"></div> 

在过去版本中,可以省略掉div,即输入.item即可生成<divclass="item"></div>。现在如果只输入.item,则Emmet会根据父标签进行判定。比如在<ul>中输入.item,就会生成<liclass="item"></li> 



下面是所有的隐式标签名称: 

  • li:用于ulol

  • tr:用于tabletbodytheadtfoot

  • td:用于tr

  • option:用于selectoptgroup

    6.  定义多个元素 

    要定义多个元素,可以使用*符号。比如,ul>li*3可以生成如下代码: 

    Html代码 

1.     <ul>  

2.       <li></li>  

3.       <li></li>  

4.       <li></li>  

5.     </ul>  

 



7.  定义多个带属性的元素 

如果输入 ul>li.item$*3,将会生成如下代码: 

Html代码 

1.     <ul>  

2.       <li class="item1"></li>  

3.       <li class="item2"></li>  

4.       <li class="item3"></li>  

5.     </ul>  

 



二、CSS缩写 

1.   

比如要定义元素的宽度,只需输入w100,即可生成 

Css代码 

1.     width: 100px;  

 



除了px,也可以生成其他单位,比如输入h10p+m5e,结果如下: 

Css代码 

1.     height: 10%;  

2.     margin: 5em;  



单位别名列表: 

  • p 表示%

  • e 表示 em

  • x 表示 ex

    2.  附加属性 

    可能你之前已经了解了一些缩写,比如 @f,可以生成: 

    Css代码 

1.     @font-face {  

2.       font-family:;  

3.       src:url();  

4.     }  


一些其他的属性,比如background-imageborder-radiusfont@font-face,text-outlinetext-shadow等额外的选项,可以通过“+”符号来生成,比如输入@f+,将生成: 

Css代码 

1.     @font-face {  

2.       font-family: 'FontName';  

3.       src: url('FileName.eot');  

4.       src: url('FileName.eot?#iefix') format('embedded-opentype'),  

5.          url('FileName.woff') format('woff'),  

6.          url('FileName.ttf') format('truetype'),  

7.          url('FileName.svg#FontName') format('svg');  

8.       font-style: normal;  

9.       font-weight: normal;  

10.  }  

 



3.  模糊匹配 

如果有些缩写你拿不准,Emmet会根据你的输入内容匹配最接近的语法,比如输入ov:hov-hovhoh,生成的代码是相同的: 

Css代码 

1.     overflow: hidden;  

 



4.  供应商前缀 

如果输入非W3C标准的CSS属性,Emmet会自动加上供应商前缀,比如输入trs,则会生成: 

Css代码 

1.     -webkit-transform: ;  

2.     -moz-transform: ;  

3.     -ms-transform: ;  

4.     -o-transform: ;  

5.     transform: ;  

 



你也可以在任意属性前加上“-”符号,也可以为该属性加上前缀。比如输入-super-foo 

Css代码 

1.     -webkit-super-foo: ;  

2.     -moz-super-foo: ;  

3.     -ms-super-foo: ;  

4.     -o-super-foo: ;  

5.     super-foo: ;  


如果不希望加上所有前缀,可以使用缩写来指定,比如-wm-trf表示只加上-webkit-moz前缀: 

Css代码 

1.     -webkit-transform: ;  

2.     -moz-transform: ;  

3.     transform: ;  


前缀缩写如下: 

  • w 表示 -webkit-

  • m 表示 -moz-

  • s 表示 -ms-

  • o 表示 -o-

    5.  渐变 

    输入lg(left,#fff 50%, #000),会生成如下代码: 

    Css代码 

1.     background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));  

2.     background-image: -webkit-linear-gradient(left, #fff 50%, #000);  

3.     background-image: -moz-linear-gradient(left, #fff 50%, #000);  

4.     background-image: -o-linear-gradient(left, #fff 50%, #000);  

5.     background-image: linear-gradient(left, #fff 50%, #000);  

 



三、附加功能 

生成Lorem ipsum文本 

Lorem ipsum
指一篇常用于排版设计领域的拉丁文文章,主要目的是测试文章或文字在不同字型、版型下看起来的效果。通过Emmet,你只需输入lorem lipsum即可生成这些文字。还可以指定文字的个数,比如lorem10,将生成: 

引用

Loremipsum dolor sit amet, consectetur adipisicing elit. Libero delectus.

 



四、定制 

你还可以定制Emmet插件: 

  • 添加新缩写或更新现有缩写,可修改snippets.json文件

  • 更改Emmet过滤器和操作的行为,可修改preferences.json文件

  • 定义如何生成HTMLXML代码,可修改syntaxProfiles.json文件


    五、针对不同编辑器的插件 

    Emmet
    支持的编辑器如下(链接为针对该编辑器的Emmet插件): 



上一篇:没有了

下一篇:如何快速在sublime编辑器中写标签



Copyright © 2019 天人系列管理系统 版权所有,授权www.rjc.wang使用  Powered by 55TR.COM 运行代码测试页
锐教程网站www.rjc.wang由天天科技荣誉出品