HTML5

html5

HTML5:　是HTML4的升级版本(狭义)
    结构：html5
    样式：css3
    行为：js API 有所增强  地理定位 web存储 拖拽
HTML5广义的概念: 代表着浏览器技术发展的一阶段，HTML5+CSS3+js API 一套前端技术的组合；

常用新增语义化标签

header 头部
nav  导航
section  区域
aside  侧边栏
article 文章
footer 底部
figure 媒介内容分组

标签兼容性处理

注意：ie8以下的浏览器不支持h5标签，
解决办法： 引入html5shiv.js文件，条件注释 只有ie能够识别

<!--[if lte ie 8]> <script src="html5shiv.min.js"></script> <![endif]-->

<!-- l:less 更小 t：than 比 e:equal等于 g：great 更大 -->

表单

Html5中form表单可以设置：

最大宽度：max-width
最小宽度：min-width

type="text"代表表单的类型

表单新增类型：email,url,number,tel,search,range,color,time,date,month,week

智能下拉菜单

    <!--  一个普通的输入框-->
    <input type="text" list="car" />

    <!--数据列表标签-->
    <datalist id="car">
        <option>宝马</option>
        <option>宝骏</option>
        <option>宝强</option>
        <option>宝宝</option>
        <option>奥迪</option>
        <option>奥迪奥</option>
        <option>迪奥</option>
    </datalist>

新增表单元素

output 没有含义，仅提供显示功能，
keygen 加密类型，单标签
meter  	度量器
progress 进度条

新增表单属性

placeholder:占位符 提示文字
autofocus：自动获取焦点
autocomplete:自动完成（填充的）on开启（默认）off（取消自动提示）
required：必填项
multiple:多选
novalidate:关闭默认的验证功能（只能加给form）
pattern:自定义正则验证

表单事件

oninput 当用户输入的时候触发
oninvalid 当验证不通过时触发

一般用于设置验证不通过时的 提示文字
txt1.oninvalid=function(){
    用于设置验证不通过时的 提示文字
     this.setCustomValidity('亲，请输入正确的邮箱格式！');
}

音频

audio:
属性：
autoplay: 自动播放
controls:控制条
loop：循环
preload 预加载 同时设置autoplay时些属性失效

<!--推荐的兼容写法：-->
<audio controls loop>
    <source src="music/yinyue.mp3"/>
    <source src="music/yinyue.ogg"/>
    <source src="music/yinyue.wav"/>
    抱歉，你的浏览器不支持音频标签！
</audio>

视频

video
<!--  行内块 display:inline-block -->
属性：
autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
preload 预加载，同时设置了autoplay，此属性将失效
width 设置播放窗口宽度
height 设置播放窗口的高度

<video controls autoplay>
    <source src="video/movie.mp4"/>
    <source src="video/movie.ogg"/>
    <source src="video/movie.webm"/>
    抱歉，浏览器要换了！
</video>

DOM拓展

h5中，dom新增功能

$() 括号内可以为任意的 标签 类名 id等

获取单个元素标签

document.querySelector('.box3');
只会获取符合条件的第一个元素

获取所有符合条件的标签

返回的是一个数组
document.querySelectorAll();

类名操作

node.classList.add() 添加类名
node.classList.remove() 删除类名
node.classList.contains()判断是否包含类名，返回true/false
node.classList.toggle()切换类名

自定义属性

给标签添加自定义属性，必须以data-开头
自定义属性的获取和赋值，需要通过dateset[]

//        data-my-name="zs" js中 如何获取（驼峰命名）
    console.log(box.dataset['myName']);

新增api

多媒体

figure 标签，表示多媒体
figcaption 多媒体标题

方法：play() 播放  pause()暂停
属性：currentTime 当前播放时间
    duration 视频的总时间
    paused 视频播放的状态
事件：
    oncanplay 当视频加载完成可以播放后触发
    ontimeupdate 当目前的播放位置更新时触发
    onended:播放完时触发
全屏：
    video.webkitRequestFullScreen();全屏的h5代码，其他盒子也可以设置全屏

拖拽

draggable="true",拖拽属性
默认图片和链接拖拽属性是开启的

拖拽元素：
    ondragstart 拖拽开始
    ondragend 拖拽结束
    ondragleave 当鼠标拖拽离开被拖拽元素时触发
    ondrag 当拖拽时持续触发事件

目标元素：
    ondragenter,当被拖拽元素进入目标元素时
    ondragleave,当鼠标离开目标元素时触发
    ondragover，当拖拽在目标元素上时 连续触发-->e.preventDefault();阻止拖拽的默认行为
    ondrop ,当在目标元素上松开鼠标时触发

历史管理

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

旧版本：
history.back() 回退
history.forward() 前进
history.go(n) 前进/后退n步
history.length历史记录条数

全屏

requestFullscreen()开启全屏（w3c标准）
cancleFullscreen()关闭全屏

通过document.fullScreen检测当前是否处于全屏

兼容写法：
    if(box.requestFullscreen){
        box.requestFullscreen();
    }else if(box.webkitRequestFullScreen){
        box.webkitRequestFullScreen();
    }else if (box.mozRequestFullScreen){
        box.mozRequestFullScreen();
    }

全屏伪类：:-webkit-full-screen{}....

web存储

sessionStorage 会话存储 5M 当窗口关闭时数据销毁 内存
localStorage 本地存储 20M 永久生效，除非手动删除 清理垃圾 硬盘

window.sessionStorage. 
    存储数据 setItem(key,value); 
    获取数据 getItem(key) 
    更新数据 setItem(key,value)
    删除数据 removeItem(key)
    清空数据 clear()

window.localStorage.
    存储数据 setItem(key,value);
    获取数据 getItem(key)
    更新数据 setItem(key,value)
    删除数据 removeItem(key)
    清空数据 clear()

网络状态

window.online 当用户网络连接时调用
window.offline 当用户网络断开时调用

window.addEventListener("online",function(){
         alert("已经建立了网络连接")
    })
window.addEventListener("offline",function(){
         alert("已经失去了网络连接")
   })

应用程序缓存

新建一个普通文本文件后缀名为.appcache
在需要用缓存的页面的html标签上添加属性manifest="名称.appcache"

manifest文件格式:
1. 顶行写CACHE MANIFEST
2. CACHE:换行 指定我们需要缓存的静态资源
3. NETWORK:换行 指定我们需要在线访问的资源，可使用通配符
4. FALLBACK:当前页面无法访问时退回的页面
#表示注释

地理定位

ip,GPS,WIFI,手机信号，用户自定义
window.navigator.geolocation

兼容处理
if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(successCallback，errorCallback);
}else{
    不支持
}
successCallback 当获取用户位置成功的回调函数
errorCallback 当获取用户位置失败的回调函数

position.coords.latitude 纬度
position.coords.longitude 经度

font Awesome网站，图标字体

http://fontawesome.dashgame.com/

转载于:https://my.oschina.net/u/3160839/blog/1831216