移动端H5开发

移动端开发分为两个方向：
- native app 开发（原生APP）
+ 安卓 (Java-Native)
+ IOS (Object-C / swift)
+ 所有在应用商店中下载安装的程序都是原生app（都是安卓和IOS开发的）
- web app 开发（H5页面）
+ H5 / CSS3 / JS …
+ 我们开发的页面一般都是运行在手机端的浏览器中
- Hybrid混合app开发

native app
优势：直接安装在手机操作系统中的程序，所以可以操作手机内部的软件或者硬件，而且处理性能比较优秀（相对H5来说）

例如：
获取通讯录
读取短信
获取地理位置（操作手机GPS）
操作摄像头
操作手机的重力感应器
…

当然需要用户的允许

弊端：版本升级更新需要用户自主，这样会导致新内容不能及时传达给用户

web app
优势：我们开发的H5是运行在手机端浏览器中的（原代码存放在服务器上，用户输入网址或者其它操作访问，从服务器端获取最新的原代码，然后在浏览器中呈现出来）

我们只要把服务器上的程序升级，用户重新访问，看到的就是最新版本（更新推广的及时性）

原生APP根据所在手机操作系统不一样，我们需要两个不同的技术团队，开发两款类似的应用（不能跨平台）；但是H5开发不会，我们开发的页面可以适配任何操作系统（跨平台）;

弊端：H5是运行在浏览器中的，不能直接操作手机系统中的软件和硬件（浏览器是原生app，H5想要操作手机软硬件，需要浏览器的支持）；性能不是很好；

Hybrid混合开发模式
充分利用H5和native app的优势，把他们结合在一起，开发的一款app（安装在手机上的）
Alt text

HTML5

HTML5秘籍第二版

HTML5中新增加的语义化标签
- header、footer、article、figure…
- 以上标签不兼容IE6~8低版本浏览器，兼容处理：html5.min.js
- 修改或者删除了一些标签：strong（重点强调）、small（附属细则）、hr（区域分割）…修改指的是改变了标签的语义化；font、center这些标签不建议大家使用了（删除）;
- 新增一些标记标签：mark（标记）、time（时间）、progress（进度）…
- …

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>移动端开发</title>
    <!--条件注释：针对IE处理，大小写或者其它语法必须严格按照下面写法-->
    <!--[if lt IE 9]>
    <script src="html5.min.js"></script>
    <![endif]-->
</head>
<body>
<nav class="navBox">
    <ul>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</nav>
</body>
</html>

针对于传统的表单元素进行升级
- 传统表单元素：form、label、textarea、select、button…
- input
  - text
  - password
  - radio
  - checkbox
  - file
  - submit
  - reset
  - button
  - …
- 针对于传统的升级：给input新增加一些类型
  - search
  - email
  - number
  - tell
  - range
  - color
  - date
  - …
- 升级：给表单元素新增属性placeholder（给表单元素设置提示信息）
- 升级：提供了新的下拉框方式等
- …
  
  给input设置新的类型作用：
  1、当用户输入的时候，可以根据设置的类型，调取出最符合用户输入的键盘（例如：类型设置为number，调取出来的就是数字键盘…）
  2、提供了CSS和JS新的验证方式（我们一般常用的还是正则验证）

表单验证：CSS验证

<style>
    input {
        border: 1px solid #CCC;
        outline: none;
    }

    #userEmail:valid {
        /*验证成功:浏览器内置验证机制验证结果是成功*/
        background: white;
    }

    #userEmail:invalid {
        /*验证失败*/
        background: lightpink;
    }
</style>
...
<input type="email" id="userEmail" placeholder="请输入邮箱!">
...

表单验证：JS内置验证

userEmail.onkeydown = userEmail.onkeyup = function () {
    //=>this.checkValidity()：根据浏览器内置的验证机制，获取成功还是失败(TRUE/FALSE)
    if (!this.checkValidity()) {
        this.style.backgroundColor = 'lightpink';
        return;
    }
    this.style.backgroundColor = 'white';
};

表单验证：正则验证

/*
 * 移动端事件中一般都没有：keydown/keyup（移动端是虚拟键盘），我们使用input事件代替即可
 *
 * userEmail.oninput=function...
 */
//=>自己编写正则验证(项目中最常用)
userEmail.onkeydown = userEmail.onkeyup = function () {
    let reg = /^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
    let val = this.value;
    if (val.length === 0) {
        this.style.backgroundColor = 'white';
        return;
    }
    if (!reg.test(val)) {
        this.style.backgroundColor = 'lightpink';
        return;
    }
    this.style.backgroundColor = 'white';
};

新增媒体解决方案：audio音频、video视频
新增加canvas绘图：canvas是一个标签，我们可以基于js，把它作为一个画布，绘制出想要的图形或者动画
- Echarts：图标插件，它就是基于canvas实现 http://echarts.baidu.com/
新增加一些API（主要是供JS使用的）
- webstorage：localStorage、seessionStorage 本地存储解决方案
- web socket：新的客户端和服务器端通信方案
- 获取地理位置或者重力感应等API
- …

CSS3

图解CSS3（大漠）

新增加一些选择器
- nth-child
- nth-of-type
- …
新增加 @font-face：基于它可以实现字体图标
新增加一些常用的属性
- border-radius
- box-shadow
- text-shadow
- -webkit-filter
- …
针对于背景做了一些处理
- background-size
- background-origin
- background-clip
- …
提供了变形属性：transform
- 2D变形
  - scale
  - rotate
  - translate
  - skew
  - matrix
  - …
- 3D变形
  - rotateX / rotateY / rotateZ
  - translate(X/Y/Z)
  - transform-style：preserve-3d
  - transform-origin
  - perspective视距
  - …
CSS3中的动画
- transition过渡动画
  - property
  - duration
  - timing-function
  - delay
- animation帧动画
  - name
  - duration
  - timing-function
  - delay
  - count：infinite
  - fill-mode：forwards、backwards、both
  - animate.css
  - @keyframes
  - …
CSS3中的盒子模型
- box-sizing：border-box
- flex
- columns
CSS3中的媒体查询：@media
…