H5新特性

最新推荐文章于 2024-04-09 15:36:07 发布

allen_csdns

最新推荐文章于 2024-04-09 15:36:07 发布

阅读量850

点赞数

文章标签： H5新特性

本文链接：https://blog.csdn.net/allen_csdns/article/details/103343073

版权

1.h5新语义元素

header标签包含引导和导航等，通常包含h1~h6、搜索框、logo等。
footer标签一般配合address标签(显示地址)，包含作者信息、相关链接等。
nav标签一般包含多个a标签，构建导航组件。
aside标签主要装载广告、侧边栏。
article标签包含文章，一般内嵌header、footer、h1、p标签。
section标签可以用在以上任一一个标签中划分组件。
hgroup顾名思义是h1~h6的集合。
总体来说，这些标签就是div标签的语义化转化，过去我们曾用div来包裹某个块或者说组件，现在h5使用这些标签实现语义化，有利于代码可读性和SEO。语义元素在IE6-8的兼容可以使用

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

来解决，但是这样js创建的新元素没有样式，需要在css中定义，或者直接通过插件http://www.bootcdn.cn/html5shiv/来解决。

2.本地存储

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)

3.离线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

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

4.表单新增功能

以往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. 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) {
      ...
  }

6.地理定位

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

getCurrentPosition()
watchPosition()
clearWatch

页面第一次使用这个api需要获得用户许可, watchPosition可以对位置变化事件进行监听。
公众号：
在这里插入图片描述
微信：

allen_csdns

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5新特性

1.h5新语义元素header标签包含引导和导航等，通常包含h1~h6、搜索框、logo等。footer标签一般配合address标签(显示地址)，包含作者信息、相关链接等。nav标签一般包含多个a标签，构建导航组件。aside标签主要装载广告、侧边栏。article标签包含文章，一般内嵌header、footer、h1、p标签。section标签可以用在以上任一一个标签中划分组件。...
复制链接

扫一扫