关于h5的一些知识整理

时间  2019-11-09
标签 关于 h5 一些 知识 整理 繁體版
原文   原文链接

HTML5介绍

1. 基础认知

1.1 基本认识

  • h5是一个泛称，由HTML5+CSS3+JS等多种技术组合成的一个应用开发平台，第一个将web做为应用开发平台的HTML语言。

1.2 语法规范

  • 使用h5应该指定对应的<!DOCTYPE>去指示浏览器使用相应的规范去解析页面
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    <body>
    </body>
</html>
特色：
  1. 更简洁
  2. 更宽松
  3. 可是在实际开发中要注意书写规范，利于后期维护

1.3 语义标签

  • 在网站建设过程当中，语义化是很是重要的。
  1. 当页面加载失败的时候，还可以呈现出清晰的结构
  2. 有利于SEO优化，利于被搜索引擎收录（即使于网络爬虫的识别）
  3. 在项目开发及维护时，语义化的也很大程度上下降开发难度，节省成本
  • 经常使用的新增语义标签
<nav> 表示导航
<header> 表示页眉
<footer> 表示页脚
<section> 表示区块
<article> 表示文章 如文章、评论、帖子、博客
<aside> 表示侧边栏 如文章的侧栏
<figure> 表示媒介内容分组 与 ul > li 作个比较

//下列标签不经常使用
<mark> 表示标记 (带用“UI”，不怎么用，能够重写样式)
<progress> 表示进度 (带用“UI”，不怎么用，不可重写样式)
<time> 表示日期
<hgroup> 标题列表 (听说已废弃)
<details>
<bdi>
<command>
<summary>
<rp>
<rt>
<ruby>

新语义标签只是具备表意性，除了使用时须要注意下HTML结构外，其余和普通标签没什么区别。php

1.4 兼容处理

在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，因此咱们只须要将其转换成块元素(block)便可使用，可是在IE9版本如下，并不能正常解析这些新标签，可是却能够识别经过document.createElement('tagName')建立的自定义标签，因而咱们的解决方案就是将HTML5的新标签所有经过document.createElement('tagName')来建立一遍，这样IE低版本也能正常解析HTML5新标签了，在实际开发中咱们更多采用的是经过检测IE浏览器的版原本加载第三方的一个JS库(html5shiv.js)来解决兼容问题。css

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

2. 表单

新增的表单特性，在PC和移动设备之间差别大，兼容性较差html

2.1 输入类型

email 输入email格式
tel 手机号码
url 只能输入url格式
number 只能输入数字
search 搜索框
range 范围
color 拾色器
time 时间
date 日期 不是绝对的
datetime 时间日期
month 月份
week 星期

部分类型是针对移动设备生效的，且具备必定的兼容性问题，在实际开发中可选择性使用。html5

2.2 表单元素（标签）

<datalist> 下拉选项，使用中文时要注意
<keygen> 生成加密字符串
<output> 不可当作数据提交？
<meter> 表示度量器，不建议用做进度条

2.3 表单属性

placeholder 占位符
autofocus 获取焦点
multiple 文件上传多选或多个邮箱地址
autocomplete 自动完成，用于form元素，也可用于部分input，默认值on
form 指定表单项属于哪一个form，处理复杂表单时会须要
novalidate 关闭验证，可用于<form>标签，（只适应用form）
required 验证条件，必填项
pattern 正则表达式 自定义验证规则

//表单重写
//应用于提交按钮上，如：<input type="submit" formaction="xxx.php">
formaction、formenctype、formtarget、formmethod、formnovalidate

2.4表单事件

oninput 用户输入内容时触发，可用于移动端输入字数统计
onincalid 验证不经过时触发

3. 多媒体

h5以前，网页上的音频/视频可能是利用Flash来播放的，但并不是全部用户的浏览器都安装了Flash插件，由此使得处理音频/视频播放变的很复杂，而且移动设备的浏览器不支持Flash。node

3.1 音频

<audio src="xx.mp3"></audio>

属性：web

autoplay 自动播放
controls 是否显示默认的播放控件
loop 循环播放
preload 预加载 同时设置autoplay时此属性失效

因为版权限制，不一样浏览器支持的播放格式不一样，须要进行兼容性处理：正则表达式

<audio controls>
    <source src="xx.mp3">
    <source src="xx.wav">
    <source src="xx.ogg">
    您的浏览器不支持HTML音频播放功能
</audio>

3.2 视频

  • 使用<video>标签
  • 使用基本上与<audio>标签使用一致
  • 可使用width,height设置播放窗口的宽高

4. DOM操做的扩展

4.1 获取元素

  • document.getElementsByClassName(className) 经过类名获取元素，返回一个伪数组
  • document.querySelector(selector) 经过css选择器获取元素，返回符合条件的第一个dom元素
  • document.querySelectorAll(selector) 经过css选择器获取元素，返回一个伪数组

4.2 类名操做

全部类名操做都是在classList属性下的:
  • node.classList.add(className) 添加类
  • node.classList.remove(className) 移除类
  • node.classList.toggle(className) 切换类
  • node.classList.contains(className) 检测是否存在类

4.3 自定义属性

  • 设置自定义属性
<div data-name="name" data-gender="female"><div>
  • 获取自定义属性
    • node.dataset是以对象的形式存在的
    • 经过node.dataset["name"]能够获取到自定义属性的值
    • 以data-my-name="name"格式设置属性时,获取时须要使用驼峰格式
      • node.dataset["myName"]

5. 新增API

5.1 拖拽

  • 拖拽元素
    • 设置了draggable="true"属性的元素，其中图片和连接默认是可拖拽的
  • 目标元素
    • 页面中任何一个元素均可以成为目标元素
  • 事件监听
  1. 拖拽元素的事件
ondrag 整个拖拽过程都会调用
ondragstart 拖拽开始是调用
ondragleave 当鼠标离开拖拽元素时调用（拖拽出拖拽元素的基础位置时）
ondragend 拖拽结束时调用

2.目标元素的事件chrome

ondragenter 拖拽元素进入时调用
ondragover  拖拽元素停留在目标元素上时调用
ondragleave 拖拽元素离开目标元素时调用
ondrop      在目标元素上松开鼠标时调用
  1. 数据传递
ev.dataTransfer.setData()  设置数据
ev.dataTransfer.getData()  获取数据

5.2 历史管理

window.history对象，能够管理历史记录，可用于单页面应用，能够无刷新改变网页内容。api

5.2.1 旧版本
history.back() 回退
history.forward() 前进
history.go(n) 前进/后退n步，正值前进，负值后退
history.length 历史记录条数
5.2.2 新增方法
//追加一条历史记录
//通常data设置为null,titile设置为空，url为以当前域为基础增长一条历史记录，不可跨域设置。
pushState(data,title,url)  

//用法与pushState()基本相同，此方法替换当前url,不会改变历史记录条数
replaceState(data,title,url)
5.2.3 事件监听

onpopstate事件：前进或者后退时触发,经过事件对象ev.state能够读取到存储的数据,监听者给window跨域

5.3 地理定位

基于位置服务(Location Base Service)

5.3.1 获取地理信息方式
  1. IP地址
  2. 三维坐标
    • GPS
    • WiFi
    • 手机信号
  3. 用户自定义数据

下图对各类不一样获取方式的优缺点作了比较,浏览器会自动以最优的方式去获取用户地理信息

5.3.2 隐私

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

5.3.3 API详解

navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options)获取当前地理信息
navigator.geolocation.watchPosition(successCallback,errorCallback,options)重复获取当前地理信息

  • 当成功获取地理信息后,会调用successCallback,并返回一个包含位置信息的对象position.
    • position.coords.latitude 纬度
    • position.coords.longtitude 经度
    • position.coords.accuracy 精度
    • position.coords.altitude 海拔高度
  • 获取地理信息失败后,会调用errorCallback,并返回错误信息error
  • 可选参数options对象能够调整位置信息数据收集方式
    • enableHighAccuracy 高精度模式
    • timeout 超时设置,单位为ms
    • maximumAge 表示浏览完从新获取位置信息的时间间隔,单位为ms

5.4 Web存储

为了知足各类需求,会常常性的须要在本地存储大量的数据,传统方式使用document.cookie进行存储,但cookie存储大小只有4k左右,而且解析相对复杂.HTML5提出了sessionStorage和localStorage来存储本地数据.

  • 特性:
    1. 设置、读取方便
    2. 容量较大、sessionStorage约为5M,localStorage约为20M
    3. 只能存储字符串,能够将对象JSON.stringfy()编码后存储
  • window.sessionStorage
    1. 生命周期为关闭浏览器窗口
    2. 在同一个窗口下数据能够共享
  • window.localStorgae
    1. 永久生效,除非手动删除
    2. 能够多窗口共享
  • 方法详解
    1. setItem(key,value) 设置存储内容
    2. getItem(key,value) 读取存储内容
    3. removeItem(key) 删除键值为key的存储内容
    4. clear() 清空全部存储内容
    5. key(n) 以索引值来获取存储内容
  • 其余
    WebSQL,IndexDB

5.5 全屏

规范容许全部元素均可以全屏,但实际测试结果关闭全屏功能只能添加到document元素上

  • HTML5规范容许用户自定义网页上的任一元素全屏显示
requestFullScreen() 开启全屏显示
cancelFullScreen() 关闭全屏显示
  • 不一样浏览器须要添加前缀
webkitRequestFullScreen、mozRequestFullScreen
webkitCancelFullScreen、mozCancelFullScreen
  • 检测当前是否处于全屏状态
document.fullScreen
//不一样浏览器须要添加前缀
document.webkitIsFullScreen
document.mozFullScreen
  • 全屏伪类
    • :full-screen.box{}
    • :-webkit-full-screen{}
    • :moz-full-screen{}

5.6 网络状态

给window绑定事件
window.navigator.onLine在用户网络链接时调用,返回布尔值
window.navigator.offLine在用户网络断开时调用

5.7 应用缓存

建立一个cache manifest文件构建一个离线应用

  1. 优点
    • 可配置须要缓存的资源
    • 网络没法链接时仍可以使用
    • 本地读取缓存资源,提高访问速度,加强用户体验
    • 减小请求,缓解服务器负担
  2. 缓存清单
    • 缓存清单是一个普通饿文本文件,其中列出了浏览器应缓存以供离线访问的资源,推荐使用.appcache为后缀名,添加MIME类型
    • 假设建立了一个名为demo.appcache的文件,而后在须要应用缓存的页面的根元素(html)添加属性manifest = "demo.appcache",路径要正确.
  3. manifest文件格式
    • 顶行写CACHE MANIFEST
    • CACHE: 换行 指定咱们须要缓存的静态资源,如.css、.js、image等
    • NETWORK: 换行 指定须要在线访问的资源,可以使用通配符
    • FALLBACK: 换行 当被缓存的文件找不到时的备用资源
CACHE MANIFEST
CACHE:
#此部分写须要缓存的资源 （#是注释的意思）
./images/img1.jpg
./images/img2.jpg
./images/img3.jpg
./images/img4.jpg
./images/img5.jpg

NETWORK: 
#此部分要写须要有网络才可访问的资源，无网络则不访问
#./js/main.js
*
FALLBACK:
#当访问不到某个资源的状况下，自动由另外一个资源替换
./css/online.css ./css/offline.css
./online.html ./offline.html
  1. 其余
    • CACHE:能够省略,这种状况下要将须要缓存的资源写在CACHE MANIFEST
    • 能够指定多个CACHE: NETWORK: FALLBACK:,无顺序限制
    • #表示注释,只有当demo.appcache文件内容发生改变或者手动清除缓存后,才会从新缓存
    • chrome能够经过chrome://appcache-internals/工具和离线（offline）模式来调试管理应用缓存

5.8 文件读取

经过FileReader对象能够读取本地存储的文件,可使用File对象来指定所要读取的文件或数据,其中File对象能够来自用户在一个<input>元素上选择文件后返回的FileList对象,也能够来自自由拖放操做生成的DataTransfer.

5.8.1 FileList对象

因为HTML5中能够为表单添加multiple属性,所以经过<input>上传文件后获得一个FileList对象(伪数组).

5.8.1 FileReader对象

HTML5新增内置对象,能够实例化一个对象

  • 实例方法:readAsDataURL()以DataURL形式读取文件
  • 事件监听:onload 当文件读取完成时调用
  • 属性:result 文件读取结果

5.9 多媒体

  • 方法:load() play() pause()
  • 属性:currentSrc currentTime duration
  • 事件: onended

还有许多其余方法,在应用时能够去MDN上查看

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程