前端面试经典题目(HTML+CSS)二

1、浏览器页面由哪三层构成,分别是什么,作用是什么?

构成:结构层、表示层、行为层

分别是:HTML、CSS、JavaScript

作用:HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能与业务。

 

2、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

行内元素:a、b、span、img、input、strong、select、label、em、button、textarea
块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img

3、简述一下src与href的区别

href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。

src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。

当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

4、px和em的区别

 

相同点:px和em都是长度单位;

 

异同点:px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

 

 

5、简述同步和异步的区别

同步是阻塞模式,异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去;
异步是指进程不需要一直等下去,而是继续执行下面的操作,不管其他进程的状态。当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率。

 6、什么叫优雅降级和渐进增强

 

渐进增强 progressive enhancement:
针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

 

优雅降级 graceful degradation:
一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

 

区别:

 

a. 优雅降级是从复杂的现状开始,并试图减少用户体验的供给

 

b. 渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要

 

c. 降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带

7、HTML5的优点与缺点

优点:a、网格标准统一、HTML5本身是由W3C推荐出来的

   b、多设备、跨平台

     c、即时更新

        d、提高可用性和改进用户的友好体验

     e、有几个新的标签,这有助于开发人员定义重要的内容

     f、可以给站点带来更多的多媒体元素(视频和音频)

     g、可以很好的替代Flash和Silverlight;

     h、涉及到网站的抓取和索引的时候,对于SEO很友好

     i、被大量应用于移动应用程序和游戏

  缺点:a、安全:像之前Firefox4的web socket和透明代理的实现存在严重的安全问题,同时web storage、web socket这样的功能很容易被黑客利用,来盗取用户的信息和资料

 

     b、完善性:许多特性各浏览器的支持程度也不一样

 

       c、技术门槛:HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习,像web worker、web socket、web storage等新特性,后台甚至浏览器原理的知识,机遇的同时也是巨大的挑战

 

        d、性能:某些平台上的引擎问题导致HTML5性能低下

 

     e、浏览器兼容性:最大缺点,IE9以下浏览器几乎全军覆没

 

8、Doctype作用?严格模式与混杂模式如何区分?它们有何意义?

1)声明位于文档中的最前面,处于标签之前。告知浏览器的解析器,用什么文档类型规范来解析这个文档。

2)严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行

3)在混杂模式中,页面以宽松的向后兼容的方式显示

4)DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

 

9、sessionStorage 、localStorage 和 cookie 之间的区别

共同点:用于浏览器端存储的缓存数据

不同点:cookies会发送到服务器端,其余两个不会。

1)Cookie:每个域名存储量比较小(各浏览器不同,大致4K);所有域名的存储量有限制;有个数限制;会随请求发送到服务器;

2)LocalStorage:永久存储;单个域名存储量比较大(推荐5MB,各浏览器不同);总体数量无限制;

3)sessionStorage:只在session内有效(在同源的同窗口(或tab)中,即使刷新页面或进入同源另一页面,数据仍然存在);存储量更大(推荐没有限制,但实际上各浏览器也不同)

 

 

10、iframe有哪些缺点

  • iframe会阻塞主页面的Onload事件
  • 搜索引擎的检索程序无法解读这种页面,不利于SEO
  • iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。
  • 使用iframe之前需要考虑这两个缺点,如果需要使用iframe,最好是通过JavaScript

(动态给iframe添加src属性值,这样可以绕开以上两个问题)

 

11、如何实现浏览器内多个标签页之间的通信?

WebSocket、SharedWorker;也可以调用localstorage、cookies等本地存储方式;localstorage另一个浏览上下文里被添加、修改或删除时,它都会触发一个事件,我们通过监听事件,控制它的值来进行页面信息通信;注意quirks:Safari在无痕模式下设置localstorage值时会抛出QuotaExceededError的异常。

 

12、表单提交中Get和Post方式的区别

1)get是从服务器上获取数据,post是向服务器传送数据

2)get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址,用户看不到这个过程。

3)对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据

4)get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4中最大量为80KB,IIS5中为100KB。

5)get安全性低,post安全性较高。

 

13、Web Storage与Cookie相比存在的优势

 

 

(1)、存储空间更大:IE8下每个独立的存储空间为10M,其他浏览器实现略有不同,但都比Cookie要大很多。

 

(2)、存储内容不会发送到服务器:当设置了Cookie后,Cookie的内容会随着请求一并发送的服务器,这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地,不会与服务器发生任何交互。

 

(3)、更多丰富易用的接口:Web Storage提供了一套更为丰富的接口,如setItem,getItem,removeItem,clear等,使得数据操作更为简便。cookie需要自己封装。

 

(4)、独立的存储空间:每个域(包括子域)有独立的存储空间,各个存储空间是完全独立的,因此不会造成数据混乱。

 

相关文章