移动端Hybrid混合APP开发——HTML5新特征讲解-CSDN博客

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设置了很多新的类型

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>

    &lt;!&ndash;
        需要使用NAME进行分组,一组中只能选中一个
        LABEL有一个FOR属性,指向对应表单元素的ID,操作LABEL中的内容,也相当于在操作表单元素（经常应用于单选或者复选框上）
    &ndash;&gt;
    <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">
    &lt;!&ndash;
        SUBMIT默认行为：点击按钮会跳转到FORM的ACTION对应的地址（表单提交）
        在传统的非前后端分离项目中，我们会在ACTION中指定一个程序处理页面(一般是由后台语言(PHP\JSP\ASP...)完成),我们利用它的默认行为把数据发送给处理页面,由处理页面完成数据的存储等操作

        现有前后端完全分离项目中,我们都是在JS中手动获取到用户输入的内容,并且通过AJAX等技术发送给服务器存储或者处理（此时我们需要阻止SUBMIT的默认行为）
        &ndash;&gt;
</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中的表单验证（内置规则不是特别好），所以真实项目中的表单验证依然延续传统的正则验证完成

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方法
复制代码