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 storage、web socket等新特性，后台甚至浏览器原理的知识，机遇的同时也是巨大的挑战。
d. 性能：某些平台上的引擎问题导致HTML5性能低下。
e. 浏览器兼容性：最大缺点，IE9以下的浏览器几乎全军覆没。
3. 关于HTML文件开头的doctype，以及严格模式与混杂（怪异）模式
(1). 每个HTML文件里开头都有个重要的东西，Doctype，其作用是告知浏览器文档使用哪种HTML或XHTML规范。（重点：告知浏览器按照何种规范解析页面）
(2). 严格模式的排版和JS运算是以该浏览器支持的最高标准运行。
(3). 在混杂模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。
(4). Doctype不存在或格式不正确会导致文档以混杂模式呈现。
4. 常见的浏览器即其内核
IE：trident内核
Firefox：gecko内核
Safari：webkit内核
Opera：以前是presto内核，现已改用Google Chrome的Blink内核
Chrome：Blink（基于webkit，Google与Opera Software共同开发）
5. 什么是浏览器内核
浏览器内核主要分成两部分：渲染引擎（Layout Engineer或Rendering Engine）和JS引擎。
渲染引擎：负责取得网页内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算机网页的显示方式，然后会输出至显示器或打印机。浏览器的内核不同对于网页的语法解释会有所不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序都需要内核。
JS引擎：解释和执行JavaScript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
6. cookies、sessionStorage与localStorage的区别
sessionStorage和localStorage是HTML5 Web Storage API提供的，可以方便的在web请求之间保存数据，有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。
sessionStorage、localStorage与cookies都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念。
sessionStorage是在同源的同窗口（或tab）中始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一个页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时“独立”打开不同的窗口，即使是同一页面，，sessionStorage对象也是不同的。
cookies会发送到服务器端，其余两个不会。
主要区别：
(1) Cookies:

• 每个域名存储量比较小（各浏览器不同，大致4k）
• 所有域名的存储量有限制（各浏览器不同，大致4k）
• 有个数限制（各浏览器不同）
• 会随请求发送到服务器
  (2) LocalStorage:
• 永久存储
• 单个域名存储量比较大（推荐5m，各浏览器不同）
• 总体数量无限制
  (3) SessionStorage:
• 只在Session内有效
• 存储量更大（推荐没有限制，但是实际上各浏览器也不同）
  7. iframe有哪些缺点
• iframe会阻塞主页面的Onload事件；
• iframe和主页面在、共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载；
  如果要使用iframe，最好是通过JavaScript动态给iframe添加src属性，这样可以绕开以上两个问题。
• 搜索引擎的检索程序无法解读这种页面，不利于SEO；
  8. Label的作用是什么，是怎么用的
  label标签是来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

<label for="Name">Number:</label>
<input type="text" name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>

注意：label的for属性值要与后面对应的input标签id属性值相同。
9. title和h3的区别，b与strong的区别，i与em的区别
title属性没有明确意义，只表示是个标题。h3则表示层次分明的标题，对页面信息的抓取也有很大的影响；
strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时，strong会重读，而b则是展示强调内容。
i内容展示位斜体，em则表示强调的文本。
自然样式标签（Physical Style Elements）: b, i, u, s, pre
语义样式标签（Semantic Style Elements）: strong, em, ins, del, code
应该准确使用语义样式标签，但不能滥用。在不确定使用哪种样式标签的时候，优先使用自然样式标签。
10. HTML5标签的用途？
a. 使Web页面的内容更加有序和规范
b. 使搜索引擎更加容易按照HTML5规则识别出有效的内容
c. 使Web页面更接近于一种数据字段和表
11. src和href的区别
src是source的缩写，用于替换当前元素，指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在位置；在请求src资源时，会将其指向的资源下载并应用到文档内，例如JS脚本、img图片和frame等元素。
<script src='js.js'></script>
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入到当前标签内。这也是为什么将JS脚本放在底部而不是头部。
href时Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加
<link href='common.css rel='stylesheet'/>
那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。
12. 表单的基本组成部分有哪些，表单的主要用途是什么？
组成：表单标签、表单域、表单按钮
a. 表单标签：这里面包含了处理表单数据所用CGI程序的URL，以及数据提交到服务器的方法；
b. 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、文件上传框等；
c. 表单按钮：包括提交按钮，复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
主要用途：表单在网页中主要负责数据采集的功能，向服务器传送数据。
13. 表单提交中Get和Post方法的区别？
(1) get是从服务器上获取数据，post是向服务器传送数据。
(2) get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址，用户看不到这个过程。
(3) 对于get方法，服务器端用Request.QueryString获取变量的值。对于post方法，服务器端用Request.Form获取提交的数据。
(4) get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制，但理论上，IIS4中最大两位80KB，IIS5中为100KB。
(5) get安全性低（因为传递参数值能在链接中看到），post安全性较高。
14. HTML5中如何嵌入音频？
HTML5支持mp3、wav和ogg格式的音频，下面是在网页中嵌入音频的简单示例：

<audio controls>
    <source src="Ola Strandh - Amherst.mp3" type="audio/mp3">
    Your browser does'nt support audio embedding feature.
</audio>

14. 关于CSS的盒子模型

image.png

a. 标准的css盒子模型：宽度=内容的宽度+边框的宽度+内边框的宽度
b. 网页设计中常见的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)，css盒子模型都具备这些属性。
c. 这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具备这些属性，所以叫他盒子模型。css盒子模型就是在网页设计中经常使用到的css技术所使用的一种思维模型。
举个例子：
<div style="width: 300px; height: 100px; border: 25px solid green; padding: 25px; margin: 25px"></div>
则总宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距=300(width)+2 x 25(左右padding)+2 x 25(左右border)+2 x 25(左右margin)=450px，同理，总高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距=100(width)+2 x 25(上下padding)+2 x 25(上下border)+2 x 25(上下margin)=250px
15. CSS选择器的类型，举几个各自例子
类型：基础选择器、组合选择器、属性选择器、伪类、伪元素。
同一元素引用了多个样式时，排在后面的样式属性的优先级更高。
样式选择器的类型不同时，优先级顺序为：id选择器>class选择器>标签选择器。
标签之间存在层级包含关系时，后代元素会继承祖先元素的样式。如果后代元素定义了与祖先元素相同的样式，则祖先元素的相同的样式属性会被覆盖。继承的样式的优先级比较低，至少比标签选择器的优先级低。
基础选择器：

组合选择器：

属性选择器：

伪类：

伪元素

16. 列出display的值并说明他们的作用？
inline(默认值)：内联元素；
none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间；
block：块元素；
list-item：列表项目；
inline-block：内联块元素（CSS2）；
table：块元素级的表格（CSS2）；
inline-table：内联元素级的表格，类同于html标签<table>（CSS2）；
table-caption：表格标题，类同于html标签<caption>（CSS2）；
table-cell：表格单元格，类同于html标签<td>（CSS2）；
table-row：表格行。类同于html标签<tr>（CSS2）；
table-row-group：表格行组，类同于html标签<tbody>（CSS2）；
table-column：表格列，类同于html标签<col>（CSS2）；
table-column-group：表格列组显示，类同于html标签<colgroup>（CSS2）；
table-header-group：表格标题组，类同于html标签<thead>（CSS2）；
table-footer-group：表格脚注组，类同于html标签<tfoot>（CSS2）；
run-in：根据上下文决定对象是内联对象还是块级对象。（CSS3）；
box：将对象作为弹性伸缩盒显示（伸缩盒最老版本）（CSS3）；
inline-box：将对象作为内联弹性伸缩盒显示（伸缩盒最老版本）（CSS3）；
flexbox：将对象作为弹性伸缩盒显示（伸缩盒过渡版本）（CSS3）；
inline-flexbox：将对象作为内联块级弹性伸缩盒显示（伸缩盒过渡版本）（CSS3）；
flex：将对象作为弹性伸缩盒显示（伸缩盒最新版本）（CSS3）；
inline-flex：将对象作为内联块级弹性伸缩盒显示（伸缩盒最新版本）（CSS3）；
17. 如何居中div，如何居中一个浮动元素？
(1). 非浮动元素居中：可以设置margin:0 auto令其居中，定位，父级元素text-align:center等等；
(2). 浮动元素居中：
方法a：设置当前div的宽度，然后设置margin-left:50%; position:relative; left:-250px;其中的left是宽度的一半；
方法b：父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对左移动-50%；
方法c：position定位等等。
18. CSS中link和@import的区别？
(1). link属于HTML标签，而@import是CSS提供的；
(2). 页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完后再加载；
(3). @import只在IE5以上才能被识别，而link是HTML标签，无兼容问题；
(4). link方法的样式权重高于@import的权重。
19. block、inline、inline-block的细节对比
display:block
a、block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
b、block元素可以设置width，height属性，块级元素即使设置了宽度，仍然是独占一行。
c、block元素可以设置margin和padding属性。
display：inline
a、inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
b、inline元素设置width、height属性无效。
c、inline元素的margin和padding属性，水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果；但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom都不会产生边距效果。
display：inline-block
a、简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
补充说明
a、一般我们会用display:block、display:inline或者display:inline-block来调整元素的布局级别，其实display的参数远远不止这三种，仅仅是比较常用而已。
b、IE（低版本IE）本来是不支持inline-block的，所以在IE中对内联元素使用display:inline-block，理论上IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表象。
20. 浮动元素会引起的问题以及解决办法
问题：
(1). 父元素的高度无法被撑开，影响与父元素同级的元素；
(2). 与浮动元素同级的非浮动元素会跟随其后；
(3). 若非第一给元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
解决办法：
使用CSS中的clear:both;属性来清楚元素的浮动可解决问题(2)(3)，对于问题(1)，添加如下样式，给父元素添加clearfix样式：

.clearfix:after{content:" "; display:block; height:0; clear:both; visibility:hidden; }
.clearfix{display:inline-block;} /* for IE/Mac */

清除浮动的几种方法：
(1). 额外标签法：在元素最后添加：`<div style="clear:both;"></div>（缺点：该方法会增加额外的标签，使HTML结构看起来不够简洁。）；
(2). 使用after伪类：

#parent:after{
  content:" ";
  height:0;
  visibility:hidden;
  display:block;
  clear:both;
}

(3). 浮动外部元素
(4). 设置'overflow'为hidden或者auto
21. box-sizing属性的用法
用法：设置或检索对象的盒模型组成模式
a、boxsizing:content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width、border、padding之和，即Element width = width+border+padding，但占有页面位置还要加上margin，此属性表现为标准模式下的盒模型。
b、box-sizing:border-box：padding和border被包含在定义的width和heigth之内，对象的实际宽度等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即Element width = width，此属性表现为怪异模式下的盒模型。
22. 什么是边距折叠？
外边距折叠：相邻的两个或多个外边距(margin)在垂直方向会合并成一个外边距(margin)
相邻：没有被非空内容、padding、border或clear分隔开的margin特性，非空内容就是说元素之间是兄弟关系或者父子关系。
垂直方向外边距合并计算：
a、参加折叠的margin都是正值：取其中margin较大的值作为最终margin值。
b、参与折叠的margin都是负值：取其中绝对值较大的，然后从0位置负向位移。
c、参与折叠的margin中有正有负：先取出负margin中绝对值最大的，然后和正margin值中最大的margin相加。
23. 隐藏元素的方式有哪些？
a、使用CSS的display:none，不会占有原来的位置；
b、使用CSS的visibility:hidden，会占有原来的位置；
c、使用HTML5中的新增属性hidden='hidden'，不会占有原来的位置。
24. 页面中如何使用定位(position)
position有如下属性：
(1). static(默认值)：可以认为静态的，默认元素都是静态的定位，对象遵循常规流。此时4个定位偏移属性不会被应用，也就是使用left、right、top、bottom将不会生效；
(2). relative：相对定位，对象遵循常规流，并且参照自身在常规流中的位置通过top、right、left、right这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
(3). absolute：a、绝对定位，对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素，盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠；
b、元素定位参考的是离自身最近的定位祖先元素，要满足两个条件：第一个是自己的祖先元素，可以是父元素也可以是父元素的父元素，一直找，如果没有则选择body为对照对象。第二个条件是要求祖先元素必须定位，通俗说就是position的属性值非static就行。
(4). fixed：固定定位，与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。
(5). center：与absolute一致，但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。（CSS3）
(6). page：与absolute一致，元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式（CSS3）
(7). sticky：对象在常态时遵循常规流。他就像是relative和fixed的结合体，当在屏幕中时按照常规流排版，当卷动到屏幕外时则表现如fixed/该属性的表现是现实中你见到的吸附效果（CSS3）
25. 垂直居中的方法
(1) margin:auto法。定位为上下左右为0，margin:0可以实现脱离文档流的居中。

css:
div{
width: 400px;
height: 400px;
position: relative;
border: 1px solid #465468;
}
img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
html:
<div>
<img src="mm.jpg">
</div>

(2) margin负值法。

        .container {
            width: 500px;
            height: 400px;
            position: relative;
            border: 2px solid #379;
        }
        .inner {
            width: 480px;
            height: 380px;
            background-color: #746;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -190px; /* height的一半 */
            margin-left: -240px; /* width的一半 */
        }

补充：其实这里也可以将margin-top和margin-left负值替换成transform:translateX(-50%)和transform:translateY(-50%)
(3) table-cell（未脱离文档流的）
设置父元素的display:table-cell，并且vertical-align=middle，这样子元素可以实现垂直居中。

        div {
            width: 500px;
            height: 500px;
            border: 3px solid #555;
            display: table-cell;  /* 表格单元格 */
            vertical-align: middle;
            text-align: center;
        }
        img {
            vertical-align: middle;
        }

(4) 利用flex
将父元素设置为display:flex，并且设置align-items:center; justify-content:center。

        .container {
            width: 300px;
            height: 200px;
            border: 3px solid #546461;
            display: -webkit-flex;
            display: flex;  /* 将对象作为弹性伸缩盒显示（伸缩盒过渡版本） */
            -webkit-align-items: center;
            align-items: center;
            -webkit-justify-content: center;
            justify-content: center;
        }
        .inner {
            border: 3px solid #458761;
            padding: 20px;
        }

26. visibility=hidden，opacity=0；display:none的区别
(1) visibility=hidden：该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件。
(2) opacity=0：该元素隐藏起来了，但不会改变页面布局，而且如果该元素绑定了一些事件（如click），那么点击该区域，也能出发相应事件。
(3) display:none；把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。
27. 关于JS动画和CSS3动画的差异
渲染线程分为main thread和compositor thread，如果css动画只改变transform和opacity，这时整个css动画得以在compositor thread完成（而js动画则会在main thread执行，然后出发compositor thread进行下一步操作）。特别注意的是如果改变transform和opacity是不会layout或者paint的。
区别：
功能涵盖面，js比css大；
实现/重构难度不一，css比js更简单，性能调优方面固定；
对帧速表现不好的低版本浏览器，css3可以做到自然降级；
css动画有天然事件支持；
css3有兼容性问题。
28. position属性比较
fixed（固定定位）：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。fixed定位使元素的位置与文档流无关，因此不占据空间。fixed定位的元素和其他元素重叠。
relative（相对定位）：如果对一个元素进行相对定位，它将出现在它所在的位置上，然后可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框。
absolute（绝对定位）：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。absolute定位使元素的位置与文档流无关，因此不占据空间。absolute定位的元素和其他元素重叠。
sticky（粘性定位）：元素先按照普通文档流定位，然后相对于该元素在流中的flow root（BFC）和containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
static（默认定位）：默认值，没有定位，元素出现在正常的流中（忽略top，bottom，left，right或者z-index声明）。
inherit：规定应该从父元素继承position属性的值。
29. 什么是BFC
BFC就是常说的块格式化上下文，这是一个独立的渲染区域，规定了内部如何布局，并且这个区域的子元素不会影响到外面的元素，其中比较重要的布局规则有内部box垂直放置，计算BFC的高度的时候，浮动元素也参与其中，触发BFC的规则有根元素、浮动元素、pisition为absolute或fixed的元素、display为inline-block，table-cell，table-caption，flex，inline-flex以及overflow不为visible的元素。
30. line-height和height的区别
line-height一般是指布局里面一段文字上下行之间的高度，是针对字体来设置的。height一般是指容器的整体高度。