前端面试总结

Html

---

html文档类型

1. html5
2. html4.01 Strict 严格型
3. html4.01 Transitional 过渡型
4. html4.01 Frameset 框架型

块级元素，行内元素有哪些?
块级元素：div,p,ul,li,ol,form,table,h1~h6,pre,hr;
行内元素：a,span,b,i,em,img,select,input,textarea,u;

什么是语义化？为什么要用语义化？有哪些语义化标签？
语义化就是正确的标签干正确的事情，能够便于开发者阅读和编写出优雅的代码并让网路爬虫更好的解析。

1. 有利于SEO，有利于搜索引擎爬虫更好的理解我们的页面，提高页面的权重。
2. 在没有css的时候能够清晰的看出页面结构，增强可读性。
3. 便于团队开发和维护，可以让开发者更容易看明白，从而提高团队效率和协调能力。
4. 支持多终端设备的浏览器渲染。�
   语义化标签：article,section,main,title,header,footer,aside,nav

iframe
iframe元素会创建包含一个文档的内联框架
优点：
1.解决加载缓慢的第三方内容如图标和广告等的加载问题
2.并行加载脚本
缺点：
1.iframe会阻塞主页面的onload事件
2.即使内容为空，加载也需要事件
3.设备兼容性差

什么是BFC?
BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
布局规则：

1. 内部的Box会在垂直方向，一个接一个的放置。
2. 每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
3. BFC的区域不会与float box重叠。
4. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
5. 计算BFC的高度时，浮动元素也参与计算。
6. 哪些元素会生成BFC:
   a. 根元素
   b. float属性不为none
   c. position为absolute或fixed
   d. display为inline-block,table-cell,table-caption,flex,inline-flex
   e. overflow不为visible

mate标签
缺少内容

浏览器

---

HTML5

---

html5的离线存储使用和工作原理
用户与互联网没有连接时，可以正常访问网站内容；用户与互联网连接时，更新用户机器上的缓存文件。
工作原理：
在页面头部加入一个manifest的属性，如下：

manifest有三部分组成：
1.CACHE：表示需要缓存的资源列表
2.NETWORK:表示它下面的资源列表不会被缓存，只能在线访问，但如果CACHE中存在还是会被缓存，CACHE优先级高
3.FALLBACK:表示如果访问第一个资源失败，那么就使用第二个资源来替换它

html5新特性
用于绘画的canvas元素
用于媒介回放的video和audio元素
对本地离线存储更好的支持
语义化元素标签
新的表单控件：email,date,time,url,search
拖放：drag,drop
内联的svg
地理定位：navigator.geolocation
web 存储：localStorage sessionStorage
web worker：当在页面执行脚本时，页面的状态是不响应的，直到脚本已完成。
web worker是运行在后台的javascript，独立于其他脚本，不影响页面的性能，

说下你对浏览器内核的理解
浏览器内核主要分为两部分：渲染引擎和JS引擎。
渲染引擎：负责取得网页的内容（html,xml和图像等），整理讯息（css），以及计算页面的显示方法，然后输出到显示器或者打印机上。
JS引擎：解析和执行JavaScript来实现页面的动态效果。

常用浏览器内核有哪些？
Trident内核：IE;
Webkit：Safari, Chrome;

CSS

---

为什么要初始化css样式？
浏览器兼容问题，不同的浏览器对标签元素的默认值是不同的，如果没有对css进行初始化会出现浏览器之间的页面差异

css的盒子模型
盒子模型 = 内容区域content + 内边距padding + 边框border + 外边距margin
两种盒子模型：IE盒子模型(content+padding+border)怪异模式,W3C的盒子模型（content)标准模式
box-sizing:
border-box，padding和border被包含在定义的width和height中，元素的实际宽高等于设置的值
content-box，padding和border不被包含在定义的width和height中，元素的实际宽高等于设置的值+padding+border

实现元素的垂直居中有哪几种？

1. 文本：设置line-height，text-align:center;
2. 元素(已知宽高)：

width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;

3.元素(未知宽高)：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

4.flex方式：

display: flex;
align-items: center;
justify-content: center;

5.table类型：

.parent {
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

隐藏元素的实现方式有哪几种？
1.visibility: hidden; 隐藏元素，但是元素占用的空间仍然存在；
2.opacity: 0; 完全透明，元素占用的空间存在；
3.position定位; 元素脱离文档流，将元素的位置设置在可见区域之外；
4.display: none; 元素完全不可见，也不占用文档的空间；

css3有哪些新特性？
animation 动画
transtion 过渡
transform (旋转、缩放、位移、倾斜)
@font-face 加载字体
box-shadow 阴影
gradient 渐变
选择器：:nth-child(), :first-child ...

JavaScript

---

数据类型，最新版ECMA标准定义7种
原始类型：undefined, null, string, boolean, number, symbol
引用类型：Object

操作DOM的常用API?

1. 节点查找 ducument.getElementById
2. 节点创建 createElement cloneNode
3. 节点修改 appendChild insertBefore RemoveChild replaceChild
4. 元素属性 setAttribute getAttribute

BOM常用API

1. focus() —— 使窗体或控件获取焦点
2. blur() —— 与focus函数相反，使窗体或控件失去焦点
3. open() —— 打开(弹出)一个新的窗体
4. close() —— 关闭窗体

JSONP的原理？
就是利用