web前端面试题汇总（一）

话不多说，直接上干货

1. 浏览器页面有哪三层组成，作用？

哪一层 名称 作用 结构层 HTML 实现页面结构 表示层 CSS 完成页面的表现和风格 行为层 JavaScript 实现客户端功能与业务

2. HTML5的优缺点

优点：

• 网络标准统一
• 多设备，跨平台
• 视频和音频特性给站点带来更多的多媒体元素
• 在网站的爬取和索引的时候，对SEO很友好
• 被大量运用到移动端和游戏

缺点：

• 安全性差。web storage.web socket这些功能很容易被黑客利用，来盗取用户的信息和资料。
• 完善性差。许多特性在各浏览器的支持程度不一样。
• 浏览器兼容性：IE9以下几乎都不兼容。
• 性能。某些平台上的引擎问题导致HTML5性能地下。

3. HTML5有哪些新特性，移除了哪些元素

ps:由于东西太多，所以做简要性回答

HTML5主要新增四类元素:
结构性元素：section,header
级块性元素：dialog,code
行内语义性元素：time,progress
交互性元素：menu,details

HTML5主要废除三种元素
能用CSS代替的元素：big,font
frame框架：frameset,frame,noframes
部分浏览器支持的元素：blink,dir

4. 各浏览器的内核

浏览器 内核名称 前缀 IE trident内核 -ms Firefox gecko内核 -moz Chrome/Safari webkit内核 -webkit Opera blink内核 -o

5. 每个HTML文件开头都有个东西，Doctype，作用？

这个声明位于文档中的最前面的位置。作用是告诉浏览器按照何种规范来解析页面。
Doctype不存在或者格式不正确会导致文档以混杂模式呈现.

6. 对web标准以及w3c的理解和认识

• 标签闭合，小写，不乱嵌套。提高搜索机器人几率，使用外链css和js脚本，结构行为表现的分离。
• 文件下载与页面速度更快，内容能被更多的用户所访问，被更广泛的设备所访问，更少的代码和组建。
• 容易维护，改版方便，提高网站的易用性。

7. 说说你对HTML5语义化的理解

1）什么是语义化
根据内容的结构化选择合适的标签，便于开发者阅读和编写代码的同时，让浏览器的爬虫和机器很好的解析。
2）为什么要语义化

• 用户体验好。在没有css时，页面也能很好的呈现出内容结构
• 有利于SEO
• 方便其他设备解析
• 便于团队开发和维护。语义化具有可读性，减少团队的差异性。

8. css中link和@import的区别是

link @import HTML标签 css标签 页面被加载，link同时被加载 页面最加载完在加载 无兼容问题 在IE5以上被识别 权重高 权重低

9. 盒模型

w3c 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

ie 盒子模型的范围也包括 margin、border、padding、content，和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。

10. DOM常见操作

• getElementById(id) 通过id来访问某一元素
• getElementsByName(name) 通过name来取得某一堆元素（作为数组）（仅用于取得input、radio、 checkbox等元素）
• getElementsByTagName(tagname) 通过TagName也就是标签名来取得
• appendChild(node) 向当前的元素（应该叫对象比较恰当）追加节点。
• removeChild(childreference) 删除当前节点的子节点，返回被删除的节点。
• replaceChild(newChild, oldChild) 把当前节点的一个子节点换成另一个节点
• insertBefore(selector) 方法在被选元素前插入 HTML 元素

11. null和undefined的区别

null表示”没有对象”，即该处不应该有值。典型用法是：

（1） 作为函数的参数，表示该函数的参数不是对象。（2） 作为对象原型链的终点。（3） 转为数字时为0

undefined表示”缺少值”，就是此处应该有一个值，但是还没有定义。典型用法是：

（1）变量被声明了，但没有赋值时，就等于undefined。（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。（3）对象没有赋值的属性，该属性的值为undefined。（4）函数没有返回值时，默认返回undefined。（5）转为数值时为NaN

12. json是什么

JSON: JavaScript Object Notation(JavaScript 对象表示法)。JSON是一种轻量级的数据交换格式，基于JavaScript的一个子集，数据格式简单，易于读写，占用带宽小。

13. 优雅降级和渐进增强

优雅降级：Web站点在所有新式浏览器中都能正常工作，若使用老式浏览器，则代码会检查以确认他们是否能正常工作。
渐进增强：从被所有浏览器支持的基本功能开始，逐步地增加那些只有新式浏览器才支持的功能。

14. http状态码

• 200： 请求成功
• 304：自从上次被请求过，请求的页面未修改过
• 403：（Forbidden）服务器已经理解请求，但禁止访问
• 404：（not found）请求失败
• 408：（请求超时） 服务器等候请求时发生超时
• 500： (Internal Server Error)服务器无法处理请求

15. ajax的过程（Asynchronous JavaScript + XML）

    (1)创建`XMLHttpRequest`对象,也就是创建一个异步调用对象.    (2)创建一个新的`HTTP`请求,并指定该`HTTP`请求的方法、`URL`及验证信息.    (3)设置响应`HTTP`请求状态变化的函数.    (4)发送`HTTP`请求.    (5)获取异步调用返回的数据.    (6)使用JavaScript和DOM实现局部刷新.    var xmlHttp = new XMLHttpRequest();    xmlHttp.open('GET','demo.php','true');    xmlHttp.send()    xmlHttp.onreadystatechange = function(){        if(xmlHttp.readyState === 4 & xmlHttp.status === 200){        }    }

16. get和post的区别

17. 常见的页面布局

• 双飞翼布局（三列，中间宽自适应，两边定宽）
• 多栏布局（利用浮动实现）
• 瀑布流布局（类似蘑菇街）
• 响应式布局（一个网站可以兼容多个终端）