欢迎使用CSDN-markdown编辑器

来源：互联网发布：sqlalchemy sql注入编辑：程序博客网时间：2024/06/06 02:52

原生Ajax实现

var xmlhttp;if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();}else{// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.open("GET","xmlhttp_info.txt",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.onreadystatechange=function(){  if (xmlhttp.readyState==4 && xmlhttp.status==200){    console.log(xmlhttp.statusText);  }}xmlhttp.onerror = function(){...};xmlhttp.onmessage = function(){...};xmlhttp.onload = function(){...};xmlhttp.send();

meta

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">

HTTP TCP链接流程

发送请求（请求/头/内容）-接收应答（应答/头/内容）-关闭TCP链接（connection:keep-alive）

跨域的几种解决方案

JSONP/document.domain/window.name/access-control-allow-origin/html5: window.postMessage()/hash/flash

之前碰到的一个客户实现的根据设备自动跳转页面的例子

<link rel="alternate" href="/ch/mobile/content/de/home.html" id="mobile" media="only screen and (min-device-width : 320px) and (max-device-width : 1024px) and (-webkit-max-device-pixel-ratio: 1), (min-device-width : 320px) and (max-device-width : 640px) and (-webkit-min-device-pixel-ratio: 1.5)"><link rel="alternate" href="/ch/content/de/home.html" id="desktop" media="only screen and (touch-enabled: 0)">

css文字溢出处理

textoverflow: clip/ellipsis;overflow: hidden;

viewport是设置虚拟窗口能显示的尺寸大小
requestAnimationFrame动画支持
得到某个对象的字节数: unescape(encodedURIComponent(JSON.stringify(obj))).length
很久前的一个面试题(递归拼最大)：首先判断长度，以长度相等作为结束点。
IE下兼容inline-block的两个方法：

1. 先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回inline或block，layout不会消失）div {display:inline-block;...} div {display:inline;}2. 直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1等）。代码如下：div {display:inline; zoom:1;...}

img元素中设置width和height属性时，如果用CSS又设置了新的值，那么以CSS值为准
map

<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px"><map name="planetmap">  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"></map>

Table中有border-collapse时会忽略border-spacing（间距）
设置页面中链接及资源的base url，在head元素里添加：
<base href="http://www.w3schools.com/images/" target="_blank">

-XHTML

Document StructureXHTML DOCTYPE is mandatoryThe xmlns attribute in <html> is mandatory<html>, <head>, <title>, and <body> are mandatoryXHTML ElementsXHTML elements must be properly nestedXHTML elements must always be closedXHTML elements must be in lowercaseXHTML documents must have one root elementXHTML AttributesAttribute names must be in lower caseAttribute values must be quotedAttribute minimization is forbidden

a标签伪选择器的顺序：

link-visited-hover-actived（LVHA）

box model

默认设置高宽时是设置内容的高宽，元素高宽要加上padding border margin兼容：IE8及以前的IE设置高宽时是连同padding和border的，To fix this problem, add a <!DOCTYPE html> to the HTML page.

position是static时不能设置元素的位置
Yahoo页面优化34黄金准则/YSlow/PageSpeed
关于float

float：浮动，对块级元素，只对它后面的元素起作用，前面的元素没有影响。clear: right的元素不会处在float:right的元素旁边，影响的是自己而不是float的元素。inline：设置元素的显示类型，但是不会改变元素自身的类型，如inline元素设置为block属性还是不能包含块级元素。

z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
锚点

用name和id都可以，但是name只能用在a上，id可以用在任何元素。HTML取消了a元素上的name，所以尽量用id。name：<a name="here"></a>id：<anytag id="here"></anytag>

前端页面优化

net/content: http dns redirect cdn domainmin-cookiecss/js: top/bottom external min combine  no-import css spriteimg:  png optimize  no-scale different size  dataurl事件代理  缓存ele  事件解绑

关于readyState

Document One of five values:uninitialized - Has not started loading yetloading - Is loadingloaded - Has been loadedinteractive - Has loaded enough and the user can interact with itcomplete - Fully loadedHttp0   UNSENT  open()has not been called yet.1   OPENED  send()has not been called yet.2   HEADERS_RECEIVED    send() has been called, and headers and status are available.3   LOADING Downloading; responseText holds partial data.4   DONE    The operation is complete.

正则表达式

email: /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;trim: /(^\s*)|(\s*$)/g

arguments得到function的传值

0 0