html5的新特性是什么-创新互联
本文将为大家详细介绍“html5的新特性是什么”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“html5的新特性是什么”能够给你意想不到的收获,请大家跟着小编的思路慢慢深入,具体内容如下,一起去收获新知识吧。
我们提供的服务有:成都网站制作、成都网站建设、微信公众号开发、网站优化、网站认证、荔浦ssl等。为上千多家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的荔浦网站制作公司html是什么html的全称为超文本标记语言,它是一种标记语言,包含了一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体,html文本是由html命令组成的描述性文本,html命令可以说明文字,图形、动画、声音、表格、链接等,主要和css+js配合使用并构建优雅的前端网页。
html5的新特性有哪些?
一、html5新特性之用于绘画的canvas元素
canvas 元素用于在网页上绘制图形,画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面来说一下关于svg的内容:svg是用于描述二维矢量图形的一种图形格式。
svg有三种用法:
把svg直接当成图片放在网页上。
svg实现动画。
svg图片的交互和滤镜效果。
说明:
(1)Canvas 通过 JavaScript 来绘制 2D 图形。
(2)Canvas 是逐像素进行渲染的。
(3)在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包 括任何或许已被图形覆盖的对象。
(4)svg是一种使用 XML 描述 2D 图形的语言。
(5)svg基于XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
(6)在svg中,每个被绘制的图形均被视为对象。如果svg对象的属性发生变化,那么浏览器能够自动重现图形。
更多关于canvas和svg的内容可以参考:HTML5 canvas和HTML5 内联SVG
二、html5新特性之更加丰富强大的表单
html5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。
html5 也新增以下表单元素:
HTML5 新增的表单属性:
placehoder 属性:简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示,在用户输入后消失。
required 属性:是一个 boolean 属性。要求填写的输入域不能为空
pattern 属性:描述了一个正则表达式用于验证 元素的值。
min 和 max 属性:设置元素最小值与大值。
step 属性:为输入域规定合法的数字间隔。
height 和 width 属性:用于 image 类型的 标签的图像高度和宽度。
autofocus 属性:是一个 boolean 属性。规定在页面加载时,域自动地获得焦点。
multiple 属性:是一个 boolean 属性。规定 元素中可选择多个值。
三、html5新特性之用于媒介的video和audio元素
1、html5提供了播放音频文件的标准,即使用
实例:
说明:
(1)control 属性供添加播放、暂停和音量控件。
(2)在 之间你需要插入浏览器不支持的
(3)
(4)
2、html5提供了一种通过video元素来包含视频的标准方法。
说明:
(1)control 提供了 播放、暂停和音量控件来控制视频。也可以使用dom操作来控制视频的播放暂停,如 play() 和 pause() 方法。
(2)video元素提供了width和height属性控制视频的尺寸.如果设置的高度和宽度,所需的视频空间会在页面加载时保留。如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变。
(3)标签之间插入的内容是提供给不支持video元素的浏览器显示的。
(4)video 元素支持多个source 元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式( MP4, WebM, 和 Ogg)。
四、html5新特性之html5地理定位
HTML5 Geolocation(地理定位)用于定位用户的位置。
window.navigator.geolocation { getCurrentPosition: fn 用于获取当前的位置数据 watchPosition: fn 监视用户位置的改变 clearWatch: fn 清除定位监视 }
获取用户定位信息:
navigator.geolocation.getCurrentPosition( function(pos){ console.log('用户定位数据获取成功') //console.log(arguments); console.log('定位时间:',pos.timestamp) console.log('经度:',pos.coords.longitude) console.log('纬度:',pos.coords.latitude) console.log('海拔:',pos.coords.altitude) console.log('速度:',pos.coords.speed) }, //定位成功的回调 function(err){ console.log('用户定位数据获取失败') //console.log(arguments); } //定位失败的回调 )
五、html5新特性之html5拖放
拖放(Drag 和 drop)是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放;拖放的过程分为源对象和目标对象。源对象是指你即将拖动元素,而目标对象则是指拖动之后要放置的目标位置。
想要了解更多拖放中的内容可以参考:HTML拖放
下面给出一个实例:
请把图片拖放到矩形中:
六:html5新特性之html5 Web存储
在客户端存储数据:
html5 提供了两种在客户端存储数据的新方法:
(1)localStorage - 没有时间限制的数据存储:localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。
(2)sessionStorage - 针对一个 session 的数据存储:sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。
七、html5新特性之html5应用程序缓存
使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。
什么是应用程序缓存(Application Cache)?
HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势:
(1)离线浏览 - 用户可在应用离线时使用它们
(2)速度 - 已缓存资源加载得更快
(3)减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
八、html5新特性之html5 Web Workers
当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。
web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。
九、html5新特性之html5服务器发送事件
html5服务器发送事件(server-sent event)允许网页获得来自服务器的更新。
Server-Sent 事件 - 单向消息传递
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。
十、html5新特性之html5 WebSocket
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。
如果你能读到这里,小编希望你对“html5的新特性是什么”这一关键问题有了从实践层面最深刻的体会,具体使用情况还需要大家自己动手实践使用过才能领会,如果想阅读更多相关内容的文章,欢迎关注创新互联网站制作公司行业资讯频道!
当前标题:html5的新特性是什么-创新互联
当前网址:http://pwwzsj.com/article/dicdod.html