简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

第 30 章 使用 Emmet 插件 - 水之原

WBOY
Release： 2016-05-20 13:49:21
Original
1411 people have browsed it

学习要点：

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，默认情况下会出现如下代码：

//默认代码

<span style="color: #0000ff;"><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></span></span></span></span></span></span>
Copy after login

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

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

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

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

 

三．快速生成

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

//快速生成 HTML5 代码结构

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

<span style="color: #0000ff;"><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="zh-cn"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></span></span></span></span></span></span>
Copy after login

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

//快速生成标签代码 a

<span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span></span>
Copy after login

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

<span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="http://"</span><span style="color: #0000ff;">></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span> <br><span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="mailto:"</span><span style="color: #0000ff;">></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span></span></span>
Copy after login

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

<span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>超链接<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span></span>
Copy after login

//生成 CSS 链接 link link

<span style="color: #0000ff;"><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span></span>
Copy after login

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

<span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="hidden"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span></span></span>
Copy after login

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

<span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">dl</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">dl</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">table</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">table</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span>
Copy after login

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

<span style="color: #0000ff;"><span style="color: #800000;">nav</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">nav</span><span style="color: #0000ff;">></span></span></span></span>
Copy after login

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

<span style="color: #0000ff;"><span style="color: #800000;">div</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span></span></span></span>
Copy after login

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

<span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span></span></span></span></span></span></span>
Copy after login

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

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="header"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>
Copy after login

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

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="header"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="header sidebar"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span>
Copy after login

 

以上是 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/

Related labels：
第 30 章 使用 Emmet 插件 - 水之原
source：php.cn
Previous article：css兼容性问题及一些常见问题汇总 - jerrylsxu Next article：两列布局中单列定宽单列自适应布局的5种思路 - 小火柴的蓝色理想
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
javascript - vue.js组件化如何引入第三方插件js，比如说富文本，裁切之类的插件？ 最近在写一个项目，这个项目之前是用JQuery做的，现在全部vue组件化方案。在项目中原来的一个页面使用了第三方插件的一个富文本编辑器ckeditor.js，按照原来页面的顺序，先...
From 2017-04-11 09:21:12
0
1
572
php - Typecho中批量修改7牛外链图片地址 我之前用自己的空间搭建了一个图片站用来外链，之前wordpress的时候是使用了水煮鱼的插件，可以把地址自动转换成七牛的地址，想问下在Typecho中怎么实现。 我自己想了下原理应...
From 2017-04-10 15:28:37
0
0
215
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！