快速编码HTML：Zencoding简介与示例
5星 · 超过95%的资源 | 下载需积分: 41 | PDF格式 | 111KB |
更新于2024-09-12
| 149 浏览量 | 举报 "Zencoding是一种快速编写HTML代码的方法，由Sergey Chikuyonok创建，灵感来源于CSS选择器的语法。它提供了一种高效的方式，让开发者能够以简洁的形式构建复杂的HTML结构。Zencoding预定义了一系列的缩写，通过这些缩写可以快速生成常见的HTML元素和文档类型定义。例如，'html:xml' 代表一个基于XML的HTML5文档，'html:4t'、'html:4s' 和 'html:xt' 分别表示HTML4的过渡性、严格性和XHTML1.0-transitional及XHTML1.0-strict文档类型。这些预定义的模板包含了基本的HTML结构，如<head>和<body>部分，以及相关的元数据。"
在深入理解Zencoding之前，首先要了解它的核心概念：模板和缩写。Zencoding的模板是预定义的HTML结构，可以通过简单的语法快速展开。例如，'html' 是一个根元素的缩写，它会扩展成完整的HTML5文档的基本框架。而通过在'html'后面添加不同的标识（如':xml', ':4t', ':4s', ':xt', ':xs'），可以指定不同的HTML版本和语义。
Zencoding的效率在于它允许用户用更少的字符输入大量的HTML代码。例如，'div>ul>li*5>a{Link $}' 这个缩写将展开为一个包含五个链接的无序列表，每个链接的文本都以"Link"开头，后面跟着递增的数字。这种语法极大地减少了手动编写相同结构的HTML时所需的键入量。
此外，Zencoding还支持条件语句、循环和嵌套结构，使得开发复杂的布局变得更加便捷。例如，可以使用'if'或'each'关键字来创建条件块，或者嵌套元素来构建分层的HTML结构。
Zencoding的实现通常依赖于文本编辑器或IDE的插件，如Sublime Text、Atom或Visual Studio Code等。这些插件提供了实时预览和自动完成的功能，进一步提升了开发效率。结合 Emmet（Zencoding的前身）这样的库，开发者可以在多种语言环境中享受Zencoding带来的便利。
Zencoding是一种强大的工具，特别适合前端开发者快速构建HTML原型或页面结构。它通过简化的语法和预定义的模板，降低了HTML编码的复杂度，提高了开发速度。随着更多开发者对这种技术的掌握和应用，Zencoding已经成为现代Web开发中的一个重要组成部分，提升了整体的生产力和代码质量。
Zen HTML Elements
Based on HTML 5 specification draft.
Root Element
html
<html></html>
html:xml
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en"></html>
html:4t
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8">
</head>
<body></body>
</html>
html:4s
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8">
</head>
<body></body>
</html>
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>
<title></title>
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8"/>
</head>
<body></body>
</html>
html:xs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8"/>
</head>
<body></body>
</html>
html:xxs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8"/>
</head>
<body></body>
</html>
html:5
<!DOCTYPE HTML>
<html lang="en-EN">
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
Document Metadata
head
<head></head>
title
<title></title>
base
<base href="">
link
<link>
link:css
<link rel="stylesheet" type="text/css" href="style.css"
media="all">
link:print
<link rel="stylesheet" type="text/css" href="print.css"
media="print">
link:favicon
<link rel="shortcut icon" type="image/x-icon"
href="favicon.ico">
link:touch
<link rel="apple-touch-icon" href="favicon.png">
link:rss
<link rel="alternate" type="application/rss+xml"
title="RSS" href="rss.xml">
link:atom
<link rel="alternate" type="application/atom+xml"
title="Atom" href="atom.xml">
meta
<meta>
meta:utf
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8">
meta:win
<meta http-equiv="Content-Type"
content="text/html;charset=Win-1251">
meta:compat
<meta http-equiv="X-UA-Compatible" content="IE=7">
style
<style type="text/css"></style>
Scripting
script
<script type="text/javascript"></script>
script:src
<script type="text/javascript" src=""></script>
noscript
<noscript></noscript>
Sections
body
<body></body>
section, sect
<section></section>
nav
<nav></nav>
article, art
<article></article>
aside
<aside></aside>
h1
<h1></h1>
h2
<h2></h2>
h3
<h3></h3>
h4
<h4></h4>
h5
<h5></h5>
h6
<h6></h6>
hgroup, hgr
<hgroup></hgroup>
header, hdr
<header></header>
footer, ftr
<footer></footer>
address, adr
<address></address>
div
<div></div>
Grouping Content
p
<p></p>
hr
<hr>
br
<br>
http://code.google.com/p/zen-coding/ 1 GNU General Public License v3
下载后可阅读完整内容，剩余6页未读，立即下载
相关推荐
7 浏览量
perlhash
- 粉丝: 0
- 资源: 1
我的内容管理
展开
