前端面试经典题目（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)、独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。