HTML5学习日志

新特性

HTML5 中的一些有趣的新特性：

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

• 属性	值	描述
  autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
  controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
  height	pixels	设置视频播放器的高度。
  loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
  preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。
  src	url	要播放的视频的 URL。
  width	pixels	设置视频播放器的宽度。

  
  
• video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：
  
• 之间插入的内容是供不支持 video 元素的浏览器显示的
  

• 实例

  HTML5

  下面列出了大多数浏览器支持的视频方法、属性和事件：

  方法	属性	事件
  play()	currentSrc	play
  pause()	currentTime	pause
  load()	videoWidth	progress
  canPlayType	videoHeight	error
  	duration	timeupdate
  	ended	ended
  	error	abort
  	paused	empty
  	muted	emptied
  	seeking	waiting
  	volume	loadedmetadata
  	height
  	width

  注释：在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。

  属性	值	描述
  autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
  controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
  loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
  preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。
  src	url	要播放的音频的 URL。

  audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式：

  实例

  HTML5 拖放实例

  下面的例子是一个简单的拖放实例：

  实例

  亲自试一试

  它看上去也许有些复杂，不过我们可以分别研究拖放事件的不同部分。

  设置元素为可拖放

  首先，为了使元素可拖动，把 draggable 属性设置为 true ：

  拖动什么 - ondragstart 和 setData()

  然后，规定当元素被拖动时，会发生什么。

  在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。

  dataTransfer.setData() 方法设置被拖数据的数据类型和值：

  function drag(ev)
  {
  ev.dataTransfer.setData("Text",ev.target.id);
  }
  

  在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。

  放到何处 - ondragover

  ondragover 事件规定在何处放置被拖动的数据。

  默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

  这要通过调用 ondragover 事件的 event.preventDefault() 方法：

  event.preventDefault()

  进行放置 - ondrop

  当放置被拖数据时，会发生 drop 事件。

  在上面的例子中，ondrop 属性调用了一个函数，drop(event)：

  function drop(ev)
  {
  ev.preventDefault();
  var data=ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(data));
  }
  

  代码解释：

  • 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
  • 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
  • 被拖数据是被拖元素的 id ("drag1")
  • 把被拖元素追加到放置元素（目标元素）中

  创建 Canvas 元素

  向 HTML5 页面添加 canvas 元素。

  规定元素的 id、宽度和高度：

  通过 JavaScript 来绘制

  canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

  JavaScript 使用 id 来寻找 canvas 元素：

  var c=document.getElementById("myCanvas");

  然后，创建 context 对象：

  var cxt=c.getContext("2d"); 

  getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

  下面的两行代码绘制一个红色的矩形：

  cxt.fillStyle="#FF0000";
  cxt.fillRect(0,0,150,75); 
  

  fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

  理解坐标

  上面的 fillRect 方法拥有参数 (0,0,150,75)。

  意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

  如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。

  

  实例：把鼠标悬停在矩形上可以看到坐标

  更多 Canvas 实例

  下面的在 canvas 元素上进行绘画的更多实例：

  实例 - 线条

  通过指定从何处开始，在何处结束，来绘制一条线：

  

  JavaScript 代码：

  canvas 元素：

  
  Your browser does not support the canvas element.
  
  

  亲自试一试

  实例 - 圆形

  通过规定尺寸、颜色和位置，来绘制一个圆：

  

  JavaScript 代码：

  canvas 元素：

  
  Your browser does not support the canvas element.
  
  

  亲自试一试

  实例 - 渐变

  使用您指定的颜色来绘制渐变背景：

  

  JavaScript 代码：

  canvas 元素：

  
  Your browser does not support the canvas element.
  
  

  亲自试一试

  实例 - 图像

  把一幅图像放置到画布上：

  

  JavaScript 代码：

  canvas 元素：

  
  Your browser does not support the canvas element.
  
  

  亲自试一试

  HTML5 内联 SVG

  什么是SVG？

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

  SVG 的优势

  与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

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

  浏览器支持

  Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。

  把 SVG 直接嵌入 HTML 页面

  在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中：

  实例

  亲自试一试

  结果：

  
  

  Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。

  SVG

  SVG 是一种使用 XML 描述 2D 图形的语言。

  SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

  在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

  Canvas

  Canvas 通过 JavaScript 来绘制 2D 图形。

  Canvas 是逐像素进行渲染的。

  在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

  Canvas 与 SVG 的比较

  下表列出了 canvas 与 SVG 之间的一些不同之处。

  Canvas

  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

  SVG

  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序（比如谷歌地图）
  • 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
  • 不适合游戏应用

  HTML5 Geolocation（地理定位）用于定位用户的位置。

  亲自试一试：在谷歌地图上显示您的位置

  定位用户的位置

  HTML5 Geolocation API 用于获得用户的地理位置。

  鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

  浏览器支持

  Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。

  注释：对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。

  HTML5 - 使用地理定位

  请使用 getCurrentPosition() 方法来获得用户的位置。

  下例是一个简单的地理定位实例，可返回用户位置的经度和纬度。

  实例

  亲自试一试

  例子解释：

  • 检测是否支持地理定位
  • 如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
  • 如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象
  • showPosition() 函数获得并显示经度和纬度

  上面的例子是一个非常基础的地理定位脚本，不含错误处理。

  处理错误和拒绝

  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;
      }
    }
  

  亲自试一试

  错误代码：

  • Permission denied - 用户不允许地理定位
  • Position unavailable - 无法获取当前位置
  • Timeout - 操作超时

  在地图中显示结果

  如需在地图中显示结果，您需要访问可使用经纬度的地图服务，比如谷歌地图或百度地图：

  实例

  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="";
  }
  

  亲自试一试

  在上例中，我们使用返回的经纬度数据在谷歌地图中显示位置（使用静态图像）。

  谷歌地图脚本

  上面的链接向您演示如何使用脚本来显示带有标记、缩放和拖曳选项的交互式地图。

  给定位置的信息

  本页演示的是如何在地图上显示用户的位置。不过，地理定位对于给定位置的信息同样很有用处。

  案例：

  • 更新本地信息
  • 显示用户周围的兴趣点
  • 交互式车载导航系统 (GPS)

  getCurrentPosition() 方法 - 返回数据

  若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。

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

  Geolocation 对象 - 其他有趣的方法

  watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。

  clearWatch() - 停止 watchPosition() 方法

  下面的例子展示 watchPosition() 方法。您需要一台精确的 GPS 设备来测试该例（比如 iPhone）：

  实例

  亲自试一试

  在客户端存储数据

  HTML5 提供了两种在客户端存储数据的新方法：

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储

  之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

  在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

  对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

  HTML5 使用 JavaScript 来存储和访问数据。

  localStorage 方法

  localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

  如何创建和访问 localStorage：

  实例

  亲自试一试

  下面的例子对用户访问页面的次数进行计数：

  实例

  亲自试一试

  sessionStorage 方法

  sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

  如何创建并访问一个 sessionStorage：

  实例

  亲自试一试

  下面的例子对用户在当前 session 中访问页面的次数进行计数：

  实例