我的总结

最新推荐文章于 2023-01-08 12:47:47 发布

anfangw

最新推荐文章于 2023-01-08 12:47:47 发布

阅读量263

点赞数

分类专栏：个人总结

本文链接：https://blog.csdn.net/anfangw/article/details/55049324

版权

个人总结专栏收录该内容

5 篇文章 0 订阅

订阅专栏

https://zhidao.baidu.com/share/490c2a9d0b57c749a2c23d1bb1b3e888.html
http://www.cnblogs.com/ranran/p/4668071.html
http://www.jianshu.com/p/b4cd4dea0489
设置表格布局算法：table{table-layout}
设置是否将表格边框折叠为单一边框border-collapse

table-layout: fixed;//默认。列宽度由单元格内容设定。
table-layout: automatic;//列宽由表格宽度和列宽度设定,文字会超出表格。
border-collapse:collapse;//折叠为单一边框
text-align:left;//水平对齐方式(left/right/center)
vertical-align:top;//垂直对齐方式(top/bottom)
border-collapse:separate;
border-spacing: 10px 50px;//object.style.borderSpacing="15px"

答案：1,2,3（这种不实践真是太难做出来了）

图片的HTTP请求总结，web图片http请求汇总，网页图片预加载

1.隐藏图片,只有Opera不产生请求。注意：用visibility: hidden隐藏图片时，在Opera下也会产生请求。(有待测试)

<img src="a.jpg" style="display: none" />

2.重复图片，所有浏览器都只产生一次请求（有待测试）

<img src="haorooms.jpg" />
<img src="haorooms.jpg" />
.test1 { background: url(haorooms.jpg) }
.test2 { background: url(haorooms.jpg) }

3.背景仅在应用的元素在页面中存在时，才会产生请求

<style type="text/css">
    .test1 { background: url(haorooms.jpg) }
    .test2 { background: url(http2.jpg) } /* 页面中没有class为test2的元素 */
</style>
<div class="test1">test1</div>

4.Opera和Firefox对于用display: none隐藏的元素背景，不会产生HTTP请求。仅当这些元素非display: none时，才会请求背景图片。

<style type="text/css">
    .test1 { background: url(haorooms.jpg); display: none; }
    .test2 { background: url(http2.jpg); visibility: hidden; }
</style>
<div class="test1">test1</div>

5.多重背景

//只会请求http2.jpg这一张图片，原因是test1的class把上面的给覆盖掉了，所有只请求后面的一张图片
<style type="text/css">
    .test1 { background: url(haorooms.jpg); }
    .test1 { background: url(http2.jpg); }
</style>
<div class="test1">test1</div>

//那么http请求如下：webkit引擎浏览器对背景图都请求
<style type="text/css">
    .test1 { background-image:url("haorooms.jpg"),url("http2.jpg");}
</style>
<div class="test1">test1</div>

6.触发hover时，才会请求hover状态下的背景。不触发的话，只请求默认的背景图片。

<style type="text/css">
    a.test1 { background: url(haorooms.jpg); }
    a.test1:hover { background: url(http2.jpg); }
</style>
<a href="#" class="test1">test1</a>

7.只有Opera不会马上请求图片，当添加到DOM树上时，Opera才会发送请求。

<script type="text/javascript">
    var el = document.createElement('div');
    el.innerHTML = '<img src="haorooms.jpg" />';
    //document.body.appendChild(el);
</script>
<script type="text/javascript">
    new Image().src = 'haorooms.jpg';
    new Image().src = 'http2.jpg';
</script>

8.在无JS支持的环境下，可以采用隐藏元素来预加载

<img src="haoroomscom.jpg" style="visibility: hidden; height: 0; width: 0" />

有待测试

总:http://www.haorooms.com/post/web_http_request

1、对于隐藏图片和隐藏元素的背景，Opera不会产生请求。
2、对于隐藏元素的背景，Firefox也不会产生请求。
3、对于尚未插入DOM树的img元素，Opera不会产生请求。
4、基于webkit引擎的Safari和Chrome，支持多背景图。
5、其它情景，所有主流浏览器保持一致。

这个当真是不知，据说选12456

13>>2=3 -13>>2=?

alert(5*015===5.075)      //false
13>>2=3 -13>>2=?
var temp;
temp = 14 << 2;
/*
14 的二进制是 00111000
00001110 向左位移2位 00111000 = 56
*/
alert(temp);
// 弹出【56】

13|5    //按位或：13 
13&5    //按位与：5

var date = new Date();   
var mouth = date.getMonth();    //js获取当前日期的月份

sort(); //按字符排序的算法。
var arr = [1,2,55,12,88];
arr.sort();//ASCII字符代码从小到大排，arr结果为[1,12,2,55,88];

<span style="font-size:18px;">
    isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1;
    //isChrome=true时，为chrome浏览器
</span>

进制转化

//10->2
<span>123.toString(2);</span>

回车键提交

document.onkeydown = function(event){  
    event = event?event:window.event;  
    if (event.keyCode == 13) {  
        alert(“hello world!”);  
    }  
};

var s="tencent is perfect";
var arr=s.split(" ");
s="";
for(var i=0;i<arr.length;i++){
    s+=arr[i]+(i+1)+" ";
}

编写js的类，使其拥有public和private类型的属性和方法

function Person(_name,_age,_sex,_salary){  
    //public  
    this.name = _name;  
    this.age = _age;  

    //privare  
    var sex = _sex;  
    var salary = _salary;  

    //public method  
    this.getName = function(){return this.name;}  
    this.getAge = function(){return this.age;}  

    //private methd  
    function getSex(){return sex;}  
    function getSalary(){return salary;}

    this.display = function(){document.write(this.getName() + "---" + this.getAge() + "---" + getSex() + "----" + getSalary());}  
} 
var smirk = new Person("zy","21","f","5000");  
smirk.display();

一些常用的网络优化工具

优化大师，超级兔子

SEO（Search Engine Optimization）缩写而来，中文意译为“搜索引擎优化”。

SEO优化工具：TrafficTravis——SEO分析工具；Backlinkwatch.com—反链检测；XENU Link Sleuth

死链检测；SEO Tool Bar (火狐插件)；SEO Quake (火狐插件)

css的样式在不同类型的浏览器之间的显示差异如何解决

答：（个人理解）先判断为何种浏览器，再为不同浏览器加载不同的css
a. CSS中几种浏览器对不同关键字的支持，可进行浏览器兼容性重复定义 !important 可被FireFox和IE7识别 * 可被IE6、IE7识别 _ 可被IE6识别 *+ 可被IE7识别
b. 应用条件注释（只对IE有效）,因为IE各版本的浏览器对我们制作的WEB标准的页面解释不一样，具体就是对CSS的解释不同，我们为了兼容这些，可运用条件注释来各自定义，最终达到兼容的目的。
比如：

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>三栏布局-浮动方法</title>  
<style type="text/css">  
    body,div,p{margin:0; padding:0; }  
    #wrap {padding:0 300px 0 200px; *overflow:hidden;}
    #main {float:left; width:100%; height:600px; background:#fffaba;}
    #left, #right {position:relative; height:600px; _display:inline;}
    #left {width:200px; float:left; margin-left:-100%; right:200px; _right:-300px; background:#8fc41f;}  
    #right {width:300px; float:right; margin-right:-300px; background:#00b7ef;}  
</style>  
</head>  
<body>  
<span style="white-space:pre"></span>
<div id="wrap">  
    <div id="main">main</div>  
    <div id="left">left</div>  
    <div id="right">right</div>  
</div>  
</body>  
</html>

清除浮动的方法

//01
<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
</style> 
<div class="div1"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
</div>
<div class="div2">div2</div>
/*原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题
优点：简单，代码少，容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用*/

//02
<style type="text/css"> 
   .div1{background:#000080;border:1px solid red}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   /*清除浮动代码*/
   .clearfloat{clear:both}
</style> 
<div class="div1"> 
    <div class="left">Left</div> 
    <div class="right">Right</div>
    <div class="clearfloat"></div>
</div>
<div class="div2">div2</div>
/*原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单，代码少，浏览器支持好，不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不爽
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法*/

//03
<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   /*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
   .clearfloat{zoom:1}
</style> 
<div class="div1 clearfloat"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
</div>
<div class="div2">div2</div>
/*原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持
建议：推荐使用，建议定义公共类，以减少CSS代码*/

//04
<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   </style> 
<div class="div1"> 
    <div class="left">Left</div> 
    <div class="right">Right</div>
</div>
<div class="div2">div2</div>
/*原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单，代码少，浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用*/

//05
<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
</style> 
<div class="div1"> 
    <div class="left">Left</div> 
    <div class="right">Right</div>
</div>
<div class="div2">div2</div>
/*原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度
优点：简单，代码少，浏览器支持好
缺点：内部宽高超过父级div时，会出现滚动条。
建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。*/

//06
<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;margin-bottom:10px;float:left}
   .div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解决代码*/clear:both}
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
</style> 
<div class="div1"> 
    <div class="left">Left</div> 
    <div class="right">Right</div>
</div>
<div class="div2">div2</div>
/*原理：所有代码一起浮动，就变成了一个整体
优点：没有优点
缺点：会产生新的浮动问题。
建议：不推荐使用，只作了解。*/

//07
<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;}
   .div2{background:#800080;border:1px solid red;height:100px;width:98%;}
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
</style> 
<div class="div1"> 
    <div class="left">Left</div> 
    <div class="right">Right</div>
</div>
<div class="div2">div2</div>
/*原理：将div属性变成表格
优点：没有优点
缺点：会产生新的未知问题
建议：不推荐使用，只作了解*/

//08
<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}
   .div2{background:#800080;border:1px solid red;height:100px}
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   .clearfloat{clear:both}
</style> 
<div class="div1"> 
    <div class="left">Left</div> 
    <div class="right">Right</div><br class="clearfloat" />
</div>
<div class="div2">div2</div>
/*原理：父级div定义zoom:1来解决IE浮动问题，结尾处加br标签clear:both
建议：不推荐使用，只作了解*/