ZenCoding 快速参考指南 - HTML5 规范解析
需积分: 41 147 浏览量
更新于2024-09-13
收藏 111KB PDF 举报
"ZenCodingCheatSheet.pdf 是一份针对ZenCoding技术的开发者参考文档，它包含了一系列基于HTML5规范的快捷编码模式。ZenCoding是一种快速、高效的前端开发工具，能够帮助开发者通过简短的缩写形式快速生成HTML、CSS代码。这份文档特别推荐给ZenCoding的学习者和使用者，以提升他们的编码效率。"
ZenCoding是一种代码速记法，最初由Ilya Grigorik开发，后来演变为Emmet，广泛应用于Web开发中。它允许开发者用简短的语法快速写出复杂的HTML结构，大大节省了编写和维护的时间。在提供的内容中，我们可以看到不同类型的HTML根元素的ZenCoding表示方式：
1. `html`: 这是最基础的HTML根元素，用于创建一个标准的HTML5文档。
2. `html:xml`: 添加了XML命名空间的HTML元素，指定XML语言为英语。
3. `html:4t`: 表示HTML4的过渡类型文档，适用于包含传统HTML元素的页面。
4. `html:4s`: 表示HTML4的严格类型文档，只允许使用语义化的HTML元素。
5. `html:xt`: 表示XHTML1.0过渡类型文档，遵循XHTML的语法规则。
6. `html:xs`: 表示XHTML1.0严格类型文档，对语法要求更严格。
每个根元素的展开都包含了基本的HTML结构，如`<head>`和`<body>`，以及元数据元素如`<title>`和`<meta>`标签，这些标签用于定义页面标题和字符编码。
此外，ZenCoding还支持其他丰富的语法，如嵌套元素、计数器、CSS类的快速添加等。例如，`div>ul>li*5`会自动扩展成五个有序列表项的结构。这使得开发者可以快速构建复杂布局，而无需手动输入所有细节。
ZenCoding/Emmet是前端开发中一个强大的生产力工具，通过学习和掌握其语法，开发者能提高编写HTML和CSS的速度，从而更专注于设计和功能实现，而非琐碎的代码编写工作。对于任何想要提升Web开发效率的人来说，理解和应用ZenCoding都是非常有价值的。
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页未读，立即下载
2013-10-20 上传
2013-07-30 上传
2014-03-02 上传
2024-11-30 上传
2024-11-30 上传
2024-11-30 上传
2024-11-30 上传
2024-11-30 上传
xiaoyaoyangeren
- 粉丝: 0
- 资源: 2
我的内容管理
展开
最新资源
- Angular实现MarcHayek简历展示应用教程
- Crossbow Spot最新更新 - 获取Chrome扩展新闻
- 量子管道网络优化与Python实现
- Debian系统中APT缓存维护工具的使用方法与实践
- Python模块AccessControl的Windows64位安装文件介绍
- 掌握最新*** Fisher资讯，使用Google Chrome扩展
- Ember应用程序开发流程与环境配置指南
- EZPCOpenSDK_v5.1.2_build***版本更新详情
- Postcode-Finder：利用JavaScript和Google Geocode API实现
- AWS商业交易监控器：航线行为分析与营销策略制定
- AccessControl-4.0b6压缩包详细使用教程
- Python编程实践与技巧汇总
- 使用Sikuli和Python打造颜色求解器项目
- .Net基础视频教程：掌握GDI绘图技术
- 深入理解数据结构与JavaScript实践项目
- 双子座在线裁判系统：提高编程竞赛效率
