HTML5教程之初识HTML5
HTML5时代到来的时间可能远远早于很多web设计人员的估计， 可能大家认为我们实际开始使用HTML5得5，6年以后，呵呵，当然现在挺多网站都开始使用了HTML5，比如淘宝网最近的改版，大家目前或多或少的都接触过html5。这里我将将简单的做一个例子来介绍HTML5和HTML4.01的区别。
HTML5 doctype
开始使用html5对于我们来说是个好消息，因为我们不用在到处拷贝doctype了，在html5中我们只需要写如下一行：
[html]<!DOCTYPE html>[/html]
记住HTML5 doctype里允许你使用XHTML和HTML的严格模式(strict mode)，我们不需要关注transitiona和loose了。
HTML5 Head部分
Head部分和HTML十分类似，如下：
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page Title</title>
<!-- meta tags -->
<meta name="keywords" content="">
<meta name="description" content="">
<!-- stylesheets -->
<link rel="stylesheet" href="css/gbin1.css" type="text/css">
<link rel="stylesheet" href="css/gbin2.css" type="text/css">
<!-- javascript -->
<script src="js/jquery-1.3.2.min.js"></script>
<!--conditional comments -->
<!--[if IE]>
<script src="js/html5.js"></script>
<![endif]-->
</head>
[/html]
我们发现meta标签内容简化了。这样一来我们不需要记忆太多HTML内容，不错的变化。
以上我需要提出的是html5.js，这里主要是为了支持IE8。我们使用一些javascript来支持IE8。
HTML5 Body部分
早先的html开发我们都是用镶嵌的div来完成，在html5开发中，已经定义了相关的标签帮助我们完成这个任务，这样能比较有效的组织整个html内容。
Header和NAV元素
Header可以用来定义页面头部的内容，而Nav可以定义导航内容，注意nav在一个页面中可以多次使用，比如，侧栏也可以有导航，如下：
[html]
<header id="page-header">
<div id="a logo"><a href="/"><img src="images/logo.gif" alt="logoname"></a></div>
<nav id="main-nav">
<ul>
<li><a href="#">首页</a></li>
<li style="color: red;"><a href="#">关于</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">案例</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">帮助</a></li>
</ul>
</nav>
</header>
[/html]
HTML5 的 Article，Section和HGroup元素
article定义一个主要页面内容，section用来定义内容的块，比如，评论，文章内容。HGROUP用来组织相关的一些标题元素，如下：
[html]
<article id="maincontent"><section><hgroup>
<h1>HTML5代码样例</h1>
<h2>An HTML5 Template</h2>
</hgroup>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac iaculis erat. Maecenas id fermentum odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sagittis porta mauris, iaculis egestas metus posuere sit amet. Sed ullamcorper orci eu dolor egestas sodales. Donec tempor aliquet pulvinar. Sed sed turpis sapien, ac dictum sem. Phasellus metus leo, gravida in imperdiet sit amet, bibendum id magna. Vivamus ac nunc tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis justo ligula. Suspendisse sodales ultricies consequat. Aenean condimentum eros mi. Duis consectetur placerat vehicula. Fusce vel massa erat.
<h2>A demonstration of list items</h2>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ol>
</section><aside>
<h2>Related Content</h2>
Aliquam id lorem ac tellus fringilla bibendum et at turpis. In ut auctor justo. Integer ac quam sed est semper hendrerit. Aenean vulputate interdum augue, sed dapibus mi ultricies convallis. Curabitur a nunc nisi, ac ornare nisi. Ut semper placerat accumsan. Cras eu nibh lorem. Sed sit amet ligula vitae orci molestie sollicitudin sit amet at odio. Mauris non elit ac ipsum facilisis eleifend. Maecenas eu velit sit amet neque iaculis dapibus. Integer mollis est id erat dignissim blandit. Quisque malesuada mattis sollicitudin. Pellentesque volutpat pellentesque luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus augue ut sem convallis ullamcorper. Donec vitae magna nec lacus varius pellentesque vel nec diam. Morbi sagittis, magna sit amet sollicitudin ultricies, neque orci fermentum ipsum, non cursus lectus velit at ante. Donec nec neque in sem suscipit faucibus. Aliquam nisi turpis, volutpat quis suscipit in, varius vitae nunc.
</aside></article>
[/html]
HTML5 的 aside元素
在上面例子里可以看到，aside元素用来定义侧栏内容，比如在你浏览的当前文章页面，右边的文章列表就处于aside元素内。
HTML5 的 Footer元素
footer元素定义了页面底部内容，你可以放在页面底部，或者你也可以放在section后面，这取决于你具体目的。
总结
以上介绍了HTML5的主要元素，对于初学者能大概了解HTML5的使用。以后的文章中我再介绍比较深入的内容。
【申明】：本文来自互联网