CSS Zen Garden html5编码怎么编写
发布网友
发布时间：2022-05-11 07:57
共2个回答
懂视网
时间：2022-05-11 12:18
html¶
<html></html>
html:xml¶
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru"></html>
html:4t¶
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ru">
<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="ru">
<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="ru">
<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="ru">
<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="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>
</body>
</html>
html:5¶
<!DOCTYPE HTML>
<html lang="ru-RU">
<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>
pre¶
<pre></pre>
dialog, dlg¶
<dialog></dialog>
blockquote, bq¶
<blockquote></blockquote>
ol¶
<ol></ol>
ol+¶
<ol>
<li></li>
</ol>
ul¶
<ul></ul>
ul+¶
<ul>
<li></li>
</ul>
li¶
<li></li>
dl¶
<dl></dl>
dl+¶
<dl>
<dt></dt>
<dd></dd>
</dl>
dt¶
<dt></dt>
dd¶
<dd></dd>
Text-level Semantics¶
a¶
<a href=""></a>
a:link¶
<a href="http://"></a>
a:mail¶
<a href="mailto:"></a>
q¶
<q></q>
cite¶
<cite></cite>
em¶
<em></em>
strong, str¶
<strong></strong>
small¶
<small></small>
mark¶
<mark></mark>
dfn¶
<dfn></dfn>
abbr¶
<abbr title=""></abbr>
acronym, acr¶
<acronym title=""></acronym>
time¶
<time></time>
progress, prog¶
<progress></progress>
meter¶
<meter></meter>
code¶
<code></code>
var¶
<var></var>
samp¶
<samp></samp>
kbd¶
<kbd></kbd>
sub¶
<sub></sub>
sup¶
<sup></sup>
span¶
<span></span>
i¶
<i></i>
b¶
<b></b>
bdo¶
<bdo dir=""></bdo>
bdo:r¶
<bdo dir="rtl"></bdo>
bdo:l¶
<bdo dir="ltr"></bdo>
ruby¶
<ruby></ruby>
rt¶
<rt></rt>
rp¶
<rp></rp>
Edits¶
ins¶
<ins></ins>
del¶
<del></del>
Embedded Content¶
figure, fig¶
<figure></figure>
img¶
<img src="" alt="">
iframe, ifr¶
<iframe src="" frameborder="0"></iframe>
embed, emb¶
<embed src="" type="">
object, obj¶
<object data="" type=""></object>
param¶
<param name="" value="">
video¶
<video src=""></video>
audio¶
<audio src=""></audio>
source, src¶
<source>
canvas¶
<canvas></canvas>
map¶
<map name=""></map>
map+¶
<map name="">
<area shape="" coords="" href="" alt="">
</map>
area¶
<area shape="" coords="" href="" alt="">
area:d¶
<area shape="default" href="" alt="">
area:c¶
<area shape="circle" coords="" href="" alt="">
area:r¶
<area shape="rect" coords="" href="" alt="">
area:p¶
<area shape="poly" coords="" href="" alt="">
Tabular Data¶
table¶
<table></table>
table+¶
<table>
<tr>
<td></td>
</tr>
</table>
caption, cap¶
<caption></caption>
colgroup, colg¶
<colgroup></colgroup>
colgroup+, colg+¶
<colgroup>
<col>
</colgroup>
col¶
<col>
tbody¶
<tbody></tbody>
thead¶
<thead></thead>
tfoot¶
<tfoot></tfoot>
tr¶
<tr></tr>
tr+¶
<tr>
<td></td>
</tr>
th¶
<th></th>
td¶
<td></td>
Forms¶
form¶
<form action=""></form>
form:get¶
<form action="" method="get"></form>
form:post¶
<form action="" method="post"></form>
fieldset, fset¶
<fieldset></fieldset>
legend, leg¶
<legend></legend>
label¶
<label for=""></label>
input¶
<input type="">
input:hidden, input:h¶
<input type="hidden" value="">
input:text, input:t¶
<input type="text" value="" id="">
input:search¶
<input type="search" value="" id="">
input:email¶
<input type="email" value="" id="">
input:url¶
<input type="url" value="" id="">
input:password, input:p¶
<input type="password" value=""
热心网友
时间：2022-05-11 09:26
Zen Coding其实是一款快速编写HTML,XML,XSL（或其他格式化语言）的编辑器插件，这个插件的实现了用缩写方式完成大量重复的书写工作。他的核心是一个强大的缩写引擎，掌握这些缩写技巧，给我们的编写代码带来极高的编写效率。他支持好多编辑器，如TextMate，UltraEdit，Notepad++等许多编写器，我们可以从http://code.google.com/p/zen-coding下载到相对应的编辑插件，然后我们把解压缩出来的文件，如下图：
放到你的Notepad++安装文件下的plugins目录下，在我的电脑中的程序安装地址是“C:\Program Files\Notepad++\plugins”（这个地址需要对应你的程序安装地址）。然后重新启动你的Notepad++编辑器就能看到菜单栏上增加了一项Zen Coding。如下图所示：
这样我们在Notepad++编辑下就成功的安装好了Zen Coding的插件。
接着我们一起来看看Zen Coding如何使用，其实只要你对CSS的选择器比较熟悉，就可以得用简短的类似于CSS选择器的代码高效的编写出HTML代码，我们先来看一个简单的实例，首先在你的编辑器中输入下面一句代码
div#header>div#logo+ul.nav>li.item-$*5>a
接着按一下快捷键ctr+E，就会自动生成如下的HTML代码：
<div id="header">
<div id="logo"></div>
<ul class="nav">
<li class="item-1"><a href=""></a></li>
<li class="item-2"><a href=""></a></li>
<li class="item-3"><a href=""></a></li>
<li class="item-4"><a href=""></a></li>
<li class="item-5"><a href=""></a></li>
</ul>
</div>
这样是不是很神奇呀。你一定会问这是怎么实现的呢？在没搞清楚这是怎么回事的时候，你可能会相当的迷惑，不知道这是怎么一回事。没关系，我们先来看一下其在线演示，一起感受下zen-codingr的强大功能，请看其在线的DEMO演示。
在打开的在线编辑中我们同样输入上面的那段代码：
div#header>div#logo+ul.nav>li.item-$*5>a
此时我们在按一下ctr+,就能看到转换的HTML代码
