学习要点：
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> <br /><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/
＆gt; gt;的目的是什么 元素？Mar 21, 2025 pm 12:34 PM本文讨论了HTML＆lt; Progress＆gt;元素，其目的，样式和与＆lt; meter＆gt;元素。主要重点是使用＆lt; progress＆gt;为了完成任务和LT;仪表＆gt;对于stati
＆lt; datalist＆gt;的目的是什么。 元素？Mar 21, 2025 pm 12:33 PM本文讨论了html＆lt; datalist＆gt;元素，通过提供自动完整建议，改善用户体验并减少错误来增强表格。Character计数：159
＆lt; meter＆gt;的目的是什么。 元素？Mar 21, 2025 pm 12:35 PM本文讨论了HTML＆lt; meter＆gt;元素，用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了＆lt; meter＆gt;从＆lt; progress＆gt;和前
如何使用HTML5表单验证属性来验证用户输入？Mar 17, 2025 pm 12:27 PM本文讨论了使用HTML5表单验证属性，例如必需的，图案，最小，最大和长度限制，以直接在浏览器中验证用户输入。
视口元标签是什么？为什么对响应式设计很重要？Mar 20, 2025 pm 05:56 PM本文讨论了视口元标签，这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互，而滥用可能会导致设计和可访问性问题。
我如何使用html5＆lt; time＆gt; 元素以语义表示日期和时间？Mar 12, 2025 pm 04:05 PM本文解释了HTML5＆lt; time＆gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性（ISO 8601格式）的重要性，并在人类可读文本旁边，增强Accessibilit
＆lt; iframe＆gt;的目的是什么。 标签？使用时的安全考虑是什么？Mar 20, 2025 pm 06:05 PM本文讨论了＆lt; iframe＆gt;将外部内容嵌入网页，其常见用途，安全风险以及诸如对象标签和API等替代方案的目的。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
SublimeText3 英文版
推荐：为Win版本，支持代码提示！
SublimeText3汉化版
中文版，非常好用
WebStorm Mac版
好用的JavaScript开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
SublimeText3 Linux新版
SublimeText3 Linux最新版
