本文共 9568 字,大约阅读时间需要 31 分钟。
html5作为html的代替者,成为新的标准,而且时至今日,在前端开发中,已经被大家广泛应用,但是对于html5有哪些具体功能和特性,有不少人就对它认识就显得模糊了。下面是我总结的一些h5的新特性,供大家参考:
html标签是我们开发前端界面的骨架,但是以前我们使用html标签布局使用的都是div标签,div标签的语义非常的不清晰,因此html5为了规范这一块,给出了一系列的标签:
<hrader></header>
头部区域标签,块级标签<footer></footer>
底部区域标签,块级标签<nav></nav>
导航区域标签,块级标签<time></time>
时间区域标签,内联标签<article></article>
文章段落标签,块级标签<aside></aside>
侧边栏区域标签,块级标签<mark></mark>
标记记号标签,内联标签<summary></summary>
单词翻译: 摘要,h5官方文档描述:定义 details 元素的标题,块级标签<detailes></detailes>
单词翻译:细节,h5官方文档描述:定义元素的细节,块级标签<section></section>
单词翻译:部分,h5官方文档描述:定义 section,块级标签我这里描述的表单,主要指的<input>
,<input>
表单标签本身已经有不少类型了,但是h5为了满足开发需求,同样还新增了不少的类型:
<input type="email" />
e-mail 地址的输入域<input type="number" />
数字输入域<input type="url" />
URL 地址的输入域<input type="range" />
range 类型显示为滑动条,默认value值是1~100的限定范围,可以通过min属性和max属性自定义范围<input type="range" name="points" min="1" max="10" />
<input type="search" />
用于搜索域<input type="color" />
用于定义选择颜色<input type="tel" />
电话号码输入域<input type="date" />
date类型为时间选择器HTML5 新增的表单属性
placehoder
属性,简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示,在用户输入后消失。required
属性,是一个 boolean 属性。要求填写的输入域不能为空pattern
属性,描述了一个正则表达式用于验证<input>
元素的值。min
和 max
属性,设置元素最小值与最大值。step
属性,为输入域规定合法的数字间隔。height
和 width
属性,用于 image 类型的 <input>
标签的图像高度和宽度。autofocus
属性,是一个 boolean 属性。规定在页面加载时,域自动地获得焦点。multiple
属性 ,是一个 boolean 属性。规定<input>
元素中可选择多个值。视频<video>
和音频<audio>
,也是html提供的新的标签,它们的功能类似于<img>
标签,<img>
标签引用的是图片,它们引用的是视频文件和音频文件。不仅如此,html5针对视频文件和音频文件的特殊性,给 <video>
和<audio>
提供了非常丰富的方法,属性和事件,用于操控这俩元素。 `
var startMusic = document.getElementById('start-music');var stopMusic = document.getElementById('stop-music');startMusic.onclick = function () { //开始播放 var audioEl = document.getElementById('audio'); audioEl.play() }stopMusic. onclick = function () { // 暂停播放 var audioEl = document.getElementById('audio'); audioEl.pause() }复制代码
`
<audio>
目前支持的音频格式有: MP3, Wav, 和 Ogg。
`
var startTv = document.getElementById('start-tv');var stopTv = document.getElementById('stop-tv');startTv.onclick = function () { var video = document.getElementById('video'); video.play(); }stopTv.onclick = function () { var video = document.getElementById('video'); video.pause();}复制代码
`
注意:video
播放视频时请注意转换一下视频的格式,转换为AVC(H264),不转换的话容易出现有声音而没有视频的现象,浏览器将支持第一个识别的文件类型:( MP4, WebM, 和 Ogg)。
视频<video>
和音频<audio>
常用的几个方法有:
play()
开始播放音频/视频pause()
暂停当前播放的音频/视频load()
重新加载音频/视频元素视频<video>
和音频<audio>
常用的属性有:
controls
属性设置或返回音频/视频是否显示控件(比如播放/暂停等)defaultPlaybackRate
属性设置或返回音频/视频的默认播放速度duration
属性返回当前音频/视频的长度(以秒计)ended
属性返回音频/视频的播放是否已结束loop
属性设置或返回音频/视频是否应在结束时重新播放muted
属性设置或返回音频/视频是否静音networkState
属性返回音频/视频的当前网络状态src
属性设置或返回音频/视频元素的当前来源volume
属性设置或返回音频/视频的音量readyState
属性返回音频/视频当前的就绪状态played
返回表示音频/视频已播放部分的 TimeRanges 对象视频<video>
和音频<audio>
还拥有非常多自己特定的事件,不过本文将不在罗列,上面的方法和属性也并不是全部,需要详细了解的同学可以去查看。
canvas
元素用于在网页上绘制图形,canvas
标签本身只是个图型容器,需要使用javaScript脚本来绘制图形。
`
var myCanvas = document.getElementById('mycanvas');var canvas2d = myCanvas.getContext('2d');canvas2d.moveTo(100, 100); // 线条起始位置canvas2d.lineTo(400, 100); // 线条结束位置canvas2d.strokeStyle = '#CD5C5C' // 线条颜色canvas2d.lineWidth = 5; // 定义线宽canvas2d.font = '20px Arial'; // 定义字体大小和字体类型canvas2d.fillText('Canvas绘图demo', 400, 100) // 设置绘制的文本和位置canvas2d.stroke();复制代码
`
moveTo(x,y)
定义线条开始坐标,lineTo(x,y)
定义线条结束坐标,lineWidth
设置线宽,fillText()
设置绘制的文本和位置,stroke()
执行绘画。
<figure>[图片上传中...(image-4148a1-1542188384286-0)]
<figcaption></figcaption>
</figure>
上面这个是上面canvas
绘制的图形。想要详细了解canvas的同学,可以去到。
SVG是指可伸缩的矢量图形,SVG 也是一种使用 XML 描述 2D 图形的语言。由于SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。我们可以为某个元素附加 JavaScript 事件处理器。在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
`
复制代码
`
svg图形的样式和css有些不同,fill
是定义图形填充色,stroke
描边色,stroke-width
是线宽,如果我们要对svg图形操作,那么我们该怎么做呢,其实很简单,只需要document.getElementById()
获取需要操作的svg图形节点,然后针对该svg图形的属性去操作就可以了,对svg图形属性的操作可以用getAttribute()
和setAttribute()
,好啦,更多详细的svg知识点,可以去和阮一峰老师的学习了解。
本文考虑到文章篇幅的问题,所以分作上篇和下篇进行介绍h5的新特性。本上篇主要介绍了h5的五种新特性,语义化的标签,新增的表单元素类型,视频和音频,canvas绘图以及svg图形的简要介绍。
本篇的html5新特性是下篇,将把html5上篇没有介绍到的新特性分享出来,OK,下面是正文:
拖放是html5提供一个新的特性,这个特性增加了拖拽事件的api,和定义可以拖拽的属性。举个例子,在h5之前实现拖拽功能,其实用的是一种模拟方式,鼠标onmousedown
时,获取当前的一些信息,然后在onmousemove
时不断更新推拽对象的left
和top
值,最后在onmouseup
时对推拽对象彻底赋值,并进行释放后一系列的程序操作。现在h5出来后呢,不在需要模拟了,因为它已经有标准的事件api了,下面看例子: `
draggablevar dragEl = document.getElementById('draggable'); var l = null, t = null; dragEl.ondragstart = function (e) { // 准备推拽时 l = e.clientX - this.offsetLeft, t = e.clientY - this.offsetTop; } dragEl.ondrag = function (e) { // 拖拽进行时 var x = e.clientX, y = e.clientY; this.style.left = x - l + 'px'; this.style.top = y - t + 'px'; console.log(x, y, l , t) } dragEl.ondragend = function (e) { // 拖拽结束时 var x = e.clientX, y = e.clientY; this.style.left = x - l + 'px'; this.style.top = y - t + 'px'; }复制代码
`
注意:拖拽对象必须把draggable
属性设置为true
,其他开发思维其实和以前一样的,没有多大差别,只是多了更多的监听事件而已,想要详细了解拖拽的同学可以去查看。
地理定位这个特性,故名思意,就是获取用户位置信息的。通过getCurrentPosition()
获取一系列定位信息,getCurrentPosition()
有两个回调函数参数,获取地理位置成功的回调和失败的回调。
`
navigator.geolocation.getCurrentPosition(successPos)function successPos (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)复制代码
}` 想了解关于更多的地理位置特性的信息可以移步到去查看哦。
HTML5,通过创建 cache manifest 文件,可以创建 web 应用的离线版本。如果要启用应用程序缓存,必须在文档的 <html>
标签中包含 manifest
属性:每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。 manifest 文件的建议的文件扩展名是:".appcache".请注意,manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置
manifest 文件可分为三个部分:
下面是个完整的manifest文件: `
CACHE MANIFEST2012-02-21 v1.0.0/theme.css/logo.gif/main.jsNETWORK:login.aspFALLBACK:/html5/ /404.html复制代码
` 离线存储这个功能,通俗的讲,其实就是把web的资源文件存储起来,个人觉得移动端的应用效果会更好一些,毕竟流量贵呀,把一些文件存储起来,这样可以大大的节省流量和服务器的压力,当然同样更多的知识点伙伴们去官网查看吧。
如果说离线存储是对web的资源文件存储,那么web 存储就是对应用程序里的数据做存储了。web存储提供了两个存储方式:
localStorage
,没有时间限制的数据存储sessionStorage
,就是网页还没有关闭的情况下的存储,网页窗口关闭,则数据销毁。在之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。
`
localStorage.setItem('key', 'val') // 存储数据
localStorage.getItem('key') // 取数据
localStorage.removeItem('key') // 删除数据
localStorage.clear() // 删除所有数据
localStorage.key(index) // 获取某个索引数据的
sessionStorage.setItem('key', 'val') // 存储数据
sessionStorage.getItem('key') // 取数据
sessionStorage.removeItem('key') // 删除数据 `
注意:localStorage
和sessionStorage
存储的数据都是字符串类型的数据,取出来的数据也是字符串类型,因此如果存储的对象不是字符串,则要转换成字符串数据类型
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
WebSocket 属性
Socket.readyState
只读属性,表示连接状态:0 - 表示连接尚未建立,1 - 表示连接已建立,可以进行通信,2 - 表示连接正在进行关闭,3 - 表示连接已经关闭或者连接不能打开。Socket.bufferedAmount
只读属性,已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数。WebSocket 事件
Socket.onopen
连接建立时触发Socket.onmessage
客户端接收服务端数据时触发Socket.onerror
通信发生错误时触发Socket.onclose
连接关闭时触发例子:`
function WebSocketTest() { if ("WebSocket" in window) { alert("您的浏览器支持 WebSocket!"); // 打开一个 web socket var ws = new WebSocket("ws://localhost:9998/echo"); ws.onopen = function() { // Web Socket 已连接上,使用 send() 方法发送数据 ws.send("发送数据"); alert("数据发送中..."); }; ws.onmessage = function (evt) { var received_msg = evt.data; alert("数据已接收..."); }; ws.onclose = function() { // 关闭 websocket alert("连接已关闭..."); }; } else { // 浏览器不支持 WebSocket alert("您的浏览器不支持 WebSocket!"); } } WebSocketTest()复制代码
` 关于更多的WebSocket大家就去了解吧。
web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。 关于web worker的应用大概分为三个部分:
onmessage
事件进行监听,并获取worker文件里返回的数据w.terminate()
。下面是个简单的 web worker文件 `
// 这是一个单独的js文件var i=0;function timedCount(){i=i+1;postMessage(i); //把数据发送出去setTimeout("timedCount()",500);}timedCount();复制代码
` 在html页面调用worker文件,并创建worker对象
`
计数器:var w;function startWorker(){if(typeof(Worker)!=="undefined"){ if(typeof(w)=="undefined") { w=new Worker("worker.js"); // 创建worker实例对象 } w.onmessage = function (event) { // 通过onmessage事件接收数据 document.getElementById("result").innerHTML=event.data; };}else{document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";}}function stopWorker(){w.terminate(); // 停止worker任务}复制代码
` 注意:由于Worker属于外部文件,因此它不能获取javascript这些对象: window 对象,document 对象,parent 对象。
HTML5新特性概述本次用上下俩篇进行了总结和简单的概述,目的就是给大家一个关于html5总体的认识。本次分享就到这里了,喜欢的朋友帮给个赞吧,谢谢。
作者:IT男爵 链接:https://juejin.im/post/5bea349a518825170d1a9db1 来源:掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。