2019-02-28

HTML5

新增加的标签

为了更好的处理今天的互联网，HTML5添加了许多新的元素及功能，比如：图形绘制，多媒体内容，更好的页面结构，更好的形式处理，和几个api拖放元素，定位，包括网页，应用程序缓存，存储网络工作等

canvas

标签	描述
	标签定义图形，比如图表和其他图像。该标签基于JavaScript的绘图api

多媒体

标签	描述
	定义音频
	定义视频
	定义多媒体资源
	定义嵌入内容，比如插件
	为诸如

在h5中增加了语义标签，对浏览器的搜索引擎更加友好，让网页的内容更加容易被被收索引擎抓取，网页的推广会更加容易

标签	描述
	定义页面的侧边栏内容
	定义页面内容之外的内容。
	允许您设置一段文本，使其脱离其父元素的文本方向设置。
	定义命令按钮，比如单选按钮、复选框或按钮
	用于描述文档或文档某个部分的细节
	定义对话框，比如提示框
	标签包含 details 元素的标题
	规定独立的流内容（图像、图表、照片、代码等等）。
	定义元素的标题
	定义 section 或 document 的页脚。
	定义了文档的头部区域
	定义带有记号的文本。
	定义度量衡。仅用于已知最大和最小值的度量。
	定义运行中的进度（进程）。
	定义任何类型的任务的进度。
	定义 ruby 注释（中文注音或字符）。
	定义字符（中文注音或字符）的解释或发音。
	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
	定义文档中的节（section、区段）。
	定义日期或时间。
	规定在文本中的何处适合添加换行符。

<body>
    <header>定义了文档的头部区域</header>
    <div>
        <article>定义页面的侧边栏内容</article>
        <aside>定义页面内容之外的内容</aside>
    </div>
    <footer>定义 section 或 document 的页脚</footer>
</body>

在默认情况下IE8及一下的版本不支持HTML5，引入html5shiv.min.js这个文件就可以解决兼容性的问题

新增的type属性

email: 输入email的格式
tel : 手机号码
url: 只能输入url格式
number: 只能输入数字
search: 搜索框
range: 范围，可以经行拖动，通过value值进行取值
color: 拾色器，通过value经行取值
time: 时间
data: 日期不是绝对的
datatime: 世家日期
month: 月份
week: 星期

<form action="">
    用户名：<input type="text" name="userName"> <br>
    密码：<input type="password" name="userPwd"> <br>
    <!--email提供了默认的电子邮箱的完整验证：要求必须包含@符号，同时必须包含服务器名称，如果不能满足验证，则会阻止当前的数据提交-->
    邮箱：<input type="email"> <br>
    <!--tel它并不是来实现验证。它的本质目的是为了能够在移动端打开数字键盘。意味着数字键盘限制了用户只能输入数字。  如何查看效果：qq发送文件>>手机端使用qq来接收>>使用手机浏览器查看-->
    电话：<input type="tel"> <br>
    <!--验证只能输入合法的网址：必须包含http://-->
    网址：<input type="url"> <br>
    <!--number：只能输入数字(包含小数点)，不能输入其它的字符
    max:最大值
    min:最小值
    value:默认值-->
    数量：<input type="number" value="60" max="100" min="0"> <br>
    <!--search：可以提供更人性化的输入体验-->
    请输入商品名称：<input type="search"> <br>
    <!--range:范围-->
    范围：<input type="range" max="100" min="0" value="50"> <br>
    颜色：<input type="color"> <br>
    <!--日期时间相关-->
    <!--time:时间：时分秒-->
    时间：<input type="time"> <br>
    <!--date：日期：年月日-->
    日期：<input type="date"> <br>
    <!--datetime:大多数浏览器不能支持datetime.用于屏幕阅读器-->
    日期时间：<input type="datetime"><br>
    <!--datetime-local:日期和时间-->
    日期时间：<input type="datetime-local"> <br>
    月份：<input type="month"> <br>
    星期：<input type="week">
    <!--提交-->
    <input type="submit">
</form>

表单新增的属性

placeholder: 占位符
autofocus: 自动获取焦点
autocomplete : 自动完成 on打开 off关闭当前添加autocomplete的属性必须要有name属性
required: 验证条件必须又输入，如果没有输入会阻止当前数据的提交
pattern: 正则表达式验证表单
multiple: 文件上传多选或者多个邮箱地址

<form action="" id="myForm">
    <!--placeholder：提示文本，提示占位-->
    <!--autofocus:自动获取焦点-->
    <!--autocomplete:自动完成：on:打开  off:关闭
    1.必须成功提交过:提交过才会记录
    2.当前添加autocomplete的元素必须有name属性-->
    用户名：<input type="text" name="userName" placeholder="请输入用户名" autofocus autocomplete="on"> <br>
    <!--tel并不会实现验证，仅仅是在移动端能够弹出数字键盘-->
    <!--required:必须输入，如果没有输入则会阻止当前数据提交-->
    <!--pattern:正则表达式验证
    *:代表任意个
    ?:代表0个或1个
    +：代表1个或多个-->
    手机号：<input type="tel" name="userPhone" required pattern="^(\+86)?1\d{10}$"> <br>
    <!--multiple：可以选择多个文件-->
    文件：<input type="file" name="photo" multiple> <br>
    <!--email:有默认验证  在email中，multiple允许输入多个邮箱地址，以逗号分隔-->
    邮箱：<input type="email" name="email" multiple><br>
    
    <!--提交：-->
    <input type="submit"> <br>
</form>
<!--下面这个表单元素并没有包含在form中：默认情况下面表单元素的数据不会进行提交-->
<!--form:指定表单id,那么在将来指定id号的表单进行数据提交的时候，也会将当前表单元素的数据一起提交-->
地址：<input type="text" name="address" form="myForm">

在下拉菜单中不仅要可以选择，还要可以输入，通过datalist标签创建选择列表，通过list的id建立输入框与datalist的关联

<!--不仅可以选择，还应该可以输入-->
   <!--建立输入框与datalist的关联  list="datalist的id号"-->
   专业：<input type="text" list="subjects"> <br>
   <!--通过datalist创建选择列表-->
   <datalist id="subjects">
       <!--创建选项值：value:具体的值 label:提示信息，辅助值-->
       <!--option可以是单标签也可以是双标签-->
       <option value="英语" label="不会"/>
       <option value="前端与移动开发" label="前景非常好"></option>
       <option value="java" label="使用人数多"></option>
       <option value="javascript" label="做特效"></option>
       <option value="c" label="不知道"></option>
   </datalist>

多媒体

<!--embed:可以直接插入音频视频，本质是通过本机安装的音频视频播放软件来播放的。要求必须已经安装了这些软件  兼容性-->

<!--flash:  1.先学习flash,增加使用成本  2.iphone,ipd,不支持flash-->

<!--audio:音频-->
<!--
src:播放文件的路径
controls:音频播放器的控制器面板
autoplay:自动播放
loop:循环播放-->
<!--<audio src="../mp3/aa.mp3" controls></audio>-->

<!--video：视频-->
<!--
src:播放文件的路径
controls:音频播放器的控制器面板
autoplay:自动播放
loop:循环播放
poster:指定视频还没有完全下载完毕，或者用户没有点击播放前显示的封面。 默认显示当前视频文件的第一副图像
width:视频的宽度
height:视频的高度
-->
<!--注意事项：视频始终会保持原始的宽高比。意味着如果你同时设置宽高，并不是真正的将视频的画面大小设置为指定的大小，而只是将视频的占据区域设置为指定大小，除非你设置的宽高刚好就是原始的宽高比例。所以建议：在设置视频宽高的时候，一般只会设置宽度或者高度，让视频文件自动缩放-->
<!--<video src="../mp3/mp4.mp4" poster="../images/l1.jpg" controls  height="600"></video>-->

<!--source:因为不同的浏览器所支持的视频格式不一样，为了保证用户能够看到视频，我们可以提供多个视频文件让浏览器自动选择-->
<!--<video src="../mp3/flv.flv" controls></video>-->
<video controls>
    <!--视频源，可以有多个源-->
    <source src="../mp3/flv.flv" type="video/flv">
    <source src="../mp3/mp4.mp4" type="video/mp4">
</video>

HTML5中的API

FileReader的使用

FileReader: 读取文件内容

readAsText() : 读取文本文件(可以使用Txt打开的文件)，返回文本时字符串，默认编码为utf-8
readAsBinaryString() :读取任意类型文件。返回二进制字符串。这个方法不是用来读取文件展示给用户看，而是用开读取文件。例如：读取文件类容，获取二进制数据，传递后台，后台接收数据之后在将数据存储。
readAsDataURL(): 读取文件获取一串以data开头的字符串
abort(): 中断读取

FileReader提供一个完整的时间模型，用来捕获读取文件时的状态

onabort : 读取文件中断片时触发
onerror : 读取文件错误时触发
onload : 文件读取成功完成时触发
onloadend : 读取完成时触发，无论读取成功还是失败都触发
onloadstart : 读取开始时触发
onprogress :读取文件过程中持续触发

拖拽接口的使用

在HTML5中，如果想拖拽元素，就必须为元素添加draggable=’true’. 图片和超链接默认可以拖拽

用于被拖拽元素的事件
- ondrag 应用于拖拽元素，整个托的过程都会持续调用
- ondragstart 应用于拖拽元素，当拖拽开始时调用
- ondragleave 应用于拖拽元素，当鼠标离开拖拽元素的时候调用
- ondragend 应用于拖拽元素，当拖拽结束时调用
应用于目标元素的事件
- ondragenter 应用于目标元素，当拖拽元素进入时调用
- ondragover 应用于目标元素，当停留在目标元素上时调用
- ondrop 应用于目标元素，当在鼠标元素上松开鼠标的时候调用浏览器会默认阻止ondrop事件，必须在ondragover事件中阻止浏览器默认行为 e.preventDefalut();
- ondragleave 应用于目标元素，当鼠标离开目标元素的时候调用

为了能够让多个元素能够被拖拽，应该通过事件捕获来获取当前被拖拽的子元素，给document注册事件通过事件捕获来过去要拖拽的元素.通过dataTransfer来实现数据的存储与获取

* setData(format,data):

* format:数据的类型：text/html text/uri-list

* Data:数据:一般来说是字符串值

sessionStorge的使用

sessionStorge的使用：存储数据到本地。存储的容量5MB左右。

这个数据本质是存储在当前页面的内存中-意味着其他页面和浏览器无法获取到数据
它的生命周期为关闭当前页面，关闭页面，数据会自动清除

setItem(key,value) : 存储数据以键值对的方式存储
getItem(key) : 获取数据，通过指定名称的key获取对应的value的值
removeItem(key) : 删除数据，通过指定名称的key删除对应的value的值
clean() : 清空所有的存储内容

localStorage 的使用

localStorage的使用：

存储内容大概为20MB
不同浏览器不能共享数据。但在同一个浏览器的不同窗中可以共享数据
永久生效，它的数据存储在硬盘上，并不会随着浏览器或者页面的关闭而清除，如果想清除，必须要手动清除

setItem(key,value) : 存储数据以键值对的方式存储
getItem(key) : 获取数据，通过指定名称的key获取对应的value的值
removeItem(key) : 删除数据，通过指定名称的key删除对应的value的值
clean() : 清空所有的存储内容

本文标题:HTML5

文章作者:Super Deng

发布时间:2019-02-28, 18:04:03

最后更新:2019-03-02, 21:50:55

原始链接:http://yoursite.com/2019/02/28/HTML5/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。