1.新增的语义化标签:

<nav>: 导航

<header>: 页眉

<footer>: 页脚

<section>:区块

<article>: 文章

<aside>: 侧边栏

<progress>: 进度条

2.兼容处理

在不支持HTML5新标签的浏览器里,会将这些新的标签解析成行内元素(inline)对待,所以我们只需要将其转换成块元素(block)即可使用,但是在IE9版本以下,并不能正常解析这些新标签,但是却可以识别通过document.createElement('tagName')创建的自定义标签,于是我们的解决方案就是将HTML5的新标签全部通过document.createElement('tagName')来创建一遍,这样IE低版本也能正常解析HTML5新标签了,但在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载第三方的一个JS库来解决兼容问题,这个库文件会帮自动通过document.createElement('tagName')创建所有HTML5的新标签。

3.微数据

微数据是在如 span、div 的标签内添加属性,让机器(如搜索引擎)识别其含义,某些特定类型的信息,例如评论、人物信息或事件都有相应的属性,用来描述其含义,可以理解成新语义标签的一种补充。

4.WAI-ARIA

WAI-ARIA[1]  , 是Web Accessibility Initiative - Accessible Rich Internet Applications 的缩写,让残障人士能无障碍地访问网页上的动态内容。

5.输入类型

<input type="email">:输入邮箱格式         <input type="tel">:输入手机号码格式

<input type="url">:输入url格式 <input type="number">: 数字格式

<input type="search">: 搜索框 <input type="range">: 自由拖动滑块

<input type="color">:拾色器 <input type="time">:

<input type="date">:                       <input type="datetime">:

<input type="month">:                  <input type="week">:

6.表单

1.表单元素:

<datalist>: 数据列表    <keygen>: 生成加密字符串

<output>:输出结果 <meter>:度量器

 

2.表单属性:

1.<input type="text" placeholder="请输入用户名">: 占位符

2.<input type="text" autofocus> :自动获得焦点

3.<input type="file" multiple>: 多文件上传

4.<input type="text" autocomplete="off">  自动完成

5.<input type="text" form="某表单ID">

6.<form novalidate></form>: 关闭验证

7.<input type="text" required>: 必填项

8.<input type="text" pattern="\d">:自定义验证

7.【多媒体】以前用flash,现在有H5新标签:

1.音频   <audio>

可以通过附加属性可以更友好控制音频的播放,如:

autoplay :自动播放

controls :是否显不默认播放控件

loop :循环播放

<audio controls autoplay loop="3">

<!-- 通过source标签指定多格式音频文件-->
   <source src="./music/See You Again.mp3">
   <source src="./music/See You Again.wav">
   <source src="./music/See You Again.ogg">
</audio>

2.视频  <video>

autoplay :自动播放

controls :是否显示默认播放控件

loop :循环播放

width :设置播放窗口宽度

height :设置播放窗口的高度

8.DOM扩展

1.获取元素

1、document.getElementsByClassName ('class') 通过类名获取元素,以伪数组形式存在。

2、document.querySelector('selector') 通过CSS选择器获取元素,符合匹配条件的第1个元素。

3、document.querySelectorAll('selector') 通过CSS选择器获取元素,以伪数组形式存在。

2.类名操作

1、Node.classList.add('class') 添加一个class类名

2、Node.classList.remove('class') 移除一个class类名

3、Node.classList.toggle('class') 切换class,有则移除,无则添加

4、Node.classList.contains('class') 检测是否存在一个class类名

Node指一个有效的DOM节点,是一个通称。

3.自定义属性

格式:data-*="";

例如:data-info="我是自定义属性",通过Node.dataset['info'] 我们可获取到自定义的属性值。

特点:自定义属性全部必须是以data-开头的,只要是符合这种格式就是自定义属性。

Node.dataset是以对象形式存在的,当我们为同一个DOM节点指定了多个自定义属性时,Node.dataset则存储了所有的自定义属性的值。

假设某元素 <div id="demo" data-name="itcast" data-age="10">

var demo = document.querySelector('#demo');

1、读取 demo.dataset['name'] 或者 demo.dataset['age']

2、设置demo.dataset['name'] = 'web developer'

注:当我们如下格式设置时,则需要以驼峰格式才能正确获取

<div data-my-name="lining"> 这样获取Node.dataset['myName']

总结:

1.获取一个DOM节点,并且这个DOM节点定义了一些自定义属性

2.通过Node.dataset,管理/读取/设置自定义属性

3.Node.dataset.属性

4.Node.dataset.属性 = “属性值”

9.新增API

1.网络状态

我们可以通过window.onLine来检测,用户当前的网络状况,返回一个布尔值。

window.online用户网络连接时被调用

window.offline用户网络断开时被调用

2.全屏

HTML5规范允许用户自定义网页上任一元素全屏显示。

1、Node.requestFullScreen() :开启全屏显示

2、Node.cancelFullScreen() :关闭全屏显示

由于其兼容性原因,不同浏览器需要添加前缀如:

webkit内核浏览器:webkitRequestFullScreen、webkitCancelFullScreen,如chrome浏览器。

Gecko内核浏览器:mozRequestFullScreen、mozCancelFullScreen,如火狐浏览器。

3、document.fullScreen:检测当前是否处于全屏

不同浏览器需要添加前缀

document.webkitIsFullScreen、document.mozFullScreen

全屏伪类选择器

:full-screen .box {}、:-webkit-full-screen {}、:moz-full-screen {}

3.文件读取

通过FileReader对象可以读取本地存储的文件,使用 File对象来指定所要读取的文件或数据。

File对象可以是来自用户在一个 <input>元素上选择文件后返回的FileList对象,也可以来自由拖放操作生成的  DataTransfer

4.FileList对象

由于HTML5中我们可以通过为表单元素添加multiple属性,因此我们通过<input>上传文件后得到的是一个FileList对象(伪数组形式)。

<input type="file" multiple class="file">

// 获取file表单元素
var file = document.querySelector('.file');
file.onchange = function () {
   console.log(file.files); //FileList {0: File, length: 1}
}

5.FileReader对象

HTML5新增内建对象,可以读取本地文件内容。

var reader = new FileReader; 可以实例化一个对象

实例方法

1、readAsDataURL() 以DataURL形式读取文件

事件监听

onload 当文读取完成时调用

属性

result 文件读取结果

<script>
   // 获取file表单元素
   var file = document.querySelector('.file');
   file.onchange = function () {
      // 获取第一个文件信息
      var f = this.files[0];
      // 实例化一个读取器
      var reader = new FileReader();
      console.log(reader);
      // 读取文件
      reader.readAsDataURL(f);
      // reader.readAsBinaryString(f);
      // reader.readAsText(f);
      // 当文件过大,不能立即读完
      // 通过事件监听进度
      reader.onload = function () {
         console.log(this.result);
         document.querySelector('img').src = this.result;
      }
   }
</script>

10.拖拽

1.拖拽元素

ondrag 应用于拖拽元素,整个拖拽过程都会调用

ondragstart 应用于拖拽元素,当拖拽开始时调用

ondragleave 应用于拖拽元素,当鼠标离开拖拽元素时调用

ondragend 应用于拖拽元素,当拖拽结束时调用

设置了draggable="true"属性的元素,可以被拖拽了;其中<img>、<a>标签默认是可以被拖拽的;

2.目标元素

ondragenter 应用于目标元素,当拖拽元素进入时调用

ondragover 应用于目标元素,当停留在目标元素上时调用

ondrop 应用于目标元素,当在目标元素上松开鼠标时调用

ondragleave 应用于目标元素,当鼠标离开目标元素时调用

页面中任何一个元素都可以成为目标元素

3.事件监听

根据元素类型不同,需要设置不同的事件监听

11.地理定位

1.获取地理信息

通过IP地址、三维坐标、GPS、Wi-Fi、手机信息等多种方式获取地址信息,如下图对不同获取方式的优缺点进行了比较,浏览器会自动以最优方式去获取用户地理信息。

2.隐私

HTML5 Geolocation 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可,才能获取用户的位置信息。

3.API详解

1、获取当前地理信息

navigator. geolocation.getCurrentPosition(successCallback, errorCallback, options) ;

2、重复获取当前地理信息

navigator. geolocation.watchPosition(successCallback, errorCallback, options);

当成功获取地理信息后,会调用succssCallback,并返回一个包含位置信息的对象position。

position.coords.latitude纬度

position.coords.longitude经度

position.coords.accuracy精度

position.coords.altitude海拔高度

当获取地理信息失败后,会调用errorCallback,并返回错误信息error

可选参数 options 对象可以调整位置信息数据收集方式

a) enableHighAccuracy 高精度模式  true/false

b) timeout 超时设置,单位为ms

c) maximumAge表示浏览器重新获取位置信息的时间间隔,单位为ms

navgator.geoloation.getcurrentPosition(success,error,{

enableHighAccuracy: true;

timeout : 3000

maximumAge: 1000

});

12.应用

在现实开发中,把获得到的客户的具体信息当做参数通过调用第三方API(如百度地图)来实现地理定位信息,这些API都是基于用户当前位置的,并将用位置位置(经/纬度)当做参数传递,就可以实现相应的功能。

<div id="container"></div>
   <!-- 引入百度javascript版 API -->
   <script src="http://api.map.baidu.com/api?v=2.0&ak=0A5bc3c4fb543c8f9bc54b77bc155724"></script>
   <script>
      // 提供了一个对象 navigator.geolocation
      // 此对象下有一个方法 getCurrentPosition(); 是用来获取用户当前位置
      // 成功的回调
      function success(position) {
         // alert(1);
         console.log(position);
      }
      // 失败的回调
      function error(err) {
         console.log('error');
         console.log(err);
      }
      // 获得用户当前信息
      // navigator.geolocation.getCurrentPosition(success, error, {
      //     // enableHighAccuracy: true,
      //     // timeout: 3000,
      //     // maximumAge: 1000
      // });
      navigator.geolocation.getCurrentPosition(function (position) {
         var latitude = position.coords.latitude; // 纬度
         var longitude = position.coords.longitude; // 经度
         // 查看地理信息
         console.log(position);
         /********************/
         // 这些都是写死
         var map = new BMap.Map("container"); // container表示主到哪个容器
         // 把经度纬度传给百度
         var point = new BMap.Point(longitude, latitude);
         // 调用方法
         map.centerAndZoom(point, 15);
         /****************************/
         // 只写上面三行就可出现地图了,并且会定位
         // 定义好了一个图片标记
         var myIcon = new  BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(300, 157));
         // 创建标注
         var marker = new BMap.Marker(point, {icon: myIcon});
         // 调用方法
         map.addOverlay(marker);
      });
   </script>
</body>

13.历史管理

提供window.history,对象我们可以管理历史记录,可用于单页面应用,Single Page Application,可以无刷新改变网页内容。

1.旧版本

history.back() 回退

history.forward() 前进

history.go(n) 前进/后退n步

history.length历史记录条数

2.新增方法

1、pushState(data, title, url) 追加一条历史记录

data用于存储自定义数据,通常设为null

title网页标题,基本上没有被支持,一般设为空

url 以当前域为基础增加一条历史记录,不可跨域设置

2、replaceState(data, title, url)

与pushState()基本相同,不同之处在于replaceState(),只是替换当前url,不会增加/减少历史记录。

14.事件监听

onpopstate事件,当前进或后退时则触发,通过事件对象ev.state可以读取到存储的数据。

15.Web存储

传统:document.cookie来存储:

缺点:存储大小只有4k左右,并且解析也相当的复杂,给开发带来诸多不便;

H5新增:

1.window.sessionStorage:

特性:

1、生命周期为关闭浏览器窗口

2、在同一个窗口下数据可以共享

2.window.localStorage:

特性:

1、永久生效,除非手动删除

2、可以多窗口共享

以上两者的特性:

1、设置、读取方便

2、容量较大,sessionStorage约5M、localStorage约20M

4、只能存储字符串,可以将对象JSON.stringify() 编码后存储

16.方法详解

setItem(key, value) 设置存储内容

getItem(key) 读取存储内容

removeItem(key) 删除键值为key的存储内容

clear() 清空所有存储内容

key(n) 以索引值来获取存储内容

17.其它

WebSQL、IndexDB

18.应用缓存

HTML5中我们可以轻松的构建一个离线(无网络状态)应用,只需要创建一个cache manifest文件。

   1.优势

1、可配置需要缓存的资源

2、网络无连接应用仍可用

3、本地读取缓存资源,提升访问速度,增强用户体验

4、减少请求,缓解服务器负担

2.缓存清单

一个普通文本文件,其中列出了浏览器应缓存以供离线访问的资源,推荐使用.appcache为后缀名,添加MIME类型

AddType text/cache-manifest .appcache

例如我们创建了一个名为demo.appcache的文件,然后在需要应用缓存在页面的根元素(html)添加属性manifest="demo.appcache",路径要保证正确。

3.manifest文件格式

1、顶行写CACHE MANIFEST

2、CACHE: 换行 指定我们需要缓存的静态资源,如.css、image、js等

3、NETWORK: 换行 指定需要在线访问的资源,可使用通配符

4、FALLBACK: 换行 当被缓存的文件找不到时的备用资源

CACHE MANIFEST

#version 1.0.0

#缓存一些资料,在离线时使用

CACHE:

./images/img1.jpg

./images/img2.jpg

./images/img3.jpg

./images/img4.jpg

./images/img5.jpg

#当处于网络连接时可以更新

NETWORK:

./css/main.css

FALLBACK:

./online.html ./offline.html

./css/online.css ./css/offline.css

CACHE:

./images/img1.jpg

./images/img2.jpg

./images/img3.jpg

./images/img4.jpg

./images/img5.jpg

19.其它

1、CACHE: 可以省略,这种情况下将需要缓存的资源写在CACHE MANIFEST

2、可以指定多个CACHE: NETWORK: FALLBACK:,无顺序限制

3、#表示注释,只有当demo.appcache文件内容发生改变时或者手动清除缓存后,才会重新缓存。

4、chrome 可以通过chrome://appcache-internals/工具和离线(offline)模式来调试管理应用缓存

20.多媒体

方法:load()、play()、pause()

属性:currentSrc、currentTime、duration

事件:ontimeupdate,onended等

21.应用

1、自定义视频播放器

H5总结的更多相关文章

  1. 旺财速啃H5框架之Bootstrap(五)

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  2. 旺财速啃H5框架之Bootstrap(四)

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  3. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

  4. 快速构建H5单页面切换骨架

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

  5. 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  6. 旺财速啃H5框架之Bootstrap(三)

    好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...

  7. H5程序员如何利用cordova开发跨平台应用

    什么是Cordova? Cordova以前也叫PhoneGap,它提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等.Cordova还 ...

  8. H5项目开发分享——用Canvas合成文字

    以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

  9. 【腾讯Bugly干货分享】H5 视频直播那些事

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57a42ee6503dfcb22007ede8 Dev Club 是一个交流移动 ...

  10. H5嵌入原生开发小结----兼容安卓与ios的填坑之路

    一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...

随机推荐

  1. vue 动态修改el-upload 的action

    action是一个必填参数,且其类型为string,我们把action写成:action,然后后面跟着一个方法名,调用方法,返回你想要的地址,代码示例: //html 代码 <el-upload ...

  2. Jenkins发送邮件,邮件正文嵌套的html中文显示乱码

    解决方案: 1.添加系统变量.变量名:JAVA_TOOL_OPTIONS变量值:-Dfile.encoding=UTF8 2.打开jenkins,系统管理--系统设置,在全局属性处勾选Environm ...

  3. 面向服务的架构(SOA)演变图片

    公司项目演变 成熟的公司项目结构 对比 总线-服务的注册与发现

  4. (转)android权限(permission)大全

    文章转载自:http://blog.csdn.net/hai_qing_xu_kong/article/details/24265533 1.android.permission.WRITE_USER ...

  5. Win7自带功能,刻录光盘遇到的问题

    Win7系统的可以使用系统自带有光盘刻录功能来刻录光盘. 把一张空白光盘放入刻录机,打开“计算机”窗口,双击刻录机图标,弹出“刻录光盘”对话框,选择刻录类型.这里有两个选项:一个是“类似于USB闪存驱 ...

  6. angular2.0学习笔记5.关于组件

    1.组件文件应在/src/app文件夹下 2.组件文件命名应遵循小写中线形式,每个单词之间用中线分隔,并且以.component.ts结尾. 如:HeroDetailComponent类应该放在her ...

  7. Hibbernate详解一

    这里先做一个简单的入门,后面有详解 记住图解原理: 这里只是没有整合spring等项目使用的hibernate的使用详解. 一.Hibernate简介 1.Hibernate在开发中所处的位置 2.O ...

  8. PDO 代码

    <?php try{ $dsn = "mysql:dbname=mydb;host=localhost"; $pdo = new PDO($dsn,"root&qu ...

  9. [ES]elasticsearch章2 ES查询过程解析

    es服务端是准确知道每个document分布在哪个shard上: search一个比较复杂的执行模式,因为我们不知道那些document会被匹配到,任何一个shard上都有可能,所以一个search请 ...

  10. 微信小程序播放视频发送弹幕效果

    首先.先来看一下效果图 然后.再看一下官方文档API对video的说明 相关属性解析: danmu-list:弹幕列表 enable-danmu:是否显示弹幕 danmu-btn:弹幕按钮 contr ...