Diary

移动端混合开发

HTML5基础知识及项目实战

HTML5基础概述

HTML: 超文本标记语言（页面中不仅又文字，而且可以呈现出图片，音视频等媒体资源）

XHTML: 他是HTML比较规范严谨的一代版本

XML:可扩展的标记语言（HTML中使用的标签都是W3C标准中规定的，XML允许我们自己扩展标签），它的作用给不是用来写页面结构的，而是用来存储一些数据的（以自己扩展的标签作为标识，清晰明了的展示数据的结构…）
ajax:async javascript and xml

HTML5: 是当前HTML最新的一代版本，也是非常成功的版本，目前市场上基本上都是基于H5规范进行开发的（它相对于传统的HTML更多的是增加一些有助于开发的内容，对原有规范的修改和调整很少）

XML

1
2
3
4
5
6
7
8
9
10
<root>
	<student>
		<name>小李</name>
		<age>19</age>
	<student>
	<student>
		<name>小王</name>
		<age>20</age>
	<student>
</root>

XHTML

文档声明比较复杂，需要特殊强调

1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Title</title>
</head>
<body>

</body>
</html>

HTML4

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
</head>
<body>

</body>
</html>

HTML5

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<!-- 声明页面的语言模式：english，如果页面中出现了英文单词，浏览器会自动发起是否翻译的功能 -->
<html lang="en">
	<head>
		<!-- 指定当前页面的编码格式是国际统一编码：UTF-8 (GB2312)中国编码 -->
		<meta charset="UTF-8">
		<title>标题</title>
	</head>
	<body></body>
</html>

HTML5提供的新语法规范

对原有语义化标签的升级

语义化标签（标签语义化）：每一个html标签都有自己特殊的含义，我么你在搭建页面结构的时候，应该让合理的标签干合理的事情

HTML5中新增加了一些语义化标签（这些语义化标签，在兼容它的浏览器单中都是块级标签·）

1
2
3
4
5
6
7
8
9
10
article: 文章区域
header: 头部区域
footer: 尾部区域
main: 主题内容区域
section: 普通区域，用来做区域划分
figure: 配图区域
figcaption: 配图说明区域
aside: 与主题内容无关的区域（一般用来打广告）
nav: 导航区域
...

HTML5新增加一些标记标签

1
2
mark: 用来标记需要高亮显示的文本
time: 用来标记日期文本

HTML5中对原有标签还有一些调整

1
2
3
4
strong: 之前是加粗，现在是重点朗读（效果还是家族，但是语义不一样了）
small: 之前是变小，现在是附属细则（效果还是变小）
hr: 之前是一条直线，现在是分割线，用来分割两个区域
...

HTML5中删除一些不经常使用的标签，这里的删除不是不让用（用了也不报错），只是按照最新的标准没有语义了

1
2
font: 之前是标记文字修改某些文字样式的，现在我们不建议使用
center: 之前是使某些内容居中，但是目前我们都是基于CSS样式控制居中，不再使用这个标签

目前不管实在PC端开发爱是移动端开发，我们更应该使用H5规范的语义化标签搭建页面的结构

问题：
IE6-8中不能识别这些新增的语义化标签，我们无法为其设置具体的样式

解决：
在当前页面中的HEAD中（CSS后），我们导入一个JS插件：html5.min.js，它就是用来把页面中所有用到的不兼容的H5语义化标签进行兼容处理

1、把页面中所有不兼容的标签进行替换
2、把CSS中使用标签选择器设置的样式（标签是H5标签）也替换成其他方式
…

在标准浏览器中不需要引入，只要在IE6-8中才需要（使用条件注释来区分浏览器）

1
2
3
4
5
6
<head>
	<!--[if lt IE 9]>
		<script src="js/html5.min.js"></script>
	<![endif]-->
</head>
<!-- 条件注释中的代码要严格区分大小写以及空格等细节问题 -->

H5中对于表单元素的升级

传统表单元素
form
input: text/psaaword（暗文输入）/button/submit/reset/file/hidden/radio
button
select
label
textarea
…

submit默认行为：点击按钮会跳转到action对应的地址（表单提交）
传统的非前后端分离项目中，我们会在action中指定一个程序处理页面（一般由后台语言完成），我们利用它的默认行为把数据发送给处理页面1，由处理页面完成数据的存储等操作
现有前后端完全分离项目中，我们都是在js当中手动获取到用户输入的内容并且通过ajax等技术发送给服务器存储或处理（此时我们需要阻止submit的默认行为）

H5对于表单的升级
1、给input设置了很多新的类型
search
email
tel
number
range
color
date
time
…
[优势]
1)、功能强大了
2)、使用合适的类型，在移动端的开发的时候，用户输入，可以调取出最符合输入格式的虚拟键盘，方便用户操作
3)、部分类型提供了表单验证（内置验证机制：和我们自己写的正则验证不太一样，但是可以凑合【CSS中可以验证、JS中也可以验证】）

2、给input新增一个属性：placeholder给表单框做默认的信息提示

3、二级下拉框

1
2
3
4
5
6
7
<input type="text" list="departmentList">
<datalist id="departmentList">
	<option>市场部</option>
	<option>销售部</option>
	<option>技术部</option>
	<option>总裁办</option>
</datalist>

H5针对表单元素升级的部分，在IE低版本（有的IE9和IE10都不兼容），而且没有办法处理兼容，所以我们一般移动端使用这些新特性，PC端还是延续传统的操作办法

H5中的表单验证（内置规则不是特别好），所以真实项目中表单验证依然延续传统的正则验证完成

placeholder

整个IE浏览器对placeholder兼容性都不好
1、IE10+虽然兼容，但是文本框获取焦点后，提示就消失了
2、IE9及以下不兼容这个属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
~function () {
	//=> 获取页面当中所有具备data-place自定义属性的input
	let inputList = document.getElementsByTagName('input'),
		inputAry = [];

	for (var i = 0; i < inputList.length; i += 1) {
		let item = inputList[i];
		item.getAttribute('data-place') !== null ? inputAry.push(item) : null;
	}
	
	//=> 非IE浏览器中，我们只需要把自定义属性值存放在placeholder属性中即可，浏览器可以自己根据这个属性做好提示工作
	if (/(MSIE|Trident)/i.test(navigator.userAgent)) {
		for (var k = 0; k < inputAry.length; k += 1) {
			var itemInp = inputAry[k];
			inputAry[k].placeholder = itemInp.getAttribute('data-place');
		}
		return;
	}
	//=> IE浏览器（包含IE EDGE）不用内置的placeholder，采用我们自己设定的方式处理
	for (var z = 0; z < inputAry.length; z += 1) {
		var inputItem = inputAry[z],
			inputText = inputItem.getAttribute('data-place');
		inputItem.placeholder = '';
	
		/*
		 * 1、心创建一个span，把其存放在input元素的末尾（作为input的兄弟元素）
		 * 2、给span设置一定的样式（相对于父元素定位，和input的基础样式类似）
		 * 3、input或者span都要绑定相关事件行为：完成和内置placeholer相同的效果
		 *
		 */
		var spanTip = document.createElement('span');
		spanTip.innerHTML = inputText;
		spanTip.className = 'placeLike';
		inputItem.parentNode.appendChild(spanTip);

		//=> 把每一个input和span的索引，并且把spanTip作为属性值存储在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(){
			var value = this.value,
				spanTip = this.spanTip;
			spanTip.style.display = value.length > 0 ? 'none':'block';
		}
	}
	
	
}()