HTML5教程（中）

HTML5 浏览器支持

目前市面上的浏览器有很多版本，你可以让一些较早的浏览器（不支持HTML5）支持 HTML5。

HTML5 浏览器支持

现代的浏览器都支持 HTML5。

此外，所有浏览器，包括旧的和最新的，对无法识别的元素会作为内联元素自动处理。

正因为如此，你可以 "教会" 浏览器处理 "未知" 的 HTML 元素。

	甚至你可以教会 IE6 (Windows XP 2001) 浏览器处理未知的 HTML 元素。

将 HTML5 元素定义为块元素

HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是块级元素。

为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:

实例

header, section, footer, aside, nav, main, article, figure {

display: block;

}

为 HTML 添加新元素

你可以为 HTML 添加新的元素。

该实例向 HTML 添加的新的元素，并为该元素定义样式，元素名为 <myHero> ：

实例

<!DOCTYPE html>

<html>

<head>

<title>为 HTML 添加新元素</title>

<style>

myHero {

display: block;

background-color: #ddd;

padding: 50px;

font-size: 30px;

}

</style>

</head>

<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

<myHero>我的第一个新元素</myHero>

</body>

</html>

尝试一下 >>

JavaScript 语句 document.createElement("myHero") 是为了为 IE 浏览器添加新的元素。

Internet Explorer 浏览器问题

你可以使用以上的方法来为 IE 浏览器添加 HTML5 元素，但是：

	Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式。

我们可以使用 Sjoerd Visscher 创建的 "HTML5 Enabling JavaScript", "shiv" 来解决该问题:

<!--[if lt IE 9]>

<![endif]-->

以上代码是一个注释，作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件，并解析它。

**注意：**国内用户请使用百度静态资源库（Google 资源库在国内不稳定）：

<!--[if lt IE 9]>

<![endif]-->

针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。

完美的 Shiv 解决方案

实例

<!DOCTYPE html>

<html>

<head>

<title>Styling HTML5</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<h1>我的第一篇文章</h1>

学技术，从W3Cschool开始！

</article>

</body>

</html>

尝试一下 >>

html5shiv.js 引用代码必须放在 <head> 元素中，因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。

关于HTML5的新元素，我们将会在"HTML 新元素"部分作出详细的介绍！

HTML5 新元素

随着HTML版本的更新迭代，有很多元素的使用也在不断的发生着变化，本节我们将介绍HTML5中的一些新的元素！

HTML5 新元素

自1999年以后HTML 4.01 已经改变了很多,今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。

为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式处理，和几个api拖放元素，定位，包括网页应用程序缓存，存储，网络工作者，等。

<canvas> 新元素

标签	描述
<canvas>	标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

新多媒体元素

标签	描述
<audio>	定义音频内容
<video>	定义视频（video 或者 movie）
<source>	定义多媒体资源 <video> 和 <audio>
<embed>	定义嵌入的内容，比如插件。
<track>	为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。

新表单元素

标签	描述
<datalist>	定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<keygen>	规定用于表单的密钥对生成器字段。
<output>	定义不同类型的输出，比如脚本的输出。

提示： 你可以在本站的"HTML 表单"一节中查看完整的HTML使用的表单元素！

新的语义和结构元素

HTML5提供了新的元素来创建更好的页面结构：

标签	描述
<article>	定义页面独立的内容区域。
<aside>	定义页面的侧边栏内容。
<bdi>	允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command>	定义命令按钮，比如单选按钮、复选框或按钮
<details>	用于描述文档或文档某个部分的细节
<dialog>	定义对话框，比如提示框
<summary>	标签包含 details 元素的标题
<figure>	规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>	定义 <figure> 元素的标题
<footer>	定义 section 或 document 的页脚。
<header>	定义了文档的头部区域
<mark>	定义带有记号的文本。
<meter>	定义度量衡。仅用于已知最大和最小值的度量。
<nav>	定义导航链接的部分。
<progress>	定义任何类型的任务的进度。
<ruby>	定义 ruby 注释（中文注音或字符）。
<rt>	定义字符（中文注音或字符）的解释或发音。
<rp>	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<section>	定义文档中的节（section、区段）。
<time>	定义日期或时间。
<wbr>	规定在文本中的何处适合添加换行符。

已移除的元素

以下的 HTML 4.01 元素在HTML5中已经被删除:

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

HTML5 Canvas

<canvas>元素是HTML5中的新元素，通过使用该元素，你可以在网页中绘制所需的图形。

标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。

什么是 Canvas?

HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。

浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持元素.

注意: Internet Explorer 8 及更早 IE 版本的浏览器不支持 <canvas> 元素.

创建一个画布（Canvas）

一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制.

注意: 默认情况下 <canvas> 元素没有边框和内容。

<canvas>简单实例如下:

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小。

提示: 你可以在HTML页面中使用多个 <canvas> 元素.

使用 style 属性来添加边框:

实例

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #000000;">

</canvas>

尝试一下 >>

使用 JavaScript 来绘制图像

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

实例

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

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

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

</script>

尝试一下 >>

实例解析:

首先，找到 <canvas> 元素:

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

然后，创建 context 对象：

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

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

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

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle默认设置是#000000（黑色）。

fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

Canvas 坐标

canvas 是一个二维网格。

canvas 的左上角坐标为 (0,0)

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

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

坐标实例

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

Canvas - 路径

在Canvas上画线，我们将使用以下两种方法：

moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标

绘制线条我们必须使用到 "ink" 的方法，就像stroke().

实例

定义开始坐标(0,0), 和结束坐标 (200,100). 然后使用 stroke() 方法来绘制线条:

JavaScript:

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

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

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();

尝试一下 >>

在canvas中绘制圆形, 我们将使用以下方法:

arc(x,y,r,start,stop)

实际上我们在绘制圆形时使用了 "ink" 的方法, 比如 stroke() 或者 fill().

实例

使用 arc() 方法绘制一个圆:

JavaScript:

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

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

ctx.beginPath();

ctx.arc(95,50,40,0,2*Math.PI);

ctx.stroke();

尝试一下 >>

Canvas - 文本

使用 canvas 绘制文本，重要的属性和方法如下：

font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本

使用 fillText():

实例

使用 "Arial" 字体在画布上绘制一个高 30px 的文字（实心）：

JavaScript:

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

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

ctx.font="30px Arial";

ctx.fillText("Hello World",10,50);

尝试一下 >>

使用 strokeText():

实例

使用 "Arial" 字体在画布上绘制一个高 30px 的文字（空心）：

JavaScript:

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

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

ctx.font="30px Arial";

ctx.strokeText("Hello World",10,50);

尝试一下 >>

Canvas - 渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

以下有两种不同的方式来设置Canvas渐变：

createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。

使用 createLinearGradient():

实例

创建一个线性渐变。使用渐变填充矩形:

JavaScript:

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

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

// Create gradient

var grd=ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// Fill with gradient

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

尝试一下 >>

使用 createRadialGradient():

实例

创建一个径向/圆渐变。使用渐变填充矩形：

JavaScript:

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

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

// Create gradient

var grd=ctx.createRadialGradient(75,50,5,90,60,100);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// Fill with gradient

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

尝试一下 >>

**提示：**当使用<canvas>元素创建径向渐变的时候 context.createRadialGradient(x , y , r , x1 , y1 , r1) 括号内的参数有如下的含义:

x：表示渐变的开始圆的 x 坐标
y：表示渐变的开始圆的 y 坐标
r：表示开始圆的半径
x1：表示渐变的结束圆的 x 坐标
y1：表示渐变的结束圆的 y 坐标
r1：表示结束圆的半径

Canvas - 图像

把一幅图像放置到画布上, 使用以下方法:

drawImage(image,x,y)

使用图像:

实例

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

JavaScript:

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

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

var img=document.getElementById("scream");

ctx.drawImage(img,10,10);

尝试一下 >>

HTML Canvas 参考手册

标签的完整属性可以参考Canvas 参考手册.

The HTML Tag

Tag	描述
<canvas>	HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

参考阅读

HTML DOM 参考手册：HTML DOM Canvas 对象

HTML5 内联 SVG

SVG表示可缩放矢量图形，是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式，它在2003年1月14日成为W3C推荐标准。

HTML5 支持内联 SVG。

什么是SVG？

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

SVG优势

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

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

浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持内联SVG。

把 SVG 直接嵌入 HTML 页面

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

实例

<!DOCTYPE html>

<html>

<body>

<polygon points="100,10 40,180 190,60 10,60 160,180"

style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">

</svg>

</body>

</html>

尝试一下 >>

学习更多关于 SVG 教程, 请访问 SVG 教程.

SVG 与 Canvas两者间的区别

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

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

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

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

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

Canvas 与 SVG 的比较

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

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

HTML5 MathML

MathML 与 HTML相似度很高，但是比较繁琐。它继承了角括号和双标签（<标签>内容</标签>）的用法。

HTML5 可以在文档中使用 MathML 元素，对应的标签是 <math>...</math> 。

MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。

**注意：**大部分浏览器都支持 MathML 标签，如果你的浏览器不支持该标签，可以使用最新版的 Firefox 或 Safari 浏览器查看。

MathML 实例

以下是一个简单的 MathML 实例：

复制代码

<!DOCTYPE html><html>
   <head>
      <meta charset="UTF-8">
      <title>W3Cschool在线教程(w3cschool.cn)</title>
   </head>
	
   <body>
	
      <math xmlns="http://www.w3.org/1998/Math/MathML">
		
         <mrow>
            <msup><mi>a</mi><mn>2</mn></msup>
            <mo>+</mo>
				
            <msup><mi>b</mi><mn>2</mn></msup>
            <mo>=</mo>
				
            <msup><mi>c</mi><mn>2</mn></msup>
         </mrow>
			
      </math>
		
   </body>
</html>

尝试一下 >>

运行结果图，如下所示：

以下实例添加了一些运算符：

复制代码

<!DOCTYPE html><html>
   <head>
      <meta charset="UTF-8">
      <title>W3Cschool在线教程(w3cschool.cn)</title>
   </head>
	
   <body>
	
      <math xmlns="http://www.w3.org/1998/Math/MathML">
		
         <mrow>			
            <mrow>
				
               <msup>
                  <mi>x</mi>
                  <mn>2</mn>
               </msup>
					
               <mo>+</mo>
					
               <mrow>
                  <mn>4</mn>
                  <mo>⁢</mo>
                  <mi>x</mi>
               </mrow>
					
               <mo>+</mo>
               <mn>4</mn>
					
            </mrow>
				
            <mo>=</mo>
            <mn>0</mn>
				 
         </mrow>
      </math>
		
   </body></html>

尝试一下 >>

运行结果图，如下所示：

以下实例是一个 2×2 矩阵，可以在 Firefox 3.5 以上版本查看到效果：

复制代码

<!DOCTYPE html><html>
   <head>
      <meta charset="UTF-8">
      <title>W3Cschool在线教程(w3cschool.cn)</title>
   </head>
	
   <body>
      <math xmlns="http://www.w3.org/1998/Math/MathML">
		
         <mrow>
            <mi>A</mi>
            <mo>=</mo>
			
            <mfenced open="[" close="]">
			
               <mtable>
                  <mtr>
                     <mtd><mi>x</mi></mtd>
                     <mtd><mi>y</mi></mtd>
                  </mtr>
					
                  <mtr>
                     <mtd><mi>z</mi></mtd>
                     <mtd><mi>w</mi></mtd>
                  </mtr>
               </mtable>
               
            </mfenced>
         </mrow>
      </math>
      
   </body></html>

尝试一下 >>

运行结果图，如下所示：

HTML5 拖放

HTML5 拖放（Drag 和 Drop）

拖放的目的是可以让你将某个对象放置到你想要放置的位置。

拖放（Drag 和 drop）是 HTML5 标准的组成部分。

将w3cschool图标拖动到矩形框中。

拖放

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。

**注意:**Safari 5.1.2不支持拖动.

HTML5 拖放实例

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

实例

<!DOCTYPE HTML>

<html>

<head>

function allowDrop(ev)

{

ev.preventDefault();

}

function drag(ev)

{

ev.dataTransfer.setData("Text",ev.target.id);

}

function drop(ev)

{

ev.preventDefault();

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

}

</script>

</head>

<body>

<div id="div1" οndrοp="drop(event)"

οndragοver="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true"

οndragstart="drag(event)" width="336" height="69">

</body>

</html>

尝试一下 >>

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

设置元素为可拖放

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

拖动什么 - ondragstart 和 setData()

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

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

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

function drag(ev)

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

}

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

提示： 你可以在本站的"ondragstart 事件"部分了解到更多的有用信息！

放到何处 - 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")
把被拖元素追加到放置元素（目标元素）中

HTML5 地理定位

HTML5 Geolocation（地理定位）

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

Geolocation 通过请求一个位置信息，用户同意后，浏览器会返回一个包含经度和维度的位置信息！

定位用户的位置

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

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

浏览器支持

Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持Geolocation（地理定位）.

注意: Geolocation（地理定位）对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。

HTML5 - 使用地理定位

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

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

实例

var x=document.getElementById("demo");

function getLocation()

{

if (navigator.geolocation)

{

navigator.geolocation.getCurrentPosition(showPosition);

}

else{x.innerHTML="该浏览器不支持获取地理位置。";}

}

function showPosition(position)

{

x.innerHTML="Latitude: " + position.coords.latitude +

"<br>Longitude: " + position.coords.longitude;

}

</script>

尝试一下 >>

实例解析:

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

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

**提示：**geolocation的位置信息来源可以包括GPS、IP地址、RFID、WIFI和蓝牙的MAC地址、以及GSM/CDMS的ID等等。

处理错误和拒绝

getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数：

实例

function showError(error)

{

switch(error.code)

{

case error.PERMISSION_DENIED:

x.innerHTML="用户拒绝对获取地理位置的请求。"

break;

case error.POSITION_UNAVAILABLE:

x.innerHTML="位置信息是不可用的。"

break;

case error.TIMEOUT:

x.innerHTML="请求用户地理位置超时。"

break;

case error.UNKNOWN_ERROR:

x.innerHTML="未知错误。"

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="<img src='"+img_url+"'>";

}

尝试一下 >>

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

Google地图脚本

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

给定位置的信息

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

实例:

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

getCurrentPosition() 方法 - 返回数据

T若成功，则 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）：

实例

var x=document.getElementById("demo");

function getLocation()

{

if (navigator.geolocation)

{

navigator.geolocation.watchPosition(showPosition);

}

else{x.innerHTML="该浏览器不支持获取地理位置。";}

}

function showPosition(position)

{

x.innerHTML="纬度: " + position.coords.latitude +

"<br>经度: " + position.coords.longitude;

}

</script>

尝试一下 >>

关于HTML5中地理定位的内容我们就介绍到这，在下一节的内容中，我们将学习有关HTML5视频的相关知识！

HTML5教程（中）

HTML5 浏览器支持

HTML5 浏览器支持

HTML5 浏览器支持

将 HTML5 元素定义为块元素

实例

为 HTML 添加新元素

实例

Internet Explorer 浏览器问题

完美的 Shiv 解决方案

实例

HTML5 新元素

HTML5 新元素

HTML5 新元素

<canvas> 新元素

新多媒体元素

新表单元素

新的语义和结构元素

已移除的元素

HTML5 Canvas

HTML5 Canvas

什么是 Canvas?

浏览器支持

创建一个画布（Canvas）

实例

使用 JavaScript 来绘制图像

实例

Canvas 坐标

Canvas - 路径

实例

实例

Canvas - 文本

实例

实例

Canvas - 渐变

实例

实例

Canvas - 图像

使用图像:

实例

HTML Canvas 参考手册

The HTML Tag

参考阅读

HTML5 内联 SVG

HTML5 内联 SVG

什么是SVG？

SVG优势

浏览器支持

把 SVG 直接嵌入 HTML 页面

实例

SVG 与 Canvas两者间的区别

Canvas 与 SVG 的比较

HTML5 MathML

HTML5 MathML

MathML 实例

HTML5 拖放

HTML5 拖放（Drag 和 Drop）

拖放

浏览器支持

HTML5 拖放实例

实例

设置元素为可拖放

拖动什么 - ondragstart 和 setData()

放到何处 - ondragover

进行放置 - ondrop

更多实例

相关文章

HTML5 地理定位

HTML5 Geolocation（地理定位）

定位用户的位置

浏览器支持

HTML5 - 使用地理定位

实例

处理错误和拒绝

实例

在地图中显示结果

实例

给定位置的信息

getCurrentPosition() 方法 - 返回数据

Geolocation 对象 - 其他有趣的方法