怎么简写HTML代码

2013-08-07 13:51 来源: 卓杰科技(www.zhuojie.net) [大中小]

大家在平常写代码的时候是不是都会遇到HTML代码写多很烦的，因为它的标签很多。
现在最常用的解决方法就是采用模板。就是在别人写好的骨架内，填入自己的内容。但是这种的方法有时候要改很多东西，所以，卓杰科技为大家说说另外以后总办法，简写。
常见的简写法：Haml和Emmet两种。
Haml用法
Haml是一个命令行工具。需要先安装Ruby语言，再安装Haml。
gem install haml
使用时，用命令行将haml文件一次性转为html文件。
haml input.haml output.html
haml的简化规则如下：
1. !!! 5 代表 <!DOCTYPE html>

　　2. %E 代表HTML标签。

　　3. %E#id 代表id属性。

　　4. %E.class 代表class属性

　　5. %E(attr="xxx") 代表某一个特定属性。

　　6. %E XXX 代表插入标签的内容。

　　7. %E %N 代表N是E的子元素。N如果写在第二行，需要缩进。

下面是Haml的代码示例，代码块的层级关系用缩进表示。

　　!!! 5
　　%html{lang: 'en'}
　　　　%head
　　　　　　%title Haml Demo
　　　　%body
　　　　　　%h1 Hello World
　　　　　　%a(href="http://" title="Wikipedia") 维基百科

对应的HTML代码为：

　　<!DOCTYPE html>
　　<html lang='en'>
　　　　<head>
　　　　　　<title>Haml Demo</title>
　　　　</head>
　　　　<body>
　　　　　　<h1>Hello World</h1>
　　　　　　<a href='http://Wikipedia.org' title='Wikipedia'>维基百科</a>
　　　　</body>
　　</html>

Emmet的用法

Emmet是一个编辑器插件，官方网站提供多编辑器支持。下面就以vim插件举例。
首先，按照vim插件文档进行安装。然后，新建一个文本文件，键入

　　html:5

按一下"<Ctr+y>,"（先按ctrl键+y键，然后再按逗号键，不同的编辑器有不同的转化键），这一行就立刻变成下面的样子。

　　<!DOCTYPE html>
　　<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title></title>
　　</head>
　　<body>

　　</body>
　　</html>

这就是Emmet的基本用法：先写简写形式，然后用"<Ctrl+y>,"将其转成HTML代码。

Emmet支持的简写规则，类似于CSS选择器（大写的E代表一个HTML标签）：

　　1. E 代表HTML标签。

　　2. E#id 代表id属性。

　　3. E.class 代表class属性。

　　4. E[attr=foo] 代表某一个特定属性。

　　5. E{foo} 代表标签包含的内容是foo。

　　6. E>N 代表N是E的子元素。

　　7. E+N 代表N是E的同级元素。

　　8. E^N 代表N是E的上级元素。

请看下面的例子。

　　p#main.item

　　a[href=http://Wikipedia.org]{维基百科}

　　div>p

　　div+p

　　p>span^div

对应的HTML代码为：

　　<p></p>

Emmet还提供了连写（E*N）和自动编号（E$*N）功能。

　　li*3>a

　　div#item$.class$$*3

对应的HTML代码为

Emmet使用按键"<Ctrl+y>/"，让一个代码块变成HTML注释。

本页关键词：

上一篇：写程序时常被忽略的一些细节下一篇：什么是W3C和DIV+CSS

您现在的位置： 首页 > 新闻中心 > 建站经验 > 详细内容

怎么简写HTML代码

您现在的位置：首页 > 新闻中心 > 建站经验 > 详细内容