zoukankan      html  css  js  c++  java
  • 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中设置这些元素为块级元素。

           

  • 相关阅读:
    JS 变量的作用域
    清理网站缓存的几种方法
    C# 将程序添加到启动项 (写入注册表),及从启动项中删除
    EasyUI iconCls
    JQuery Easy Ui dataGrid 数据表格
    datatable转换为json
    Web window.print() 打印
    用js使得输入框input只能输入数字
    隐藏或删除指定的html元素
    使用Asponse.Cell解决Excel科学计数法问题
  • 原文地址:https://www.cnblogs.com/hanbingljw/p/3488244.html
Copyright © 2011-2022 走看看