ZenCoding快捷指令：提升前端开发效率的秘密武器
需积分: 41 170 浏览量
更新于2024-09-10
收藏 111KB PDF 举报
"ZenCoding速查表是一份针对ZenCoding插件的参考指南，包含了各种HTML元素的快捷方式和命令，旨在提升Web开发者的编码效率。这份速查表基于HTML5规范草案，列出了不同类型的HTML根元素以及相关属性。"
在ZenCoding中，开发者可以快速输入一系列缩写来生成复杂的HTML结构，极大地提高了编写代码的速度。以下是一些核心知识点：
1. **RootElement (根元素)**: ZenCoding支持不同的HTML根元素，如`html`代表基本的HTML元素，`html:xml`则会添加XML命名空间和语言属性，`html:4t`、`html:4s`和`html:xt`、`html:xs`分别对应HTML4.01 Transitional和Strict版本以及XHTML1.0 Transitional和Strict版本。
2. **HTML5根元素**: `html`缩写后会自动生成完整的HTML5文档结构，包括`<html>`, `<head>`和`<body>`标签。
3. **DOCTYPE声明**: ZenCoding允许快速输入DOCTYPE声明，如`html:4t`和`html:4s`分别表示HTML4.01的Transitional和Strict类型，`html:xt`和`html:xs`表示XHTML1.0的Transitional和Strict类型。
4. **语言属性**: 使用`:lang`后缀，如`html:xml`，可以添加`xml:lang="en"`属性，指定文档的语言为英语。
5. **标题和元信息**: `html`结构中包含`<head>`和`<title>`，用于设置网页的标题；同时有`<meta>`标签，可设置字符集（charset）和其他元信息。
6. **缩写扩展**: ZenCoding不仅限于根元素，还可以缩写其他的HTML元素，如`div`, `span`, `a`, `ul`, `li`等，通过组合使用这些元素的缩写，开发者可以快速构建复杂的DOM结构。
7. **嵌套元素和快捷键**: ZenCoding支持通过空格或右括号来创建嵌套元素，例如`div>ul>li*3`会生成一个包含三个列表项的无序列表。
8. **计数和重复**: `*`符号用于指定元素的数量，例如`li*5`会生成五个`<li>`元素。
9. **属性插入**: 属性可以通过等号`=`后跟值来添加，例如`a[href=http://example.com]`会生成一个链接到`example.com`的`<a>`标签。
10. **类名和ID**: 使用`.`和`#`前缀可以添加类名和ID，如`div#container`和`p.myClass`。
通过掌握这些ZenCoding的技巧，开发者可以更高效地编写HTML代码，减少手动输入的时间，提高工作效率。ZenCoding插件不仅适用于HTML，还支持CSS和JavaScript的快速编写，是前端开发者的重要工具。
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页未读，立即下载
2010-05-31 上传
2012-03-30 上传
2014-06-26 上传
2023-07-27 上传
2023-08-11 上传
2023-06-06 上传
2023-09-16 上传
2024-07-06 上传
2023-08-28 上传
Aiden
- 粉丝: 2
- 资源: 10
我的内容管理
展开
最新资源
- 构建基于Django和Stripe的SaaS应用教程
- Symfony2框架打造的RESTful问答系统icare-server
- 蓝桥杯Python试题解析与答案题库
- Go语言实现NWA到WAV文件格式转换工具
- 基于Django的医患管理系统应用
- Jenkins工作流插件开发指南：支持Workflow Python模块
- Java红酒网站项目源码解析与系统开源介绍
- Underworld Exporter资产定义文件详解
- Java版Crash Bandicoot资源库：逆向工程与源码分享
- Spring Boot Starter 自动IP计数功能实现指南
- 我的世界牛顿物理学模组深入解析
- STM32单片机工程创建详解与模板应用
- GDG堪萨斯城代码实验室：离子与火力基地示例应用
- Android Capstone项目：实现Potlatch服务器与OAuth2.0认证
- Cbit类：简化计算封装与异步任务处理
- Java8兼容的FullContact API Java客户端库介绍
