Emmet

Emmet介绍

安装Emmet Css Snippets插件,学习Emmet语法

2018-10-16侠课岛    初级拔高       

前端/类库/框架/工具/打磨我们的开发利器Sublime 16     0     2433

也许此前有人听说过Emmet,也有人听说过Zen Coding,其实这两个名词都是指的同一个东西,Emmet是由Zen Coding近些年改名而来。Emmet是一个处理文本的组件,它主张通过CSS选择器的方式来编写我们的XHTML文件,怎么理解呢?

以往,我们编写CSS样式时,是通过CSS选择器来选择对应DOM节点。换一种思考方式,为何我们不能通过选择器反向生成DOM呢?我们通过一个例子来体验这一方式带来的好处:

hello

我们仅仅输入:

ul#list>item.list{item$}*5

按下 Tab 键或者 ctrl + E 便生成了以下html:

<ul id="list">
    <li class="item">item1</li>
    <li class="item">item2</li>
    <li class="item">item3</li>
    <li class="item">item4</li>
    <li class="item">item5</li>
</ul>   

是不是瞬间感觉省时又省力呢?接下来我们就赋予sublime这种能力

Emmet Css Snippets

前面说了,Emmet是一种组件,并不是某种编辑器特有的功能,而Emmet CSS Snippets 插件便是Emmet在Sublime的实现。我们通过以下方式安装:

  • 按下ctrl + shift + p 输入pcip 回车
  • 输入 emmet 选择 Emmet CSS Snippets 回车,等待安装完成
  • 为保证Emmet成功使用,重新启动一次Sublime

接下来,我们借助Sublime来讲解一下Emmet语法,这些东西不难,只要跟着动手撸一遍就能基本掌握了

Emmet语法

Emmet的语法官方描述有点太官方了,我按照自己的理解进行了简单的分类

生成文档

  • !或者 html:5 生成html5文档结构
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>
  • html:xt 生成html4过渡型文档结构
<!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>
  • html:4s 生成html4严格型文档结构
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

关系符

  • > 子级
    示例: ul > li
    <ul>
    <li></li>
    </ul>

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

16

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?