前端笔试面试

1. 浏览器页面有哪三层构成，分别是什么，作用是什么?

• 构成：结构层、表示层、行为层 
• 分别是：HTML、CSS、JavaScript 
• 作用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。

2. 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以下浏览器几乎全军覆没。

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

答案一：

• 声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 
• 严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行。 
• 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。               
• DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 

答案二

 doctype声明指出阅读程序应该用什么规则集来解释文档中的标记。在Web文档的情况下，“阅读程序”通常是浏览器或者校验器这样的一个程序，“规则”则是W3C所发布的一个文档类型定义（DTD）中包含的规则。

• 声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的HTML 文档。 
• 所谓的标准模式是指，浏览器按 W3C 标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。 严格模式是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法。严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行混杂模式则是一种向后兼容的解析方法，说的透明点就是可以实现IE5.5以下版本浏览器的渲染模式。 
• 浏览器解析时到底使用标准模式还是怪异模式，与你网页中的 DTD 声明直接相关， DTD 声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略 DTD 声明 ,将使网页进入怪异模式。

4. HTML5有哪些新特性、移除了哪些元素？

Html5新增了 27 个元素，废弃了 16 个元素，根据现有的标准规范，把 HTML5 的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素 4 大类。

结构性元素主要负责web上下文结构的定义

• section：在 web 页面应用中，该元素也可以用于区域的章节描述。
• header：页面主体上的头部， header 元素往往在一对 body 元素中。
• footer：页面的底部（页脚），通常会标出网站的相关信息。
• nav：专门用于菜单导航、链接导航的元素，是 navigator 的缩写。
• article：用于表现一篇文章的主体内容，一般为文字集中显示的区域。
• 级块性元素主要完成web页面区域的划分，确保内容的有效分割。
• aside：用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。
• figure：是对多个元素进行组合并展示的元素，通常与 ficaption 联合使用。
• code：表示一段代码块。
• dialog：用于表达人与人之间的对话，该元素包含 dt 和 dd 这两个组合元素， dt 用于表示说话者，而 dd 用来表示说话内容。
• 行内语义性元素主要完成web页面具体内容的引用和描述，是丰富内容展示的基础。
• meter：表示特定范围内的数值，可用于工资、数量、百分比等。
• time：表示时间值。
• progress：用来表示进度条，可通过对其 max 、 min 、 step 等属性进行控制，完成对进度的表示和监事。
• video：视频元素，用于支持和实现视频文件的直接播放，支持缓冲预载和多种视频媒体格式。
• audio：音频元素，用于支持和实现音频文件的直接播放，支持缓冲预载和多种音频媒体格式。
• 交互性元素主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础。
• details：用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如单击）与 legend 交互才会显示出来。
• datagrid：用来控制客户端数据与显示，可以由动态脚本及时更新。
• menu：主要用于交互菜单（曾被废弃又被重新启用的元素）。
• command：用来处理命令按钮。

jQuery中，修改样式的两种方法：

.css

.addClass