1、让网页的宽度自适应屏幕 1）html 上加入发确保网页的效果2）加上以下语句可使网页在苹果设备上运行更好3）加入这句话可以定义 iphone 的添加到主屏幕的图标网页打开方式：链接target 的值：_self(相同窗口， 浏览器默认) 、_top(整页窗口)和_parent(父窗口)相同、_blank(在新建的窗口打开)表示页面中的所有链接都在新窗口打开madinc.co/autocomplete=“off“/去掉输入框的历史记录querySelector 只返回匹配的第一个元素，如果没有匹配项，返回 null。querySelectorAll 返回匹配的元素集合，如果没有匹配项，返回空的n
2、odelist(节点数组)。document.querySelector(#indicator li.active).className = ;/innerheight: 返回窗口的文档 显示区的高度。 (IE 用document.documentElement.clientHeight)innerwidth 返回窗口的文档显示区的宽度。(IE 用document.documentElement.clientWidth )HTML5 新增:contenteditable:设置是否允许用户编辑元素contentextmenu:给元素设置一个上下文菜单draggable:设置是否允 许用户拖动元素
3、irrelevant:设置元素是否相关。不显示非相关的元素。ref:引用另一个文档或本文档上另一个位置。仅在 template 属性设置时使用registrationmark:为元素设置拍照。可规定于任何元素的后代，除了元素/ 控制手机全屏 ： 强制让文档的宽度与设备的宽度保持 1:1， 并且文档最大的宽度比例 是 1.0，且不允许用户点击屏幕放大浏览/viewport:可视区域/initial-scale:初始的缩 放比例;user-scalable:用 户是否可以手动缩放;/minimum-scale:允许用户缩放的最小比例;maximum-scale :允许用户缩放的最大比例/在手机中不
4、会将网页中的一串数字(电话号码)显示为拨号的超链接,默认telephone=yes /删除黙认的苹果菜单栏和工具栏,如需要苹果菜单栏和工具栏可不加/控制状态栏样式 content 有三个值：default、black、black-translucent/对移动网站-mobile web 进行收藏（“ 添加到桌面图标”）的时候增加的图标定义属性/apple-touch-icon:增加高光光亮的图标/apple-touch-icon-precomposed:设计原图图标网页针对不同屏幕分辨率修改，用-webkit-device-pixel-ratio 这个media 标签或在 js 中用 wind
5、ow.devicePixelRatio 这个方法，设置target-densitydpi 标签和 device-dpi 属性。这让你的定制更具有 灵活性。移动网站的视图的标签.HTML5 的 data-前缀就被称 为 data 属性本地存储:sessionStorage.lastname=“Smith“;/针对 session 的存储localStorage.lastname=“Smith“;/没有时间限制的本地存储(IE8 也支持)document.write(localStorage.lastname);使用本地存储前应先确定 window.localStorage 是否存在/placeh
6、older:默认提示,required:定义输入的字段是否必须(提交时的非空验证)HTML5 提供了两种检测是否在线的方式：navigator.online（true/false） 和 online/offline 事件。navigator.standalone 为 true:从桌面启动navigator.standalone 为 false:从 ios 浏览器启动localStorage. length:返回现在已经存储的变量数目。localStorage. key(n):返回第 n 个变量的键值(key)。localStorage.getItem(k):和 localStorage.k 一
7、样，取得键值为 k 的变量的值。localStorage.setItem(k , v):和 localStorage.k = v 一样，设置键值 k 的变量值。localStorage.removeItem(k):删除键值为 k 的 变量。localStorage.clear():清空所有变量。window.applicationCache 对象的事件:checking: 用 户代理检查 更新或者在第一次 尝试下载 manifest 文件的时候，本事件往往是事件队列中第一个被触发的noupdate: 检测出 manifest 文件没有更新downloading: 用户代理发现更新并且正在取 资
8、源，或者第一次下载manifest 文件列表中列举的资源progress: 用 户代理正在下载资源 manifest 文件中的需要缓存的资源cached: manifest 中列举的资源已经下载完成，并且已经缓存updateready: manifest 中列举的文件已经重新下载并更新成功，接下来 js 可以使用 swapCache()方法更新到应用程序中obsolete: 1、manifest 的 请求出现 404 或者 410 错误，应用程序缓存被取消 2、manifest 的请求出现 404 或者 410 错误，更新缓存的请求失败 3、manifest 文件没有改变，但是页面引用的 ma
9、nifest 文件没有被正确地下载error: 1、在取 manifest 列举的资源的过程中发生致命的错误 2、在更新过程中 manifest 文件发生变化-moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;/圆角text-shadow: 2px 2px 5px #333;/添加阴影-webkit-user-select: none;/不可先择文字(webkit 内核的浏览器)-webkit-text-size-adjust:none;/苹果移动设备上会识别，用于保证文字大小变形(transforma
10、tion)、转换(transition) 和动画(animation)图片旋转的一个样式：transition_duration-webkit-transform:rotate(10deg);-webkit-transition-property:all; /发生变化的属性-webkit-transition-duration:0.5s; /发生变化的时间-webkit-transition-timing-function:ease-in;/定义动画变化的曲线transition_duration:hover-webkit-transform:rotate(40deg);transform:旋
11、转、扭曲、 缩放、移动、矩 阵变形 transform-origin:元素的基点，默认在元素中心transform: rotate(30deg) | scale(2,1.5)(水平,垂直 ) | skew(30deg,10deg) | translate(100px,20px) |matrix;isLocal: true/该请求来自本地计算机用 document.onreadystatechange 的方法来监听状态改变，用 document.readyState = “complete”判断是否加载完成0 uninitialized （未初始化）还没有调用 send()方法 1 loadin
12、g （载入）已调用 send()方法，正在发送请求2 loaded （载入完成）send() 方法执行完成，已 经接收到全部响应内容3 interactive （交互）正在解析响 应内容4 complete （完成）响应内容解析完成，可以在客户端调用了document.getElementById(“testButton“).addEventListener(“click“, Go, false);/添加监听事件window 的 DOMContentLoaded 事件在形成完成的 DOM 树之后就会触发，不理会图像、 JavaScript 文件、CSS 文件或其他 资源是否已经下载完 毕。与
13、load 事件不同，DOMContentLoaded 支持在页面下载的早期添加事件处理程序，这也就意味着用户能够尽早地与页面进行交互。( 它是火 狐下特有的事件)document.addEventListener(DOMContentLoaded, loaded, false);/侦听器在侦听时有三个阶段：捕获阶段(根节点到子节点检查是否调用了监听函数)、目标阶段(目标本身)冒泡 阶段( 目标本身到根节点)。public override function addEventListener(type(事件类型):String, listener():Function, useCapture:B
14、oolean = false, priority:int = 0, useWeakReference:Boolean = false):void$(selector).bind(event) /向匹配元素添加一个或更多事件 处理器 $(selector).live(event) /向匹配元素添加一个事件 处理器，现在或将来 $(selector).die() 移除所有通 过 live() 函数添加的事件处理器 $(selector).unbind()移除被选元素的事件处理程序,适用于任何通过 jQuery 附加的事件处理程序Tmpl 提供了几种 tag：$：等同于 =，是 输 出变量，通 过了
15、 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 表示横屏（向左与向右）
16、模式onorientationchange : 在每次屏幕方向在横竖屏间切换后，就会触发这个 window 事件，用法与传统的事件类似页面事件先后顺序：mobileinit:页面没加载 DOM 之前事件pagebeforecreate:页面的 DOM 加载后，DOM 初始化之前触发的事件pagecreate:在 HTML 已经在 DOM 中建立完成，初始化也完成事件pageinit:页面完全加载完后触摸事件三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件：1. touchstart：手指放在一个 DOM 元素上。2. touchmove：手指拖曳一个 DOM 元素。3. touchend
17、：手指从一个 DOM 元素上移开。每个触摸事件都包括了三个触摸列表：1. touches：当前位于屏幕上的所有手指的一个列表。2. targetTouches：位于当前 DOM 元素上的手指的一个列表。3. changedTouches：涉及当前事件的手指的一个列表。例如，在一个 touchend 事件中，这就会是移开的手指。这些列表由包含了触摸信息的对象组成：1. identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。2. target：DOM 元素，是动作所针对的目标。3. 客户/页面/屏幕坐标：动作在屏幕上发生的位置。4. 半径坐标和 rotatio
18、nAngle：画出大约相当于手指形状的椭圆形。gesturestart /当两个手指接触屏幕时触发gesturechange /当两个手指接触屏幕后开始移动时触发gestureendonorientationchange /屏幕旋转事件 orientationchange / 检测触摸屏幕的手指何时改变方向/ 隐藏地址栏 , 100););e.preventDefault()/取消事件的默认动作taphold :长按事件var myscroll=new iScroll(“wrapper“,hScrollbar:false, vScrollbar:false);/定义一滚动对象hScroll:f
19、alse 禁止横向滚动 true 横向滚动 默认为 truevScroll:false 禁止垂直滚动 true 垂直滚动 默认为 truehScrollbar:false 隐藏水平方向上的 滚动条vScrollbar:false 隐藏垂直方向上的 滚动条fixedScrollbar:在 iOS 系 统上，当元素拖动超出了 scroller 的边界时，滚动条会收缩，设置为 true 可以禁止滚动条超出 scroller 的可见区域。默认在 Android 上为 true， iOS 上为 falsefadeScrollbar:false 指定在无渐隐效果时隐藏滚动条hideScrollbar: 在
20、没有用户交互时隐藏滚动条 默认为 truebounce: 启用或禁用边界的反弹，默认为 truemomentum: 启用或禁用惯性，默认为 true，此参数在你想要保存资源的时候非常有用lockDirection:false 取消拖 动方向的锁定， true 拖动只能在一个方向上（up/down 或者 left/right）zoom:true 滚动对象可以放大缩小zoomMax: 指定允许放大的最大倍数，默认为 4onScrollEnd:在滚动完成后的回调x:滚动水平初始位置y:滚动垂直初始位置bounce:true,是否超过实际 位置反弹bounceLock:false,当内容少于滚动是否可
21、以反弹， 这个实际用处不大momentum:true,动量效果，拖动惯性lockDirection:true,当水平 滚动和垂直滚动同时生效时，当拖动开始是否锁定另一边的拖动 useTransform:true,是否使用 CSS 形变 useTransition:false,是否使用 CSS 变换 topOffset:0,已经滚动的基准 值( 一般情况用不到 )checkDOMChanges:false,是否自动检测内容 变化 【注意事项】：如果想要图片缩放的效果很好的话要把他们放到硬件的合成层中。通俗点说，就是在所有需要缩放的 img 元素上使用-webkit- transform:tran
22、slate3d(0,0,0)来实现，而且尤为重要的是，硬件的加速会占用大量资源，要谨慎使用，否则你的应用可能就此崩 溃。document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。var board = document.getElementById(“board“);var e = document.createElement(“input“);e.type
23、 = “button“;e.value = “这是测试加载的小例子“;var object = board.appendChild(e);encodeURI()/编码decodeURI()/解码标签 属性：src：视频 的 URLposter：视频 封面，没有播放 时显示的图片preload：预加 载autoplay：自动播放loop：循环播放controls：浏览 器自带的控制条width：视频宽度height：视频高度停止:myVideo.currentTime = 0;myVideo.pause();浏览器的渲染和操作顺序大致如下： HTML 解析完毕 外部脚本和样式表加载完毕 脚本在文
24、档内解析并执行 HTML DOM 完全构造起来 图片和外部内容加载 网页完成加载 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(“, “);$(“#news_content“).html(html);
25、$Title$CreateTime $Img$Content-数据库优化-A、数据类型尽量用数字型，数字型的比较比字符型的快很多。B、 数据 类 型尽量小，这里的尽量小是指在满足可以预见的未来需求的前提下的。C、 尽量不要允许 NULL，除非必要，可以用 NOT NULL+DEFAULT代替。D、少用 TEXT 和 IMAGE，二进制字段的读写是比较慢的，而且，读取的方法也不多，大部分情况下最好不用。E、 自增字段要慎用，不利于数据迁移。系统设计阶段应该归纳一些业务逻辑放在数据库编程实现，数据库编程包括数据库存储过程、触发器和函数。用数据库编程实现业务逻辑的好处是减少网络流量并可更充分利用数据
26、库的预编译和缓存功能。-索引的设计在设计阶段，可以根据功能和性能的需求进行初步的索引设计，这里需要根据预计的数据量和查询来设计索引，可能与将来实际使用的时候会有所区别。关于索引的选择，应改主意：A、 根据数据量决定哪些表需要增加索引，数据量小的可以只有主键。B、 根据使用 频率决定哪些字段需要建立索引，选择经常作为连接条件、筛选条件、聚合查询、排序的字段作为索引的候选字段。C、 把 经常一起出现的字段组合在一起，组成组合索引，组合索引的字段顺序与主键一样，也需要把最常用的字段放在前面，把重复率低的字段放在前面。D、 一个表不要加太多索引，因 为索引影响插入和更新的速度。注意 SELECT IN
27、TO 后的 WHERE 子句，因为 SELECT INTO 把数据插入到临时表，这个过程会锁定一些系统表，如果这个 WHERE 子句返回的数据过多或者速度太慢，会造成系统表长期锁定，诸塞其他进程。A、 控制同一语句的多次执 行，特别是一些基础数据的多次执行是很多程序员很少注意的。B、 减少多次的数据 转换，也许需要数据转换是设计的问题，但是减少次数是程序员可以做到的。C、 杜 绝不必要的子查询和连接表，子查询在执行计划一般解释成外连接，多余的连接表带来额外的开销。-尖角代码手机版网站起码要实现一些基本的功能吧： 1.页面的适用性问题。对于移动终端，有不一样的分辨率与屏幕尺寸，如果还像电脑端的设
28、计还限制网页的宽度为 1003px 或其他像素值，字体大小 还用 12px 或 14px，那么，不一样的终端的效果差别会很大。所以这里，最好让网页的宽度自适应屏幕，还好，w3c 在设计 html 的时候为我们考虑了这 一点，只需一句话，就可以搞定，就是加上Javascript 代 码 ,对于字体的话，我们就用 em 或 ex 为单位就好 2.版本制作问题。移动页面往往针对不同的手机设置不同的版本，一般有精简版，标准版，3G 版，触屏版，智能手机版等等，这些除了在页面设计上有 不同外，页面语言也会不同的。精简版采用 wap 1.0 的 wml 脚本编写，这个通用性以前很强，很多国产手机都支持这个
29、语言的，但这个语言是很精简的。标准版的一般可以采用 wap 2.0 技术，对应的脚本语言是 xhtml mp(xhtml mobile profile)，这个语言是xhtml 的子集，这个并且支持大部分的 css,基本上和电脑版的差不多，但一般不能用 js，这是考 虑到这些手机是不支持 js 的。对于智能手机版，由于现在的智能手机都支持 js，这个版本的制作上就简单多了，不过，又由于大部分智能手机（基本上除去塞班手机，包括 Android,ios,wp7 等）都支持 Html5，因此，智能手版可以采用 html5 来制作。 3.版本控制问题。可能这部分是比较不好解决的，怎么智能判断手机的最佳版
30、本并跳转，可以从这几个方面考虑。一方面，可以想办法得到手机的操作系 统，比如，Android 的，ios 的，就可以跳转到 html5版了，windows 系统，毫无疑问电脑版，获得手机系统，可能通过得到手机型号，现在的 方法是通过浏览器的 UA（user agent)，获得手机的一些信息，简单一点的，直接可以通过 UA 判断手机的制造产商。要想获得更多的信息，就得有一个数据库，因为不同手机型号会有不一 样的 UA 信息，世界上的手机有很多，自己要想做一个这样的数据库还是很难的，不过，已经有人为我们做好了这样的数据库，或者更方便的，做好了一个识别手机 适用最佳版本的函数库，这里我推荐用 Wur
31、fl。另一方面，可以通过页面的脚本来判断浏览器对 js 和html5 的支持，代 码如下 Javascript 代 码 版本控制 window.onload = function() /检测是否支持 js try/检测 是否支持 html5 document.getElementById(“c“).getContext(“2d“); document.location = 支持 html5 版的链接; catch(e)/否则跳到支持 js 版 document.location = 支持 js 版; ; 普通版 版本控制window.onload = function()/检测是否支持 jst
32、ry/检测 是否支持 html5document.getElementById(“c“).getContext(“2d“);document.location = 支持 html5 版的链接;catch(e)/否则跳到支持 js 版document.location = 支持 js 版;普通版如果你仅仅想开发一个版本，只是判断一下是不是移动客户端，这里引用一段 discuz! x2 的代 码 Php 代码 ?php function checkmobile() global $_G; $mobile = array(); static $mobilebrowser_list =array(ip
33、hone, android, phone, mobile, wap, netfront, java, opera mobi, opera mini, ucweb, windows ce, symbian, series, webos, sony, blackberry, dopod, nokia, samsung, palmsource, xda, pieplus, meizu, midp, cldc, motorola, foma, docomo, up.browser, up.link, blazer, helio, hosin, huawei, novarra, coolpad, web
34、os, techfaith, palmsource, alcatel, amoi, ktouch, nexian, ericsson, philips, sagem, wellcom, bunjalloo, maui, smartphone, iemobile, spice, bird, zte-, longcos, pantech, gionee, portalmmm, jig browser, hiptop, benq, haier, lct, 320x320, 240x320, 176x220); $useragent = strtolower($_SERVERHTTP_USER_AGE
35、NT); if($v = dstrpos($useragent, $mobilebrowser_list, true) $_Gmobile = $v; return true; $brower = array(mozilla, chrome, safari, opera, m3gate, winwap, openwave, myop); if(dstrpos($useragent, $brower) return false; $_Gmobile = unknown; if($_GETmobile = yes) return true; else return false; function
36、dstrpos($string, foreach(array)$arr as $v) if(strpos($string, $v) != false) $return = $returnvalue ? $v : true; return $return; return false; var_dump(checkmobile();/如果是移动端返回 true，否 则 false ?phpfunction checkmobile() global $_G;$mobile = array();static $mobilebrowser_list =array(iphone, android, pho
37、ne, mobile, wap, netfront, java, opera mobi, opera mini,ucweb, windows ce, symbian, series, webos, sony, blackberry, dopod, nokia, samsung,palmsource, xda, pieplus, meizu, midp, cldc, motorola, foma, docomo, up.browser,up.link, blazer, helio, hosin, huawei, novarra, coolpad, webos, techfaith, palmso
38、urce,alcatel, amoi, ktouch, nexian, ericsson, philips, sagem, wellcom, bunjalloo, maui, smartphone,iemobile, spice, bird, zte-, longcos, pantech, gionee, portalmmm, jig browser, hiptop,benq, haier, lct, 320x320, 240x320, 176x220);$useragent = strtolower($_SERVERHTTP_USER_AGENT);if($v = dstrpos($user
39、agent, $mobilebrowser_list, true) $_Gmobile = $v;return true;$brower = array(mozilla, chrome, safari, opera, m3gate, winwap, openwave, myop);if(dstrpos($useragent, $brower) return false;$_Gmobile = unknown;if($_GETmobile = yes) return true; else return false;function dstrpos($string, foreach(array)$
40、arr as $v) if(strpos($string, $v) != false) $return = $returnvalue ? $v : true;return $return;return false;var_dump(checkmobile();/如果是移动端返回 true，否 则 false4.手机版本的大小问题。一般来说，对于精简版和普通版的手机网页，我们是做得越精简越好，能省的代码最好省去，毕竟现在手机流量对用户来说还是 很宝贵的。比如元素命名，一般页面少的话，命名越短越好，css 最好写在一行。css 中，有些元素是继承父类的样式的，不用重复定义，善用默认值。 5.浏览器缓存。如果再更新不快的情况下，最好开启浏览器缓存
