1.为什么需要html5
原因比如在html5以前,视频、音频和动画等等都需要第三方插件才能在Web上播放,有了html5则不需要这些了,html5有audio、vedio和canvas标签,更多功能还在修订中
2.HTML5结构元素
根据我个人肤浅的理解(望高手指正),这些结构元素就是为了编码逻辑化条理化,也就比如说一个120平米的房子如果不分间和分间的区别,以前的html都是用的div来处理everything,而现在“页眉”、“页脚”的分得比较细。
元素有section、header、hgroup、footer、nav、article和aside(附带有例子可以测试一下,是我自己敲上去的)
3.html5也需要javascript的支持,2者完美结合,比如用WebSocket和Html5 Canvas可以创建出色的实时多人游戏。
程序代码:
<!DOCTYPE html>
<html>
<head>
<title>A basic HTML5 blog homepage</title>
<meta charset="UTF-8">
</head>
<body>
<header>
<!-- 网站名称及导航 -->
<h1>My amazing blog</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/archive/">Archive</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
</header>
<section>
<!-- 博客文章 -->
<article>
<header>
<hgroup>
<h1><a href="/blog/first-post-link">Main heading of the first blog post</a></h1>
<h2>Sub-heading of the first blog post</h2>
</hgroup>
<p>Posted on the <time pubdate datetime="2010-10-30T13:08">30 October 2010 at 1:08 PM</time></p>
</header>
</article>
<article>
<header>
<hgroup>
<h1><a href="/blog/second-post-link/">Main heading of the second blog post</a></h1>
<h2>Sub-heading of the second blog post</h2>
</hgroup>
<p>Posted on the <time pubdate datetime="2010-10-26T09:36">26 October 2010 at 9:36 AM</time></p>
</header>
<p>Summary of the second blog post.</p>
</article>
<aside>
<h2>Subscribe to the RSS feed</h2>
<p>Make sure you doun't miss a blog post by <a href="/rss">subscribing to the RSS feed</a></p>
</aside>
</section>
<footer>
<!-- 版权信息及其他内容 -->
<p>My amazing blog © 2010</p>
</footer>
</body>
</html>
<html>
<head>
<title>A basic HTML5 blog homepage</title>
<meta charset="UTF-8">
</head>
<body>
<header>
<!-- 网站名称及导航 -->
<h1>My amazing blog</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/archive/">Archive</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
</header>
<section>
<!-- 博客文章 -->
<article>
<header>
<hgroup>
<h1><a href="/blog/first-post-link">Main heading of the first blog post</a></h1>
<h2>Sub-heading of the first blog post</h2>
</hgroup>
<p>Posted on the <time pubdate datetime="2010-10-30T13:08">30 October 2010 at 1:08 PM</time></p>
</header>
</article>
<article>
<header>
<hgroup>
<h1><a href="/blog/second-post-link/">Main heading of the second blog post</a></h1>
<h2>Sub-heading of the second blog post</h2>
</hgroup>
<p>Posted on the <time pubdate datetime="2010-10-26T09:36">26 October 2010 at 9:36 AM</time></p>
</header>
<p>Summary of the second blog post.</p>
</article>
<aside>
<h2>Subscribe to the RSS feed</h2>
<p>Make sure you doun't miss a blog post by <a href="/rss">subscribing to the RSS feed</a></p>
</aside>
</section>
<footer>
<!-- 版权信息及其他内容 -->
<p>My amazing blog © 2010</p>
</footer>
</body>
</html>