HTML5学习的小笔记(不全)

HTML5

 

一、用于实现Web应用程序的新增功能有以下几项:

       1、新增用于绘画的canvas元素,该元素就像在浏览器中嵌入一块画布,使用程序可以在这画布上绘画。

       2、更好的用户交互操作,包括拖放、内容可编辑等。

       3、“撤销”和“重做”操作的管理。

       4、扩展的HTMLDOM API。

       5、本地离线存储。

       6、Web SQL 数据库。

       7、离线网络应用程序。

       8、跨文档消息。

       9、Web Workers 优化JavaScript执行

二、用于更好地呈现内容

      1、用于视频、音频播放的video元素和audio元素。

      2、用于文档结构的article、footer、header、nav、section等元素。

      3、新的表单控件。

      4、一些元素进行了新的修订

三、html5常用到的命名空间

     1、HTML命名空间:http://www.w3.org/1999/xhtml.

     2、MathML命名空间:http://www.w3.org/1998/Math/MathML。

     3、SVG命名空间:http://www.w3.org/2000/svg。

     4、XLink命名空间:http://www.w3.org/1999/xlink。

     5、XML命名空间:http://www.w3.org/XML/1998/namespace。

     6、XMLNS命名空间:http://www.w3.org/2000/xmlns/。

四、文档类型

     1、使用XML语法编写HTML5文档

         

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
          <title>文档标题</title>
          <meta http-equiv="Content-type" content="application/xhtml+xml"/>
    </head>
   <body>
   </body>
</html>

 

 文档扩展名保存为.xml或者.xhtml(推荐使用.xhtml扩展名).需要注意的是使用XML语法编写的HTML5文档没有声明文档类型,但是MIME类型必须是text/xml或者application/xml,以及其他任何子类型为“+xml”的MIME类型,如HTML5规范推荐使用的application/xhtml+xml.(.xml扩展名的文档一般MIME类型都会被识别为text/xml,而使用.xhtml扩展名的文档则MIME类型是未知的)

    2、使用HTML语法编写HTML5文档

 

<!doctype html>
<html>
        <head>
                <title>文档标题</title>
                <meta charset="UTF-8">
        </head>
        <body>
             .....
        </body>
</html>

 

             注意:HTML语法格式不允许使用命名空间,但也有几个特例。同时虽然不推荐使用DTD验证,但是为了向前兼容HTML和XHTML,仍旧可以定义DTD:例如

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EM">
<!DOCTYPE html PUBLIC "-//W3C//DTD xhtml 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

 五、标签:

      1、媒体标签<video>和<audio>

       

<video src="movie.ogg" controls="controls">
   你的浏览器不支持HTML5视频功能!
</video><audio src="song.ogg" controls="controls">
   你的浏览器不支持HTML5音频功能!
</audio>

 

      属性有

               controls(值为controls)用来设置是否为视频,音频添加控件(如播放、暂停、进度条、音量等);

               autoplay(值为autoplay)用来设定视频或音频是否在页面加载后自动播放。如果出现这个值,则马上播放;

               loop(值为loop)用来设置视频或音频是否循环播放;

               preload:  1、值auto:全部预加载

                             2、metadata:部分加载

                             3、none:不进行加载

               src(值为URL)设置要播放的视频或音频的源文件url

               width和height:用来设置媒体播放器的长宽

               poster(值为url)用来指定一张图片作为预览图,在当前视频数据无效显示时显示

     常用的多媒体文件及对应的MIME类型:

      视频:

             扩展名                          MIMI类型

             .ogg                            video/ogg

             .mp4                           video/mp4

             .webm                         video/webm

             .mov                           video/quicktime

             .m4v                           video/x-m4v

             .3gp                            video/3gpp

             .mkv                            video/x-matroska

      音频:

            扩展名                           MIME类型

            .ogg                              audio/ogg

            .mp3                             audio/mpeg

            .spx                              audio/ogg

            .oga                              audio/ogg

      <source>元素不能单独出现,只能位于<video>或<audio>之中,用于给<video>或<audio>指定多个可供选择的文件地址,(浏览器最终只选择其中一个),其拥有三个属性:src、type(值为MIME类型,有一个参数codecs,用来指定特定的媒体解码器)、media(用于说明媒体在何种介质中使用,不设置时默认值为all,表示支持所有介质)。

     样例:全兼容设置

<video width="480px" height="360px" controls="controls" poster="images/moviepaper.png">
      <source src="video/movie.mp4" type="video/mp4"/>
      <source src="video/movie.ogg" type="video/ogg"/>
      <source src="video/movie.webm" type="video/webm"/>
      <object  classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="480px" height="36opx" type="application/x-shockwave-flash">
                  <param name="allowFullScreen" value="true" />
                  <param name="movie" value="swf/videoplayer.swf"/>
                  <param name="flashvars" value="url=video/movie.mp4"/>
                  <embed  src="swf/videoplayer.swf" width="480px" height="360px" type="application/x-shockwave-flash" 
                          flashvars="url=video/movie.mp4" allowFullScreen="true"/>
      </object>
  
</video>

 

      2、文档结构元素(具有很好的语义化)

           <header>具有引导和导航作用的辅导元素,可以包含一个区间的标题或其他内容(如logo,搜索表单,或登录消息等)

           <nav>    定义网页中的导航链接部分

           <hgroup>  标题组合

           <aside>   用来表示当前页面或文章的附属信息部分

           <section>用来表现普通的文档内容区块或应用区块

           <article> 用来在页面表示一套结构完整且独立的内容部分

           <address>  被用来提供该文档的联系人信息

           <footer>    可以被用来作为其直接父级内容或一个根区块的尾部内容

         注意

              以下设置可以便利地让IE9以前的浏览器支持结构元素,并且支持打印功能。

 

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
支持的HTML5元素包括:abbr、article、aside、audio、video、canvas、detail、figcaption、figure、footer、header、hgroup、mark、meter、nav、output、
                  progress、section、summary、time。
并且需要在css中设置这些元素为块级元素。

 

 

       

 

posted @ 2013-12-24 10:43  奋力向前CO  阅读(447)  评论(0编辑  收藏  举报