搜索
首页web前端html教程第 30 章 使用 Emmet 插件_html/css_WEB-ITnose

学习要点:

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/

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

如何使用HTML5表单验证属性来验证用户输入?如何使用HTML5表单验证属性来验证用户输入?Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

HTML5中跨浏览器兼容性的最佳实践是什么?HTML5中跨浏览器兼容性的最佳实践是什么?Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

如何高效地在网页中为PNG图片添加描边效果?如何高效地在网页中为PNG图片添加描边效果?Mar 04, 2025 pm 02:39 PM

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

&lt; datalist&gt;的目的是什么。 元素?&lt; datalist&gt;的目的是什么。 元素?Mar 21, 2025 pm 12:33 PM

本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

&lt; meter&gt;的目的是什么。 元素?&lt; meter&gt;的目的是什么。 元素?Mar 21, 2025 pm 12:35 PM

本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前

我如何使用html5&lt; time&gt; 元素以语义表示日期和时间?我如何使用html5&lt; time&gt; 元素以语义表示日期和时间?Mar 12, 2025 pm 04:05 PM

本文解释了HTML5&lt; time&gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

&gt; gt;的目的是什么 元素?&gt; gt;的目的是什么 元素?Mar 21, 2025 pm 12:34 PM

本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境