Zen Coding：HTML/CSS 缩写与元素
需积分: 41 155 浏览量
更新于2024-09-17
收藏 111KB PDF 举报
"Zen Coding API 是一种快速编写 HTML 和 CSS 的工具，它提供了一套简化的缩写方式，能够帮助开发者高效地构建网页结构。Zen Coding（后来也被称为 Emmet）是前端开发中的一个强大生产力提升工具，尤其在处理大量 HTML 和 CSS 代码时效果显著。"
Zen Coding API 的核心在于其快捷的语法，允许开发者用少量的字符来生成完整的 HTML 结构。例如，`html` 是创建 HTML 文档根元素的基本命令，它会自动生成 `<html>` 开闭标签。通过添加不同的后缀，可以指定不同的 HTML 版本：
- `html:xml` 会生成基于 XML 的 HTML5 文档，包含 XML 声明和语言属性。
- `html:4t` 代表 HTML4.01 Transitional，包含文档类型声明和对应的 DTD。
- `html:4s` 表示 HTML4.01 Strict，同样有文档类型声明，但遵循更严格的规范。
- `html:xt` 和 `html:xs` 分别表示 XHTML 1.0 Transitional 和 XHTML 1.0 Strict，同样带有相应的 DTD 引用。
这些缩写不仅限于根元素，还可以用于创建各种 HTML 元素。例如，`div>span` 将生成一个 `div` 元素内包含一个 `span` 子元素的结构。`ul>li*5` 会生成一个无序列表 `ul`，其中包含五个 `li` 列表项。
Zen Coding API 也支持 CSS 缩写，例如，`p{color:red;font-size:12px;}` 可以快速创建一个样式块，设置段落的字体颜色为红色，字体大小为 12 像素。还可以通过 `#id` 或 `.class` 来定义 ID 和类选择器，以及 `*>`、`+` 和 `~` 操作符来表示子元素、相邻兄弟元素和一般兄弟元素的关系。
Zen Coding 提供了多种扩展和集成，可以在多个编辑器（如 Sublime Text、Visual Studio Code、Atom 等）中使用。通过这些插件，开发者可以自定义快捷键，使编写代码变得更加流畅。此外，它还支持动态扩展，比如通过 `$` 符号来插入当前日期或时间，或者通过 `!` 符号来插入随机数。
Zen Coding（Emmet）API 是一个强大的工具，通过简化 HTML 和 CSS 的编写过程，极大地提高了前端开发者的编码效率。它不仅提供了基本的标签缩写，还具备自定义功能，让开发者可以根据个人习惯和项目需求定制自己的代码片段。掌握 Zen Coding 的使用，无疑会成为提升前端开发效率的一大利器。
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-08-31 上传
137 浏览量
2013-05-05 上传
2024-11-09 上传
2024-11-09 上传
2024-11-09 上传
johnny_wah_han
- 粉丝: 0
- 资源: 1
我的内容管理
展开
最新资源
- Fisher Iris Setosa数据的主成分分析及可视化- Matlab实现
- 深入理解JavaScript类与面向对象编程
- Argspect-0.0.1版本Python包发布与使用说明
- OpenNetAdmin v09.07.15 PHP项目源码下载
- 掌握Node.js: 构建高性能Web服务器与应用程序
- Matlab矢量绘图工具：polarG函数使用详解
- 实现Vue.js中PDF文件的签名显示功能
- 开源项目PSPSolver：资源约束调度问题求解器库
- 探索vwru系统：大众的虚拟现实招聘平台
- 深入理解cJSON：案例与源文件解析
- 多边形扩展算法在MATLAB中的应用与实现
- 用React类组件创建迷你待办事项列表指南
- Python库setuptools-58.5.3助力高效开发
- fmfiles工具：在MATLAB中查找丢失文件并列出错误
- 老枪二级域名系统PHP源码简易版发布
- 探索DOSGUI开源库：C/C++图形界面开发新篇章
