吊打面试官系列之面试大全

html部分

（1）Doctype的作用？严格模式与混杂模式如何区分？他们有什么意义？

①doctype声明位于HTML文档中的第一行，处于html标签之前。告知浏览器的解析器用什么文档标准解析这个文档。如果没有doctype或格式不正确会导致文档以兼容模式呈现。

②标准模式的排版和js运作模式都是以该浏览器的最高模式执行。兼容模式中，页面以宽松的向后兼容，模拟老浏览器的行为，防止站点无法工作。

③Doctype意义就是作用，可以自己编一编，没想出来怎么扯。

（2）HTML5为什么只写<!DOCTYPE HTML>

HTML5不基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为，按它们应该的方式来运行。

（3）行内元素有哪些？块级元素有哪些？空(void)元素有那些？

①行内元素有：a b span img input select strong（强调的语气）

②块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

③常见空元素：<br> <hr> <img> <input> <link> <meta>不常见的就不给你见了，见了反而不常见了（自行百度）

（4）页面导入样式时，使用link和@import有什么区别？

①link属于XHTML标签，除了加载css外，还能用于定义RSS，定义rel连接属性等作用；而@import是css提供的，只能用于加载css。

②页面加载时，link会异步加载，而@imporrt引用的css会等到页面加载完毕再加载。

③import是css2提出的，IE5以上被识别（现在基本没有IE5以下的浏览器了...），link无兼容问题。

（5）html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

①HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。绘画 canvas;用于媒介回放的 video 和 audio 元素;本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;sessionStorage 的数据在浏览器关闭后自动删除;

语意化更好的内容元素，比如 article、footer、header、nav、section;

表单控件，calendar、date、time、email、url、search;

新的技术webworker, websockt, Geolocation;

移除的元素：

纯表现的元素：basefont，big，center，font, s，strike，tt，u;

对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：

IE8/IE7/IE6支持通过document.createElement方法产生的标签，

可以利用这一特性让这些浏览器支持HTML5新标签，

浏览器支持新标签后，还需要添加标签默认的样式。

当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架



* 如何区分： DOCTYPE声明\新增的结构元素\功能元素

（6）对HTML语义化的理解？

推荐这篇文章

（7）HTML5的离线储存怎么使用，工作原理能不能解释一下？

用户没有与因特网连接时，可以正常访问站点或者应用，在与因特网连接时，更新用户机器上的缓存文件。

原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。具体比较复杂（问到的话你肯定是面试的大公司，要么就是面试官拿来装逼的。）

（8）请描述一下 cookies，sessionStorage 和 localStorage 的区别？

①cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。

cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。

sessionStorage和localStorage不会自动把数据发给服务器，仅在浏览器本地保存。

②存储大小：

cookie数据大小不能超过4k。

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

③有期时间：

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

sessionStorage 数据在当前浏览器窗口关闭后自动删除。

cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

（9）iframe有那些缺点？

现在基本没人用iframe了，都是单页面（SPA）的时代，MVVM框架。

优缺点看这里

（10）HTML5的form如何关闭自动完成功能？

给不想要提示的form或某个input设置为autocomplete=off

（11）如何实现浏览器内多个标签页之间的通信? (阿里)

可以使用localStorage、cookie等本地储存方式

（12）webSocket如何兼容低浏览器？

比较复杂，找了个看上去靠谱的

css部分

（1）介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

盒子模型分为内容（content）内边距（padding）外边距（margin）边框（border）

①标准盒子模型：width和height就是content的宽高 box-sizingn：content-box

②IE盒子模型：width和height包含了border和padding和content box-sizingn：border-box

（2）CSS选择器有哪些？哪些属性可以继承？

①选择器：东西都在里面

②可继承：font-size font-family color ul li dl dd dt

（3）CSS优先级算法如何计算？

正常情况下id>class>元素选择器，外联样式低于行内样式，！important（不到万不得已不用）最高。这只是正常情况下css优先级。其中有一套优先级计算方式，我只在当初学习的时候见过一次。详情--->css优先级详解

（4）CSS3新增伪类有那些？

新增不新增的其实都是虚的学的时候我都是一起学的，只要会用就行，详情见（2）①

（5）如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

（1）div绝对定位水平垂直居中

div{
    width: 200px;
    height: 200px;
    background: green;
    position:absolute;
    left:0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

（2）div绝对定位水平垂直定位居中【margin负间距】

div{
    width:200px;
    height: 200px;
    background:green;
    position: absolute;
    left:50%;
    top:50%;
    margin-left:-100px;
    margin-top:-100px;
}

（3）div绝对定位水平垂直居中【Transforms变形】

div{
    width: 200px;
    height: 200px;
    background: green;
    position:absolute;
    left:50%;    /* 定位父级的50% */
    top:50%;
    transform: translate(-50%,-50%); /*自己的50% */
}

（4）css不定宽高水平垂直居中

.box{
    height:600px;
    display:flex;
    justify-content:center;
    align-items:center;
    /* aa只要三句话就可以实现不定宽高水平垂直居中。 */
}
.box>div{
    background: green;
    width: 200px;
    height: 200px;
}

（5）将父盒子设置为table-cell元素，可以使用text-align:center和vertical-align:middle实现水平、垂直居中。比较完美的解决方案是利用三层结构模拟父子结构

<p class="outerBox tableCell"></p>
<p class="ok"></p>
<p class="innerBox">tableCell</p>
<p></p>
<p></p>
 
 
/*
table-cell实现居中
将父盒子设置为table-cell元素，设置
text-align:center,vertical-align: middle;
子盒子设置为inline-block元素
*/
.tableCell{
  display: table;
}
.tableCell .ok{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.tableCell .innerBox{
  display: inline-block;
}

（6）对子盒子实现绝对定位，利用calc计算位置

<p class="outerBox calc"></p>
<p class="innerBox">calc</p>
<p></p>


/*绝对定位，clac计算位置*/
.calc{
  position: relative;
}
.calc .innerBox{
  position: absolute;
  left:-webkit-calc((500px - 200px)/2);
  top:-webkit-calc((120px - 50px)/2);
  left:-moz-calc((500px - 200px)/2);
  top:-moz-calc((120px - 50px)/2);
  left:calc((500px - 200px)/2);
  top:calc((120px - 50px)/2);
}

吊打面试官系列之面试大全

猜你喜欢