读《HTML5 Canvas基础教程》第1章关于html5历史及简述 - WEB前端(UI)

问题点数：0 回复次数：0

读《HTML5 Canvas基础教程》第1章关于html5历史及简述

把我学到的东西拿出来给大家分享一下，勉励他人以及自勉。
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 &copy; 2010</p>
        </footer>
    </body>
</html>

搜索更多相关主题的帖子: html5　everything　article　footer　