结合Zen Coding快速编写HTML代码(sublime text2篇)
首先说下,如何在sublime text2加上zen coding插件
按 Ctrl+`(就是~这个键) 复制下面的代码 确认 重新启动sublime text2
import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())
重启看到如上图所示,代表Package Control 安装成功
接下来就是暂时分享下自己还不是那么熟悉的zen coding的语法
1.新建html
不知道大家新建一个html 页面时,是如何输入文档声明和 head 那一坨东西的。现在有了Zen Coding,只需输入几个字母就能立马生成相应文档声明的 html 结构框架
html:4t (HTML 4.01 Transitional)
html:4s (HTML 4.01)
html:xt (XHTML 1.0)
html:xs (XHTML 1.0 Strict)
html:xxs (XHTML 1.1)
html: (HTML5)
然后按上ctrl+E,马上就可以新建成功
2.若是你对CSS的选择器比较熟悉,就可以得用简短的类似于CSS选择器的代码高效的编写出HTML代码。
div#header>div#logo+ul.nav>li.item-$*>a
接着按一下快捷键ctr+E,就会自动生成如下的HTML代码:
<div id="header">
<div id="logo"></div>
<ul class="nav">
<li class="item-1"><a href=""></a></li>
<li class="item-2"><a href=""></a></li>
<li class="item-3"><a href=""></a></li>
<li class="item-4"><a href=""></a></li>
<li class="item-5"><a href=""></a></li>
</ul>
</div>
3.head 中常用到的一些缩写
meta:utf, meta:compat
style, link:css, link:print, link:favicon, link:rss,
script, script:src
以上介绍的仅仅是有关HTML的缩写,CSS的缩写就更多了,建议查看Zen Coding 小抄,学习CSS 的 Zen Coding 方式
结合Zen Coding快速编写HTML代码(sublime text2篇)的更多相关文章
- Zen Coding 快速编写HTML/CSS代码的实现
在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法.它由Sergey Chikuyonok开发. 你在写HTML代码(包括所有标签.属性.引用.大括号等)上花费多少时间 ...
- 使用Zen coding高效编写html代码
zen-Coding是一款快速编写HTML,CSS(或其他格式化语言)代码的编辑器插件,这个插件可以用缩写方式完成大量重复的编码工作,是web前端从业者的利器. zen-Coding插件支持多种编辑器 ...
- VsCode中使用Emmet神器快速编写HTML代码
一.Emmet简述 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具. 在前端开发的过程中,一大部分的工作是写 HTML.CSS 代码.特别是手动编写 HTML ...
- Emmet 快速编写html代码
简介 快速编写HTML代码 语法简单,语法类似css选择器,30分钟内你就可以搞定它.开发商为sublime.atom.brackets.hbuilder.webstrom等编辑器或IDE提供对应的插 ...
- phpstorm使用zen coding 快速编辑补全html/css代码
百科定义: 使用仿CSS选择器的语法来快速开发HTML和CSS ——由Sergey Chikuyonok开发. Zen Coding由两个核心组件组成:一个缩写扩展器(缩写为像CSS一样的选择器)和上 ...
- 我也来谈谈使用Zen Coding快速开发html和css原理
zen coding 是一种仿css选择器的语法来快速开发html和css的开源项目.现已更名为Emmet.可以到github上下载拜读.在这个都想偷懒的世界里,此方法可以极大的缩短开发人员的开发时间 ...
- Emmet快速编写HTML代码
缩写是Emmet工具的核心,这些特殊的表达式通过Emmet解析并转化为结构化的代码块,而语法用CSS选择器,HTML标签和一些Emmet特定的代码生成,所以对于任何一个前端开发人员都可以很容易地掌握和 ...
- Emmet/Zen Coding 快速入门说明
快速参考 以下是支持的特性: ele creates an HTML element tag 展开一个HTML元素标签 # creates an id attribute 作用于元素标签,展开一个id ...
- Zen Coding css,html缩写替换大观 快速写出html,css
阅读本文,先仔细阅读网站文章. Zen Coding 快速编写HTML/CSS代码的实现 复制代码 代码如下:E 元素名称(div, p); E#id 使用id的元素(div#content, p#i ...
随机推荐
- hdu 1063 Exponentiation (高精度小数乘法)
//大数继续,额,要吐了. Problem Description Problems involving the computation of exact values of very large m ...
- Linux之在CentOS上一次艰难的木马查杀过程
今天朋友说他一台要准备上线的生产服务器被挂马,特征ps命令找不到进程,top能看到负载最高的一个程序是一个随机的10位字母的东西,kill掉之后自动再次出现一个随机10位字母的进程. 我让他关闭这个机 ...
- 动态获取爱奇艺上传视频mp4格式url地址
有时候,在工作中有些客户需要用到视频,我们大家都知道视频是非常的耗费流量的,因此,如果因为项目要求客户单独买台视频服务器是非常划不来的.那么将视频上传到优酷,爱奇艺等视频网站来托管那是一件很好的解决方 ...
- 关于为什么window.frames[0].src不能获取src
在DOM文档对象模型中,window对象处于最高层,而框架除了是当前窗体的一个节点外,本身也是独立window对象,当frames作为window对象时,有name属性, 而没有src属性,只有作为节 ...
- 添加数据时候获取自增的ID
create database dbDemo go use dbDemo go create table tdstudent { id int primary key identity(1,1), n ...
- -----IT男生涯————初始篇
大家好,我是kuuga,一名普通大学的在读生.其实,当时我不知道为什么会选择计算机这个学院,而且还选择了网络工程这个坑爹的专业.为什么说坑爹呢?因为几年学生生涯中编程已经占了很多时间和课程,至于我的专 ...
- Ms SQLServer中的Union和Union All的使用方法和区别
Ms SQLServer中的Union和Union All的使用方法和区别 SQL UNION 操作符 UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 ...
- C语言基础知识-循环结构
用while打印出1~100之间7的倍数 int i = 1; while循环是当条件表达式的结果为真时,执行大括号里面的循环体,重复执行直到条件表达式的结果为假时结束循环. w ...
- How To Call Stored Procedure In Hibernate
How To Call Stored Procedure In Hibernate In this tutorial, you will learn how to call a store proce ...
- [转载]C# 中对html 标签过滤
private string FilterHTML(string html) { System.Text.RegularExpressions.Regex regex1 = new System.Te ...