zoukankan      html  css  js  c++  java
  • HTML5 学习

    Internet Explorer9 将支持某些HTML5 特性;

    当前,video 元素支持两种视频格式:
    Internet Explorer Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
    Ogg                   X               X               X
    MPEG 4                                                X               X
    Ogg = 带有Thedora 视频编码和Vorbis 音频编码的Ogg 文件
    MPEG4 = 带有H.264 视频编码和AAC 音频编码的MPEG 4 文件

    Internet Explorer 8 不支持video,audio元素。在IE 9 中,将提供对使用MPEG4 的video 元素
    的支持。

    当前,audio 元素支持三种音频格式:
    Internet Explorer Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
    Ogg Vorbis          X              X               X
    MP3                                                     X               X
    Wav                   X              X                                 X

    HTML5 提供了两种在客户端存储数据的新方法:
    localStorage - 没有时间限制的数据存储
    sessionStorage - 针对一个session 的数据存储,当用户关闭浏览器窗口后,数据会被删除。
    HTML5 使用JavaScript 来存储和访问数据。


    主要特性:
    • 应用:Web Application (离线,缓存)+WebWorker
    • 存储:LocalStorage + IndexexDB + FileReader
    • 通讯:WebSocket(即时通信,服务器推送服务) + Geolocation (地理位置)
    • 多媒体:Video/Audio + Canvas + Web GL(3D)
    • 表单元素:email,url,password,search, date, tel etc.

    CSS新特性:http://directguo.com/html5/#slide46

    为了在移动终端的市场上取得更大的突破,微软需要一种跨平台的强有力的技术,这就是HTML5。如果不考虑跨平台,而且想制作绚丽的界面的话,也可以选择silverlight。 

    有一种方法可以使用新的特性,同时不影响旧版浏览器对你的站点的访问。你可以使用polyfill。polyfill是模拟未来API的shim,它向旧版浏览器提供后备的功能。当旧版浏览器不支持站点中的某项HTML5功能时,polyfill会补充其中的空隙。学会使用这些polyfill,你就不必为了使用HTML5而抛弃那些使用旧版浏览器的用户。获得polyfill支持的一种方法是使用JavaScript库——Modernizr(当然可用的不止这一种)。它会带来特性侦测能力,这样你就能检查浏览器究竟是否支持某种功能(比如canvas元素)。如果不支持,就提供一个备用的选择。 

    section:这可以是书中的一章或一节,实际上可以是在HTML4中有自己的标题的任何东西
    header:页面上显示的页眉,与head元素不一样;
    footer:页脚,可以显示电子邮件中的签名;
    nav:指向其他页面的一组衔接;
    article:blog、杂志、文章汇编等中的一篇文章;
    aside:代表说明、提示、边栏、引用、附加注释等,也就是叙述主线之外的内容;
    figure:代表一个块级图像,还可以包括说明;
    dialog:表示几个人之间的对话,dt元素可以表示讲话者,dd元素可以表示讲话内容。

    内联元素:
    m:表示文本被“加上标志”,但是不一定强调。可以把它想象成书中突出显示的一节。可以写成<mark>.
    time:每个time元素都应该有一个datetime属性 比如<time datetime="2007-04-23T17:35:00-05:00">5:35 P.M. on April23rd</time>
    meter:表示指定范围内的数字值。例如,可以用它表示薪水、百分比或考试分数。
    progress:表示一个正在进行的过程的状态就像进度条。

    canvas元素本身没有绘图能力,所有绘制工作必须在javascript内部完成;

    HTML5 提供了两种在客户端存储数据的新方法:
    localStorage - 没有时间限制的数据存储
    sessionStorage - 针对一个session 的数据存储
    HTML5 使用JavaScript 来存储和访问数据。


    HTML5 新的Input 类型:
    email
    url
    number
    range
    Date pickers (date, month, week, time, datetime, datetime-local)
    search
    color

    HTML5 的新的表单元素:
    datalist
    keygen
    output

    新的form 属性:
    • autocomplete
    • novalidate

    新的input 属性:
    • autocomplete
    • autofocus
    • form
    • form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
    • height 和width
    • list
    • min, max 和step
    • multiple
    • pattern (regexp)
    • placeholder
    • required 

    <!--we move on to including a special JS file that will enable Internet Explorer (any version) to render HTML5 tags properly.-->
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Coding A CSS3 &amp; HTML5 One Page Template | Tutorialzine demo</title>
        <link rel="stylesheet" type="text/css" href="styles.css" />
        <!-- Internet Explorer HTML5 enabling script: -->
        <!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
            <style type="text/css">
                .clear {
                    zoom: 1;
                    display: block;
                }
            </style>
        <![endif]-->
    </head>

    LocalStorage和sessionStorage的数据以字符串键值对的形式储存,他们的区别如下:
    生存周期不同:当包含页面的选项卡或者窗口关闭后,sessionStorage中存储的数据就清空了,而LocalStorage中存储的数据依然存在;
    数据可见度不同:sessionStorage中存储的数据只有当前页面可以访问,而LocalStorage存储的数据对相同origin的所有页面都可见。

    Web Storage事件会在相同origin的所有页面上触发,无论该页面是否对Web Storage进行过操作,所以可以利用这些事件来进行页面之间的通信。

  • 相关阅读:
    <转>Java 高并发综合
    <转>Spring 知识点提炼
    qqq
    ttt
    工作中的那些坑(2)——逆波兰表达式
    工作中的那些坑(1)——一次过滤存量数据的优化过程
    Java学习笔记
    《代码大全》笔记(一)
    由Cocos2d-x工程入口窥见代理模式
    makefile
  • 原文地址:https://www.cnblogs.com/cw_volcano/p/2472043.html
Copyright © 2011-2022 走看看