首页 > 编程知识 正文

H5新特性,H5界面的特点

时间:2023-05-05 07:47:54 阅读:229371 作者:1823

H5新特性

语义化标签

section:可以认为div是section元素,一个普通的分块元素,可用来定义网站中的特定的可区别的区域;

header:包括标题,logo,导航和其他页眉的内容,可以在网站上加多个header,就像给内容加多个标题;
 
hgroup:即将标题进行分组的元素;

footer:版权声明和作者信息,包涵一些链接;

nav:主要用于主导航菜单;

article:独立成文且以其他格式重用的内容应该置于一个article元素中;

aside:用途包涵内容周围的相关内容;

figure:一个典型用途是包含图像,代码和其他内容对主要内容进行说明,删除不会影响主内容;

figcaption:主要用于figure的标题;

mark:突出显示以表示引用的内容,或者突出显示与用户当前活动相关的内容,他不同于en或strong元素;

time:当需要在内容中显示时间或者日期时,则建议使用time元素;(time元素可以包涵两个属性,一个datetime表示在元素中指定的确切日期和时间,pubdate表示文章或者整个文档发布时time元素所指定的日期和时间)

meter:用于定义度量衡,规定最大最小宽高,通常要结合css一起作用;

progress:用于定义一个进度条,有max(完成值)和value(进度条当前值)两个属性。

新增表单控件

email:电子邮箱文本框(当输入不是邮箱的时候,验证不通过;移动端的键盘会有变化);

tel:电话号码;

url:网页的URL需要加上http;

search:搜索引擎(chrome下输入文字后,会多出一个关闭的X
);

range:特定范围内的数值选择器(min、max、step( 步数 )
);

number : 只能包含数字的输入框;

color : 颜色选择器;

新的选择器

querySelector:类似jq里的$()方法,但是只能取到第一个元素;

querySelectorAll:同上,但是只能取到一个集合,即使只有一个元素;

getElementsByClassName:通过class的方式取到一个元素集合。

获取class列表属性

classList:获取一个元素的class集合,类数组的对象。

基于classList的方法:
length : class的长度;
add() : 添加class方法;
remove() : 删除class方法;
toggle() : 切换class方法;

JSON的新方法

JSON.parse() : 把字符串转成json(字符串中的属性要严格的加上引号);
JSON.stringify() : 把json转化成字符串(会自动的把双引号加上);
新方法与eval的区别:新方法用于深度克隆新对象(构造器指针引起的问题)。

强大的绘图功能和多媒体功能

canvas 可以动态地绘制各种效果精美的图形,结合js就能让网页图形动起来;

SVG 绘制可伸缩的矢量图形;

audiovideo 可以不依赖任何插件播放音频和视频;

web存储机制(Web Storage)

Web Storage的两个主要目标:

提供一种在cookie之外存储会话数据的途径;

提供一种存储大量可以跨会话存在的数据机制。

最初的Web Storage规范包含了两种对象的定义:sessionStorageglobalStorage。这两个对象在支持的浏览器中都是以windows对象属性的形式存在的。localStorage对象在修订过的HTML5规范中作为持久保存客户端数据的方案取代了globalStorage。

sessionStorage对象存储特定搞怪的石头个会话的数据,也就是该数据只保持到浏览器关闭。存储在sessionStorage中的数据可以跨越页面刷新而存在,同时如果浏览器支持,浏览器崩溃并重启之后依然可用(FireFox和WebKit都支持,IE不支持) 。
sessionStorage对象可以使用setItem()或者直接设置新的属性来存储数据。
sessionStorage中有数据时,可以使用getItem()或者通过直接访问属性名来获取数据。
还可以通过结合length属性和key()方法来迭代sessionStorage的值。
要从sessionStorage中删除数据可以使用delete操作符删除对象属性,也可以调用removeItem()方法。

想要关闭浏览器后还能保存,就要使用localStorage。要访问同一个localStorage对象,页面必须来自同一个域名,使用同一种协议,在同一个端口上。由于localStorage是Storage的实例,所以可以像使用sessionStorage一样来使用它。

获取地理位置信息

Geolocation API:可以通过浏览器获取用户的地理位置,不再需要借助第三方地址数据库或专业的开发包,提供很大的方便。

支持多线程

新增Web Worker对象,可以在后台运行js脚本,也就是支持多线程,从而提高了页面加载效率。

File API

File API在表单中的文件输入字段的基础上,又添加了一些直接访问文件信息的接口。H5在DOM中为文件输入元素添加了一个files集合,在通过文本输入字段选择了一或多个文件时,files集合中将包含一组File对象,每个File对象对应着一个文件。每个File对象都有下列只读属性:

name: 本地文件系统的文件名
size: 文件的字节大小
type:字符串,文件的MIME类型。
lastModifiedDate:字符串,文件上一次被修改的事件(只有chrome实现了这个属性)

history对象

history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起。
使用go()方法可以在用户的历史记录中任意跳转,可以向后也可以向前。这个方法接受一个参数,表示向后或向前跳转的页面数的一个整数值。负数表示向后跳转(类似于单击浏览器的‘后退’按钮),正数表示向前跳转(类似于单击浏览器的“前进”按钮)
h5中的history对象新增了两个新方法:history.pushState()history.replaeState()
两种方法都允许我们添加和更新历史记录,它们的工作原理相同并且可以添加数量相同的参数。但是pushState()是在history栈中添加一个新的条目,replaceState()是替换当前的记录值。除了方法之外,还有popstate 事件 pushState(data,title[,url])和replaceState(data,title[,url])参数一样,参数说明如下:

data:一个表示状态的对象,json格式数据;
title:一个string格式的标题(大多数浏览器不支持或忽略这个参数,最好用 null代替);
url:一个url(用于替换当前URL);

H5移除的元素

纯表现的元素: basefont、big、center、font等;
对可用性产生负面影响的元素: frame、frameset、noframes等。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。