Element学习

生成 HTML 文档初始结构

HTML 文档的初始结构，就是包括 doctype、html、head、body 以及 meta 等内容。你只需要输入一个 “!” 就可以生成一个 HTML5 的标准文档初始结构，你没有看错，输入一个感叹号（当然是英文符号），然后摁下 TAB 键，就会发现生成了下面的结构：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    < title>Document</title>

</head>

<body>

</body>

</html>

这就是一个 HTML5 的标准结构，也是默认的 HTML 结构。如果你想生成 HTML4 的过渡型结构，那么输入指令 html:xt 即可生成如下结构：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    < title>Document</title>

</head>

<body>

</body>

</html>

Emmet 会自动把 doctype 给你补全了，怎么样，这样的功能会不会让你动心？简单总结一下常用的 HTML 结构指令：

html:5 或者 ! 生成 HTML5 结构
html:xt 生成 HTML4 过渡型
html:4s 生成 HTML4 严格型

生成带有 id 、class 的 HTML 标签

Emmet 的语法有点类似 CSS 的语法，生成 id 为 aaa 的 div 标签，我们只需要编写下面指令：

#aaa

Emmet 默认的标签为 div ，如果我们不给出标签名称的话，默认就生成 div 标签。如果编写一个 class 为 bbb 的 span 标签，我们需要编写下面指令：

span.bbb

然后就生成了对应的结构。同理，如果想要编写一个 id 为 ccc 的 class 为 ddd 的 ul 标签，我们可以这样写：

ul#ccc.ddd

很简单吧？比你用手写 id 、class 方便多了吧

生成后代：>

大于号表示后面要生成的内容是当前标签的后代。例如我要生成一个无序列表，而且被 class 为 aaa 的 div 包裹，那么可以使用下面指令：

div.aaa>ul>li

可以生成如下的结构：

<div class="aaa">

    <ul>

        <li></li>

    </ul>

</div>

生成兄弟：+

上面是生成下级元素，如果想要生成平级的元素，就需要使用 + 号。例如下面指令：

div+p+bq

就可以生成如下的 HTML 结构：

<div></div>

<p></p>

<blockquote></blockquote>

生成上级元素：^

上级（Climb-up）元素是什么意思呢？前面咱们说过了生成下级元素的符号“>”，当使用 div>ul>li 的指令之后，再继续写下去，那么后续内容都是在 li 下级的。如果我想编写一个跟 ul 平级的 span 标签，那么我需要先用 “^” 提升一下层次。例如：

div>ul>li^span

就会生成如下结构：

<div>

    <ul>

        <li></li>

    </ul>

    <span></span>

</div>

如果我想相对与 div 生成一个平级元素，那么就再上升一个层次，多用一个“^”符号：

div>ul>li^^span

重复生成多份：*

特别是一个无序列表，ul 下面的 li 肯定不只是一份，通常要生成很多个 li 标签。那么我们可以直接在 li 后面 * 上一些数字：

ul>li*5

这样就直接生成五个项目的无序列表了。如果想要生成多份其他结构，方法类似。

生成分组：()

用括号进行分组，这样可以更加明确要生成的结构，特别是层次关系，例如：

div>(header>ul>li*2>a)+footer>p

这样很明显就可以看出层次关系和并列关系，生成如下结构：

<div>

    <header>

        <ul>

            <li><a href=""></a></li>

            <li><a href=""></a></li>

        </ul>

    </header>

    <footer>

        <p></p>

    </footer>

</div>

此外，分组还可以很方便的结合上面说的 “*” 符号生成重复结构：

(div>dl>(dt+dd)*3)+footer>p

生成结构：

<div>

    <dl>

        <dt></dt>

        <dd></dd>

        <dt></dt>

        <dd></dd>

        <dt></dt>

        <dd></dd>

    </dl>

</div>

<footer>

    <p></p>

</footer>

生成自定义属性：[attr]

a 标签中往往需要附带 href 属性和 title 属性，如果我们想生成一个 href 为 “http://blog.wpjam.com” ，title 为“我爱水煮鱼”的 a 标签，可以这样写：

a[href="http://blog.wpjam.com" title="我爱水煮鱼"]

其他标签和属性都类似。

对生成内容编号：$

例如无序列表，我想为五个个 li 增加一个 class 属性值 item1 ，然后依次递增从 1-5，那么就需要使用 $ 符号：

ul>li.item$*5

这样就生成了如下结构：

<ul>

 <li class="item1"></li>

 <li class="item2"></li>

 <li class="item3"></li>

 <li class="item4"></li>

 <li class="item5"></li>

</ul>

$ 就表示一位数字，只出现一个的话，就从1开始。如果出现多个，就从0开始。如果我想生成三位数的序号，那么要写三个 $：

ul>li.item$$$*5

输出：

<ul>

    <li class="item001"></li>

    <li class="item002"></li>

    <li class="item003"></li>

    <li class="item004"></li>

    <li class="item005"></li>

</ul>

只能这样单调的生成序号？对于强大的 Emmet 来说，肯定不会会了，我们也可以在 $ 后面增加 @- 来实现倒序排列：

ul>li.item$@-*5

生成如下结构：

<ul>

    <li class="item5"></li>

    <li class="item4"></li>

    <li class="item3"></li>

    <li class="item2"></li>

    <li class="item1"></li>

</ul>

同样，我们也可以使用 @N 指定开始的序号：

ul>li.item$@3*5

这样就会从 3 开始排序，生成如下代码：

<ul>

    <li class="item3"></li>

    <li class="item4"></li>

    <li class="item5"></li>

    <li class="item6"></li>

    <li class="item7"></li>

</ul>

配合上面倒序输出，可以这样写：

ul>li.item$@-3*5

生成的就是以 3 为底倒序：

<ul>

    <li class="item7"></li>

    <li class="item6"></li>

    <li class="item5"></li>

    <li class="item4"></li>

    <li class="item3"></li>

</ul>

生成文本内容：{}

上面讲解了如何生成 HTML 标签，那里面的内容呢？当然也可以生成了：

a[href="http://blog.wpjam.com"]{点击这里到 我爱水煮鱼}

这样就生成了一个到我爱水煮鱼的超链接了。在生成内容的时候，特别要注意前后的符号关系，虽然 a>{Click me} 和 a{Click me} 生成的结构是相同的，但是加上其他的内容就不一定了，例如：

<!-- a{click}+b{here} -->

<a href="">click</a><b>here</b>

<!-- a>{click}+b{here} -->

<a href="">click<b>here</b></a>

这样就生成了完全不同的结构，注意这些小细节哦。

不要有空格

在写指令的时候，你可能为了代码的可读性，使用一些空格什么的排版一下。这就会导致代码无法使用。例如下面这句：

(header > ul.nav > li*5) + footer
Emmet 是一个能提高前端开发效率的编辑器插件，支持 Sublime，Atom，TextMate，Nodepad++ 等主流编辑器。Emmet 定义了一些缩写，当我们输入缩写代码后，按展开键（默认是 Tab 键）后会展开成完整的代码，以上及以下的代码都是在前端IDE WebStorm下使用的
在 HTML 文件中输入 ul.list>li{第$个}*2 ， 然后按展开键，会展开成如下代码

<ul class="list">

  <li>第1个</li>

  <li>第2个</li>

</ul>

在 CSS 文件中输入 posa 会展开成

position: absolute;

是不是很方便~

Emmet 的 HTML 缩写支持 CSS 选择器风格的写法。如我们要写一个 id 为 box，类名为 news-box 的div，div 下面有 a元素，其 href 为 xxx 。只需这么写 div#box.news-box>a[href=xxx] ，和 CSS 选择器的写法完全一致。

html:5 展开为

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <title>Document</title>

</head>

<body>

</body>

</html>

link:css 展开为

<link rel="stylesheet" href="style.css">

btn 展开为

<button></button>

select+ 展开为

<select name="" id="">

  <option value=""></option>

</select>

ul+ 展开为

<ul>

  <li></li>

</ul>

ol+ 展开为

<ol>

  <li></li>

</ol>

dl+ 展开为

<dl>

  <dt></dt>

  <dd></dd>

</dl>

table+ 展开为

<table>

  <tr>

    <td></td>

  </tr>

</table>

tr+ 展开为

<tr>

  <td></td>

</tr>

cc:ie6 展开为

<!--[if lte IE 6]>

<![endif]-->

cc:ie 展开为

<!--[if IE]>

<![endif]-->

cc:noie 展开为

<!--[if !IE]><!-->

<!--<![endif]-->

Element学习的更多相关文章

ExtJS得知--------Ext.Element学习的查询方法（示例）
详细实例:(实验结果可复制代码后进行演示) Ext.onReady(function(){ Ext.create('Ext.panel.Panel',{//创建一个面板 title:'我的面板' , ...
vue2.0 element学习
1,bootstrap和vue2.0结合使用 vue文件搭建好后,引入jquery和bootstrap 我采用的方式为外部引用在main.js内部直接导入用vue-cli直接安装jquery和bo ...
vue Element学习和问题处理
1. resetForm内容没有完全被重置在使用resetForm时,会还原数据到初始化data时的值,有时会出现值已修改,但页面无刷新变化.添加: this.$nextTick(() => { ...
Ext JS学习第十三天 Ext基础之 Ext.Element
•Ext.Element提供了181个方法,嗯,还没完,只是在4.1版本中是这样,最新的4.2版本貌似又增加了新方法,可谓是相当丰富给力.那么根据操作类型基本可以分为查询系.DOM操作系.样式操作系. ...
js的Element.scrollIntoView的学习
1.Element.scrollIntoView() 该方法让当前元素滚动到浏览器窗口的可是区域内: 2.语法: element.scrollIntoView();//等同于element.sc ...
Vue学习-Element框架
今天学了一个基于Vue2.0的桌面端组件库Element,号称是全世界最流行的Vue UI框架.感觉学会了之后就变身大牛了有木有. 好了,不吹牛皮了. Element官方文档通俗易懂,框架什么的安装引 ...
五分钟学习React（六）：元素（Element）和组件（Component）
俗话说"万丈高楼平地起",从这一期开始,我们将使用基于Webpack+Babel的React学习React框架中的一些基础概念.在学习React的过程中经常会把Element.Cl ...
Vue学习笔记-基于CDN引入方式简单前后端分离项目学习(Vue+Element+Axios)
一使用环境开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7 (Windows x86- ...
ExtJS学习之路第二步：Ext.Component 和 Ext.dom.Element 的区别
让我们来初步的探讨下Ext.Component和Ext.Element的区别. jQuery偏重于DOM元素的操作 1.每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的D ...

随机推荐

IOS webView学习
本文简单介绍下在IOS中,webView的基本用法,也顺便强化下自己的基础知识----天明少羽爬楼梯一.加载外部HTML 显示webView 报错:NSURLSession/NSURLConnect ...
CentOS 5.8 上安装 systemtap-2.6 转
http://segmentfault.com/a/1190000002541077#articleHeader1
MVC无限级分类02,增删改查
继上一篇"MVC无限级分类01,分层架构,引入缓存,完成领域模型与视图模型的映射",本篇开始MVC无限级分类的增删改查部分,源码在github. 显示和查询使用datagrid显 ...
td顶部对齐
<td width=568 colspan=3 valign="top" style='width:426.1pt;border:none; border-bottom:so ...
《JavaScript启示录》
<JavaScript启示录> 基本信息作者: (美)Cody Lindley 译者: 徐涛出版社:人民邮电出版社 ISBN:9787115334947 上架时间:2014-2-21 ...
jQuery.merge与concat的区别
示例如下: s1="123"; s2="145"; s3 = $.merge(s1,s2);//s3="123",字符串s1 s2不变,默认 ...
MAC 10.10 开机登录无敌风火轮问题解决方式
查明是第三方输入法引起的问题,我用的是搜狗输入法.所以把搜狗卸载就好了.(注意是卸载,不是单纯的从输入源里移除) 操作的思路是,首先要进入计算机,才干进行操作. 办法是开机进入单机模式,删除苹果一个文 ...
C语言条件编译
使用与平台有关的C语言函数,可能会使得程序不具有可移植性.比如Socket编程.多线程编程等是与平台有关的. 若想将程序做成平台无关的就需要用到与平台相关的条件编译. 下面转自:http://blog ...
iOS开发-沙盒(sandbox)机制
苹果前天发的财报,貌似现在用ios系统的比以前又多了一些,但是大家的iPhone购买的渠道也是五花八门,有的从非正规渠道购买的iPhone里的操作系统已经被越狱过,越狱这个事情和Android的roo ...
倒计时总结 Timer Handler CountDownTimer RxJava MD
Markdown版本笔记我的GitHub首页我的博客我的微信我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...