移动端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（安装在手机上的）
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
- number
- tell
- range
- color
- date
- …
- 升级：给表单元素新增属性placeholder（给表单元素设置提示信息）
- 升级：提供了新的下拉框方式等
- …
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="请输入邮箱!"> ...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视距
- …
- 2D变形
- CSS3中的动画
- transition过渡动画
- property
- duration
- timing-function
- delay
- animation帧动画
- name
- duration
- timing-function
- delay
- count：infinite
- fill-mode：forwards、backwards、both
- animate.css
- @keyframes
- …
- transition过渡动画
- CSS3中的盒子模型
- box-sizing：border-box
- flex
- columns
- CSS3中的媒体查询：@media
- …
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/ydkf/3394.html