一、H5新增的标签和属性
1.新增的标签（语义化）
<header>头部</header>
<nav>导航</nav>
<main>
<article>左边</article>
<aside>右边</aside>
</main>
<footer>底部</footer>
//用语义化标签增强代码的阅读性
- 兼容问题
IE浏览器不支持上面的语义化标签(IE9:会认为以上所有标签是行级元素，在设置宽度的时候是失效的；IE8:完全不支持语义标签) - 解决方法
直接引入第三方插件即可让IE8及以下的版本支持H5，此插件自行百度
2.input新增的type属性
- 邮箱
<input type="email">
<!--email提供了默认的电子邮箱的完整验证：要求必须包含@符号，同时必须包含服务器名称，
如果不能满足验证，则会阻止当前的数据提交-->
- 电话
<input type="tel">
<!--tel它并不是来实现验证。它的本质目的是为了能够在移动端打开数字键盘。
意味着数字键盘限制了用户只能输入数字。-->
- 网址
<input type="url">
<!--验证只能输入合法的网址：必须包含http://-->
- 数字
<input type="number" value="60" max="100" min="0">
<!--number：只能输入数字(包含小数点)，不能输入其它的字符
max:最大值
min:最小值
value:默认值-->
- search
<input type="search">
<!--search：可以提供更人性化的输入体验，右边有一个小×可以删除输入的内容-->
- 范围
<input type="range" max="100" min="0" value="50">
- 颜色
<input type="color"><!--能够取色-->
- 时间和日期
时间：
<input type="time"> <!--date：日期：年月日-->
日期：
<input type="date"> <!--datetime:大多数浏览器不能支持datetime.用于屏幕阅读器-->
日期时间：
<input type="datetime"> <!--datetime-local:日期和时间-->
日期时间：
<input type="datetime-local">
月份：
<input type="month">
星期：
<input type="week">
3.新增的其他表单属性
- placeholder：它的属性值为提示文本，但不占位
- autofocus：自动获取焦点，没有属性值
- autocomplete：类似于百度搜索的自动补全功能，此属性有两个值：on:打开 /off:关闭。要使用这个属性有两个条件：
1.必须成功提交过:提交过才会记录
2.当前添加autocomplete的input元素必须有name属性 - required：必须输入，如果没有输入则会阻止当前数据提交。没有属性值
- pattern：属性值为一个正则表达式，验证不成功会有提示信息
- 补充：验证不通过触发的事件和修改不通过时的提示信息的方法
document.getElementById("userPhone").oninvalid=function(){
/*oninvalid:当验证不通过时触发*/
this.setCustomValidity("请输入合法的11位手机号");//修改不通过时的提示信息
}
- multiple：添加后可以输入多个，如可以填写多个邮箱、添加多个文件。没有属性值
- form：属性值为指定表单id名,在将来指定id名的表单进行数据提交的时候，也会将当前表单元素的数据一起提交，用于当前表单元素不在form标签内
(以上属性都是写在input里面的)
4.新增的与表单相关的标签
- keygen:规定用于表单的密钥对生成器字段。使用频率低，一般不用。
- output:和span标签没什么区别，只是语义性更强。使用频率低，一般不用。
- progress与meter：
两个进度条，用法类似
<progress max="100" value="50"></progress> <!--max:最大值 value:当前进度值-->
<meter max="100" min="0" high="80" low="40" value="30"></meter>
<!--high:规定的较高的值
low:规定的较低的值
max:最大值
min:最小值
value:当前度量值-->
具有输入功能的下拉列表：
<!--不仅可以选择，还应该可以输入-->
<!--建立输入框与datalist的关联 list="datalist的id名"-->
<input type="text" list="subjects"> <br>
<!--通过datalist创建选择列表-->
<datalist id="subjects">
<!--创建选项值：value:具体的值 label是提示信息，辅助值-->
<!--option可以是单标签也可以是双标签-->
<option value="前端" label="前景好"></option>
<option value="java" label="后端开发语言"></option>
<option value="javascript" label="做特效"></option>
</datalist>
5.多媒体和自定义标签
- audio:音频
属性：
src:播放文件的路径
controls:音频播放器的控制器面板，没有属性值
autoplay:自动播放，没有属性值
loop:是否循环播放 - video:视频
属性：
src:播放文件的路径
controls:音频播放器的控制器面板，没有属性值
autoplay:自动播放，没有属性值
loop:循环播放
poster:指定视频还没有完全下载完毕，或者用户没有点击播放前显示的封面。 默认显示当前视频文件的第一帧
source:因为不同的浏览器所支持的视频格式不一样，为了保证用户能够看到视频，我们可以提供多个视频文件让浏览器自动选择
source的用法：
<video controls>
<!--视频源，可以有多个源-->
<source src="../mp3/flv.flv" type="video/flv">
<source src="../mp3/mp4.mp4" type="video/mp4">
</video>
-
Dom操作和类样式操作：H5新增了一些DOM操作的方法，但是这些方法比起jQuery来说较为复杂，所以我们摒弃这些方法。
-
自定义属性
<!--定义-->
<!--规范：
1.data-开头
2.data-后必须至少有一个字符，如果有多个单词使用-连接
建议：
1.名称应该都使用小写，不要包含任何的大写字符
2.名称中不要有任何的特殊符号
3.名称不要使用纯数字-->
<p data-school-name="itcast">西南石油大学</p>
<script>
window.onload=function(){
var p=$("p");
/*获取自定义属性值*/
/*将data-后面的单词使用camel命名法连接:必须使用camel合法法获取值否则有可能无法获取到值*/
//var value=p.dataset["schoolname"];//data-schoolname
var value=p.dataset["schoolName"];//data-school-name
console.log(value);
//关键：获取值的时候必须用驼峰命名法去获取
}
</script>
二、H5各种接口的使用和web存储
1.各种接口的使用
- 网络接口:
/*1.ononline:网络连通的时候触发这个事件*/
window.addEventListener("online",function(){
alert("网络连通了");
});
/*2.onoffline:网络断开时触发*/
window.addEventListener("offline",function(){
alert("网络断开了");
})
- 全屏接口:
全屏操作的主要方法和属性:
1.requestFullScreen():开启全屏显示
不同浏览器需要添加不同的前缀：chrome:webkit firefox:moz ie:ms opera:o
2.cancelFullScreen():退出全屏显示:也添加前缀，在不同的浏览器下.退出全屏只能使用document来实现
3.fullScreenElement:是否是全屏状态，也只能使用document进行判断*/
以下代码为使用样例：
window.onload=function(){
var div=document.querySelector("div");
/*添加三个按钮的点击事件*/
/*全屏操作*/
document.querySelector("#full").onclick=function(){
/*div.requestFullScreen();*/
/*div.webkitRequestFullScreen();*/
/*div.mozRequestFullScreen();*/
/*使用能力测试添加不同浏览器下的前缀*/
if(div.requestFullScreen){
div.requestFullScreen();
}
else if(div.webkitRequestFullScreen){
div.webkitRequestFullScreen();
}
else if(div.mozRequestFullScreen){
div.mozRequestFullScreen();
}
else if(div.msRequestFullScreen){
div.msRequestFullScreen();
}
}
/*退出全屏*/
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();
}
}
/*判断是否是全屏状态*/
document.querySelector("#isFull").onclick=function(){
/*两个细节：使用document判断 能力测试*/
if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement){
alert(true);
}
else{
alert(false);
}
}
}
- 拖拽接口：
这里给出一个封装好的通用的拖拽接口：
<div class="div1" id="div1">
<!--在h5中，如果想拖拽元素，就必须为元素添加draggable="true"-->
<p id="pe" draggable="true">试着把我拖过去</p>
<p id="pe1" draggable="true">试着也把我拖过去</p>
</div>
<div class="div2" id="div2"></div>
<div class="div3" id="div3"></div>
<script>
var obj=null;//当前被拖拽的元素
/*应用于被拖拽元素的事件
*ondrag 应用于拖拽元素，整个拖拽过程都会调用--持续
ondragstart 应用于拖拽元素，当拖拽开始时调用
ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用
ondragend 应用于拖拽元素，当拖拽结束时调用*/
document.ondragstart=function(e){
/*通过事件捕获来获取当前被拖拽的子元素*/
obj= e.target;
/*通过dataTransfer来实现数据的存储与获取
* setData(format,data):
* format:数据的类型：text/html text/uri-list
* Data:数据:一般来说是字符串*/
e.dataTransfer.setData("text/html", e.target.id);//第一个参数只能是text/html或text/uri-list
}
document.ondragend=function(e){
}
document.ondragleave=function(e){
}
document.ondrag=function(e){
}
/*应用于目标元素的事件
*ondragenter 应用于目标元素，当拖拽元素进入时调用
ondragover 应用于目标元素，当停留在目标元素上时调用
ondrop 应用于目标元素，当在目标元素上松开鼠标时调用
ondragleave 应用于目标元素，当鼠标离开目标元素时调用*/
document.ondragenter=function(e){
console.log(e.target);
}
document.ondragover=function(e){
/*浏览器默认会阻止ondrop事件：我们必须在ondragover中阻止浏览器的默认行为*/
/*如果想触发ondrop事件，那么就必须在这个位置阻止浏览器的默认行为*/
e.preventDefault();
}
document.ondrop=function(e){
/*添加元素*/
//e.target.appendChild(obj);
/*通过e.dataTransfer.setData存储的数据，只能在drop事件中获取*/
var id=e.dataTransfer.getData("text/html");
/*console.log("id="+id);*/
e.target.appendChild(document.getElementById(id));
}
document.ondragleave=function(e){
}
</script>
注意：只有拖拽事件产生的事件对象中才会有dataTransfer这个属性，且只能在ondragstart事件中setData（设置数据），在drop事件中getData（获取数据）
- 地理定位接口：
这里给出一个写好的地理定位接口：
var x=document.getElementById("demo");
function getLocation()
{
/*能力测试*/
if (navigator.geolocation)
{
//navigator.geolocation.getCurrentPosition(success,error,option);
/*三个参数分别为:
* 1.获取地理信息成功之后的回调
* 2.获取地理信息失败之后的回调
* 3.调整获取当前地理信息的方式*/
/*option:可以设置获取数据的方式，有以下方式
* enableHighAccuracy:true/false:是否使用高精度
* timeout:设置超时时间，单位ms
* maximumAge:可以设置浏览器重新获取地理信息的时间间隔，单位是ms*/
navigator.geolocation.getCurrentPosition(showPosition,showError,{
enableHighAccuracy:true,
timeout:3000
});
}
else{
x.innerHTML="Geolocation is not supported by this browser.";
}
}
/*成功获取定位之后的回调*/
/*如果获取地理信息成功，会将获取到的地理信息传递给成功之后的回调*/
// position.coords.latitude 纬度
// position.coords.longitude 经度
// position.coords.accuracy 精度
// position.coords.altitude 海拔高度
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
/*获取定位失败之后的回调*/
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation.";
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable.";
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out.";
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred.";
break;
}
}
getLocation();
注意：一般PC端无法获取到地理位置，大多数用于移动端。
2.web存储
- sessionStorage：存储数据到本地。存储的容量5mb左右。这个数据本质是存储在当前页面的内存中-意味着其它页面和浏览器无法获取数据。它的生命周期为关闭当前页面，关闭页面，数据会自动清除。
方法：
setItem(key,value):存储数据，以键值对的方式存储
getItem(key):获取数据，通过指定名称的key获取对应的value值
removeItem(key):删除数据，通过指定名称key删除对应的值
clear():清空所有存储的内容
//存储数据
window.sessionStorage.setItem("userName", name);
//获取数据
window.sessionStorage.getItem("userName");
//删除数据
window.sessionStorage.removeItem("userName");
- localStorage:存储的内容大概20mb；不同浏览器不能共享数据，但是在同一个浏览器的不同窗口中可以共享数据；永久生效，它的数据是存储在硬盘上，并不会随着页面或者浏览器的关闭而清除，如果想清除，必须手动清除。
方法和sessionStorage完全一样，只是生命周期不同而已。
- manifest：应用缓存
manifest是应用程序缓存清单文件的路径，建议文件的扩展名是.appcache,这个文件的本质就是一个文本文件，此属性是在html标签中添加。
<html lang="en" manifest="1.appcache">
//1.appcache
CACHE MANIFEST
#上面一句代码必须是当前文档的第一句
#后面写注释
CACHE:
#需要缓存的文件清单列表
#下面就是需要缓存的清单列表
../images/l1.jpg
../images/l2.jpg
# *:代表所有文件
NETWORK:
#配置每一次都需要重新从服务器获取的文件清单列表
../images/l3.jpg
FALLBACK:
#配置如果文件无法获取则使用指定的文件进行替代
../images/l4.jpg ../images/banner_1.jpg
# /:代表所有文件
扫一扫
339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
