内容
学习目标
1 . html5 新增标签和属性。
2 . css3 新增的样式。
3 . 案例练习。
(H5+C3知识点比较零散独立，通过案例练习来巩固。)
HTML5简介
什么是html5?为什么要学习html5？
1 . H5并不是新的语言，而是html语言的第五次重大修改--版本。
2 . 支持：所有的主流浏览器都支持h5. (chrome,firefox, safari...)。IE9及以上支持h5,但是ie8及以下不支持h5。
3 . 改变了用户与文档的交互方式：多媒体: video audio canvas
html5之前，如果想在浏览器中播放视频或音频，则需要使用flash插件，但是IOS系统不支持flash插件。html5引用了多媒体标签，如video、audio等，直接可以通过使用html标签就可以播放视频或者音频了，非常方便。
4 . 增加了其它的新特性：语义特性，本地存储特性，网页多媒体，二维三维，特效（过渡，动画)
5 . 对html4的改善
1 . 进步：抛弃了一些不合理不常用的标签和属性。
2 . 新增了一些标签和属性--表单。
3 . 从代码角度而言，h5的网页结构代码更简洁。
新语义标签
语义标签：即通过标签名就能明确知道它有什么内容，有什么作用。
HTML5新标签查看地址：www.w3cschool.cn/html5_refer…
HTML4.01
- 语义标签
p标签: 段落
img标签:图片
...等等。 - 语义性不强的:
div:- 作为容器存在
- 在网站布局中使用广泛
- 搜索引擎友好，但是搜索引擎更友好的依旧是内容
- 作为容器存在
HTML5
HTML5中有部分语义标签，在使用时十分简单，但是由于语义性更强，更利于开发者以及搜索引擎对于网页的理解。
注意：header、footer并不是只能用来表示整个网页的头部和脚部，而是可以用来表示网页中任何一个区域的头部和脚部，可以重复使用多次。
HTML5中 语义标签的本质和div标签一样，但是具有明确的语义。
示例：html5语义标签的基本使用。
新语义标签兼容性
html5语义标签的兼容性处理:
IE9及以上浏览器 部分支持 html5语义标签。
IE8及以下浏览器 完全不支持 html5语义标签。它不认识语义标签，所以无法解析这些标签，也就意味着所写的样式也无效。
html5shiv.min.js插件：在默认情况下，IE8及以下的IE版本不支持HTML5，引入这个文件就可以做到兼容。
表单新增的type属性
HTML5中type属性的新类型：color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url。
type="email"
提供了默认的电子邮箱的完整验证：要求必须包含@符号，同时必须包含服务器名称，如果不能满足验证，则会阻止当前的表单提交。
type="tel"
它并不能用来验证电话号码。 它的本质目的是为了能够在移动端打开数字键盘。意味着数字键盘限制了用户只能输入数字。
type="url"
验证只能输入合法的网址:必须包含http://。
type="number"
只能输入数字（包含小数点），不能输入其它字符（如a-z，A-Z等）。
max：最大值
min：最小值
value：默认值
type="search"
可以提供更人性化的输入体验：提供了删除按钮，可以快速删除已经输入的内容。
type="range"
范围。
max：最大值
min：最小值
value：默认值
type="color"
颜色。
type="time"
时间：时分秒。
type="date"
日期：年月日。
type="datetime"
日期时间。
注意：大多数浏览器不能支持datetime，只能苹果下面的safari支持。
type="datetime-local"
日期时间。
type="month"
月份。
type="week"
星期。
表单新增的其它属性
placehoder属性
为输入框设置提示文本。
autofocus属性
自动获取焦点。
autocomplete属性
自动完成：即输入字符时，会显示一个曾经提交过的输入内容的可选列表。
on：打开
off：关闭
前提：
1 . 必须成功提交过：成功提交过才会记录下来。
2 . 当前添加autocomplete的元素必须有name属性。
示例：
用户名：<input type="text" placeholder="请输入用户名" autofocus="autofocus" autocomplete="on" name="username">
<input type="submit">
required属性
required：必须输入，如果没有输入则会阻止当前数据提交。
pattern属性
pattern：正则表达式验证。
示例：
手机号：<input type="tel" required="required" pattern="^(\+86)?1\d{10}$">
<input type="submit">
multiple属性
1 . type="file"时，可以选择多个文件。按住Ctrl键，可以选择多个文件。
2 . type="email"时，可以输入多个邮箱，但要以逗号分隔。
form属性
值为form标签的id属性值。
作用：某个表单项即使不是包裹在该id值的form标签中，也会被该form表单提交。
适用场合：某个表单项因为页面布局的需求，不能包裹在某个form标签中，但又希望它被该form表单提交。
示例效果：
1 . 默认情况下，id为info的表单只会提交它包裹的表单项：用户名、手机号、文件。
2 . 但是地址项设置了form属性，值为info，所以地址项也就指定为id为info的表单中的一员，需要同时提交，即使它没有被包裹。
<form action="" method="" id="info">
用户名：<input type="text" placeholder="请输入用户名" autofocus="autofocus" autocomplete="on" name="username">
手机号：<input type="tel" required="required" pattern="^(\+86)?1\d{10}$" name="phone">
文件：<input type="file" multiple="multiple" name="file" />
<input type="submit" value="提交">
</form>
地址：<input type="text" name="address" form="info" id="" value="" />
表单新增元素 datalist（了解即可）
使用的不多，了解即可。
作用：datalist为某个表单项提供一个下拉可选列表。
将表单项list属性的值设置为datalist标签的id属性值，就可以将表单项和下拉列表关联起来。
缺点：其它浏览器支持不好，所以在实际开发中使用较少。
示例：
效果：输入框不仅可以输入内容，还可以点击右侧的下拉按钮，选择下拉列表中的选项。
<!-- 输入框 -->
专业：<input type="text" list="info" name="skill" />
<!-- 下拉列表 -->
<datalist id="info">
<!-- 选项值: value: 具体的值 label: 提示信息，辅助值 -->
<option value="前端与移动开发" label="前景非常好"></option>
<option value="java" label="使用人数多"></option>
<option value="javasEript" label="做特效"></option>
<option value="c" label="不知道"></option>
</datalist>
表单新增元素 keygen、output（了解即可）
keygen元素是密钥对生成器（key-pair generator)。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥(private key）存储于客户端，公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)，即实现非对称加密。目前，浏览器支持率极低。 使用频率:低
output 属于新的语义标签:用来放置输出的内容,但是不能自动的计算结果,依旧需要通过js的方式来动态修改结果,只是相比于其他的标签，语义性更强。 使用频率:低
新增的表单事件
1 . oninput事件
表单项的内容变化时，就会触发。
2 . oninvalid事件
验证不通过时触发。
进度条标签
1 . progerss标签
进度条。
常用属性：
max：最大值
value：当前值
示例：
<progress max="100" value="70"></progress>
2 . meter标签
度量器。
度量器：衡量当前进度值。
常用属性：
high：规定的较高的值
low：规定的较低的值
max：最大值
min：最小值
示例：
<meter max="100" min="0" high="80" low="40" value="30"></meter>
<meter max="100" min="0" high="80" low="40" value="60"></meter>
<meter max="100" min="0" high="80" low="40" value="90"></meter>
表单练习案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="form.css"/>
</head>
<body>
<form action="" method="post">
<fieldset id="">
<legend>学生档案</legend>
<label for="username">姓名：</label>
<input type="text" name="username" id="username" placeholder="请输入用户名" required />
<label for="phone">手机号码：</label>
<input type="tel" name="phone" id="phone" pattern="^1\d{10}$" required/>
<label for="email">邮箱地址：</label>
<input type="email" name="email" id="email" required />
<label for="college">所属学院：</label>
<input type="text" name="college" id="college" list="colleges" placeholder="请选择" />
<datalist id="colleges">
<option value ="Java学院"></option>
<option value ="JavaScript学院"></option>
<option value ="C学院"></option>
<option value ="大数据学院"></option>
</datalist>
<label for="score">入学成绩：</label>
<input type="number" name="score" id="score" max="100" min="0" value="0" required/>
<label for="level">基础水平：</label>
<meter id="level" max="100" min="0" low="60" high="90"></meter>
<label for="date">入学日期：</label>
<input type="date" name="date" id="date" required />
<label for="finishedDate">毕业日期：</label>
<input type="date" name="finishedDate" id="finishedDate" required />
<input type="submit" value="提交"/>
</fieldset>
</form>
<script type="text/javascript">
//入学成绩决定基础水平高低
document.getElementById("score").oninput = function(){
document.getElementById("level").value = this.value
}
</script>
</body>
</html>
*{
margin: 0;
padding: 0;
}
form{
margin: 20px auto;
width: 600px;
}
form > fieldset{
padding: 10px;
}
form > fieldset > meter,
form > fieldset > input {
box-sizing: border-box; /*width=content+padding+border*/
margin: 10px 0;
padding-left: 5px;
width: 100%;
height: 40px;
line-height: 40px;
border: none;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}
form > fieldset > meter{
padding-left: 0;
}
音频、视频
html5新增了两个多媒体标签：
- video：视频
- audio：音频
html5之前，页面播放视频、音频有两种方式：
1 . embed
直接插入视频文件：它的本质是调用本机上已经安装的软件。
缺点：有兼容性问题。
2 . flash插件
缺点：
0 . 需要安装。
1 . 需要学习如何使用flash，增加学习成本。
2 . 苹果设备不支持flash。
audio标签
常用属性：
src：播放的音频文件的路径
controls：音频播放器的控制器面板
（注意：设置了该属性，才会显示控制面板。）
autoplay：自动播放
loop：循环
示例：页面中播放音频。
<audio src="./src/1.wav" controls autoplay loop>
当前浏览器不支持audio
</audio>
video标签
常用属性：
src：播放的音频文件的路径
controls：音频播放器的控制器面板
autoplay：自动播放
loop：循环
width：宽度
height：高度
poster：当视频还没有完全下载，或者用户还没有点击播放前的默认显示的封面。默认显示当前视频文件的第一帧画面。
source：因为不同浏览器支持的视频文件格式不一样，所以我们在进行视频添加的时候，需要考虑到浏览器是否支持。我们可以准备多个格式的视频文件，让浏览器自动的选择。
注意：
1 . 当设置宽高的时候，一般情况下只会设置其中一个，让另一个自动的等比缩放。如果同时设置宽度和高度，那么视频并不会真正的调整到设置的宽高，除非设置的值刚好是等比例的!
2 . 不同的浏览器支持的视频的格式是不一样的。
示例：页面播放视频。
<video width="800" controls poster="./src/game.png" >
<source src="./src/test.mp4" type="video/mp4"></source>
<source src="./src/test.flv" type="video/flv"></source>
当前浏览器不支持 video直接播放
</video>
结果：视频无法显示和播放，这是为什么？？？
案例：自定义播放器。 ★★★
界面说明
要求：
1 播放器在不同浏览器中的外观保持一样。
2 实现以下功能点：
_ 播放/暂停
_ 显示 播放时长/总时长
_ 显示 加载进度/播放进度/总进度
_ 全屏
_ 点击进度条，可以跳转到点击位置进行播放。
_ 播放结束后，恢复原始状态。
接口说明
使用到哪些接口？
1 jquery
2 video标签 常用的属性、方法、事件 HTML 音频/视频
3 阿里巴巴矢量图标库
video标签 常用的属性、方法、事件：
1 . 常用方法: load()加载、play()播放、pause()暂停。
jquery没有提供对视频播放控件的方式，也就意味着如果要操作视频播放，必须使用原生的js方法。jquery对象转换为dom元素。
2 . 常用属性︰
a) currentTime 视频播放的当前进度
b) duration 视频的总时间100000/60
c) paused 视频播放的状态
3 . 常用事件:
a) oncanplay 事件在用户可以开始播放视频/音频( audio/video )时触发。
b) ontimeupdate 通过该事件来报告当前的播放进度。
c) onended 播放完时触发—重置。
具体编码
1 . 搭建页面结构。
2 . 实现功能。
细节：
1 . oncanplay事件只会在第一次打开页面时触发，而点击刷新页面按钮，不会再次触发。
2 . 播放视频时，只有声音没有图像。
有部分原因是视频的编码不正确，在mp4格式的视频中，只支持h.264的视频。
3 . 修改currentTime值，也会触发视频ontimeupdate事件。说白了，只要currenTime值变化，就会触发ontimeupdate事件。
4 . 编辑器打开页面时，视频的播放可能受到编辑器影响，而出现一些问题，无法实现预期效果。建议：直接到文件夹中，右键打开html文件，进行效果查看。
代码截图
//html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./fonts/iconfont.css"/>
<link rel="stylesheet" type="text/css" href="./index.css"/>
</head>
<body>
<h3 class="playerTitle">视频播放器</h3>
<div class="player_box">
<video src="./media/hh.mp4"></video>
<div class="controls_box">
<a href="javascript:;" class="switch iconfont icon-bofang1" ></a>
<a href="javascript:;" class="expand iconfont icon-quanping" ></a>
<div class="progress">
<div class="bar"></div>
<div class="loaded"></div>
<div class="elapse"></div>
</div>
<div class="time">
<div class="currentTime">00:00:00</div>/<div class="totalTime">00:00:00</div>
</div>
</div>
</div>
</body>
</html>
//css部分
a {
text-decoration: none;
}
.playerTitle{
text-align: center;
font-size: 40px;
}
.player_box{
box-sizing: border-box;
position: relative;
margin: 0 auto;
padding: 10px;
width: 720px;
height: 360px;
background: #000 url("./imgs/loading.gif") center center no-repeat;
}
video{
display: none;
margin: 0 auto;
height: 100%;
}
.controls_box{
position: absolute;
left: 0;
bottom: -40px;
width: 720px;
height: 40px;
background-color: #000;
}
.controls_box .switch{
display: block;
position: absolute;
left: 10px;
top: 10px;
width: 20px;
height: 20px;
font-size: 20px;
color: #fff;
}
.controls_box .expand{
display: block;
position: absolute;
right: 10px;
top: 10px;
width: 20px;
height: 20px;
font-size: 20px;
color: #fff;
}
.controls_box .progress{
position: absolute;
left: 40px;
bottom: 15px;
width: 430px;
height: 10px;
background-color: #555;
}
.controls_box .progress .bar{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 999;
opacity: 0;
cursor: pointer;
border-radius: 3px;
}
.controls_box .progress .loaded{
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 60%;
height: 100%;
border-radius: 0 3px 3px 0;
background-color: #999;
}
.controls_box .progress .elapse{
position: absolute;
left: 0;
top: 0;
z-index: 3;
width: 10px;
height: 100%;
border-radius: 0 3px 3px 0;
background-color: #fff;
}
.controls_box .time{
position: absolute;
left: 490px;
top: 10px;
height: 20px;
color: #fff;
font-size: 14px;
}
.currentTime, .totalTime{
display: inline-block;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
/* 通过jquery来实现功能 */
$(function(){
//播放器
let video = $('video')[0] //jquery对象转换为dom元素
//2 播放/暂停
$('.switch').click(function(){
//切换播放/暂停
if(video.paused){
video.play()
}else{
video.pause()
}
// 更新样式
$(this).toggleClass('icon-bofang1 icon-bofang')
})
// 3 全屏
$('.expand').click(function(){
//判断当前是否是全屏状态
let isFullScreen = document.fullscreenElement
if(!isFullScreen) {
if(video.requestFullscreen){
video.requestFullscreen()
}else if(video.webkitRequestFullscreen){
video.webkitRequestFullscreen()
}else if(video.mozRequestFullscreen){
video.mozRequestFullscreen()
}else if(video.msRequestFullscreen){
video.msRequestFullscreen()
}
}else{
if(document.cancelFullScreen){
document.cancelFullScreen()
}else if(document.webkitCancelFullScreen){
document.webkitCancelFullScreen()
}else if(document.mozCancelFullScreen){
document.mozCancelFullScreen()
}else if(document.msCancelFullScreen){
document.msCancelFullScreen()
}
}
/* 更新样式*/
$(this).toggleClass('icon-quanping icon-quxiaoquanping')
})
//4 播放视频
video.oncanplay = function(){
setTimeout(function(){
//视频 可播放事件oncanplay 触发时，显示播放器
video.style.display = "block"
//获取视频总时长，单位为s，包含小数值
let total = video.duration
let hms = getHMS(total)
//将视频时长渲染到页面
$('.totalTime').html(hms.hour+':'+hms.minute+':'+hms.second)
}, 2000)
}
//封装一个方法：通过 总时长 计算出 时、分、秒。
function getHMS(total){
//计算时分秒
let hour = Math.floor(total/3600)
let minute = Math.floor(total%3600/60)
let second = Math.floor(total%60)
//补0
hour = hour<10 ? '0'+hour : hour
minute = minute<10 ? '0'+minute : minute
second = second<10 ? '0'+second : second
return {
hour,
minute,
second
}
}
//5 视频播放时
video.ontimeupdate = function(){
//1.获取当前播放时间
let currentTime = video.currentTime
//2.计算时分秒
let hms = getHMS(currentTime)
//3.显示到页面上
$('.currentTime').html(hms.hour+':'+hms.minute+':'+hms.second)
//4.设置播放进度条样式
let percent = (video.currentTime/video.duration)*100 + '%'
$('.elapse').css("width", percent)
}
//6 实现视频的跳播
$('.bar').click(function(e){
//1.获取当前鼠标相对于父元素的left值--偏移值
let offset = e.offsetX
//2.计算 偏移值 相对总父元素总宽度的比例
let percent = offset/$(this).width()
//3.计算这个位置对应的视频进度值
let current = percent * video.duration
//4.设置当前商品的currentTime
video.currentTime = current
})
//7 播放结束后，重置播放器的样式
video.onended = function(){
video.currentTime = 0
// 更新播放按钮样式
//$('.switch').removeclass('icon-bofang1').addClass('icon-bofang')
$('.switch').toggleClass('icon-bofang1 icon-bofang')
//更新播放进度条样式
}
})
</script>
效果：
小结
1 使用到了比较多的jQuery方法和video标签相关的方法，需要去了解相关方法的作用和使用，实现起来才会有思路，才能比较顺手。
获取dom元素
html5新增了一些新的方法，更方便、更准确地来获取dom元素。
1 . querySelector()
参数：css选择器字符串。
返回值：返回匹配的第一个dom元素。
2 . querySelectorAll()
参数：css选择器字符串。
返回值：返回一个数组，包含匹配的所有dom元素。
注意：这两个方法都需要通过document对象来调用。
操作元素类样式
html5 还新增了一些操作元素类样式的新方法。
注意：这些方法都需要通过classList对象来调用，只能操作类样式。
1 . add()
为元素添加一个类样式。
classList：一个数组，包含了当前元素所有的类名。
1 add()方法需要通过dom元素的classList对象来调用。
2 add()方法一次只能添加一个类名，如果想添加多个类样式，则需要执行多次。
2 . remove()
remove：为元素移除指定名称的样式，一次也只能移除一个。
3 . toggle()
切换元素的类样式。有则移出，没有则添加。
4 . contains()
判断元素是否包含指定名称的类样式，返回true/false。
5 . item()
根据索引获取classList数组中的类样式。返回类样式的名字。
示例：
document.querySelector('li').classList.add('red')
document.querySelector('.blue').classList.remove('blue')
document.querySelectorAll('li')[2].classList.toggle('underline')
document.querySelectorAll('li')[3].classList.contains('yellow')
document.querySelectorAll('li')[3].classList.item(0)
自定义属性
如何为一个标签自定义属性？如何取值？
1 定义
规范：
1.data-开头
2.data-后必须至少有一个字符，若有多个单词则使用-连接
建议：
1.名称应该都使用小写--不要包含任何的大写字符
2.名称中不要有任何的特殊符号
3.名称不要使用纯数字
2 取值
dataset属性：一个数组，包含了自定义属性。
必须将data-后面的单词使用camel命名法连接来获取数组中的某个自定义属性的值。
示例：
//自定义属性 data-info-id
<p data-info-id="101">哈哈哈</p>
//取值 dataset 骆驼命名法
let res = document.querySelector('p').dataset['infoId']
console.log(res) //101
</html>
网络监听接口
html5中不仅新增了一些标签、属性、方法，还新增了一些接口，如下：
- 了解 网络状态改变事件
- 使用 全屏API 实现 元素全屏效果
- 使用 文件读取接口 实现 文件读取预览效果
- 使用 拖拽接口 实现 常见拖拽效果
- 使用 地理定位接口 获 取用户位置信息
- 使用 web存储接口 实现数据的读写
- 了解 应用缓存接口
- 使用 多媒体接口 实现 自定义播放器
1 . online
网络连通的时候触发这个事件。
2 . onoffline
网络断开时触发。
注意：
1 这两个事件与页面元素无关，而是window对象上的事件。
示例：
window.addEventListener("online", function(){
console.log("online")
})
window.addEventListener("onoffline", function(){
console.log("onoffline")
})
全屏接口
1 . requestFullScreen()
开启全屏显示。
注意事项：
1 不同的浏览器需要添加不同的前缀。
chrome：webkit
firefox：moz
ie：ms
opera：o
2 . cancelFullScreen()
退出全屏显示。
注意事项：
1 不同的浏览器也需要添加不同的前缀。
2 只能由document对象来调用。
3 . fullscreenElement
是否是全屏状态。
注意事项：
1 不同的浏览器也需要添加不同的前缀。
2 该属性只存在于document对象上。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
margin: 0 auto;
width: 1000px;
}
img{
margin-bottom: 50px;
width: 1000px;
}
</style>
</head>
<body>
<div>
<img src="./imgs/bg.png" >
<input type="button" id="full" value="全屏">
<input type="button" id="cancelfull" value="退出全屏">
<input type="button" id="isfull" value="是否是全屏">
</div>
<script type="text/javascript">
window.onload = function(){
let div = document.querySelector('div')
//全屏
document.querySelector('#full').onclick = function(){
if(div.requestFullscreen){
div.requestFullscreen()
}else if(div.webkitRequestFullscreen){
div.webkitRequestFullscreen()
}else if(div.mozRequestFullscreen){
div.mozRequestFullscreen()
}else if(div.msRequestFullscreen){
div.msRequestFullscreen()
}else if(div.oRequestFullscreen){
div.oRequestFullscreen()
}
}
//退出全屏
document.querySelector('#cancelfull').onclick = function(){
if(document.cancelFullScreen){
document.cancelFullScreen()
}else if(document.webkitCancelFullScreen){
document.webkitCancelFullScreen()
}else if(document.mozCancelFullScreen){
document.mozCancelFullScreen()
}else if(document.msCancelFullScreen){
document.msCancelFullScreen()
}else if(document.oCancelFullScreen){
document.oCancelFullScreen()
}
}
//是否是全屏
document.querySelector('#isfull').onclick = function(){
if(document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement){
alert('true')
}else{
alert('false')
}
}
}
</script>
</body>
</html>
文件读取 FileReader
FileReader：读取文件内容。
FileReader提供一个完整的事件模型，用来捕获读取文件时的状态。
_ onabort：读取文件中断片时触发。
_ onerror：读取错误时触发。
_ onload：支件读取成功完成时触发。
_ onloadend：读取完成时触发，无论成功还是失败。
_ onloadstart：开始读取时触发。
_ onprogress：读取文件过程中持续触发。
1 . readAsText()
读取文本文件(可以使用Txt打开的文件)，返回文本字符串，默认编码是UTF-8。
2 . readAsBinaryString()
读取任意类型的文件。返回二进制字符串。
注意：
这个方法不是用来读取文件展示给用户看，而是存储文件。例如：读取文件的内容，获取二进制数据，传递给后台，后台接收了数据之后，再将数据存储起来。
3 . readAsDataURL()
读取文件，获取一段以data开头的字符串，这段字符串的本质就是DataUrl。
DataURL是一种将文件(一般就是指图像或者能够嵌入到文档的文件格式)嵌入到文档的方案。
DataURL是将资源(如图片)转换为base64编码的字符串，并且将这些内容直接存储在url中。
img标签src属性一般为资源的存储路径，但也可以是资源的DataURL字符串，后者可以减少对后台服务器的请求数量。
注意事项：
1 readAsDataURL()没有返回值，但是它会将读取的结果存储在文件读取对象的result属性中。
2 readAsDataURL()需要传入一个参数：binary large object文件(一般是图片或者其它可以嵌入到文档的类型)。
4 . abort()
中断读取。
示例：
需求：即时预览。当用户选择了文件后，能预览选中的文件。
即时：当用户选择完图片之后就立刻进行预览的处理 onchage事件。
预览：通过文件读取对象的readAsDataURL()完成。
input标签
change事件：选中文件时触发。
files属性：input dom对象上的一个属性，数组类型，保存了所有选中的文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 需求：即时预览 -->
<form action="" method="">
文件：<input type="file" id="upfile" name="upfile" onchange="handleUpFile()"> <br>
<input type="submit" value="提交" />
</form>
<img src="" >
<script type="text/javascript">
function handleUpFile(){
//1.创建文件读取对象
let reader = new FileReader()
//2.读取文件，获取DataURL
let files = document.querySelector('#upfile').files
reader.readAsDataURL(files[0])
reader.onload = function(){
console.log(reader.result)
document.querySelector('img').src = reader.result
}
}
</script>
</body>
</html>
拖拽接口
1 拖拽属性 draggable
在h5中，如果想拖拽元素，就必须为元素添加draggable="true"。图片和超链接默认就可以拖拽。
2 拖拽事件
学习拖拽，主要就是学习拖拽事件。拖拽事件可以分为以下两类：
1 应用于被拖拽元素的事件。
_ ondrag 应用于拖拽元素，整个拖拽过程都会调用（拖拽过程中会持续触发）。
_ ondragstart 应用于拖拽元素，当拖拽开始时调用。
_ ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用。
_ ondragend 应用于拖拽元素，当拖拽结束时调用。
2 应用于目标元素的事件。
_ ondragenter 应用于目标元素，鼠标进入目标元素时调用。
_ ondragover 应用于目标元素，当鼠标停留在目标元素上时调用（持续触发）。
_ ondrop 应用于目标元素，当在目标元素上松开鼠标时调用。
_ ondragleave 应用于目标元素，当鼠标离开目标元素时调用。
注意：
1 浏览器默认会阻止ondrop事件。那么如何开启ondrop事件呢？我们必须在ondragover中阻止浏览器的默认行为：在ondragover回调函数中执行e.preventDefault()方法。
2 如果想监听页面上所有元素的拖拽事件，则可以通过document对象来调用拖拽事件。
此时，如何才能知道当前拖拽的是哪个元素呢？e.target 表示当前发生事件的元素。
3 通过dataTransfer来实现数据的存储与获取。
为什么要使用dataTransfer？
使用 全局变量 来存储 当前拖拽元素 时，因为全局变量会在内存中常驻，如果全局变量定义太多，则存在内存泄漏风险。
那么，存储在哪里比较好呢？
事件源对象e上有一个属性dataTransfer，可以用来存储数据。
dataTransfer对象有两个方法：setData()、getData()，分别用来添加数据、获取数据。
3.1 setData()
参数1：format 表示数据的类型。
参数2：data 表示数据。
format有两种取值：
_ text/html
_ text/uri-list
data 一般只能是字符串。
3.2 getData()
注意：通过e.dataTransfer.setData存储的数据，只能在ondrop事件中获取。
3 练习案例
需求：
1 可以将语句从左侧盒子拖拽到右侧盒子。
2 可以拖拽任何元素到任何目标元素中。
3 避免定义全局变量，避免内存泄漏。
<div class="box1" id="box1">
<p class="p1" id="1" draggable="true">商品1</p>
<p class="p1" id="2" draggable="true">商品2</p>
<p class="p1" id="3" draggable="true">商品3</p>
<p class="p1" id="4" draggable="true">商品4</p>
</div>
<div class="box2" id="box2"></div>
<div class="box3" id="box3"></div>
<div class="box4" id="box4"></div>
//被拖拽元素
document.ondragstart = function(e){
//存储 当前拖拽元素的id属性值
e.dataTransfer.setData("text/html", e.target.id)
e.target.style.opacity = 0.5
}
document.ondragend = function(e){
e.target.style.opacity = 1
}
//目标元素
document.ondrop = function(e){
//获取 当前拖拽元素的id属性值
let id = e.dataTransfer.getData("text/html")
//根据id值，获取当前拖拽元素
e.target.appendChild(document.getElementById(id))
}
document.ondragover = function(e){
//阻止浏览器默认行为，启用ondrog事件。
e.preventDefault()
}
地理定位接口
在HTML规范中，增加了获取用户地理信息的APl，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务(LocationBase Service)。
获取位置的方式
表1.位置信息获取方式对比。
| 数据源 | 优点 | 缺点 |
|---|---|---|
| IP地址 | 任何地方都可用 在服务器瑞处理 | 不精确（经常出错，一般精确到城市级）运算代价大 |
| GPS | 很精确 | 定位时间长，耗电量大，室内效果差 需要额外硬件支持 |
| WiFi | 精确 可在室内使用 简单、快捷 | 在乡村这些wifi接入点少的地区无法使用 |
| 手机信号 | 相当精确 可在室内使用 简单、快捷 | 需要能够访问手机或其moderm设备 |
| 用户自定义 | 可获得比程序定位服务更精确的位置数据 用户自行输入可能比自动检查更快 | 可能很不准确，特别是当用户位置变更后 |
安全性
语义地理位置属于私密信息,所以浏览器会弹出提示框,在征得用户允许的情况下再获取位置。
浏览器如何设置是否允许访问位置信息？
浏览器 / 设置 / 安全检查 / 网站设置 / 位置信息
注意：
1 在PC端，页面是无法获取地理位置信息的，只能在移动端获取。
2 浏览器默认是不能获取地理位置信息的。 PC端浏览器中，即使是执行了getCurrentPosition()方法，一般也是无法获取地理位置信息的，但是可以使用第三方接口来获取地理位置信息，如百度地图等。
地理位置信息API
getCurrentPosition()
navigator.geolocation
navigator.geolocation.getCurrentPosition(success, error, option)
参数：
_ success 获取地理信息成功后的回调。
_ error 获取地理信息失败后的回调。
_ option 获取地理信息的方式。
successCallback
有一个默认传入的参数 position，一个包含位置信息的对象。
_ positioh.coords.latitude 纬度
_ position.coords.longitude 经度
_ position.coords.accuracy 精度
_ position.coords.altitude 海拔高度
errorCallBack
有一个默认传入的参数 error，一个包含错误信息的对象。
error.code
获取地理位置信息 失败时 的常见类型、提示信息：
error.PERMISSION_DENIED User denied the request for Geolocation. error.POSITION_UNAVAILABLE Location information is unavailable. error.TIMEOUT The request to get user location timed out. error.UNKNOWN.ERROR An unknown error occurred.
option
可设置的选项：
enableHighAccuracy：true/false 是否使用高精度。
timeout：设置超时时间，单位ms。
maximumAge：可以设置浏览器重新获取地理信息的时间间隔，单位是ms。
如何使用第三方的地图接口？
百度地图开放平台
lbsyun.baidu.com/
Web开发 JavaScript API
lbsyun.baidu.com/index.php?t…
老师的密钥，可以拿来使用。
DarF2LCCGzn6T16zgy8ZPkvYYE5CT6fu
申请密钥 才能免费使用百度地图的接口。
百度地图 demo lbsyun.baidu.com/index.php?t…
复制 百度地图 demo 中的源代码，将密钥换上去，就可以生成一个地图了。
示例：复制百度地图 demo 中的源代码，只要替换密钥即可生成一个地图。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>地图展示</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style>
body,
html,
#container {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}
.info {
z-index: 999;
width: auto;
min-width: 22rem;
padding: .75rem 1.25rem;
margin-left: 1.25rem;
position: fixed;
top: 1rem;
background-color: #fff;
border-radius: .25rem;
font-size: 14px;
color: #666;
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
</style>
//DarF2LCCGzn6T16zgy8ZPkvYYE5CT6fu 这个字符串是密钥
<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=DarF2LCCGzn6T16zgy8ZPkvYYE5CT6fu"></script>
</head>
<body>
<div class="info">最新版GL地图命名空间为BMapGL, 可按住鼠标右键控制地图旋转、修改倾斜角度。</div>
<div id="container"></div>
</body>
</html>
<script>
var map = new BMapGL.Map('container'); // 创建Map实例
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
</script>
Web存储
1 sessionStorage
存储数据到本地。存储的容量5mb。
setItem(key, value)：存储数据，以键值对的方式存储。
getItem(key)：获取数据，通过指定名称的key获取对应的value值。
removeItem(key)：删除数据，通过指定名称key别除对应的值。
clear()：清空所有存储的内容。
特点：
1 . 这个数据本质上是存储在当前页面的内存中，而不是存储在浏览器内存中。所以打开两个相同的页面，sessionStorage数据是不一样的。
2 . 生命周期：关闭当前页面/浏览器，sessionStorage数据就会被自动清除。
浏览器中，如何查看sessionStorage中存储的数据呢？
浏览器 / Application面板 / Storage / Session Storage
示例：
sessionstorage的使用:<br>
<input type="text" id="userName"><br>
<input type="button" value="设置数据" id="setData">
<input type="button" value="获取数据" id="getData">
<input type="button" value="删除数据" id="removeData">
<script type="text/javascript">
//存储数据
document.querySelector('#setData').onclick = function(){
//输入框中的内容
let username = document.querySelector('#userName').value
window.sessionStorage.setItem('username', username)
}
//获取数据
document.querySelector('#getData').onclick = function(){
alert(window.sessionStorage.getItem('username'))
}
//删除数据
document.querySelector('#removeData').onclick = function(){
window.sessionStorage.removeItem('username')
}
</script>
2 localStorage
window.localStorage 也有以下的方法：
setItem(key, value)：存储数据，以键值对的方式存储。
getItem(key)：获取数据，通过指定名称的key获取对应的value值。
removeItem(key)：删除数据，通过指定名称key别除对应的值。
clear()：清空所有存储的内容。
特点：
1 . 存储的内容大概20mb。
2 . 不同浏览器不能共享localStorage数据，但是同一个浏览器相同网站的多个窗口可以共享数据。
3 . 生命周期：localStorage数据存储在硬盘中，并不会随着页面或者浏览器的关闭而清除。如果想清除，必须手动清除。
浏览器中，如何查看localStorage中存储的数据呢？
浏览器 / Application面板 / Storage / local Storage
应用程序缓存
为什么要使用应用程序缓存呢？（也称应用离线缓存）
使用 应用程序缓存 可以将网站的一些资源缓存起来，即使断网了，重新刷新页面，浏览器依然可以显示这些资源。
1 . 概念
使用HTML5，通过创建cache manifest 文件，可以轻松地创建web应 用的离线版本。
2 . 优势
a) 可配置需要缓存的资源。
b) 网络无连接应用仍可用。
c) 本地读取缓存资源，提升访问速度，增强用户体验。
d) 减少请求，缓解服务器负担。
3 . Cache Manifest基础
a) 如需启用应用程序缓存，请在文档的标签中包含manifest属性:
manifest = "应用程序缓存清单文件的路径"，建议文件的扩展名是appcache，本质就是一个文本文件。
<! DOCTYPEHTML>
<html manifest="demo.appcache">
...
</html>
b) 每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest属性，则页面不会被缓存（除非在manifest文件中直接指定了该页面)。
c) manifest文件的建议的文件扩展名是: ".appcache"。
d) 注意，manifest文件需要配置正确的MIME-type，即 "text/cache- manifest"。必须在web 服务器上进行配置。
MIME-type的作用：告诉系统如何处理这个文件。
4 . Manifest文件
a) 概念：
manifest 文件是简单的文本文件L它告知浏览器被缓存的内容(以及不缓存的内容)
b) manifest文件可分为三个部分
CACHE MANIFEST 开始，这个语句必须是manifest文件的第一个语句。
CACHE 在此标题下列出的文件将在首次下载后进行缓存
NETWORK 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK 在此标题下列出的文件规定当页面无法访问时的回退页面(比如404页面)
c) CACHE MANIFEST说明:
CACHE MANIFEST,放置在第一行,是必需的:
补充：
1 . 如果想要缓存页面中的所有资源，则CACHE字段下添加一个星号*即可。
2 . 有时候我们无法提前知道哪些文件会找不到，但我们又想：不管什么文件找不到，都使用一个固定的文件来代替。则可以在FALLBACK字段下添加一个斜杆/来表示任何文件。
3 . 如果发现manifest文件不起作用，则需要在电脑系统 IIS中设置一下MIME-type，来告诉电脑系统如何正确处理manifest文件。
a) 开始 / 搜索程序和文件 / 搜索关键字inetmgr / MIME类型
b) 添加一个键值对：.appcache text/cahce-manifest
但是，我使用HBX来打开页面，manifesst文件还是不起作用，这是为什么呢？
示例：
//index.html
<!DOCTYPE html>
<html manifest="mysite.appcache">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img {
margin: 20px auto;
display: block;
width: 300px;
}
</style>
</head>
<body>
<img src="./imgs/bg.png" alt="">
<img src="./imgs/people.webp" >
<img src="./imgs/pic1.png" >
<img src="./imgs/pic2.jpg" >
</body>
</html>
// mysite.appcache
CACHE MANIFEST
#上面一句代码必须是当前文档的第一句
#后面写注释
#需要缓存的文件清单列表
CACHE:
./imgs/bg.png
./imgs/people.webp
#配置每一次都需要重新从服务器获取的文件清单列表
NETWORK:
./imgs/pic1.png
#配置如果文件无法获取则使用指定的文件进行替代
#如果左边的文件找不到，则使用右边的文件来代替
FALLBACK:
./imgs/pic2.jpg ./imgs/bg.png
运行结果：manifest文件不起作用。？？？难道时chrome浏览器不支持？
总结
_ 常用的html5语义标签有哪些？分别表示什么含义？基本用法？
6个：header、footer、nav、main，article、aside，
_ 如何解决IE8及以下版本IE对html5标签的兼容性问题？
引入插件 html5shiv.min.js
_ html5中，input标签 type属性 新增了哪些可选值？分别有什么作用？
_ 表单提交时，有哪些注意事项？
1 只有设置了name属性的表单项，才会被表单提交。
2 默认只提交form标签包裹的表单项。
_ html5中不仅新增了一些标签、属性、方法，还新增了一些接口。
因为html5侧重移动端，所以这些新接口常用于移动端，pc端可能会有兼容性问题。
学习资源
官方文档
_ HTML 5 参考手册
_ HTML 音频/视频
_ w3cschool ★★★
视频教程
_ Html5+Css3由浅入深教程 2016
参考文章
其它
进度：211214-211218
