html+css+js的一些基础问题

来源：互联网发布：沈颢事件知乎编辑：程序博客网时间：2024/04/28 08:01

小生会在学习的过程中一直更新的哦！！！！！！！！！！！！！！！！

html+css方面的：

1、display:none与visibility:hidden的相同点与不同点

相同点：

display:none和visibility:hidden都能把网页上的某个元素隐藏起来；

不同点：

display:none
（1）不为被隐藏的标签保留其物理空间，即该标签在页面上彻底消失（标签还在网页中，只是不占物理空间）
（2）隐藏标签的时候会产生reflow和repaint（回流与重绘）；
（3）父元素设置display:none;父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何设置都显示不出来；

visibility:hidden
（1）使标签在网页上不可见，但是该标签在网页上所占的空间没有改变；
（2）隐藏标签的时候不会产生前端性能问题，换句话说它不会引起回流与重绘；
（3）给一个父元素应用visibility:hidden，则其子孙后代也都会全部不可见。但是如果我们给子孙元素应用了visibility:visible，那么这个子孙元素又会显示出来；

2、在Android2.3自带浏览器不支持border-radius百分比的问题

通常我们实现一个正圆只需要border-radius:50%即可，大致代码如下：

<span style="font-size:14px;"><span style="font-size:14px;">.test{      width:100px;      height:100px;      border:1px solid blue;      border-radius:50%;}</span></span>

3、怎么实现输入框高度自适应

因为textarea不支持自适应高度，就是定好高度或者行数之后，超出部分就会显示滚动条，看起来不美观。

而用div来模拟时，首先遇到的问题是：div怎么实现输入功能？

contenteditable属性规定是否可编辑元素的内容。

在一个普通的元素上加上contenteditable="true"就实现可编辑状态，就会出现光标。

如：

<span style="font-size:14px;"><div contenteditable="ture">hyp</div></span>

contenteditable虽然是html5里面的内容，但是IE似乎老早就支持该标签属性了。

<span style="font-size:14px;"><!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>.wrap{width: 400px;min-height: 20px;max-height: 300px;margin-left: auto;margin-right: auto;padding: 3px;border: 1px solid #a0b3d6;line-height: 24px;font-size: 12px;word-wrap: break-word;overflow-x: hidden;overflow-y: auto;outline: 0;box-shadow: inset 0 1px 3px rgba(0,0,0,0.1), 0 0 8px rgba(82,168,17,236,0.6);}</style></head><body><div class="wrap" contenteditable="true"></div></body></html></span><span style="font-size: 14px;"></span>

效果如下：

javascript方面：

1、Date()与new Date()有什么区别

Date()直接返回当前时间字符串，不管参数是number还是任何string
Date();Date('h4course');Date(30);

而new Date()则是会根据参数来返回对应的值，无参数的时候，返回当前时间的字符串形式；有参数的时候返回参数所对应时间的字符串。new Date()对参数不管是格式还是内容都有要求而且只返回字符串。

new Date();
//Wed Jun 08 2016 15:56:26 GMT+0800 (中国标准时间)
 
new Date(500);
//Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间)
 
new Date('2015/06/13 16:00:00');
//Sat Jun 13 2015 16:00:00 GMT+0800 (中国标准时间)
</pre><pre name="code" class="html">new Date('h5course');
new Date('2016-01-22-5:20:00');
//Invalid Date
 
new Date('2016-06-08T16:00:00') - new Date('2016/01/22 5:20:00');
//11990400000
从上面的几个测试结果可以发现：
*new Date()在参数正常的情况只会返回当前时间的字符串（且是当前时区的时间）；
*new Date()在解析一个具体的时间的时候，对参数有较严格的格式要求，格式不正确的时候会直接返回Invalid Date(无效的时间)；
*虽然new Date()的返回值是字符串，然而两个new Date()的结果字符串是可以直接相减的，结果为两个时间相差的毫秒数。

2.focus/blur与foucusin/focusout的区别于联系

2.1 focus/blur不冒泡，focusin/focusout冒泡

2.2 focus/blur兼容性好

2.3 可获得焦点元素：window、链接被点击或键盘操作、表单空间被点击或键盘操作、设置tabindex属性的元素被点击或键盘操作

3.如何替换丢失（加载失败）的图片

<span style="font-size:14px;"><script>//第一种方法//为了防止替换的图片也加载失败而导致死循环，这边给完成替换的图片移除掉error事件$('.img').error(function(){$(this).unbind("error").attr("src","missing-image.gif");});//第二种方法$('.img').error(function(){$(this).attr("src","missing-image.gif");});</script></span>

4.jquery的ready函数与js的onload的区别

4.1 执行时间

window.onload必须等到网站资源加载完毕后才能执行；

$(document).ready()是DOM结构绘制完毕后就执行，不必等到资源加载完毕

4.2 编写个数不同

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个

$(document).ready()可以同时编写多个，并且都可以得到执行

页面与服务器请求方面：

1、cookie的弊端

cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的：

（1）IE6或更低版本最多20个cookie；

（2）IE7和之后的版本最后可以有50个cookie；

（3）Firefox最多50个cookie；

（4）Chrome和Safari没有做硬性限制；

优点：

（1）通过良好的编程，控制保存在cookie中的session对象的大小；

（2）通过加密和安全传输技术（SSL），减少cookie被破解的可能性；

（3）只在cookie中存放不敏感数据，即使被盗也不会有重大损失；

（4）控制cookie的生命期，使之不会永远有效，偷盗者很可能拿到一个过期的cookie；

缺点：

（1）cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉；

（2）安全性问题。如果cookie被人拦截了，就可以取得所有的session信息。即使加密也于事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了；

（3）有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计时器，如果我们把这个计数器保存在客户端，那么它起不到任何作用。

2、http状态码有哪些？分别是什么意思

1XX表示消息

2XX表示成功

3XX表示重定向

4XX表示请求错误

5XX表示服务器端错误

常见的HTTP状态码：

·200 OK 表示请求成功，一切正常

·301 Moved Permanently 重定向，客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动的访问新的URL

·302 Found 临时重定向，类似于301

·304 Not Modified 客户端有缓冲的文档并发出了一个条件性的请求。服务器告诉客户，原来缓冲的文档还可以继续使用。

·400 Bad Request 请求出现语法错误

·403 Forbidden 资源不可用

·404 Not Found 无法找到指定位置的资源

·405 Methon Not Allowed 请求方法（get、post、head、delete、put、trace等）对指定的资源不适用

·500 Internal Server Error 服务器遇到了意料不到的情况，不能完成客户的请求

·501 Not Implemented 服务器不支持实现请求所需要的功能。

3.Web storage和cookie的区别

web storage的概念和cookie相似，storage是为了更大容量存储设计的。cookit的大小是受限的，并且每次你求一个新页面的时候cookit都会被发送过去，这样无形中浪费了带宽，另外cookit还需要指定作用域，不可以跨域调用。

此外，web storage拥有setItem、getItem、removeItem、clear等方法，不像cookit需要前端开发者自己封装setCookie、getCookie等方法

0 0