学习要点：

1.安装方式

2.自定义！生成

3.快速生成

 

主讲教师：李炎恢

本章主要探讨了解一下 Sublime Text3 的一个 HTML5 代码提示插件：Emmet，这个插件比自带原生的要强大许多。

一．安装方式

Emmet 插件安装一般采用两种方式，1.通过命令安装；2.下载离线安装。我这里直接采用的是下载离线安装方式。具体步骤：

1.解压下载好的 Emmet 插件包(这里会提供)；

2.将 Emmet 和 PyV8 两个文件夹复制到 Sublime Text3 的程序包中；

3.左下角会显示自动安装，安装好后，重启 Sublime Text3；4.在编辑器输入英文状态下的“!”，然后 ctrl+e，出现了 HTML5 的代码库，则安装

成功。

注：如果安装失败或出现其他错误，请自行百度选用其他方式安装，或解决安装出错的问题。

二．自定义！生成

我们输入!，然后 ctrl+e，默认情况下会出现如下代码：

//默认代码

<!doctype html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Document</title>

    </head>

    <body>

    </body>

</html>

　　这里有两个地方和我们之前生成的代码不一样，第一处是：doctype 没有大写；第二处：lang 是 en 的。其实这两处不改也没有太大关系，但有强迫症的看了可能会难受。具体修改方法如下：

1.首先，进入程序包 pagkages；

2.其次，进入 Emmet 文件夹，再进入 emmet 文件夹，找到 snippets.json 文件；

3.最后，打开这个文件，找到相应处修改即可。

三．快速生成

　　Emmet 提供了非常丰富的 HTML 和 CSS 代码的快速生成功能，通过使用快速生成代码，极大的增加了开发速度。只不过，Emmet 提供的生成方式需要二次学习，起初可能还不如手工敲击的快。所以，需要一定时间的学习磨合。

//快速生成 HTML5 代码结构

! + (ctrl + e 或 tab 键) 或 html:5 + tab 键

<!DOCTYPE html>

<html lang="zh-cn">

    <head>

        <meta charset="UTF-8">

        <title>Document</title>

    </head>

    <body>

    </body>

</html>

所有代码生成，都需要通过 tab 键来生成代码，后面不在赘述。

//快速生成标签代码 a

<a href=""></a>

//快速生成标签相应的属性值a:link、a:mail

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

//生成标签内的值a{超链接}

<a href="">超链接</a>

//生成 CSS 链接 link link

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

//生成表单控件input、input:hidden

<input type="text">

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

//生成带子标签的一组标签ul+、ol+、dl+、table+

<ul>

    <li></li>

</ul>

<ol>

    <li></li>

</ol>

<dl>

    <dt></dt>

    <dd></dd>

</dl>

<table>

    <tr>

        <td></td>

    </tr>

</table>

//生成嵌套子标签 nav>ul>li

<nav>

    <ul>

        <li></li>

    </ul>

</nav>

//生成相邻兄弟标签 div+p+h1

<div></div>

<p></p>

<h1></h1>

//生成乘积数量的标签 ul>li*5

<ul>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

</ul>

//创建具有 ID 的标签 div#header

<div id="header"></div>

//创建具有 class 的标签 div.header、div.header.sidebar

<div class="header"></div>

<div class="header sidebar"></div>

以上是 HTML 部分的代码生成功能，下面来看下 CSS 的快速生成功能：

//生成 position: relative pos

输入 pos 即可出现 position:relative 这组 CSS 样式，并且 relative 是选定状态，有助于你更换属性值。

但是我们发现使用 sublime 结合 Emmet 插件的 CSS 提示非常的灵活，不会死板的必须要输入 pos。下面的输入都可以得到相应的值：

po = position: relative

只要输入 po 或者大于 po 字母量的值，都可以得到 position:relative。当然，如果你只是输入 p，那么由于优先级的考虑，出现的是 padding: |。

如果你输入有误，它也会自动纠错，比如下面这个：

pod = position: relative

如果你想一开始得到的是 absolute 这个属性值，那么直接输入：

poa = position: absolute;

当然，上门的标准写法是这样的：

pos:a = position: absolute;

如果想输入背景的属性，直接使用 bg 即可：

bg = background: |;

使用 bg+可以展开背景属性的完整形式： bg+ = background: #fff url() 0 0 no-repeat;

使用 bg:n 可以设置背景属性值为 none： bg:n = background: none;

备注：HTML 和 CSS 其他大部分代码生成方案，可以参考如下网址：

http://docs.emmet.io/cheat-sheet/

第 30 章 使用 Emmet 插件的更多相关文章

  1. sublime Text emmet插件使用手册

    转自:http://www.w3cplus.com/tools/emmet-cheat-sheet.html 介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工 ...

  2. 【编程工具】Sublime Text3 之 Emmet 插件的详细使用的方法

    这篇关于 Emmet 插件使用的博文之前就想写了,今天刚好闲暇时间,就花了一些时间进行了总结. 我们都这道 Emmet 这款插件在前端设计里被称为神器,确实,神器称号名不虚传.因为这款插件可以帮助我们 ...

  3. suse 12 二进制部署 Kubernetets 1.19.7 - 第12章 - 部署dashboard插件

    文章目录 1.12.0.创建namespace 1.12.1.创建Dashboard rbac文件 1.12.2.创建dashboard文件 1.12.3.查看pod以及svc 1.12.4.获取 d ...

  4. Zend Studio 中安装emmet插件的方法

    本人的Zend Studio版本是Zend Studio 10.0.0. 1. 打开Zend Studio,点击 Help --> Install New Software,如下图: 2.  在 ...

  5. emmet插件快捷键：

    概念:emmet插件是用在编辑器里面的一个可以快速编写代码的插件,比如sublime text中,就可以用它来快速创建代码,本文主要是在sublime text的编辑器中做的测试代码. 一.html ...

  6. emmet插件学习，练习中遇到一些问题

    emmet插件学习:帮助提高敲代码效率的插件 参考文献:Emmet(Zen coding)HTML代码使用技巧七则http://www.wzsky.net/html/Website/htmlcss/1 ...

  7. 如何在Notepad++ 中成功地安装Emmet 插件

    对于前端来说,Emmet 是一个好东西,但是好几次在 “Notepad++” 中安装后不能使用.今天认认真真地查找了失败原因,配置完成后,终于可以在 “Notepad++” 下正常使用了.故把过程记录 ...

  8. Sublime Text 2 安装emmet插件和常用快捷键

    一.先安装package control1.按Ctrl+`调出console,输入以下命令然后回车 import urllib2,os; pf='Package Control.sublime-pac ...

  9. Sublime Text3开发工具安装emmet插件

    第一步:Sublime Text导入Package Control 自动安装: 1.打开Sublime Text -->View --> Show Console 菜单打开控制台 2.粘贴 ...

随机推荐

  1. Laravel5.0学习--01 入门

    本文以laravel5.0.22为例. 生产环境建议使用laravel5.1版本,因为该版本是长期支持版本.5.1文档更详细:http://laravel-china.org/docs/5.1. 环境 ...

  2. C#学习系列-out与ref的区别

    参考:http://www.microsoftvirtualacademy.com/Content/ViewContent.aspx?et=9851&m=9839&ct=31056 如 ...

  3. 使用jasperreports-5.6.0.jar导致的问题

    使用jasperreports-5.6.0.jar导致的问题 Struts2+jasperReport5.6如下设置: <!-- 社员档案 --> <package name=&qu ...

  4. JS在IE和FireFox之间常用函数的区别小结

    1.event.srcElement 复制代码 代码如下: //srcElement只能在IE下使用target是FireFox使用的,下面是兼容性写法 var obj = e.srcElement ...

  5. Hello Netgen

    Hello Netgen eryar@163.com 摘要Abstract:本文主要介绍如何对下载的Netgen源码进行编译生成Netgen程序和程序开发所需要的库nglib. 关键字Key Word ...

  6. Cocos2d-x 3.2 学习笔记（十四）保卫萝卜之界面UI

         保卫萝卜~上一篇说了使用CocoStudio制作主界面,这里来完善主界面动画及后续界面(主题界面ThemeUI.场景选择界面SelectMapUI),主要涉及的控件PageView. 学习要 ...

  7. 轻松自动化---selenium-webdriver(python) (十一)

    本节重点: 控制滚动条到底部 有时候我们需要控制页面滚动条上的滚动条,但滚动条并非页面上的元素,这个时候就需要借助js是来进行操作.一般用到操作滚动条的会两个场景: 注册时的法律条文需要阅读,判断用户 ...

  8. Concise - 面向对象的，一致的前端开发框架

    在当今世界,有许多前端开发的框架.那么,为什么还要再造一个框架呢?Concise 建立的目的是使你有很多的开箱即用的选项,让你能够方便的搭建移动友好的网站和 Web 应用程序.另外还包括一个简单的网格 ...

  9. Android 网络通信API的选择和实现实例

    Android开发网络通信一开始的时候使用的是AsyncTask封装HttpClient,没有使用原生的HttpURLConnection就跳到了Volley,随着OkHttp的流行又开始迁移到OkH ...

  10. C++程序设计之四书五经[转自2004程序员杂志]--上篇

    C++程序设计之四书五经 作者:荣耀 C++是一门广泛用于工业软件研发的大型语言.它自身的复杂性和解决现实问题的能力,使其极具学术研究价值和工业价值.和C语言一样,C++已经在许多重要的领域大获成功. ...