注册 登录
编程论坛 WEB前端(UI)

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

lateraware 发布于 2012-11-19 18:07, 1244 次点击
把我学到的东西拿出来给大家分享一下,勉励他人以及自勉。
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>




0 回复
1