学习要点：

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. 爱上MVC~一个Action多套View模版的设计

    回到目录 模块化 这个问题是在做模块化设计时出现的,在Lind.DDD.Plugins模块里,需要对应的模块实体,模块管理者,模块标识接口等,开发时,如果你的功能点属于一个模块,需要实现IPlugin ...

  2. 邮件开发——base64账号密码转换

    package com.hq.base64; import java.io.BufferedReader; import java.io.FileInputStream; import java.io ...

  3. D3.js 学习（ 一）

    <html> <head> <meta charset="utf-8"> <title>第三课:为柱形图添加坐标轴</titl ...

  4. Android 4.2版本以下使用WebView组件addJavascriptInterface方法存在JS漏洞

    JS注入漏洞存在的Android版本:Android < 4.2 综述:Android的SDK中提供了一个WebView组件,用于在应用中嵌入一个浏览器来进行网页浏览.WebView组件中的ad ...

  5. java错误

    Workspace in use or cannot be created, choose a different one. 出现这种情况一般是workspace的配置文件中出现了.lock文件(wo ...

  6. 《BI那点儿事》数据挖掘的主要方法

    一.回归分析目的:设法找出变量间的依存(数量)关系, 用函数关系式表达出来.所谓回归分析法,是在掌握大量观察数据的基础上,利用数理统计方法建立因变量与自变量之间的回归关系函数表达式(称回归方程式).回 ...

  7. [转载]Office Visio快捷键

    “帮助”任务窗格和“帮助”窗口 使用“帮助”任务窗格和“帮助”窗口 通过“帮助”任务窗格,您可以访问“Microsoft Office Visio 帮助”的全部内容,该窗格显示为 Microsoft ...

  8. JAVA 设计模式 备忘录模式

    用途 备忘录模式 (Memento) 在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态. 这样以后就可将该对象恢复到原先保存的状态. 备忘录模式是一种行为型模式. 结构

  9. Elasticsearch——使用_cat查看Elasticsearch状态

    Elasticsearch通过使用JSON来作为沟通的数据格式,这对于开发者来说很友好,因为很多程序都支持JSON格式.比如js就不说了,Java也有fastjson,ruby什么的都自带json. ...

  10. 第23/24周 临时数据库（TempDb）

    在今天的性能调优培训里我们讨论下TempDb——SQL Server的公共厕所,在SQL Server里我是这样描述它的.我们的每个人都会经常使用TempDb.有些人直接使用它,有些人不直接使用它.今 ...