这篇主要写HTML5的代码是怎么写的
在 HTML 4.01 中有 3 个不同的文档类型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
在 HTML 5 中只有一个:<!DOCTYPE HTML>,<!DOCTYPE> 对大小写不敏感。
<!DOCTYPE html>
<meta>标签在 HTML 4.01 中,不得不这么写:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
在 HTML 5 中,这样就够了:
<meta charset="UTF-8">
HTML5的结构完整代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5的标题</title>
</head>
<body>
<p>HTML5的内容!</p>
</body>
</html>
DOCTYPE声明在 HTML 4.01 中有 3 个不同的文档类型,在 HTML 5 中只有一个:<!DOCTYPE HTML>。<!DOCTYPE> 标签没有结束标签。<!DOCTYPE> 对大小写不敏感。
<header>、<footer>、<article>、<nav>标签的使用
现在我们用HTML5的新标签来写代码。<header>定义文档的头部信息,<footer>、义文档的版权信息,article>定义外部内容,如外部的文新闻章、、客之类的, 定义导航链接的部分,<nav> 定义导航链接部分。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用HTML5代码写的例子</title>
</head>
<body>
<!--header-->
<header>
<h1>HTML标签</h1>
<nav>
<ul>
<li><a href="../index.html">主页</a></li>
<li><a href="../html/">HTML标签</a></li>
<li><a href="../css/">CSS样式表</a></li>
<li><a href="../sitemap.html">网站地图</a></li>
</ul>
</nav>
</header>
<!-- 主要内容 -->
<article>
<hgroup>
<h1>HTMl5简介</h1>
<h2>HTML5的现状</h2>
<h2>HTML5使用的新标签</h2>
</hgroup>
<p>HTML5是HTML的第五个版本…</p>
<aside>
<h1>HTML5的日程</h1>
<p>HTML5还只是个草案阶段。</p>
</aside>
</article>
<!-- footer -->
<footer>
Copyright 2010
</footer>
</body>
</html>
HTML5制作的博客页例子
下面的例子用到了<section>的分类功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>某某的博客</title>
</head>
<body>
<!--header -->
<header>
<h1><a href="http://www.htmling.cn/blog/">某某的博客</a></h1>
</header>
<!-- 内容部分 -->
<section>
<h1>主页</h1>
<p>来访请读。</p>
<article>
<h2><a href= "entry1.html">客气语</a></h2>
<p>欢迎光临。看看我的博客吧…</p>
</article>
<article>
<h2><a href= "entry21.html">说明</a></h2>
<p>使用这个博客的时候请不要…</p>
</article>
</section>
<section>
<h1>最近的文章</h1>
<p>最近有2篇文章。</p>
<article>
<h2><a href= "entry99.html">踢球</a></h2>
<p>今天去踢足球了…</p>
</article>
<article>
<h2><a href= "entry98.html">看电影</a></h2>
<p>今天我去看了一部很有趣的电影…</p>
</article>
<nav>
<a href="?p=3">第3页</a>
</nav>
</section>
<!--导航 -->
<nav>
<h2>分类</h2>
<ul>
<li><a href="category1.html">主页</a></li>
<li><a href="category2.html">日记</a></li>
<li><a href="category3.html">工作</a></li>
</ul>
</nav>
<!-- footer-->
<footer>
<p>Copyright 2010</p>
</footer>
</body>
</html>