地理位置这是一个 HTML5 API，用于获取网站用户的地理位置，用户必须首先允许网站获取他或她的位置这通常通过按钮和/或浏览器弹出窗口来实现所有最新版本的 Chrome、Firefox、IE、Safari 和 Opera 都可以使用 HTML5 的地理位置功能地理位置的一些用途是：公共交通网站出租车及其他运输网站电子商务网站计算运费旅行社网站房地产网站在附近播放的电影的电影院网站在线游戏网站首页提供本地标题和天气工作职位可以自动计算通勤时间工作原理： 地理位置通过扫描位置信息的常见源进行工作，其中包括以下：全球定位系统（GPS）是最准确的网络信号 - IP地址、RFID、Wi-Fi 和蓝牙 MAC地址GSM/CDMA 蜂窝 ID用户输入该 API 提供了非常方便的函数来检测浏览器中的地理位置支持：if (navigator.geolocation) { // do stuff } getCurrentPosition API 是使用地理位置的主要方法它检索用户设备的当前地理位置该位置被描述为一组地理坐标以及航向和速度位置信息作为位置对象返回语法是：getCurrentPosition(showLocation, ErrorHandler, options); showLocation：定义了检索位置信息的回调方法ErrorHandler（可选）：定义了在处理异步调用时发生错误时调用的回调方法options （可选）： 定义了一组用于检索位置信息的选项我们可以通过两种方式向用户提供位置信息：测地和民用描述位置的测地方式直接指向纬度和经度位置信息的民用表示法是人类可读的且容易理解如下表 1 所示，每个属性/参数都具有测地和民用表示图 5 包含了一个位置对象返回的属性集图5：位置对象属性网络存储在 HTML 中，为了在本机存储用户数据，我们需要使用 JavaScript cookie为了避免这种情况，HTML5 已经引入了 Web 存储，网站利用它在本机上存储用户数据与 Cookie 相比，Web 存储的优点是：更安全更快存储更多的数据存储的数据不会随每个服务器请求一起发送只有在被要求时才包括在内这是 HTML5 Web 存储超过 Cookie 的一大优势有两种类型的 Web 存储对象：本地 - 存储没有到期日期的数据会话 - 仅存储一个会话的数据如何工作： localStorage 和 sessionStorage 对象创建一个 key=value 对比如： key=\"Name\"， value=\"Palak\"这些存储为字符串，但如果需要，可以使用 JavaScript 函数（如 parseInt() 和 parseFloat()）进行转换下面给出了使用 Web 存储对象的语法：存储一个值：localStorage.setItem(\"key1\", \"value1\");localStorage[\"key1\"] = \"value1\";得到一个值：alert(localStorage.getItem(\"key1\"));alert(localStorage[\"key1\"]);删除一个值： -removeItem(\"key1\");删除所有值：localStorage.clear();应用缓存（AppCache）使用 HTML5 AppCache，我们可以使 Web 应用程序在没有 Internet 连接的情况下脱机工作除 IE 之外，所有浏览器都可以使用 AppCache（截止至此时）应用缓存的优点是：网页浏览可以脱机页面加载速度更快服务器负载更小cache manifest 是一个简单的文本文件，其中列出了浏览器应缓存的资源以进行脱机访问 manifest 属性可以包含在文档的 HTML 标签中，如下所示：<html manifest=\"test.appcache\"> ... </html> 它应该在你要缓存的所有页面上缓存的应用程序页面将一直保留，除非：用户清除它们manifest 被修改缓存更新视频在 HTML5 发布之前，没有统一的标准来显示网页上的视频大多数视频都是通过 Flash 等不同的插件显示的但 HTML5 规定了使用 video 元素在网页上显示视频的标准方式目前，video 元素支持三种视频格式，如表 2 所示下面的例子展示了 video 元素的使用：<! DOCTYPE HTML> <html> <body> <video src=\" vdeo.ogg\" width=\"320\" height=\"240\" controls=\"controls\"> This browser does not support the video element. </video> </body> </html> 例子使用了 Ogg 文件，并且可以在 Firefox、Opera 和 Chrome 中使用要使视频在 Safari 和未来版本的 Chrome 中工作，我们必须添加一个 MPEG4 和 WebM 文件video 元素允许多个 source 元素source 元素可以链接到不同的视频文件浏览器将使用第一个识别的格式，如下所示：<video width=\"320\" height=\"240\" controls=\"controls\"> <source src=\"vdeo.ogg\" type=\"video/ogg\" /> <source src=\" vdeo.mp4\" type=\"video/mp4\" /> <source src=\" vdeo.webm\" type=\"video/webm\" /> This browser does not support the video element. </video> 图6：Canvas 的输出音频对于音频，情况类似于视频在 HTML5 发布之前，在网页上播放音频没有统一的标准大多数音频也通过 Flash 等不同的插件播放但 HTML5 规定了通过使用音频元素在网页上播放音频的标准方式音频元素用于播放声音文件和音频流目前，HTML5 audio 元素支持三种音频格式，如表 3 所示audio 元素的使用如下所示：<! DOCTYPE HTML> <html> <body> <audio src=\" song.ogg\" controls=\"controls\"> This browser does not support the audio element. </video> </body> </html> 此例使用 Ogg 文件，并且可以在 Firefox、Opera 和 Chrome 中使用要在 Safari 和 Chrome 的未来版本中使 audio 工作，我们必须添加一个 MP3 和 Wav 文件audio 元素允许多个 source 元素，它可以链接到不同的音频文件浏览器将使用第一个识别的格式，如下所示：<audio controls=\"controls\"> <source src=\"song.ogg\" type=\"audio/ogg\" /> <source src=\"song.mp3\" type=\"audio/mpeg\" /> This browser does not support the audio element. </audio> 画布（Canvas）要在网页上创建图形，HTML5 使用 画布 API我们可以用它绘制任何东西，并且它使用 JavaScript它通过避免从网络下载图像而提高网站性能使用画布，我们可以绘制形状和线条、弧线和文本、渐变和图案此外，画布可以让我们操作图像中甚至视频中的像素你可以将 canvas 元素添加到 HTML 页面，如下所示：<canvas id=\"myCanvas\" width=\"200\" height=\"100\"></canvas> 画布元素不具有绘制元素的功能我们可以通过使用 JavaScript 来实现绘制所有绘画应在 JavaScript 中<script type=\"text/javascript\"> var c=document.getElementById(\"myCanvas\"); var cxt=c.getContext(\"2d\"); cxt.fillStyle=\"blue\"; cxt.storkeStyle = \"red\"; cxt.fillRect(10,10,100,100); cxt.storkeRect(10,10,100,100); </script> 以上脚本的输出如图 6 所示你可以绘制许多对象，如弧、圆、线/垂直梯度等HTML5 工具为了有效操作，所有熟练的或业余的 Web 开发人员/设计人员都应该使用 HTML5 工具，当需要设置工作流/网站或执行重复任务时，这些工具非常有帮助它们提高了网页设计的可用性以下是一些帮助创建很棒的网站的必要工具HTML5 Maker： 用来在 HTML、JavaScript 和 CSS 的帮助下与网站内容交互非常容易使用它还允许我们开发幻灯片、滑块、HTML5 动画等Liveweave： 用来测试代码它减少了保存代码并将其加载到屏幕上所花费的时间在编辑器中粘贴代码即可得到结果它非常易于使用，并为一些代码提供自动完成功能，这使得开发和测试更快更容易Font dragr： 在浏览器中预览定制的 Web 字体它会直接载入该字体，以便你可以知道看起来是否正确也提供了拖放界面，允许你拖动字形、Web 开放字体和矢量图形来马上测试HTML5 Please： 可以让我们找到与 HTML5 相关的任何内容如果你想知道如何使用任何一个功能，你可以在 HTML Please 中搜索它提供了支持的浏览器和设备的有用资源的列表，语法，以及如何使用元素的一般建议等Modernizr： 这是一个开源工具，用于给访问者浏览器提供最佳体验使用此工具，你可以检测访问者的浏览器是否支持 HTML5 功能，并加载相应的脚本Adobe Edge Animate： 这是必须处理交互式 HTML 动画的 HTML5 开发人员的有用工具它用于数字出版、网络和广告领域此工具允许用户创建无瑕疵的动画，可以跨多个设备运行Video.js： 这是一款基于 JavaScript 的 HTML5 视频播放器如果要将视频添加到你的网站，你应该使用此工具它使视频看起来不错，并且是网站的一部分The W3 Validator： W3 验证工具测试 HTML、XHTML、SMIL、MathML 等中的网站标记的有效性要测试任何网站的标记有效性，你必须选择文档类型为 HTML5 并输入你网页的 URL这样做之后，你的代码将被检查，并将提供所有错误和警告HTML5 Reset： 此工具允许开发人员在 HTML5 中重写旧网站的代码你可以使用这些工具为你网站的访问者提供一个良好的网络体验Palak Shah作者是高级软件工程师她喜欢探索新技术，学习创新概念她也喜欢哲学你可以通过 palak311@gmail.com[1] 联系她via: http://opensourceforu.com/2017/06/introduction-to-html5/作者：Palak Shah[2] 译者：geekpi 校对：wxy本文由 LCTT 原创编译，Linux中国 荣誉推出点击“了解更多”可访问文内链接
（图片来源网络，侵删）
0 评论