HTML5新增特性
1. 语义化标签
2. 增强型表单 (1)新的表单输入类型 (2)新表单元素 (3)新表单属性
3. 视频和音频
4. Canvas绘图(图形、路径、文本、渐变、图像)
5. SVG绘图 (与Canvas的区别)
6. 地理定位
7. 拖放API
8. Web Worker
完整的Web Worker实例
9. Web Storage
10. Web Socket
11.其他
<a>
标签.html5的a标签增加了download属性,可利用此属性实现图片下载.
1. 语义化标签
标签 | 描述 |
<header> | 文档头部区域 |
<footer> | 档的尾部区域 |
<nav> | 导航 |
<section> | 节(section、区段) |
<article> | 独立的内容区域 |
<aside> | 侧边栏内容 |
<detailes> | 描述文档或文档某个部分的细节 |
<summary> | 标签包含 details 元素的标题 |
<dialog> | 定义对话框,比如提示框 |
2. 增强型表单
(1)新的表单输入类型
color date(从一个日期选择器选择一个日期) datetime datetime-local email month number range(一定范围内数字值的输入域) search tel time url week(选择周和年)
(2)新表单元素
<datalist> 规定输入域的选项列表
<keygen> 提供一种验证用户的可靠方法,标签规定用于表单的密钥对生成器字段。
<output> 用于不同类型的输出,比如计算机或脚本的输出。
(3)新表单属性
placehoder | 简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示,在用户输入后消失。 |
required | 是一个 boolean 属性, 要求填写的输入域不能为空 |
pattern | 描述了一个正则表达式用于验证<input> 元素的值 |
min 和 max | 设置元素最小值与最大值 |
step | 为输入域规定合法的数字间隔 |
height 和 width | 用于 image 类型的 <input> 标签的图像高度和宽度 |
autofocus | 是一个 boolean 属性。规定在页面加载时,域自动地获得焦点。 |
multiple | 是一个 boolean 属性。规定<input> 元素中可选择多个值 |
3. 视频和音频
<audio>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
control属性供添加播放、暂停、和音量控件
在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。
<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件,浏览器将使用第一个支持的音频文件
目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg
<video>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
control 提供了 播放、暂停和音量控件来控制视频。也可以使用dom操作来控制视频的播放暂停,如 play() 和 pause() 方法。
同时 video 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度,所需的视频空间会在页面加载时保留。如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变。
video 元素支持多个source 元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式( MP4, WebM, 和 Ogg)
4. Canvas绘图(图形、路径、文本、渐变、图像)
canvas只是图形容器,必须使用脚本来绘制图形。
图形
(1) 创建一个画布,一个画布在网页中是一个矩形框,通过 <canvas> 元素来绘制。默认情况下 元素没有边框和内容。
id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小,使用 style 属性来添加边框。你可以在HTML页面中使用多个 <canvas> 元素
(2) 使用Javascript来绘制图像,canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
//设置 fillStyle 属性可以是CSS颜色,渐变,或图案。fillStyle默认设置是#000000(黑色)。
//fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。
路径
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
//定义开始坐标(0,0), 和结束坐标 (200,100). 然后使用 stroke() 方法来绘制线条
//moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
文本 (重要的属性和方法如下:)
font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
ex:使用 "Arial" 字体在画布上绘制一个高 30px 的文字(实心)
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
渐变
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变:
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象,必须使用两种或两种以上的停止颜色。addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1.
使用渐变,设置fillStyle或strokeStyle的值为渐变,然后绘制形状,如矩形,文本,或一条线。
ex: 创建了一个线性渐变,使用渐变填充矩形
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);
图像
把一幅图像放置到画布上, 使用 drawImage(image,x,y) 方法
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
5. SVG绘图 (与Canvas的区别)
SVG是指可伸缩的矢量图形
区别:
SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。
6. 地理定位
HTML5 Geolocation(地理定位)用于定位用户的位置。
7. 拖放API
拖放是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。
拖放的过程分为源对象和目标对象。源对象是指你即将拖动元素,而目标对象则是指拖动之后要放置的目标位置。
拖放的源对象(可能发生移动的)可以触发的事件——3个:
dragstart:拖动开始
drag:拖动中
dragend:拖动结束
整个拖动过程的组成: dragstart*1 + drag*n + dragend*1
拖放的目标对象(不会发生移动)可以触发的事件——4个:
dragenter:拖动着进入
dragover:拖动着悬停
dragleave:拖动着离开
drop:释放
整个拖动过程的组成1: dragenter*1 + dragover*n + dragleave*1
整个拖动过程的组成2: dragenter*1 + dragover*n + drop*1
dataTransfer:用于数据传递的“拖拉机”对象;
在拖动源对象事件中使用e.dataTransfer属性保存数据:
e.dataTransfer.setData( k, v )
在拖动目标对象事件中使用e.dataTransfer属性读取数据:
var value = e.dataTransfer.getData( k )
8. Web Worker
当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。
web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。
(1) 首先检测浏览器是否支持 Web Worker
if(typeof(Worker)!=="undefined"){
// 是的! Web worker 支持!
// 一些代码.....
}else{
// //抱歉! Web Worker 不支持
}
下面的代码检测是否存在 worker,如果不存在,- 它会创建一个新的 web worker 对象,然后运行 "demo_workers.js" 中的代码
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}
然后我们就可以从 web worker 发送和接收消息了。向 web worker 添加一个 "onmessage" 事件监听器:
w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};
当 web worker 传递消息时,会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。当我们创建 web worker 对象后,它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止。
如需终止 web worker,并释放浏览器/计算机资源,使用 terminate() 方法。
完整的Web Worker实例
<!DOCTYPE html>
<html>
<body> <p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br><br> <script>
var w; function startWorker()
{
if(typeof(Worker)!=="undefined")
{
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}
w.onmessage = function (event) {
document.getElementById("result").innerHTML=event.data;
};
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
} function stopWorker()
{
w.terminate();
}
</script> </body>
</html>
创建的计数脚本,该脚本存储于 "demo_workers.js" 文件中
var i=0; function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
} timedCount();
9. Web Storage
使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是cookies。
Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.
它也可以存储大量的数据,而不影响网站的性能。
数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
客户端存储数据的两个对象为:
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储, 当用户关闭浏览器窗口后,数据会被删除。
在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage
if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 对象!
// 一些代码.....
}
else
{
// 抱歉! 不支持 web 存储。
}
不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):
- 保存数据:localStorage.setItem(key,value);
- 读取数据:localStorage.getItem(key);
- 删除单个数据:localStorage.removeItem(key);
- 删除所有数据:localStorage.clear();
- 得到某个索引的key:localStorage.key(index);
10. Web Socket
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title> <script type="text/javascript">
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!");
}
}
</script> </head>
<body> <div id="sse">
<a href="javascript:WebSocketTest()">运行 WebSocket</a>
</div> </body>
</html>
HTML5新增特性的更多相关文章
- CSS3和HTML5新增特性及使用(保留方便查看)
CSS3 1.边框图片 border-image: url(test.png) 10/10px; outline:10px solid #ff0;outline-offset:15px;边框的边框, ...
- Canvas绘图 (html5新增特性)
Canvas 使用<canvas>对象,需要设置属性:width,height.指定绘图的区域大小.在canvas标签前后出现的信息将在不支持<canvas>元素的浏览器中显示 ...
- html5一些特性
html5可以理解为html+css+js 其目前可以解决:1.浏览器的兼容问题 2.统一web应用标准 3.解决文档结构定义不明确问题 4.解决web应用中的功能受限问题 5.是程序员编写的web应 ...
- web前端学习(二)html学习笔记部分(1) -- html5新增的元素及特性等等
检查,在浏览器中可以调整设备类型 html5实现水池效果. lang:en为英文语言,中文语言zh <html lang="en"> <head> < ...
- HTML5 学习总结(二)——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...
- HTML5 学习笔记(二)——HTML5新增属性与表单元素
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
- HTML5新增标签与属性
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
- HTML5新增的属性
关于html5新增的属性: HTML5现在已经不是SGML的子集,主要是增加了关于图像,位置,存储,多任务等功能. 绘画CANVAS; 用于播放媒体的video和audio元素: 本地离线存储loca ...
- 【转】HTML5新增元素兼容旧浏览器方法
ref:http://www.jb51.net/html5/163906.html 问题:如何让IE8-兼容这些标签?(需要设计JS中的DOM) 代码如下: <span style=" ...
随机推荐
- 痞子衡嵌入式:语音处理工具Jays-PySPEECH诞生记(6)- 文语合成实现(pyttsx3, eSpeak1.48.04)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是语音处理工具Jays-PySPEECH诞生之文语合成实现. 文语合成是Jays-PySPEECH的核心功能,Jays-PySPEECH借 ...
- webpack4.0各个击破(3)—— Assets篇
目录 一. Assets资源的基本处理需求 二. webpack处理引用资源 2.1 资源打标 2.2 引用优化 2.3 sprites雪碧图合成 2.4 图片压缩及其他 webpack作为前端最火的 ...
- Oracle day01 select where关键字
select关键字 作用:检索“列” 注意:1.select后面的列可以起别名(查询的显示结果) 1) 列名后面一个空格后添加别名(别名中不许有“空格”) 2) 列名后面一个空格后使用双引号添加别名 ...
- JavaScript_02_JavaScript对象
ECMAScript标准中基本对象:Array,Boolean,Date,Math,Number,String,RegExp,Global Boolean,Date,Math,Number,Strin ...
- Android破解学习之路(十一)—— 关于去更新
根据对话框的文字找到对应的对话框,设置visability 为gone 修改版本号,aptool 搜索http://,找到更新的地址,修改为127.0.0.0 搜索update,upgrade,ver ...
- Dynamics 365 POA表记录的产生
微软动态CRM专家罗勇 ,回复314或者20190311可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . 前面的博文 Dyna ...
- Puppeteer之大屏批量截图
事情的起因是客户三天两头的要求让我们给大屏截图,一定要最新的数据.所以我就自告奋勇研究了一下. puppeteer是一款headless浏览器,由谷歌官方维护.先看看puppeteer ...
- Python3漏洞扫描工具 ( Python3 插件式框架 )
目录 Python3 漏洞检测工具 -- lance screenshot requirements 关键代码 usage documents README Guide Change Log TODO ...
- Pycharm使用技巧(转载)
Pycharm使用技巧(转载) 转载自:http://www.cnblogs.com/cloudtj/articles/5980666.html pycharm使用技巧 https://python. ...
- Linux压缩打包tar命令总结
命令简介 在Linux系统的维护.管理中,tar命令是一个使用频率很高的命令,tar命令的功能主要是将众多文件打包成一个tar文件并压缩,并且能保持文件的权限属性.tar其实最开始是用来做磁带 ...