游客

标题:前端开发高效率的工具插件：Emmet语法说明使用示例（结合Sublime Text）
正文:
HTML代码写起来很费事，因为它的标签多。一种解决方法是采用模板，在别人写好的骨架内，填入自己的内容。还有一种就是我今天想要介绍的方法----简写法。Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具:基本上，大多数的文本编辑器都会允许你存储和重用一些代码块，我们称之为“片段”。虽然片段能很好地推动你得生产力，但大多数的实现都有这样一个缺点：你必须先定义你得代码片段，并且不能再运行时进行拓展。Emmet把片段这个概念提高到了一个新的层次：你可以设置CSS形式的能够动态被解析的表达式，然后根据你所输入的缩写来得到相应的内容。Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前端开发人员，但也可以用于编程语言。先安装到一个编辑器上Emmet是一个编辑器插件，官方网站提供多编辑器支持。我一般使用Sublime，下面就以Sublime插件举例。假设你已经按照了Sublime Text 3，如图查看是否有Emmet？菜单：Preferences>Package Settings>Emmet如果没有这个Emmet，没关系，不要着急，先下载一个：Emmet（Emmet为大部分流行的编辑器都提供了安装插件这里选择Sublime Text），把下载好的解压缩后，复制emmet-sublime-master文件夹，找到Sublime Text的安装目录，比如：D:\Camnpr\FEEditor\Sublime Text 3\Data\Packages 粘贴到此处，就可以了。再去看看上边的图，有Emmet了吗？如何使用Emmet的功能？先在Sublime里新建一个html页面，里边是空空的，接下来输入：html:5 按下tab键或者按ctrl+e，是不是发生了神奇的事情？结果如下： <!DOCTYPE html>
　　<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title></title>
　　</head>
　　<body>
　　
　
[<<][[1]][2][3][>>]

查看评论(0)
发表评论

 首页