html5新特征

最新推荐文章于 2022-08-17 09:01:07 发布

搁浅.........

最新推荐文章于 2022-08-17 09:01:07 发布

阅读量123

点赞数

分类专栏： html和css 文章标签： html5 js html

本文链接：https://blog.csdn.net/weixin_45270885/article/details/116239674

版权

html和css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

H5新特征：

为了更好地处理今天的互联网应用，HTML5添加了很多新元素（语义化标签，）及功能，比如: 图形的绘制(canvas & svg)，多媒体内容(audio vedio)，更好的页面结构，更好的形式处理，和几个api拖放元素，定位，包括网页应用程序缓存，存储(localStorage & sessionStorage)

（一）语义化标签：

标签	描述
`<header></header>`	定义了文档的头部区域
`<footer></footer>`	定义文档的底部区域
`<aside></aside>`	定义页面侧边栏内容
`<nav></nav>`	页面导航栏内容
`<section></section>`	定义文档中的区域、区段
`<dialog></dialog>`	定义对话框，比如提示框
`<article></article>`	定义页面独立的内容区域

（二）增强的表单输入类型：

h5有多个新表单输入类型，这些类型提供了更好的输入控制和验证。
例如：
在这里插入图片描述
h5新增表单属性：

placehoder 属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
required 属性，是一个 boolean 属性。要求填写的输入域不能为空
pattern 属性，描述了一个正则表达式用于验证元素的值。
min 和 max 属性，设置元素最小值与最大值。
step 属性，为输入域规定合法的数字间隔。
height 和 width 属性，用于 image 类型的标签的图像高度和宽度。
autofocus 属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
multiple 属性，是一个 boolean 属性。规定元素中可选择多个值。

（三）视频和音频：

audio和video，这里不做详细介绍

（四）Canvas:

标签只是图形容器，必须使用脚本来绘制图形
创建一个画布：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

JS绘制：

var c=document.getElementById("myCanvas");
　　var ctx=c.getContext("2d");
　　ctx.fillStyle="#FF0000";
　　ctx.fillRect(0,0,100,100);

getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。设置 fillStyle 属性可以是CSS颜色，渐变，或图案。fillStyle默认设置是#000000（黑色）。fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。意思是：在画布上绘制 100x100 的矩形，从左上角开始 (0,0)

canvas路径使用moveTo(x,y)定义线条开始坐标，lineTo(x,y)定义线条结束坐标

（五）svg：

可伸缩的矢量图形
SVG和Canvas区别：

SVG 是使用XML描述2D图形的语言
Canvas 通过 JavaScript 来绘制 2D 图形
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

（六）定位（需要地理位置的功能，GPS）：

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);
}        
//定位失败的回调

（七）重力感应（deviceorientation）

只有带有陀螺仪的设备才支持体感（重力感应）
苹果设备的页面只有在https协议下才能使用这些接口
11.1.x以及之前时可以使用的

（八）requestAnimationFrame（动画优化）

requestAnimationFrame是每秒60帧，并可以准确执行每一帧，比setinterval准确
cancelAnimationFrame（） //类似于clearTimeOut
这个方法兼容性极差，在实际开发中用得不多

（九）WebWorker

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。typeof Worker 不是undefined说明浏览器支持webworker。worker是多线程，是真的多线程，不是伪线程。不能操作dom，没有window对象，不能读取文件
webWorker实例代码：

<!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>

（九）webStorage

H5可以在本地存储用户浏览信息，早些时候，只能使用cookie存储，大小受到的限制很多，web存储需要更安全、快速的存储方式，且这些数据不会保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能。数据以键/值对存在, web网页的数据只允许该网页访问使用。

客户端存储数据的两个对象为：

localStorage：没有时间限制，大小为5M左右
sessionStorage：当用户关闭浏览器窗口后，数据会被删除，大小为5M左右

localStorage和sessionStorage的API相同：

保存数据：localStorage.setItem(ikey,value)
删除数据：localStorage.removeItem(key)
删除所有数据：localStorage.clear()
得到某个索引的key：localStorage.key(index)
读取数据：localStorage.getItem(key)

(十)web Socket

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。