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. 盒模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9HXAmJ9A-1679933145962)(http://images.cnblogs.com/cnblogs_com/cchyao/%E6%A0%87%E5%87%86W3C%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E5%92%8CIE%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8BCSS%E5%B8%83%E5%B1%80%E7%BB%8F%E5%85%B8%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B/1.JPG)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lkxNN1gm-1679933145963)(http://images.cnblogs.com/cnblogs_com/cchyao/%E6%A0%87%E5%87%86W3C%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E5%92%8CIE%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8BCSS%E5%B8%83%E5%B1%80%E7%BB%8F%E5%85%B8%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B/2.JPG)]

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. 常见的页面布局

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

#####18. 常见的定位