移动web开发总结_html/css_WEB-ITnose

网页打开方式：链接
target的值：_self(相同窗口，浏览器默认)、_top(整页窗口)和_parent(父窗口)相同、_blank(在新建的窗口打开)
表示页面中的所有链接都在新窗口打开

madinc.co//

autocomplete="off"//去掉输入框的历史记录

querySelector只返回匹配的第一个元素，如果没有匹配项，返回null。
querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。
document.querySelector('#indicator > li.active').className = '';//......

innerheight: 返回窗口的文档显示区的高度。 (IE用document.documentElement.clientHeight)
innerwidth 返回窗口的文档显示区的宽度。(IE用document.documentElement.clientWidth )

<-----------------------------------------------------------------HTML5---------------->

HTML5新增:
contenteditable:设置是否允许用户编辑元素
contentextmenu:给元素设置一个上下文菜单
draggable:设置是否允许用户拖动元素
irrelevant:设置元素是否相关。不显示非相关的元素。
ref:引用另一个文档或本文档上另一个位置。仅在template属性设置时使用
registrationmark:为元素设置拍照。可规定于任何元素的后代，除了元素

输出变量，通过了html编码的。
{{html}}:输出变量html,但是没有html编码，适合输出html代码。
{{if }} {{else}}:提供了分支逻辑。
{{each}}:提供循环逻辑，$value访问迭代变量。

devicePixelRatio:设备像素比,高清iPad下，window.devicePixelRatio为2
(/ipad/gi).test(navigator.appVersion)//判断移动终端的浏览器是否为ipad,navigator.appVersion为浏览器的版本

window.orientation :这个属性给出了当前设备的屏幕方向，0表示竖屏，正负90表示横屏（向左与向右）模式
onorientationchange : 在每次屏幕方向在横竖屏间切换后，就会触发这个window事件，用法与传统的事件类似

页面事件先后顺序：
mobileinit:页面没加载DOM之前事件
pagebeforecreate:页面的DOM加载后，DOM初始化之前触发的事件
pagecreate:在HTML已经在DOM中建立完成，初始化也完成事件
pageinit:页面完全加载完后

触摸事件
三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件：
1. touchstart：手指放在一个DOM元素上。
2. touchmove：手指拖曳一个DOM元素。
3. touchend：手指从一个DOM元素上移开。
每个触摸事件都包括了三个触摸列表：
1. touches：当前位于屏幕上的所有手指的一个列表。
2. targetTouches：位于当前DOM元素上的手指的一个列表。
3. changedTouches：涉及当前事件的手指的一个列表。
例如，在一个touchend事件中，这就会是移开的手指。
这些列表由包含了触摸信息的对象组成：
1. identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。
2. target：DOM元素，是动作所针对的目标。
3. 客户/页面/屏幕坐标：动作在屏幕上发生的位置。
4. 半径坐标和 rotationAngle：画出大约相当于手指形状的椭圆形。

gesturestart //当两个手指接触屏幕时触发
gesturechange //当两个手指接触屏幕后开始移动时触发
gestureend
onorientationchange //屏幕旋转事件
orientationchange // 检测触摸屏幕的手指何时改变方向

// 隐藏地址栏 & 处理事件的时候 ，防止滚动条出现
addEventListener('load', function(){
setTimeout(function(){ window.scrollTo(0, 1); }, 100);
});

e.preventDefault()//取消事件的默认动作
taphold :长按事件

var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false});//定义一滚动对象
hScroll:false 禁止横向滚动 true横向滚动 默认为true
vScroll:false 禁止垂直滚动 true垂直滚动 默认为true
hScrollbar:false 隐藏水平方向上的滚动条
vScrollbar:false 隐藏垂直方向上的滚动条
fixedScrollbar: 在iOS系统上，当元素拖动超出了scroller的边界时，滚动条会收缩，设置为true可以禁止滚动条超出scroller的可见区域。默认在Android上为true， iOS上为false
fadeScrollbar:false 指定在无渐隐效果时隐藏滚动条
hideScrollbar: 在没有用户交互时隐藏滚动条 默认为true
bounce: 启用或禁用边界的反弹，默认为true
momentum: 启用或禁用惯性，默认为true，此参数在你想要保存资源的时候非常有用
lockDirection:false 取消拖动方向的锁定， true拖动只能在一个方向上（up/down 或者left/right）
zoom:true 滚动对象可以放大缩小
zoomMax: 指定允许放大的最大倍数，默认为4
onScrollEnd:在滚动完成后的回调
x:滚动水平初始位置
y:滚动垂直初始位置
bounce:true,是否超过实际位置反弹
bounceLock:false,当内容少于滚动是否可以反弹，这个实际用处不大
momentum:true,动量效果，拖动惯性
lockDirection:true,当水平滚动和垂直滚动同时生效时，当拖动开始是否锁定另一边的拖动
useTransform:true,是否使用CSS形变
useTransition:false,是否使用CSS变换
topOffset:0,已经滚动的基准值(一般情况用不到)
checkDOMChanges:false,是否自动检测内容变化

【注意事项】：如果想要图片缩放的效果很好的话要把他们放到硬件的合成层中。通俗点说，就是在所有需要缩放的img元素上使用-webkit- transform:translate3d(0,0,0)来实现，而且尤为重要的是，硬件的加速会占用大量资源，要谨慎使用，否则你的应用可能就此崩 溃。

document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。

var board = document.getElementById("board");
var e = document.createElement("input");
e.type = "button";
e.value = "这是测试加载的小例子";
var object = board.appendChild(e);

encodeURI()//编码
decodeURI()//解码

停止:
myVideo.currentTime = 0;
myVideo.pause();

浏览器的渲染和操作顺序大致如下：

HTML解析完毕
外部脚本和样式表加载完毕
脚本在文档内解析并执行
HTML DOM完全构造起来
图片和外部内容加载
网页完成加载

<--------------------tmpl替换-------------------------->
news_template = $('#news_template').template();
$.tmpl(news_template, manufacture_news).appendTo('#news_content');
var html = $("#news_content").html();
if (html.indexOf("[br]") > -1)
{
html = html.$replace("[br]", "
");
html = html.$replace("<", "<").$replace(">", ">");
$("#news_content").html(html);
}

${Title}

${Img}

${Content}

------------------数据库优化---------------------
A、数据类型尽量用数字型，数字型的比较比字符型的快很多。

B、 数据类型尽量小，这里的尽量小是指在满足可以预见的未来需求的前提下的。

C、 尽量不要允许NULL，除非必要，可以用NOT NULL+DEFAULT代替。

D、少用TEXT和IMAGE，二进制字段的读写是比较慢的，而且，读取的方法也不多，大部分情况下最好不用。

E、 自增字段要慎用，不利于数据迁移。

系统设计阶段应该归纳一些业务逻辑放在数据库编程实现，数据库编程包括数据库存储过程、触发器和函数。用数据库编程实现业务逻辑的好处是减少网络流量并可更充分利用数据库的预编译和缓存功能。

----------
索引的设计

在设计阶段，可以根据功能和性能的需求进行初步的索引设计，这里需要根据预计的数据量和查询来设计索引，可能与将来实际使用的时候会有所区别。

关于索引的选择，应改主意：

A、 根据数据量决定哪些表需要增加索引，数据量小的可以只有主键。

B、 根据使用频率决定哪些字段需要建立索引，选择经常作为连接条件、筛选条件、聚合查询、排序的字段作为索引的候选字段。

C、 把经常一起出现的字段组合在一起，组成组合索引，组合索引的字段顺序与主键一样，也需要把最常用的字段放在前面，把重复率低的字段放在前面。

D、 一个表不要加太多索引，因为索引影响插入和更新的速度。

注意SELECT INTO后的WHERE子句，因为SELECT INTO把数据插入到临时表，这个过程会锁定一些系统表，如果这个WHERE子句返回的数据过多或者速度太慢，会造成系统表长期锁定，诸塞其他进程。
A、 控制同一语句的多次执行，特别是一些基础数据的多次执行是很多程序员很少注意的。

B、 减少多次的数据转换，也许需要数据转换是设计的问题，但是减少次数是程序员可以做到的。

C、 杜绝不必要的子查询和连接表，子查询在执行计划一般解释成外连接，多余的连接表带来额外的开销。

---------尖角代码

手机版网站起码要实现一些基本的功能吧：
1.页面的适用性问题。对于移动终端，有不一样的分辨率与屏幕尺寸，如果还像电脑端的设计还限制网页的宽度为1003px或其他像素值，字体大小 还用12px或14px，那么，不一样的终端的效果差别会很大。所以这里，最好让网页的宽度自适应屏幕，还好，w3c在设计html的时候为我们考虑了这 一点，只需一句话，就可以搞定，就是加上

Javascript代码

,对于字体的话，我们就用em或ex为单位就好
2.版本制作问题。移动页面往往针对不同的手机设置不同的版本，一般有精简版，标准版，3G版，触屏版，智能手机版等等，这些除了在页面设计上有 不同外，页面语言也会不同的。精简版采用wap 1.0 的wml脚本编写，这个通用性以前很强，很多国产手机都支持这个语言的，但这个语言是很精简的。标准版的一般可以采用wap 2.0技术，对应的脚本语言是xhtml mp(xhtml mobile profile)，这个语言是xhtml的子集，这个并且支持大部分的css,基本上和电脑版的差不多，但一般不能用js，这是考虑到这些手机是不支持 js的。对于智能手机版，由于现在的智能手机都支持js，这个版本的制作上就简单多了，不过，又由于大部分智能手机（基本上除去塞班手机，包括 Android,ios,wp7等）都支持Html5，因此，智能手版可以采用html5来制作。
3.版本控制问题。可能这部分是比较不好解决的，怎么智能判断手机的最佳版本并跳转，可以从这几个方面考虑。一方面，可以想办法得到手机的操作系 统，比如，Android的，ios的，就可以跳转到html5版了，windows系统，毫无疑问电脑版，获得手机系统，可能通过得到手机型号，现在的 方法是通过浏览器的UA（user agent)，获得手机的一些信息，简单一点的，直接可以通过UA判断手机的制造产商。要想获得更多的信息，就得有一个数据库，因为不同手机型号会有不一 样的UA信息，世界上的手机有很多，自己要想做一个这样的数据库还是很难的，不过，已经有人为我们做好了这样的数据库，或者更方便的，做好了一个识别手机 适用最佳版本的函数库，这里我推荐用Wurfl。另一方面，可以通过页面的脚本来判断浏览器对js和html5的支持，代码如下

Javascript代码

如果你仅仅想开发一个版本，只是判断一下是不是移动客户端，这里引用一段discuz! x2的代码

Php代码

4.手机版本的大小问题。一般来说，对于精简版和普通版的手机网页，我们是做得越精简越好，能省的代码最好省去，毕竟现在手机流量对用户来说还是 很宝贵的。比如元素命名，一般页面少的话，命名越短越好，css最好写在一行。css中，有些元素是继承父类的样式的，不用重复定义，善用默认值。
5.浏览器缓存。如果再更新不快的情况下，最好开启浏览器缓存