2. 科技
    3. HTML5新特性归纳

    HTML5新特性归纳

    科技2022-07-12  143

    HTML5新特性归纳

    一.简介

    Html5是下一代html的标准

    必须使用<!doctype html>进行声明

    PS:对于中文网页需要使用<meta charset='utf-8'>声明编码,否则会出现乱码

    二.十大新特性

    1.语义化结构化标签

    1.section

    表示页面中的一个内容区块

    2.header

    表示页面中的头部区域

    3.footer

    表示页面中的底部区域

    4.nav

    表示定义导航链接的区域

    5.article

    表示一块与上下文无关的独立内容

    6.aside

    表示页面主页面区域内容之外的内容 比如侧边栏

    7.figure和figcaption

    (1) figure 规定独立的流内容(图像,图标,照片,代码等)

    (2) figcaption 定义figure元素的标题

    ps:元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

    <figure> <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption> </figure>

    8.main

    表示页面主要的内容(IE不兼容)

    9.兼容低版本

    <!--[if lt IE9]> <script> (function() { if (! /*@cc_on!@*/ 0) return; var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', '); var i= e.length; while (i--){ document.createElement(e[i]) } })() </script> <![endif]-->

    2.增强型表单

    类型描述type=“email”限制用户必须输入email类型type=“url”限制用户必须输入url类型type=“range”产生一个滑动条表单type=“search”产生一个搜索意义的表单type=“color”生成一个颜色选择的表单type=“time”限制用户必须输入时间类型type=“date”限制用户必须输入日期类型type=“month”限制用户必须输入月类型type=“week”限制用户必须输入周类型type=“datetime-local”选取本地时间type=“number”限制用户必须输入数字类型

    3.多媒体标签

    1.视频 video

    <video src="movie.ogg" controls="controls">Video元素</video>

    2.音频 audio

    <audio src="someaduio.wav">Audio元素</audio>

    video/audio属性

    属性描述controls如果出现该属性,则向用户展示控件,比如播放按钮autoplay如果出现该属性,则视频在就绪后马上播放loop重复播放属性muted静音属性poster规定视频正在下载时显示的图像,直到用户点击播放按钮

    <source>标签为媒介元素(比如video和audio) 定义媒介资源

    <source>标签允许规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编码器的支持进行选择

    <video controls> <source src="../mv/movie.ogg" type="video/ogg"> <source src="../mv/web.mp4" type="video/mp4"> </video>

    type属性可以取值为:

    (1) 用户视频 video/ogg video/mp4 video/webm

    (2) 用于音频 audio/ogg audio/mpeg audio/mp3

    4.本地存储

    html5的存储方式,比cookie更好的存储本地的方式

    1.localStorage 永久存储

    用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除

    2.sessionStorage 临时存储

    针对一个session进行存储,当用户关闭浏览器窗口后,数据会被删除

    3.相同的API操作

    (1) localStorage.setItem(key,value) 设置数据

    (2) localStorage.getItem(key) 读取数据

    (3) localStorage.removeItem(key) 删除单个数据

    (4) localStorage.clear() 删除所有数据

    4.cookies,sessionStorage,localStorage的区别

    (1) cookie是网站为例标识用户身份而存储在用户本地客户端的上数据(通常经过加密)

    (2) cookie数据始终在同源的http请求中携带,会在浏览器和服务器间来回传递

    (3)sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存

    (4) 存储大小:

    cookie数据大小不能超过4KBsessionStorage和localStorage虽然也有大小限制,但比cookie大得多,可以达到5M或更大

    (5) 有效时间

    localStorage 存储持久数据,浏览器关闭后数据不丢失,除非主动删除数据sessionStorage 数据在当前浏览器窗口关闭后自动删除cookie设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭

     

    5.Canvas绘图

    负责在页面设定一个区域,然后通过JavaScript动态的在这个区域中绘制图形

    Canvas标签用于绘制图像(是通过JavaScript脚本),本身并没有绘制能力,因为它仅仅是图像的容器,必须使用脚本才能完成绘图任务

    不兼容IE8以下

    <canvas id="drawing" width="200" height="200">canvas绘制图像</canvas>

    6.geolocation 地理定位

    通过地理定位(geolocation), 这个API可以访问到用户的当前位置信息,不过访问之前用户必须同意共享其地理位置信息.

    1.geolocation.getCurrentPosition

    获取共享位置信息的经纬度.当调用这个方法,就会触发请求用户共享地理定位信息的对话框,成功会接收到一个Position的对象参数,然后这个对象有2个属性:coords和timestamp

    coords对象中包含下列与位置相关的信息

    latitude 纬度longitude 经度acuracy 经,纬度坐标的精度,以米为单位

    2.geolocation.watchPosition

    监听设备位置改变时,返回一个该监听器的ID值,与geolocation.getCurrentPosition()用法基本一致,第一次调用,执行成功回调或错误回调,然后此函数就等待系统发出位置改变的信号(不会轮询位置)

    var x = document.getElementById("demo"); //BOM五大对象之一的navigator navigator.geolocation.getCurrentPosition(position => { x.innerHTML = "Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; }, error => { console.log("Error Code:" + error.code); console.log("Error Message:" + error.message); });

    7.离线应用(应用程序缓存)

    html5引入了应用程序缓存,没有的网的时候可以进行访问

    离线应用,缓存的好处:

    离线浏览,可以在应用离线的时候使用他们已缓存的资源加载的更快减少服务器负载,浏览器将只从服务器下载更新过或更改过的资源

    兼容IE10以上

    8. web worker 多线程

    web worker的作用,就是为JavaScript创造多线程的环境

    兼容IE10以上

    9.history历史管理

    新加了一些API,后面在单页面应用程序运用非常广泛的,history API

    10.WebSocket 通信

    WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

    Processed: 0.011, SQL: 8