Zen Coding HTML快捷参考指南
需积分: 41 113 浏览量
更新于2024-09-12
收藏 111KB PDF 举报
“Zen Coding官方速查手册.pdf”主要介绍了Zen Coding技术，这是一种高效编写HTML和CSS的方法，通过简短的缩写快速生成复杂的代码结构。手册基于HTML5规范草案，涵盖了不同类型的HTML文档声明和元素。
Zen Coding的核心是利用简短的语法来创建常见的HTML元素。例如，“html”代表根元素`<html></html>`，而“html:xml”则会生成带有XML命名空间和语言属性的HTML5文档头。此外，手册还提供了不同版本的HTML文档类型声明（Doctype）：
- “html:4t”表示HTML4的过渡性文档类型，它会生成`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">`，并包含基本的HTML结构。
- “html:4s”则是HTML4的严格模式，使用`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">`。
- “html:xt”和“html:xs”则分别代表XHTML1.0的过渡性和严格文档类型，它们遵循XHTML的命名规则，并包含相应的Doctype。
手册中的Zen Coding语法还允许快速创建常见的HTML元素和属性。例如，可以使用“meta”生成`<meta>`标签，添加HTTP等价属性（http-equiv）和字符集（charset）信息。对于标题和段落，可以使用“h1”到“h6”创建各级标题，以及“p”创建段落。此外，还可以通过组合元素和属性来构建更复杂的结构，如表格、链接、列表等。
Zen Coding的使用不仅限于HTML，它还可以扩展到CSS编写，通过缩写来快速生成样式规则。例如，“.class”代表一个类选择器，而“#id”则表示一个ID选择器。通过这种语法，开发者可以快速构建CSS规则，提高编写效率。
Zen Coding官方速查手册是前端开发者的宝贵工具，它帮助开发者节省时间，提高代码质量和一致性。通过学习和掌握这套缩写系统，开发者可以更专注于设计和功能实现，而不是反复敲击基础代码。手册中的实例和详细解释使得学习Zen Coding变得简单易行，尤其适合那些需要频繁编写HTML和CSS的开发者。
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页未读，立即下载
2012-11-08 上传
410 浏览量
2015-05-07 上传
2019-12-03 上传
143 浏览量
2019-08-20 上传
2020-05-25 上传
2019-06-07 上传
huzhouhzy
- 粉丝: 83
- 资源: 1655
我的内容管理
展开
最新资源
- Variational-AutoEncoder-For-Novelty-Detection:使用Keras实现的变体自动编码器，用于对EMNIST-Letters数据集执行新颖性检测
- js透明按钮图片滑动切换焦点图
- trabajo-2bim-001-iaortiz:GitHub Classroom创建的trabajo-2bim-001-iaortiz
- coinhsl依赖文件
- 行业资料-电子功用-具有对数自保护功能的高压总线放电电路的说明分析.rar
- 【WordPress插件】2022年最新版完整功能demo+插件.zip
- 【推荐】海康威视-综合安防系统设计方案-HIK-201707V2.1
- CSP-J组复赛第二题 公路附件
- T.O.P Big Bang Wallpaper for New Tab-crx插件
- tutorials:来自SciPy和PyData会议的可执行教程的集合
- 行业资料-电子功用-具有对正导向件的电连接器的说明分析.rar
- 异步电机仿真模型.7z
- 彩绘快餐店菜单设计矢量
- IOS应用源码Demo-日历组件-毕设学习.zip
- 基于java-136_基于Java的酒店管理系统的设计与实现-源码.zip
- DownloadFilesWithThreadPoolExecutor
