• Html新特性


    新特性

    • 用于绘画的 canvas 元素
    • 用于媒介回放的 video 和 audio 元素
    • 对本地离线存储的更好的支持
    • 新的特殊内容元素,比如 article、footer、header、nav、section
    • 新的表单控件,比如 calendar、date、time、email、url、search

    新增标签

    格式类

    mark

    定义有记号的文本

    meter

    度量给定范围(gauge)内的数据

    <meter value="3" min="0" max="10">十</meter>
    
    属性 描述
    form form_id 规定 元素所属的一个或多个表单。
    high number 规定被视作高的值的范围。
    low number 规定被视作低的值的范围。
    max number 规定范围的最大值。
    min number 规定范围的最小值。
    optimum number 规定度量的优化值。
    value number 必需。规定度量的当前值。

    progress

    标示任务的进度

    <progress value="22" max="100"></progress> 
    
    属性 描述
    max number 规定任务一共需要多少工作。
    value number 规定已经完成多少任务。

    图像类-canvas

    • 创建canvas元素
    <canvas id="myCanvas" width="200" height="100"></canvas>
    
    • 通过 JavaScript 来绘制
    <script type="text/javascript">
    //创建context对象
    var cxt=document.getElementById("myCanvas").getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.fillRect(0,0,150,75);
    </script>
    
    //直线
    cxt.moveTo(10,10);
    cxt.lineTo(150,50);
    cxt.stroke();
    
    //圆形
    cxt.beginPath();
    cxt.arc(70,18,15,0,Math.PI*2,true);
    cxt.closePath();
    cxt.fillStyle="#FF0000";
    cxt.fill();
    
    //渐变
    cxt.fillRect(0,0,175,50);
    var grd=cxt.createLinearGradient(0,0,175,50);
    grd.addColorStop(0,"#FF0000");
    grd.addColorStop(1,"#00FF00");
    cxt.fillStyle=grd;
    

    音频/视频类

    audio视频

    <audio src="someaudio.wav"></audio>
    
    • 格式
    格式 IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
    Ogg Vorbis YES YES YES
    MP3 YES YES YES
    Wav YES YES YES
    • 属性
    属性 描述
    autoplay autoplay 自动播放
    controls controls 显示控件
    loop loop 循环播放
    muted muted 规定视频输出应该被静音
    preload preload 音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性
    src url 音频的 URL

    sourse

    允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择

    <audio controls>
       <source src="horse.ogg" type="audio/ogg">
       <source src="horse.mp3" type="audio/mpeg">
    </audio> 
    
    属性 描述
    media media query 媒体资源的类型
    src url 媒体文件的 URL
    type numeric value 资源的 MIME 类型

    track

    用于规定字幕文件或其他包含文本的文件,当媒介播放时,这些文件是可见的

    <video width="320" height="240" controls="controls">
      <source src="forrest_gump.mp4" type="video/mp4" />
      <source src="forrest_gump.ogg" type="video/ogg" />
      <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
      <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
    </video>
    
    属性 描述
    kind caption chapters descroptions metadata subtitles 轨道类型
    label label 轨道的标签或标题
    srclang language_code 轨道的语言,若 kind 属性值是 "subtitles",则该属性必需的

    video音频

    <video src="movie.ogg" controls="controls"></video>
    
    • 格式
    格式 IE Firefox Opera Chrome Safari
    Ogg No No
    MPEG 4 No No No
    WebM No No
    • 属性
    属性 描述
    autoplay autoplay 自动播放
    controls controls 显示控件
    height pixels 视频播放器的高度
    loop loop 循环播放
    muted muted 视频的音频输出被静音
    poster URL 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像
    preload preload 规视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性
    src url 视频 URL
    width pixels 视频播放器的宽度

    语义化类

    header、footer、nav、section、article、aside、detail、 dialog、summary

    表单类

    input新增类型

    Input type IE Firefox Opera Chrome Safari
    email No 4.0 9.0 10.0 No
    url No 4.0 9.0 10.0 No
    number No No 9.0 7.0 No
    range No No 9.0 4.0 4.0
    Date pickers No No 9.0 10.0 No
    search No 4.0 11.0 10.0 No
    color No No 11.0 No No
    • number
    属性 描述
    max number 规定允许的最大值
    min number 规定允许的最小值
    step number 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)
    value number 规定默认值
    • range
    属性 描述
    max number 规定允许的最大值
    min number 规定允许的最小值
    step number 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)
    value number 规定默认值
    • Date Pickers
    <input type="date" name="user_date" />
    
    - date - 选取日、月、年
    - month - 选取月、年
    - week - 选取周和年
    - time - 选取时间(小时和分钟)
    - datetime - 选取时间、日、月、年(UTC 时间)
    - datetime-local - 选取时间、日、月、年(本地时间)
    

    input新增属性

    autofocus

    //自动获取焦点
    <input type="text" autofocus="autofocus" />
    

    form

    //规定输入域所属的一个或多个表单,必须引用所属表单的 id
    <form id="user_form">
    First name:<input type="text"/>
    <input type="submit" />
    </form>
    Last name: <input type="text" form="user_form" />
    

    height & width

    //规定用于 image 类型的 input 标签的图像高度和宽度
    <input type="image" src="img_submit.gif" width="99" height="99" />
    

    list

    //规定输入域的 datalist
    <input type="url" list="url_list"/>
    <datalist id="url_list">
    <option label="W3Schools" value="http://www.w3school.com.cn" />
    <option label="Google" value="http://www.google.com" />
    </datalist>
    

    multiple

    //规定输入域中可选择多个值.email 和 file
    <input type="file" name="img" multiple="multiple" />
    

    placeholder
    required

    <input type="text" name="usr_name" required="required" />
    

    datalist

    定义下拉列表

    //与input配合使用;list属性绑定
    <input id="myCar" list="cars" />
    <datalist id="cars">
      <option value="BMW">
      <option value="Ford">
      <option value="Volvo">
    </datalist>
    

    output

    定义输出一些类型

    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
       <input type="range" id="a" value="50">100
       +<input type="number" id="b" value="50">
       =<output name="x" for="a b"></output>
    </form> 
    
    属性 描述
    for element_id 定义输出域相关的一个或多个元素。
    form form_id 定义输入字段所属的一个或多个表单。
    name name 定义对象的唯一名称。(表单提交时使用)

    fieldset

    //打包表单内容生成一组字段
    <form>
      <fieldset>
        <legend>health information</legend>
        height: <input type="text" />
        weight: <input type="text" />
      </fieldset>
    </form>
    
    属性 描述
    form form_id 规定 fieldset 所属的一个或多个表单。
    name value 规定 fieldset 的名称。

    SVG

    什么是SVG

    • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
    • SVG 用于定义用于网络的基于矢量的图形
    • SVG 使用 XML 格式定义图形
    • SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
    • SVG 是万维网联盟的标准

    SVG的优势

    • SVG 图像可通过文本编辑器来创建和修改
    • SVG 图像可被搜索、索引、脚本化或压缩
    • SVG 是可伸缩的
    • SVG 图像可在任何的分辨率下被高质量地打印
    • SVG 可在图像质量不下降的情况下被放大

    画布与SVG

    • SVG
      SVG 是一种使用 XML 描述 2D 图形的语言。
      SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
      在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。

    • Canvas
      Canvas 通过 JavaScript 来绘制 2D 图形。
      Canvas 是逐像素进行渲染的。
      在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。

    • 比较

      Canvas
      - 依赖分辨率
      - 不支持事件处理器
      - 弱的文本渲染能力
      - 能够以 .png 或 .jpg 格式保存结果图像
      - 最适合图像密集型的游戏,其中的许多对象会被频繁重绘
      
      SVG
      - 不依赖分辨率
      - 支持事件处理器
      - 最适合带有大型渲染区域的应用程序(比如谷歌地图)
      - 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
      - 不适合游戏应用
      

    地理定位

    实例

    <script>
    var x=document.getElementById("demo");
    //如果支持,则运行 getCurrentPosition() 方法。如果不支持,则向用户显示一段消息
    //如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象
    //showPosition() 函数获得并显示经度和纬度
    function getLocation()
      {
      if (navigator.geolocation)
        {
        navigator.geolocation.getCurrentPosition(showPosition);
        }
      else{x.innerHTML="Geolocation is not supported by this browser.";}
      }
    function showPosition(position)
      {
      x.innerHTML="Latitude: " + position.coords.latitude +
      "<br />Longitude: " + position.coords.longitude;
      }
    </script>
    

    处理错误和拒绝

    //getCurrentPosition() 方法的第二个参数用于处理错误
    function showError(error)
      {
      switch(error.code)
        {
        case error.PERMISSION_DENIED:
          x.innerHTML="User denied the request for Geolocation."
          break;
        case error.POSITION_UNAVAILABLE:
          x.innerHTML="Location information is unavailable."
          break;
        case error.TIMEOUT:
          x.innerHTML="The request to get user location timed out."
          break;
        case error.UNKNOWN_ERROR:
          x.innerHTML="An unknown error occurred."
          break;
        }
      }
    

    在地图中显示结果

    //如需在地图中显示结果,您需要访问可使用经纬度的地图服务,比如谷歌地图或百度地图
    function showPosition(position)
    {
    var latlon=position.coords.latitude+","+position.coords.longitude;
    var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
    +latlon+"&zoom=14&size=400x300&sensor=false";
    document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
    }
    

    getCurrentPosition()

    属性 描述
    coords.latitude 十进制数的纬度
    coords.longitude 十进制数的经度
    coords.accuracy 位置精度
    coords.altitude 海拔,海平面以上以米计
    coords.altitudeAccuracy 位置的海拔精度
    coords.heading 方向,从正北开始以度计
    coords.speed 速度,以米/每秒计
    timestamp 响应的日期/时间

    Web储存

    在客户端存储数据

    之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
    在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

    • localStorage

      localStorage——没有时间限制的数据存储

      <script type="text/javascript">
      localStorage.lastname="Smith";
      document.write(localStorage.lastname);
      </script>
      
    • sessionStorage

      sessionStorage——针对一个 session 的数据存储,当用户关闭浏览器窗口后,数据会被删除

      <script type="text/javascript">
      sessionStorage.lastname="Smith";
      document.write(sessionStorage.lastname);
      </script>
      

    应用程序缓存

    使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本
    什么是应用程序缓存(Application Cache)——用户可在应用离线时使用它们

    Cache Manifest 实例

    <!DOCTYPE HTML>
    <html manifest="demo.appcache">
    <body>
    The content of the document......
    </body>
    </html>
    

    Cache Manifest 基础

    如需启用应用程序缓存,请在文档的<html> 标签中包含 manifest 属性

    每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。
    manifest 文件的建议的文件扩展名是:".appcache"。
    请注意,manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置。

    Manifest 文件

    manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)
    manifest 文件可分为三个部分:

    1.CACHE MANIFEST

    【必要】在此标题下列出的文件将在首次下载后进行缓存

    //列出了三个资源:一个 CSS 文件,一个 GIF 图像,以及一个 JavaScript 文件。当 manifest 文件加载后,浏览器会从网站的根目录下载这三个文件
    CACHE MANIFEST
    /theme.css
    /logo.gif
    /main.js
    

    2.NETWORK

    NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存

    //规定文件 "login.asp" 永远不会被缓存,且离线时是不可用的.*表示所有文件
    NETWORK:
    login.asp
    

    3.FALLBACK

    在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)

    //规定如果无法建立因特网连接,则用 "offline.html" 替代
    FALLBACK:
    /html5/ /404.html
    

    更新缓存

    一旦应用被缓存,它就会保持缓存直到发生下列情况

    • 用户清空浏览器缓存
    • manifest 文件被修改
    • 由程序来更新应用缓存

    [实例]

    CACHE MANIFEST
    # 2012-02-21 v1.0.0
    /theme.css
    /logo.gif
    /main.js
    
    NETWORK:
    login.asp
    
    FALLBACK:
    /html5/ /404.html
    

    以 "#" 开头的是注释行,但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片,或者修改了一个 JavaScript 函数,这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

    一旦文件被缓存,则浏览器会继续展示已缓存的版本,即使您修改了服务器上的文件。为了确保浏览器更新缓存,您需要更新 manifest 文件。
    注释:浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点 5MB)

    快捷方式

    多个标签

    div*3
    

    父子标签

    ul>li
    

    并列标签

    div+p
    

    类名标签

    div.nav
    

    其他

    inout:text
    
  • 相关阅读:
    windows2008下载
    js代码格式化
    javascript小实例【第二课时笔记】
    学习CSS的一些有效资源
    javascript小实例【第一课时笔记】
    关于HTML5的一些基础知识
    javascript小实例【第三课时笔记】
    c#缓存介绍(转)
    [C#] String与string的区别
    Asp.Net Cache缓存使用代码
  • 原文地址:https://www.cnblogs.com/sanhuamao/p/13590630.html
Copyright © 2020-2023  润新知