移动开发HTML知识
1、基础页面模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>标题</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
这里开始内容
<script src="index.js"></script>
<script></script>
</body>
</html>
2、meta基础知识
* 设置字符集
<meta charset="UTF-8">
* H5页面窗口自动调整到设备宽度，并禁止用户缩放页面
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
* 忽略将页面中的数字识别为电话号码
<meta content="telephone=no" name="format-detection">
* 忽略对邮箱地址的识别
<meta content="email=no" name="format-detection">
* winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉
<meta name="msapplication-tap-highlight" content="no">
3、打电话发短信的怎么实现
打电话
<a href="tel:0755-10086">打电话给:0755-10086</a>
发短信，winphone系统无效
<a href="sms:10086">发短信给: 10086</a>
4、 取消input在ios下，输入的时候英文首字母的默认大写
<input autocapitalize="off" autocorrect="off" />
5、 实现键盘的搜索按钮
<form>
<input type="search">
</form>
6、性能优化方案
（1）发布前必要检查项
* 所有图片必须有进行过压缩
* 考虑适度的有损压缩，如转化为80%质量的jpg图片
* 考虑把大图切成多张小图，常见在banner图过大的场景
（2）加载性能优化, 达到打开足够快
* 数据离线化，考虑将数据缓存在 localStorage
* 初始请求资源数 < 4 注意！
* 图片使用CSS Sprites 或 DataURI
* 外链 CSS 中避免 @import 引入
* 考虑内嵌小型的静态资源内容
* 初始请求资源gzip后总体积 < 50kb
* 静态资源(HTML/CSS/JS/Image)是否优化压缩？
* 避免打包大型类库
* 确保接入层已开启Gzip压缩（考虑提升Gzip级别，使用CPU开销换取加载时间） 注意！
* 尽量使用CSS3代替图片
* 初始首屏之外的静态资源（JS/CSS）延迟加载 注意！
* 初始首屏之外的图片资源按需加载（判断可视区域） 注意！
* 单页面应用(SPA)考虑延迟加载非首屏业务模块
* 开启Keep-Alive链路复用
（3）运行性能优化, 达到操作足够流畅
* 避免 iOS 300+ms 点击延时问题 注意！
* 缓存 DOM 选择与计算
* 避免触发页面重绘的操作
* Debounce连续触发的事件(scroll / resize / touchmove等)，避免高频繁触发执行 注意！
* 尽可能使用事件代理，避免批量绑定事件
* 使用CSS3动画代替JS动画
* 避免在低端机上使用大量CSS3渐变阴影效果，可考虑降级效果来提升流畅度
* HTML结构层级保持足够简单
* 尽能少的使用CSS高级选择器与通配选择器
* Keep it simple
7、 ios纯数字键盘
<input type="number" pattern="[0-9]*">
