H5新特性总结

最新推荐文章于 2025-03-12 19:42:52 发布

Haley_Guo

最新推荐文章于 2025-03-12 19:42:52 发布

阅读量2.4k

点赞数 14

分类专栏： H5 文章标签： H5

本文链接：https://blog.youkuaiyun.com/Haley_Guo/article/details/80048827

版权

H5 专栏收录该内容

1 篇文章

订阅专栏

H5新特性总结

本文为汇总网上的不同帖子的内容：

H5新标签
本地存储
离线web应用
css3
地理定位

新标签

1.声明

html5:万维网的核心语言、HTML规范的第五次重大修改。HTML5是HTML标准的下一个版本
HTML5简化了很多细微的语法，例如doctype的声明：
HTML4的声明：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML5的声明：

<!DOCTYPE html>

2.结构标签

header：定义文章的头部，通常是一些引导和导航信息，包含h1~h6、搜索框、logo等。
footer：定义section或document的页脚，一般配合address标签(显示地址)，包含作者信息、相关链接等。
article：标签包含文章，一般内嵌header、footer、h1、p标签。
aside：用来转载非正文内容，对于主题内容的说明，例如广告、侧边栏。
section：定义文档中的节，例如小说中的一章。
nav：定义显示导航链接
hgroup顾名思义是h1~h6的集合。
time：定义日期或者时间，或者两者
main：规定文档的主要内容（不能出现一个以上的main元素）
figure：标签包含独立的媒体内容，图像、图标、照片等
figcaption：标签定义figure的元素标题
details：描述文档某个部分细节，而这个细节并不需要文档加载时就展示，而是可以折叠
summary：默认显示的details元素的标题
datalist：输入框提示列表（input的list属性值为datalist的id）
progress：进度条。max 进度完成值，min 定义当前值
mark：标记需要突出显示的文本

3.新增表单控件

表单系列：

email:邮箱
tel:电话
url:网址
number:数字（min,max,step数字间隔,value）
range:数字选择器（min,max,step数字间隔,value）
search:搜索框
color: 颜色选择器

Date系列：

date：选取日月年
month - 选取月年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、⽇、⽉、年（UTC 时间）date和time的组合

4.新增表单属性

placeholder：输入框提示信息
autofocus：指定表单获取输入焦点
required：必填字段
pattern：正则验证
form：规定输入域所属的一个或多个表单（form属性所以用表单的id）
formaction：重写表单的action属性
formmethod：重写表单的method属性
autocomplete：属性规定form或input域应该拥有自动完成功能

以往input中的name和value要随着form表单一起提交，form表单必须包裹input , 而现在可以通过input的form属性綁定

<form id="testform">
    <input type="text" />  
</form> 
<input form=testform />

placeholder属性

 <input type="text" placeholder="请输入密码" />

autofocus属性，页面只能有一个

 <input type="text" autofocus />

还有type为email、number等，但是实际项目中一般使用自定义，所以这里不提。

5.新增表单验证

novalidate：表单取消验证
formnovalidate：submit元素取消验证
setCustomValidity：自定义验证信息

总体来说，这些标签就是div标签的语义化转化，过去我们曾用div来包裹某个块或者说组件，现在h5使用这些标签实现语义化，有利于代码可读性和SEO。语义元素在IE6-8的兼容可以使用：

    document.createElement('header');
    document.createElement('nav');

来解决，但是这样js创建的新元素没有样式，需要在css中定义，或者直接通过插件http://www.bootcdn.cn/html5shiv/来解决。html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁，目的是让 IE 识别并支持 HTML5 元素。

本地存储

h5提供了sessionStorage、localStorage和indexedDB加强本地存储。使用之前应该先判断支持情况:

 if(window.sessionStorage){
       //浏览器支持sessionStorage
   }
   if(window.localStorage){
       //浏览器支持localStorage
   }

localStorage和sessionStorage的区别在于sessionStorage基于会话，关闭浏览器之后存储消失。localStorage在各浏览器中上限不同，最低的是2.6MB, 所以开发上限为2.6MB, 当然这比cookie强太多，如果还是不够的话只能借助indexedDB, indexedDB上限是250MB。
localStorage和cookie另一个区别是没有过期时间，不过这个可以在localStorage中加一个时间字段轻松解决这个问题。
存取localStorage可能遇到的坑是跨域问题，因为localStorage是域内安全，也就是同一个域才能对localStorage进行存储，可以通过postMessage来解决。以下是它的常用应用场景:

    var userData = {
        name : 'sysuzhyupeng',
        age: 24
    }
    localStorage.setItem('userDate', JSON.stringify(userData));
    var newUserData = JSON.parse(localStorage.getItem('userData'));

另外，浏览器提供了storage事件来监听存储:

window.addEventListener('storage', showStorageEvent, true)

cookie、localStorage和sessionStorage三者之间的区别

1.生命周期

Cookie：可设置失效时间，默认是关闭浏览器后失效
sessionStorage：仅在当前网页会话下有效，关闭页面或浏览器后就会被清除
localStorage：除非手动清除，否则永久保存

2. 存放数据大小：

cookie：4KB左右
localStorage和sessionStorage：可以保存5MB的信息。

http请求：

cookie：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
localStorage和sessionStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信。

易用性：

cookie：需要程序员自己封装，源生的Cookie接口不友好
localStorage和sessionStorage：源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

应用场景：

cookie：常用来识别用户登录，不可跨域，限制比较多，会浪费带宽
sessionStorage：常用来保存一些临时的数据，防止用户刷新页面之后丢失了一些参数。
localStorage：可以用来跨页面传递参数

另外：后两者是H5新特性，可能有些浏览器不支持

离线web应用

页面缓存指的还是有网络状态下，而离线web应用指的是在没有网络状态可以运行应用

    if(window.applicationCache){
        //支持离线应用
    }

manifest文件是核心，记录着哪些资源文件需要离线应用缓存，要使用manifest，只需要在html标签中添加属性

 <html manifest="cache.manifest">

cache.manifest的文件格式如下

    CACHE MANIFEST
    #缓存的文件
    index.html
    test.js
    #不做缓存
    NETWORK
    /images/
    FALLBACK
    #当无法获取到offline.html，则转到index.html
    offline.html index.html

缓存的文件下面是当网络不可用时，文件直接从本地缓存读取，#NETWORK下面的文件无论是否已经缓存，都要从网络中下载。FALLBACK后面，当无法获取到offline.html，则转到index.html。

CSS3

CSS3提供了更多的选择器，before、after、first-child、nth-child。提供的效果包括box-shadow、text-shadow、background-size，以background-size为例, 在具体语法不同浏览器有所区别，所以要使用以下写法

  background-size: 10px 5px
  -webkit-background-size: 10px 5px

还可以使用media-query实现响应式布局

  @media (max-width: 1190px) {
      ...
  }

地理定位

h5提供了Geolocation API访问地理位置，即通过window.navigator.geolocation来实现访问。这个对象有三个方法：

    getCurrentPosition()
    watchPosition()
    clearWatch

页面第一次使用这个api需要获得用户许可, watchPosition可以对位置变化事件进行监听。

参考：
1: https://blog.youkuaiyun.com/sysuzhyupeng/article/details/54706545
2: https://www.jianshu.com/p/c435f52fb95f