1、HTML5的基础概述(什么是XHTML和XML)
HTML:超文本标记语言(页面中不仅只有文字,而且可以呈现出图片、音视频等媒体资源)
XHTML:它是HTML比较规范严谨的一代版本
XML:可扩展的标记语言(HTML中使用的标签都是W3C标准中规定的,XML允许我们自己扩展标签的),它的作用不是用来写页面结构的,而是用来存储一些数据的(以自己扩展的标签作为标识,清晰明了的展示出数据的结构…)
HTML5:当前HTML最新的一代版本,也是非常成功的一代版本,目前市场上基本上都是基于H5规范进行开发的(它相对于传统的HTML更多的是增加一些有助于开发的内容,对原有规范的修改调整很少)
WEEK6-DAY5-TEMP.xml
<root>
<student>
<name>麻神理工</name>
<age>9</age>
</student>
<student>
<name>小花</name>
<age>27</age>
</student>
</root>
复制代码
XHTML
文档声明比较复杂,需要特殊强调当前的页面需要严谨一些
1.<?xml version="1.0" encoding="UTF-8"?>
2.<!DOCTYPE html
3. PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
4. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5.<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
6.<head>
7. <title>Title</title>
8.</head>
9.<body>
10.
11.</body>
12.</html>
复制代码
HTML
1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2."http://www.w3.org/TR/html4/loose.dtd">
3.<html>
4.<head>
5. <title>Title</title>
6.</head>
7.<body>
8.
9.</body>
10.</html>
复制代码
HTML5
1.<!DOCTYPE html>//申明当前文档是html格式
2.<html lang='en'><!--声明页面的语言模式:english,如果页面中出现了英文单词,浏览器会自主发起是否翻译的功能-->
3. <head>
4. <!--指定当前页面的编码格式是国际统一编码格式:UTF-8 GB2312中国编码...-->
5. <meta charset='UTF-8'>
6. </head>
7. <body>
8.
9. </body>
10.</html>
复制代码
2、HTML5中新增的语义化标签
对原有语义化标签的升级
语义化标签(标签语义化):每一个HTML标签都有自己特殊的含义,我们在搭建页面结构的时候,应该让合理的标签做合适的事情
HTML5中新增加一些语义化标签:
1.article:文章区域
2.header:头部区域
3.footer:尾部区域
4.main:主体内容区域
5.section:普通区域,用来做区域划分
6.figure:配图区域
7.figcaption:配图说明区域
8.aside:与主体内容无关的区域(一般用来打广告)
9.nav:导航区域
10....
11.
12.=>这些语义化标签在兼容它的浏览器中都是块级标签
复制代码
H5中新增加一些标记标签
1.mark:用来标记需要高量显示的文本
2.time:用来标记日期文本
3....
复制代码
H5中对于原有的标签还有一些调整
1.strong:之前是加粗,现在是重点朗读(效果还是加粗,但是语义不一样了)
2.small:之前是变小,现在是附属细则(效果还是变小)
3.hr:之前是一条直线,现在是分割线,用来分隔两个区域
4....
复制代码
H5中删除一些不经常使用的标签:这里的删除不是不让用(用了也不报错),只是按照最新标准没有语义了
1.font:之前是标记字体修改某些文字样式的,现在呢我们不建议使用了
2.center:之前是使某些内容居中,但是目前我们都是基于CSS样式控制居中,不在使用这个标签
3....
复制代码
目前不管是在PC端开发还是在移动端开发,我们更应该使用H5规范的语义化标签搭建页面的结构
问题: IE6~8中不能识别这些新增加的语义化标签,我们无法为其设置具体的样式
解决: 在当前页面的HEAD中(CSS后),我们导入一个JS插件:html5.min.js,它就是用来把页面中所有用到的不兼容的H5语义化标签进行兼容处理
1、把页面中所有不兼容的标签进行替换
2、把CSS中使用标签选择器设置的样式(标签是H5标签)也替换成其它方式
3、…
标准浏览器中不需要引用,只有IE6~8中才需要(使用条件注释来区分浏览器)
1.<head>
2.
3. <!--[if lt IE 9]>
4. <script src="js/html5.min.js"></script>
5. <![endif]-->
6.</head>
7.<!--条件注释中的代码要严格区分大小写以及空格等细节问题-->
复制代码
3、HTML5对表单元素的升级
传统表单元素
form
input:text、password(暗纹输入)、button、submit、reset、file、hidden、radio、checkbox…
button
select
label
textarea
…
H5对于表单的升级
1、给input设置了很多新的类型
search
tel
number
range
color
date
time
…
[优势]
1)功能强大了
2)使用合适的类型,在移动的开发的时候,用户输入,可以调取出最符合输入内容格式的虚拟键盘,方便用户操作
3)部分类型提供了表单验证(内置验证机制:和我们自己写的正则验证不太一样,但是也可以凑合 [ CSS中可以验证、JS中也可以验证 ])
2、给input新增一个属性:placeholder,给表单框做默认的信息提示
3、二级下拉框(select一级下拉框)
1.<input type="text" id="department" list="departmentList">
2.<datalist id="departmentList">
3. <option value="市场部">市场部</option>
4. <option value="技术部">技术部</option>
5. <option value="总裁办">总裁办</option>
6.</datalist>
复制代码
H5针对于表单元素升级的部分,在IE低版本(有的IE9和10都不兼容)中不兼容,而且没办法处理兼容,所以我们一般移动端使用这些新特性,PC端还是延续传统的操作办法;
H5中的表单验证(内置规则不是特别好),所以真实项目中的表单验证依然延续传统的正则验证完成
WEEK6-DAY5-2-表单元素.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/reset.min.css">
<style>
#emailInp, input {
display: block;
margin: 50px;
width: 200px;
height: 35px;
line-height: 35px;
border: 1px solid #CCC;
}
/*#emailInp:valid {
border: 1px solid green;
}
#emailInp:invalid {
border: 1px solid red;
}*/
</style>
</head>
<body>
<!--<form action="https://www.baidu.com/">
<input type="text">
<input type="password">
<input type="file">
<br><br><br>
<!–
需要使用NAME进行分组,一组中只能选中一个
LABEL有一个FOR属性,指向对应表单元素的ID,操作LABEL中的内容,也相当于在操作表单元素(经常应用于单选或者复选框上)
–>
<input type="radio" name="sex" id="man" checked><label for="man">男</label>
<input type="radio" name="sex" id="woman"><label for="woman">女</label>
<br><br><br>
<input type="checkbox" name="hobby" id="music"><label for="music">音乐</label>
<input type="checkbox" name="hobby" id="dance"><label for="dance">跳舞</label>
<input type="checkbox" name="hobby" id="study"><label for="study">学习</label>
<input type="checkbox" name="hobby" id="travel"><label for="travel">旅游</label>
<input type="checkbox" name="hobby" id="eat"><label for="eat">吃货</label>
<br><br><br>
<textarea id="desc"></textarea>
<br><br><br>
<select>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州" selected>广州</option>
</select>
<br><br><br>
<input type="button" value="我就是个按钮">
<input type="submit">
<!–
SUBMIT默认行为:点击按钮会跳转到FORM的ACTION对应的地址(表单提交)
在传统的非前后端分离项目中,我们会在ACTION中指定一个程序处理页面(一般是由后台语言(PHP\JSP\ASP...)完成),我们利用它的默认行为把数据发送给处理页面,由处理页面完成数据的存储等操作
现有前后端完全分离项目中,我们都是在JS中手动获取到用户输入的内容,并且通过AJAX等技术发送给服务器存储或者处理(此时我们需要阻止SUBMIT的默认行为)
–>
</form>-->
<!--<input type="range" min="18" max="65" step="1" value="25">-->
<!--<input type="color">-->
<!--<input type="email" id="emailInp" placeholder="请输入常用的邮箱">
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$('#emailInp').on('blur', function () {
//=>this.checkValidity():调取内置的验证机制,验证当前输入内容格式是否正确(空也是正确的) TRUE:正确 FALSE:不正确
if (this.checkValidity()) {
$(this).css('borderColor', 'green');
} else {
$(this).css('borderColor', 'red');
}
});
</script>-->
<input type="text" id="department" list="departmentList">
<datalist id="departmentList">
<option value="市场部">市场部</option>
<option value="技术部">技术部</option>
<option value="总裁办">总裁办</option>
</datalist>
</body>
</html>
复制代码
H5针对于表单元素升级的部分,在IE低版本(有的IE9和10都不兼容)中不兼容,而且没办法处理兼容,所以我们一般移动端使用这些新特性,PC端还是延续传统的操作办法;
H5中的表单验证(内置规则不是特别好),所以真实项目中的表单验证依然延续传统的正则验证完成
4、解决placeholder的兼容处理(新的一种组件封装思想)
整个IE浏览器对于placeholder兼容性都不好
1、IE10+虽然兼容,但是文本框获取焦点后,提示信息就消失了
2、IE9-不兼容这个属性
WEEK6-DAY5-3-placeholder.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/reset.min.css">
<style>
.inputBox {
position: relative;
margin: 20px;
width: 200px;
}
.inputBox input, .inputBox .placeLike {
display: block;
padding: 0 10px;
width: 178px;
height: 30px;
line-height: 30px;
border: 1px solid green;
}
.inputBox .placeLike {
position: absolute;
top: 0;
left: 0;
z-index: 100;
color: #AAA;
}
</style>
</head>
<body>
<div class="inputBox">
<input type="text" data-place="请输入用户名">
</div>
<div class="inputBox">
<input type="password" data-place="请输入密码">
</div>
<div class="inputBox">
<input type="email" data-place="请输入邮箱">
</div>
<script src="js/placeholder.js"></script>
</body>
</html>
复制代码
placeholder.js
~function () {
//=>获取页面中所有具备DATA-PLACE自定义属性的INPUT ie9下没有placeholder这个属性所以用自定义属性获取
var inputList = document.getElementsByTagName('input'),
inputAry = [];//inputAry保存页面中所有具备DATA-PLACE自定义属性的INPUT
for (var i = 0; i < inputList.length; i++) {
var item = inputList[i];
item.getAttribute('data-place') !== null ? inputAry.push(item) : null;
}
//=>非IE浏览器中,我们只需要把自定义属性值存放在内置的PLACE-HOLDER属性中即可,浏览器可以自己根据这个属性做好提示的工作
// if(window.navigator.userAgent.indexOf('MSIE') === -1){};//也可以这样判断 MSIE只能处理ie10及ie10以下的版本,ie最新版本EDGE里面没有MSIE,但是也属于ie浏览器 所以用正则判断
if (!/(MSIE|Trident)/i.test(navigator.userAgent)) {
for (var k = 0; k < inputAry.length; k++) {
var itemInp = inputAry[k];
itemInp.placeholder = itemInp.getAttribute('data-place');
}
return;
}
//=>IE浏览器(包含IE EDGE):不用内置的PLACE-HOLDER,而是采用我们自己设定的方式来处理(span模拟)
for (var z = 0; z < inputAry.length; z++) {
var inputItem = inputAry[z],
inputText = inputItem.getAttribute('data-place');
inputItem.placeholder = '';//ie下不用内置placeholder,赋值为空字符串
/*
* 1、新创建一个SPAN,把其存放在INPUT它爹末尾(作为INPUT的弟弟)
* 2、给SPAN设置一定的样式
* 相对于其父级元素定位
* 和INPUT的基础样式类似
* 3、INPUT或者SPAN都要绑定相关的事件行为:完成和内置PLACE-HOLDER相同的效果
*/
var spanTip = document.createElement('span');
spanTip.innerHTML = inputText;
spanTip.className = 'placeLike';
spanTip.style.cursor = 'text';
inputItem.parentNode.appendChild(spanTip);
//=>把每一个INPUT和SPAN的索引进行存储(并且把SPAN-TIP作为属性值存储在INPUT的自定义属性上,方便后期获取使用),
// 后期事件绑定需要获取到的值都先用自定义属性存起,因为事件绑定是异步,得到的都是循环结束最后一个循环值
inputItem.index = spanTip.index = z;
inputItem.spanTip = spanTip;
//=>SPAN的点击行为:点击SPAN让INPUT获取对应光标
spanTip.onclick = function () {//事件绑定是异步
inputAry[this.index].focus();
};
//=>控制INPUT的输入行为(建议使用DOM2事件绑定:防止后期再其它的地方也需要通过KEYUP或者KEYDOWN行为处理其它的事情)
inputItem.onkeydown = inputItem.onkeyup = function (e) {
var value = this.value,
spanTip = this.spanTip;
spanTip.style.display = value.length > 0 ? 'none' : 'block';
};
}
}();
//这里面的所有for循环可以封装一个each方法
复制代码
思路:
不能通过value来做(type="password"时value会显示加密状态),value的样式跟placeholder不一样,而是通过span来模拟。
由于在ie下的情况都各有不同,有的浏览器不支持placeholder,比如ie9不支持,就获取不到这个属性,所以只要在ie浏览器中,都统一做兼容处理,
最好通过自定义属性data-place来获取,自定义属性在所有浏览器中都不受限制,如果有这个自定义属性值,说明当前input需要加placeholder,
ie下都把内置的placeholder干掉用span模拟,谷歌下直接把自定义属性值赋值给内置的placeholder
两种组件封装
一种:先实现一个功能,再去扩展到更多的功能(构造函数)
另外一种:批量处理(以上placeholder.js)
5、H5中其他新增内容
增加了新的媒体解决方案
音频:audio
视频:video
传统的音视频播放是基于flash来完成的,需要浏览器中安装 adobe flash player 插件
现在只需要基于audio或者video播放即可,但是对于音视频的格式有限制,对于浏览器也有限制
移动端对于flash的支持不好,但是基本上都支持audio和video PC端的IE浏览器(低版本)不支持audio和video,但是支持flash
H5中增加了canvas(绘图)
它是一个画布,允许我们在JS中通过代码绘制图形以及实现一些好玩的动画
百度统计图插件:Echarts就是基于canvas开发的
提供了很多强大的JS API
API:Application Programming Interface 应用程序接口(凡是提供一个共别人调取使用的都可以称之为接口,例如:使用AJAX从服务器端获取数据,需要一个URL地址,此地址就是一个API,浏览器提供给我们很多常用的方法,每一个方法都可以叫做API)如下:
本地存储
webStorage:
localStorage:本地信息存储
sessionStorage:本地会话存储
在没有H5本地存储之前,我们都使用cookie做的本地存储
数据的二级缓存也是通过本地信息存储来实现的(一分钟之内刷新页面数据一般不会变,把数据存储到本地,一分钟内刷新页面不请求数据库,而是通过本地存储实现)
获取本机地理位置
通过H5可以获取当前用户地理位置(精度、纬度、精准度…),再结合第三方地图(高德地图、百度地图、腾讯地图…)API接口,实现一些生活服务的推荐等
提供了新的通信方式:websocket
想要实现实时通讯类的产品,基本上现在都是基于socket.io这个框架来完成的
提供操作手机硬件功能的API
调取手机的重力感应器,实现摇一摇,或者实现一些小游戏 调取手机的摄像头或者通讯录
不是所有的手机浏览器都支持这些功能,即时支持这些功能的浏览器,在实现效果上也是不理想的(不稳定、卡顿等)
H5离线缓存:manifest
第一次连网请求完成页面,把信息缓存到本地,下一次即时断网的情况下,也可以看到上一次的信息(存储量太小一般不用)
面试题:你所知道的h5新特性有哪些
传统html的升级,新增语义化标签、对表单元素的升级(能调取出最符合输入内容格式的虚拟键盘,方便用户操作)见3、
对js中辅助api的增加