Html5新特性归纳

最新推荐文章于 2024-02-17 10:00:00 发布

Lechar0327

最新推荐文章于 2024-02-17 10:00:00 发布

阅读量303

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/liuqiao0327/article/details/108065972

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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数据大小不能超过4KB
sessionStorage和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);
});