Quantcast
Channel: panjj 最新博客
Viewing all articles
Browse latest Browse all 59

HTML5完整的代码例子

$
0
0
这篇主要写HTML5的代码是怎么写的

DOCTYPE声明

在 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制作的例子

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>

Viewing all articles
Browse latest Browse all 59

Trending Articles