学习要点：

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. 说说设计模式~ 模版模式（Template）

    返回目录 模版模式,又被称为模版方法模式,它可以将工作流程进行封装,并且对外提供了个性化的控制,但主流程外界不能修改,也就是说,模版方法模式中,将工作的主体架构规定好,具体类可以根据自己的需要,各自去 ...

  2. EF架构~数据分批批量提交

    回到目录 对于大数据量提交,包括插入,更新和删除,我始终不建议用EF自带的方法,因为它会增加与数据库的交互次数,一般地,EF的一个上下文在提交时会打开一个数据连接,然后把转换成的SQL语句一条一条的发 ...

  3. 关于WPF中RichTextBox失去焦点后如何保持高亮显示所选择的内容

    其实很简单,只要将容器控件中的附加属性FocusManager.IsFocusScope设为True就可以了 下面是个简单的用例: <Window x:Class="WpfApplic ...

  4. WPF中关于自定义控件的滚动条鼠标停留在内容上鼠标滚轮滚动无效的问题

    问题起因:在一个用户控件里放置了1个TreeView垂直顺序放置. 当用户控件中的内容超过面板大小时,滚动条会自动出现 ,但是只有当鼠标指示在右边滚动条的那一条位置时,才支持鼠标滚轴滚动. 点在控件内 ...

  5. DOM_06之定时器、事件、cookie

    1.定时器:①任务函数:函数结尾判断临界值:②启动定时器:a.周期性:timer=setInterval(任务函数,interval):b.一次性:timer=setTimeout(任务函数,wait ...

  6. 两套JRE

    JDK就是Java Development Kit.简单的说JDK是面向开发人员使用的SDK,它提供了Java的开发环境和运行环境. SDK是Software Development Kit 一般指软 ...

  7. springboot hessian

    注意把hessian的依赖换成4.0.38或者把git文件里的4.0.37放到maven私服中去,推荐使用4.0.37版本.38版本存在序列化bigdecimal的问题. <dependency ...

  8. FileUpload实现文件上传（包含多文件）

    package com.hzml.serve; import java.io.File; import java.io.IOException; import java.io.PrintWriter; ...

  9. Cwinux源码解析系列

      Cwinux源码解析系列

  10. Cocos2d-x 3.2 学习笔记（十一）Game 2048

    一.规则 游戏2048的规则很简单 2+2=4  4+4=8 8+8=16 16+16=32 ……1024+1024=2048 这游戏挺火的……不过做起来也不难,就用cocos2dx做一下,首先我也没 ...