HTML5新特性总结
progress 表示一个正在进行的过程的状态,就像图形用户界面(GUI)应用程序中的进度条
4.内嵌的媒体 video 用来嵌入任意视频格式 audio 用来嵌入音频格式
audio 和 video 元素可以包含额外的标记,用来描述音频和视频的内容
5.交互
details 元素表示在默认情况下可能不显示的详细信息。可选的 legend 元素可以提供详细信息的 摘要。details 元素的用途之一是提供脚注和尾注(收缩展开)
meta 表示指定范围内的数字值 meter 元素帮助浏览器和其他客户机识别 HTML 页面中的数量。它不要 求对元素内容应用任何特定的格式。但是,每个 meter 元素可以有最多 6 个属性,它们按照更适合机 器识别的形式表示这个数量:
value min low high max optimum 这些属性都应该包含一个十进制数字
地理位置获取流程: 1、用户打开需要获取地理位置的 web 应用。 2、应用向浏览器请求地理位置,浏览器弹出询问窗口,询问用户是否共享地理位置。 3、假设用户允许,浏览器从设置查询相关信息。 4、浏览器将相关信息发送到一个信任的位置服务器,服务器返回具体的地理位置。
位置请求方式: 单次请求
navigator.geolocation.getCurrentPosition(updateLocation, handleLocationErro r, options);
dialog 表示几个人之间的对话
3.语义性内联元素 m 或者 mark 表示文本被 “加上标志”,但是不一定要强调 time 表 示 一 个 时 间 值 , time 元 素 可 以 帮 助 浏 览 器 和 其 他 程 序 识 别 出 HTML 页 面 中 的 时 间 。, 每 个 time 元素都应该有一个 datetime 属性,其中包含更适合机器识别的时间值,适合机器读取的时 间值可能对搜索引擎、日历程序等有帮助。
Canvas
Html5 中的绘图技术 Web 之前有三种绘图的方式,Adobe Flash,SVG(w3c)和 VML(微软)。此次 HTML5 元素新 添加的 Canvas 实际上是一个像素画布(bitmap canvas),和 SVG 不同,画在 Canvas 上的 元素无法进行缩放,同时也不是 DOM 的一部分。 WHATWG 的 HTML5 选择 Canvas 作为标准原因有二: 1、由于不用存储画出的每一个元素,所以性能更好。 2、和其他语言的二维绘图 API 类似,更容易实现。
菜单可以嵌套在其他菜单中,形成层次化的菜单结构。
新表单元素
1.新表单元素
tel、email、url 电话号码 邮箱地址 网址 :浏览器提供校验 search:搜索控件,可以看作是不同风格的文本输入控件。浏览器应该将搜索控件设置为特定于操作系统 的搜索功能。除了纯粹美学方面的考虑,还可以在将来为搜索提供辅助技术或类似自动完成的功能提供接 口和实现的可能性。search 控件有点为未来预留搜索功能接口的味道 number:它创建了一个用于输入数字项的特殊输入框,在支持的浏览器中,你会看到一个文本输入框,其 右侧附带了一个微调控件用于增加或减少输入数字的数值。
JS 的增强
查询选择器(querySelector):JS 中终于加入了查询选择器 querySelector()和 querySelectorAll(),其 行为类似 jQuery 或者 CSS 选择器。 querySelector()返回第一个匹配元素,querySelectorAll()返回所 有 的 匹 配 元 素 , 两 个 选 择 器 的 查 询 规 则 类 似 , 如 : querySelector(“input.error”) , querySelectorAll(“#results td”)等。 原生 JSON 支持:window.JSON ,提供 parse()和 stringify()方法,相比 JS 实现极大的提高了性能。
datagrid 元素提供一个网格控件。可以用它显示树、列表和表格,用户和脚本可以更新这些界面元
素。与之相反,传统的表格主要用来显示静态数据。
menu 元素实际上在 HTML 2 中就出现了。在 HTML 4 中废弃了它,但是 HTML 5 又恢复了它并指定 了新的意义。在 HTML 5 中,menu 包含 command 元素,每个 command 元素引发一个操作
对于不支持 canvas 的浏览器,会显示 canvas 标签中间的备选文字。注意:还有两点不足的 地方,在 canvas 中绘制的图片不能设置备选文字(text alternatives)。
Canvas 可以画直线,弧线,支持各种线条样式和使用纯色或图片填充,可以绘制文字和阴 影等,API 和一般语言的 2D 绘图 API 类似,
3、WiFi 基站的 mac 地址。(猜测是连接位置已知的公共 WiFi 的时候,通过 Mac 地址识 别 WiFi 接入点,从而定位) 这种定位的精度还是很不错的,而且还可以在室内定位。不过由于这种位置公开的 wifi 比较 少,此种方法的适用范围比较少。 4、 GSM 或 CDMA 基站 通过基站定位,精度随基站密度变化,精度一般,还是只有手机能用。看来地理位置 API 还是手机上比较有实用性。 5、用户指定位置
range:创建一个滑动控件从而允许选择一个范围内的数值,在以往这是一个复杂的、语义含糊的话题,但 现在通过 HTML5 非常简单,只需要定义一个 range 类型的输入控件就可以了: date、time:日期 时间选择控件
color:颜色选择器 <datalist>和 input 的 list 特性 目前为止,我们通常使用<select>和<option>元素创建下拉列表供用户选择。如果我们需要的不仅仅是创 建一个可供用户选择的列表,同时我们还允许用户通过输入来完成呢?这需要通过繁琐的 Javascript 编程 来实现,但是现在,通过 HTML5 提供的 input 的 list 属性绑定一个 datalist 元素,可以轻松的实现我们 想要的功能
新标记
HTML 5 提供了一些新的元素和属性 这些新标记更利于搜索引擎理解页面内容,同时也在一定程度上简化页面的编写。
1. 结构性标记 header 页面的头部或者文章的头部 footer 页面的尾部或者文章的尾部 section 网页中的一节 article 独立的文章内容 nav 导航
2.语义性标记 aside 代表说明、提示、边栏、引用、附加注释等,也就是叙述主线之外的内容。 figure 代表一个块级图像,还可以包含说明。
回调函数 updateLocation 接受一个对象参数,表示当前的地理位置,它有如下属性: latitude——纬度 longitude——精度 accuracy——精确度,单位米 altitude——高度,单位米 altitudeAccuracy——高度的精确地,单位米 heading—运动的方向,相对于正北方向的角度 speed——运动的速度(假设你在地平线上运动),单位米/秒 回调函数 handleLocationError 接受错误对象,error.code 是如下错误号。 UNKNOWN_ERROR (error code 0) —— 错误不在如下三种之内,你可以使用 error.message 获取错误详细信息。 PERMISSION_DENIED (error code 1)—— 用不选择不共享地理位置 POSITION_UNAVAILABLE (error code 2) ——无法获取当前位置 TIMEOUT (error code 3) ——在指定时间无法获取位置会触发此错误。 第三个参数 options 是可选参数,属性如下: enableHighAccuracy——指示浏览器获取高精度的位置,默认为 false。当开启后,可能没有 任何影响,也可能使浏览器花费更长的时间获取更精确的位置数据。 timeout——指定获取地理位置的超时时间,默认不限时。单位为毫秒。 maximumAge——最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置。默 认为 0,表示浏览器需要立刻重新计算位置。
3.验证支持
required 最常见的表单验证是必填项的校验,即表单中的某项必须输入内容才可以被提交,否则提示用户必须输入 内容。这样的需求可以通过在 input、select 和 textarea 元素上增加 required 特性来完成。 type 和 pattern 正如前面我们看到的,通过为 input 指定不同的 type,可以创建数字域、Email 地址和 url 等,作为客户 端验证的一部分,浏览器能检查用户输入是否匹配该类型表单域的预期模式。对于用户输入项不符合浏览 器内建模式定义的,则给出提示。
Canvas 有两点需要注意: 1、可以以像素的方式读写 Canv以以像素的方式编辑。也就 是说跨站载入的图片可以显示,但是不能读取和复制。
地理位置
基于地理位置的应用越来越火,HTML5 也提供了地理位置 API。 获取地理位置的方式及其优缺点: 1、ip 地址 书上说不准确,很多时候获取的是 ISP 机房的位置,但是获取非常方便,没有什么限制。但 是实际上我觉得在中国,ip 地址还是比较准确的,基本上上能精确到小区或大楼的标准。 2、GPS 非常准确,但是需要在户外,且需要很长时间搜索卫星。最主要的很多设备比如笔记本电脑 基本都是不带 GPS 的,新的智能手机倒是都有。
概述
HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。目标是取代 1999 年所定订的 HTML 4.01 和 XHTML 1.0 标准,以期能在互联网应用迅速发展的时候,使网络标准达到符合当代的网络需求。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。它希望能够减少浏览器对于需 要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如 Adobe Flash、 Microsoft Silverlight,与 Oracle JavaFX 的需求,并且提供更多能有效增强网络应用的标准集。 HTML 5 草案的前身名为 Web Applications 1.0,是在 2004 年由 WHATWG 提出,再于 2007 年获 W3C 接纳, 并成立了新的 HTML 工作团队。在 2008 年 1 月 22 日,第一份正式草案发布。WHATWG 表示该规范是目前仍 在进行的工作,仍须多年的努力。目前 Firefox、Chrome、Opera、Safari(版本 4 以上)、Internet Explorer 9 已支持 HTML5 技术。