HTML5介绍

• H5并不是新语言，而是HTML的第五次重大修改(版本)，移动端支持优于PC端
• 所有主流浏览器都支持H5，但IE8及其以下不支持
• 改变了用户与网页的交互方式：各种新型的多媒体标签代替了flash
• 新增的重要特性：语义化特性、本地存储特性、多媒体、二维三维、特效动画等
• 相对于H4的进步：
  • 抛弃了一些不合理的旧属性标签
  • 新增了一些标签和属性
  • 机构代码更加的简洁易读

新增的语义化标签

• H5中新增了非常多的语义化标签，这里只介绍几个常见的，更多的自己去翻手册
  • header 页眉
  • nav 导航
  • main 页面主要内容
  • article 文章
  • aside 主题内容之外
  • footer 页脚
• 注意，这几个语义化标签本质上与div是没有区别的，只是现在通过标签名就能更加直观的知道它代表的是网页哪个部分
• 另外，关于header和footer在语法规则中它们不是只针对与网页头部和网页底部，也可以用作页面中某块区域的头部和底部。但是这里建议，一张网页里最好只用一次，让结构更加清晰

语义化标签的兼容性

• 说到兼容性，肯定就跟IE有关系，只有IE10以上才完全支持H5
• IE9虽然支持了H5，但是它不是全部支持，而是选择性支持。不支持的语义化标签，会默认为行内元素。解决方法就是将其不认识的转换为块级元素
• IE8及其以下不支持H5，所以完全不认识语义化标签，目前有两种解决方法：
  • 1.在JS中动态创建语义化标签元素，这样IE8就能识别了。但是JS中动态创建新元素，默认也是行内元素，也要转换元素模式
  • 2.外部引入html5shiv.js文件，这是一个js库。它的目的就是解决IE8及其以下版本能够正常识别语义化标签

HTML5表单新增内容

新增表单input控件type类型

• H5中增加了大量的input控件type类型，让很多以前需要js来配合实现的功能，现在只需要一个type就能解决：
  • type="email"邮箱类型，自带了邮箱格式的验证，点击提交时如果邮箱格式不正确会阻止提交，并提示错误
  • type="tel"电话类型，没有验证功能，作用是移动端点击输入框时自动弹出数字键盘
  • type="url"网址类型，自带验证网址的功能，格式不正确也会阻止提交并提示，注意格式中必须有http://
  • type="number"数字类型，在输入框中不能输入非数字和点以外的任何字符，自带上下键，还可以通过max和min来控制最大值和最小值
  • type="search"搜索类型，自带了清除一键所有内容按钮，注意匹配提示涉及到后台数据获取，表单做不到还是要js来实现
  • type="range"范围类型，样式为可拖动的条，可以设置默认值和最大最小值
  • type="color"颜色拾取器，点击可以选取颜色，我们可以通过value值来获取用户选择的颜色
  • type="time"时间类型，样式为时分秒的输入框
  • type="date"日期类型，样式为年月日的输入框，只要涉及到日期的都自带日期选择插件
  • type="datetime-local"时间日期类型，样式为年月日 时分秒的输入框，与datetime功能相同(只有safari支持)
  • type="month"月份类型，样式为年月的输入框
  • type="week"周类型，样式为年星期的输入框

新增表单input控件属性

• 新增的属性都是非常实用的，要多练习牢记
  • placeholder="默认文字"默认提示文字，有点类似value值，但是只有在内容为空时才显示，输入值会自动消失
  • autofocus自动让输入框获取焦点
  • autocomplete="on|off"自动记录输入值，在下次输入时自动匹配并提示。on是开启off是关闭。注意这个属性要实现功能必须有两个前提：
    • 必须提交过数据，提交过才会自动记录输入值
    • 输入框必须有name属性，有了才能识别记录的哪个输入框
  • required自动验证输入框是否为空，为空阻止提交并提示
  • pattern="正则表达式"提供在html中的正则验证功能，如果不满足会阻止提交并提示，注意这个属性中写正则表达式，不用加//。另外如果输入值错误后，就算修改成正确的也不能通过，必须刷新页面才可以，目前是一个BUG
  • multiple该属性在不同类型控件中，作用不一样。在file文件提交控件，作用是可以提交多个文件；在邮箱控件中，作用是可以输入多个邮箱地址，以逗号分隔。还有更多作用去翻阅手册
  • form="表单id值"这个属性可以让控件指定归属表单
    • 比如某些情况下，表单控件因为限制不能写form表单中，但是又想跟随form表单一起提交
    • 那么就可以给form表单设置id值，并给在form外的控件设置form属性，值就是对应的id。当对应id的form提交时，这个控件会归属于对应form一起提交

新增表单元素

• 三个表单的新增元素，几乎都很少用，现在只做一个了解即可
• datalist下拉选择框
  • datalist的结构与select相似，内部都是嵌套option标签。但是他们的功能却不一样，datalist的存在为了让用户既能够输入，也能选择
  • datalist不能单独使用，它必须和input控件关联起来使用。在input控件中添加list属性，值就是datalist的id，这样它们就关联起来。鼠标经过输入框可以看到一个下拉的三角符号，点击就是可选择项，不点击仍然可以输入
  • 另外有一个特列，就是在type="url"输入框，option的value值中，网址前面必须加上http://才能正常显示
  • 而且它的兼容性很差，在火狐浏览器中不支持这个标签
• keygen加密标签
  • 在表单中加入keygen标签后，当点击提交按钮时，它会自动生成两个钥匙。私钥存储在客户端，公钥连同用户输入的信息，一起发给服务器。下次在操作时会进行钥匙比对，通过才能进行操作
• output输出标签
  • 就是一个单纯输出内容标签，与span功能相似，相对而言更语义化一些

表单新增事件

• oninput这个事件在DOM中已经学过了，就是在input控件内容发生改变的时候会触发，包括增加内容和删除内容
• oninvalid这个事件会在input控件内容验证不通过的时候触发，经常会配合pattern和setCustomValidity()一起使用，方法的作用是修改默认的错误提示信息

进度条

• progress标签会显示进度条，有两个属性：value表示当前值，max表示最大值
• meter标签会显示度量器，有五个属性：value表示当前值，low表示较小值，high表示较大值，min表示最小值，max表示最大值
• 这两个标签的样式都是进度条的形式，但是显示的效果会有区别，具体可以去写写看

多媒体标签

• audio音频标签，在页面中插入音乐文件，有几个重要属性
  • src="url"音频文件地址，必须写的属性
  • controls播放器控制面板，如果不写此属性是看不到控制面板的
  • autoplay自动播放，打开页面就自动播放，不需要手动点
  • loop循环播放
• video视频标签，在页面中插入视频文件，有几个重要属性
  • src="url"视频文件地址，必须写的属性
  • controls播放器控制面板，如果不写此属性是看不到控制面板的，每个浏览器的控制面板会有不同
  • autoplay自动播放，打开页面就自动播放，不需要手动点
  • loop循环播放
  • height="xx"视频高度
  • width="xx"视频宽度，注意设置时只写宽或者高其中一个就行，它会自动等比例缩放，不要同时都写
  • poster="url"视频封面，将地址图片作为视频没播放时的封面，如果不写此属性那么默认封面是视频的第一帧
• source标签，因为兼容问题，每个浏览器支持的视频格式都不一样，为了解决兼容问题用到它，代码如下：
  <video controls>
<source src="url" type="video/视频格式1">
<source src="url" type="video/视频格式1">
视频格式不支持
</video>
  • 可以看到source标签包裹在video标签中，如果用到source，那么src属性写在source标签中，并且还要写type属性注明视频格式
  • 当浏览器加载视频时会自动判断，如果支持第一个source的视频直接显示，如果不支持判断第二个source的视频，支持就显示。多个都不支持时提示视频格式不支持
• 多媒体还有很多其他事件和方法，在自定义播放器案例中查看

H5新增的JSDOM操作方法

• querySelector()查询选择器方法，它可以通过传入的参数来找到某个元素，它的参数支持类名、id名、标签名。注意参数的写法和jquery有点像，类名前加点，id名前加井号。另外如果找到多个满足条件的元素，默认返回第一个
• querySelectorAll()这个使用方法可以上面一个一样，不过它会找到全部满足条件的元素，并以数组的方式返回它们
• classList属性可以获取到元素的样式类名列表，返回的是一个数组。它完全可以代替以前className的作用。并且使用classList.item[索引值]，可以获取该元素具体的某项类名
• add()方法配合classList可以为元素添加一个类名
• remove()方法配合classList可以为元素移除一个类名
• toggle()方法配合classList可以为元素切换一个类名，有就删除，没有就添加
• contains()方法配合classList可以判断元素中是否有这个类名，返回布尔值

新增自定义属性的操作

• 在h5结构中添加自定义属性规范：
  • 必须是data-开头，且后面至少有一个字符，如果有多个单词用-连接
  • 命名建议：
  • 都应该使用小写
  • 不要带特殊符号
  • 不要是纯数字
• jsDom获取自定义属性值的方法：
  • 元素.dataset[属性名]使用dataset方法，注意这里属性名不包括data-，只写后面的部分。并且不要写-链接，用驼峰式命名法
  • 例如：有一个自定属性data-get-value=xxx，那么在js获取时应该写元素.dataset['getValue']

新增API

网络监听接口

• ononline当网络连接时，触发这个事件
• onoffline当网络断开时，触发这个事件

全屏接口

• 元素.requestFullScreen()让元素全屏显示
• document.cancelFullScreen()退出全屏显示
• document.fullScreenElement判断是否全屏
• 注意事项：退出全屏和判断全屏只能使用document来调用。另外每个浏览器兼容不同，需要加上不同的前缀才能正常识别。谷歌前缀webkit；火狐前缀moz；IE前缀ms；oprea前缀o

FileReader读取文件接口

• 使用下面方法是需要先创建一个读取文件对象，才能调用，new FileReader()
  • readAsText()读取文本文件(只要是能用txt打开的就是文本文件)，并返回文本字符串，默认是UTF-8编码
  • readAsBinaryString()读取任意类型的字符串，返回二进制字符串。因为用户肯定看不懂二进制字符串，所以这个一般是用来存储文件。该方法将文件读取后，把返回的二进制字符发送给服务器存储起来
  • readAsDataURL()读取文件获取一段data开头的字符串，这段字符串本质就是DataUrl。注意：该方法没有返回值，它会把获取的字符编码存储在文件读取对象的result中
    • 什么是DataURL呢？
    • 正常情况下，如果想展示一张图片那么就使用img标签，并在src属性写上图片ulr地址，当页面加载时会向服务区发送请求，加载外部图片到页面后展示。但是这样就涉及到请求的过程，是要占用服务器资源的
    • DataURL就是为了解决这个问题，它会将文件资源(一般是图像或者能够嵌入到文档的文件)，转换为Base64位编码形式的字符串，然后将字符串直接保存在url中，当页面加载时直接就显示了文件资源，省去向服务器发送请求的一步。这样做节省服务器资源占用，提高了网页加载速度和执行效率
    • 很直观的例子就是qq换头像，当你选择头像图片后，并没有点击提交就能直接预览到头像图片
  • abort()直接中断文件的读取
• 读取文件的相关事件
  • onabort读取文件中断时触发
  • onerror读取文件错误时触发
  • onload读取文件完成时触发
  • onloadend读取文件结束时触发，不管是否读取成功
  • onloadstart读取文件开始时触发
  • onprogress读取过程中持续触发
• 文件读取一般都需要一些时间，所以要用异步回调的方式来通知结果

拖拽接口

• 如果想要拖拽某个元素，那么首先要给元素添加draggable="ture"属性才可以。当然图片和超链接默认自带了拖拽属性不用加
  • 拖拽事件：
  • 应用于被拖拽元素：
    • ondrag元素被拖拽的过程中会持续触发
    • ondragstart当元素被拖拽开始的瞬间触发
    • ondragleave当鼠标离开被拖拽元素时触发
    • ondragend当拖拽结束时触发，就是鼠标松开
  • 应用于目标元素：
    • ondragenter当拖拽元素的鼠标进入目标时触发
    • ondragover当拖拽元素的鼠标停留在目标内时触发
    • ondrop当拖拽元素在目标内，鼠标松开时触发，注意这个事件是被浏览器默认禁止的，要在ondragover事件中调用e.preventDefault()方法，阻止默认行为
    • ondragleave当拖拽元素的鼠标离开目标时触发
• 如果只为具体的某个元素注册拖拽事件，那么局限性太大了。为了时拖拽事件能够应用于任何元素，一般是使用document来注册拖拽事件，通过事件对象的target属性来获取具体的事件源对象
• 另外要成功拖拽元素，肯定要在ondrop中把被拖拽的元素追加到目标元素中，就会涉及到被拖拽元素的存取，正常情况下不推荐使用全局变量来存值，这样会有内存泄漏的风险，下面介绍一种事件对象存值的方法：
  • event.dataTransfer.setData("数据类型"，数据)这样就可以把数据存储在事件对象的dataTransfer属性中，然后在再通过event.dataTransfer.getData('数据类型')来获取
  • 这个方法有两个局限性，第一是只能存储字符类型的数据；第二是获取数据只能在ondrop事件中，其他事件中获取不到

地理位置接口

• navigator.geolocation.getCurrentPosition(success,error,position)，使用这个方法就可以调用浏览器获取用户的地理位置，当然需要用户先选择是否允许才可以，下面是对几个参数的解释，这三个参数命名可以自定义：
  • success参数是一个回调函数，当成功获取到地理位置后，就会执行这个回调函数，并将获取的信息以参数的形式传给它，所以该函数需要一个形参来接受，接受到的参数介绍(假如形参变量名是position)：
    • position.coords.latitu纬度
    • position.coords.longitude经度
    • position.coords.accuracy精度
    • position.coords.altitude海拔高度
  • error参数也是一个回调函数，它正好与success相反，当获取地理位置失败会调用这个回调函数，并将失败的类型以参数的形式传给它，参数介绍(假如形参变量名是error):
    • error.PERMISSION_DENIDE用户拒绝共享位置
    • error.POSITION_UNAVAILABLE获取不到位置信息
    • error.TIMEOUT超时
    • error.UNKNOWN_ERROR未知错误
  • option是一个可以选参数，它是一个对象用来设置获取地理位置的方式,参数介绍：
    • enableHighAccuracy:true|false是否使用高精度
    • timeout:xx 设置超时时间毫秒
    • maximumAge:xx 设置获取失败后，浏览器重新获取的间隔时间，毫秒
• 当然因为国情限制，浏览器基本无法获取到地理位置，所有大部分情况下都是使用第三方软件的提供的API，比如百度地图、高德地图等
• 有空多研究以下现成的三方软件地图API，功能强大丰富，只要拿过来稍作修改就能用了

web存储接口

• window.sessionStorage将数据存储到本地，存储空间在5M左右。注意这个方法数据是存储在当前页面内存中，就是说换个浏览器或者换个页面都不能获取到存储的值。它的生命周期也在当前页面，当前页面关闭后数据就自动清除了。所以一般用来存储一些临时的值
  • window.sessionStorage.setItem(键，值)存储数据，以键值对的形式
  • window.sessionStorage.getItem(键)获取值，通过存储值时设置的键来获取，如果获取不存在的值返回空
  • window.seesionStorage.removeItem(键)删除值，通过存储值时设置的键来获取，如果删除不存在的值，不会报错也没有任何操作
  • window.sessionStorage.clear()清空所有存储的值
• window.localStorage同样是将数据存储到本地，存储空间在20M左右。这个方法是将数据存储在硬盘中，同一个浏览器的不同页面可以共享数据，并且该数据只要你不用方法来清除它，那么它是永久存在的。所以一般用来保存一些常用的值
  • window.localStorage.setItem(键，值)存储数据，以键值对的形式
  • window.localStorage.getItem(键)获取值，通过存储值时设置的键来获取，如果获取不存在的值返回空
  • window.localStorage.removeItem(键)删除值，通过存储值时设置的键来获取，如果删除不存在的值，不会报错也没有任何操作
  • window.localStorage.clear()清空所有存储的值
• 应用程序缓存CACHE MAINFEST，如果在浏览网页的时候，突然断网了，你会发现之前打开过的页面还是能继续访问。这就是浏览器的默认缓存，但是它的缺点是不可控，要么页面全部缓存要么就不缓存
  • 为了解决这个问题H5增加了应用程序缓存，要使用它首先得在html标签加上mainfest="缓存清单文件路径"，缓存清单文件建议以.appcache作为扩展名
  • 缓存清单文件书写格式：
    • CACHE MAINFEST第一行必须是这个字段，标记这是一个缓存清单文件
    • CACHE:缓存文件清单列表，在下面写上你想要缓存的文件路径即可，*代表缓存所有文件
    • NETWORK:每次都必须向服务器重新请求的文件，写在这个下面的文件，不能缓存必须每次重新向服务器发送请求加载
    • FALLBACK:这个字段表示找不到的文件用另外的文件来代替，所以写在它下面的是两个为一组，用空格隔开，左边的文件如果找不到就用右边的文件来代替。/表示所有找不到的文件
    • 另外如果服务器是IIS类型的可能会不识别appcache文件格式，需要给其配置MIME-type，即text/cache-mainfest才可以，运行inetmgr快捷打开配置面板
• 关于cookie、storage、session之间的区别现在还不清楚，不过没具体用到也不做过多深入，等用到详细解释