面试总结与积累

1、行内元素有哪些？块级元素有哪些？空元素有哪些？CSS盒模型？

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea

块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素：即没有内容的HTML元素，例如：br、meta、hr、link、input、img

CSS盒模型：

首先要清楚，我们写CSS样式，目的就是为了结构与表现相分离。其次，ＣＳＳ中的盒子模型是为了让我们充分理解

ｄｉｖ＋ｃｓｓ模型的定位功能，就是利用盒子模型这样的布局方式代替传统的表格布局方式。

在进行ｈｔｍｌ布局时经常会遇到布局ｄｉｖ，而盒模型则是重中之重，ＣＳＳ盒模型的尺寸基准(box-sizing的值)有两种，一种是默认的

content-box 一种是border-box；关于元素是哪种盒模型，我们可以使用火狐浏览器的firebug插件的布局选项中进行查看。

理论上说，content-box和border-box的主要区别是二者的盒子的宽度是否包含元素的边框和内边距。前者width不包含内边距和边框，后者的width包含内边距和边框。

2、CSS 的引入方式有哪些？link和@import的区别是？

1）内联方式：

内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。

示例：

<div style="background: red"></div>

这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个 <div> 拥有相同的样式，你不得不重复地为每个 <div> 添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。

2）内部样式表

内部样式表指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码

嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。

3）外部样式表

外部样式表是指使用 HTML 的 <link> 标签引入外部的 CSS 文件。

示例：

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。

4）导入方式

导入方式指的是使用 CSS 规则引入外部 CSS 文件。

示例：

<style>
    @import url(style.css)
</style>

link和@import都是外部引用CSS的方式，但是存在一定的区别：

　　区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

　　区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

　　区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

　　区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

3、css实现垂直水平居中

1）不管是父元素有没有高度和宽度，也不管子元素是div还是图片，都可以水平垂直居中的方法

<head>

<style>

 .Absolute-Center {
           display:table-cell;
            text-align:center;
            vertical-align: middle;
            height:300px;
            width:400px;
        }
        .center{
            display:inline-block;
        }

    </style>
</head>
<body>
<div class="Absolute-Center">
    <img src="images/photo.jpg" class="center">
</body>

</html>

缺点：

1.需要一个容器

2.水平居中依赖于margin-left: -0.25em;该尺寸对于不同的字体/字号需要调整。

3.内容块宽度不能超过容器的100% - 0.25em。

2)CSS3新属性

CSS3为我们提供了一种可伸缩的灵活的web页面布局方式-flexbox布局，它具有很强大的功能，可以很轻松实现很多复杂布局，在它出现之前，我们经常使用的布局方式是浮动或者固定宽度+百分比来进行布局，代码量较大且难以理解。

为了更好理解flexbox布局，这里首先要介绍几个概念：

如果所示：

（1）主轴（侧轴），flexbox布局里面将一个可伸缩容器按照水平和垂直方向分为主轴或侧轴，如果你想让这个容器中的可伸缩项目在水平方向上可伸缩展开，那么水平方向上就是主轴，垂直方向上是侧轴，反之亦然；

（2）主轴（侧轴）长度，当确定了哪个是主轴哪个是侧轴之后，在主轴方向上可伸缩容器的尺寸（宽或高）就被称作主轴长度，侧轴方向上的容器尺寸（宽或高）就被称作侧轴长度；

（3）主轴（侧轴）起点，主轴（侧轴）终点，例如主轴方向是水平方向，通常在水平方向上网页布局是从左向右的，那么可伸缩容器的左border就是主轴起点，右border就是主轴终点，侧轴是在垂直方向，通常是从上到下的，所以上border就是侧轴起点，下border就是侧轴终点；

（4）伸缩容器：如果要构建一个可伸缩的盒子，这些可伸缩的项目必须要由一个display：flex的属性的盒子包裹起来，这个盒子就叫做伸缩容器；

（5）伸缩项目：包含在伸缩容器中需要进行伸缩布局的元素被称作伸缩项目；

明确以上概念之后就可以来构建flexbox布局了；

第一步，构建一个flexbox容器，并在容器中放置几个可伸缩项目，如下：

css代码：

.flex-container{
            display:flex;
            width:600px;
            height:230px;
            background-color: #ccc;
        }
.flex-item{
            background-color:blue;
            width: 100px;
            margin: 5px;
        }

HTML代码：

<div class="flex-container">
       <div class="flex-item ">A</div>
       <div class="flex-item ">B</div>
       <div class="flex-item ">A</div>
       <div class="flex-item ">B</div>
   </div>

效果如下：

其中四个可伸缩的项目在水平方向上被排列成了一行，同时可伸缩项目相左对齐；

display：flex代表这个容器是一个可伸缩容器，还可以取值为inline-flex,两者的区别在于前者将这个容器渲染为块级元素，后者将其渲染为内联元素。

这里有几个默认的属性虽然没有设置，但是默认值确实起作用了，它们是：

flex-direction属性，它的取值为row，column，column-reverse，row-reverse,默认值是row，表示在水平方向上展开可伸缩项，如果取column代表在垂直方向上展开可伸缩项目，column-reverse，row-reverse代表相反方向，通俗讲，flex-direction属性就是用来定义主轴侧轴方向的。给以上效果添加flex-direction：column效果如下：

justify-content属性，用来表示可伸缩项目在主轴方向上的对齐方式，可以取值为flex-start,flex-end,center,space-between,space-around，其中flex-start,flex-end,表示相对于主轴起点和终点对齐，center表示居中对齐，space-between表示两端对齐并将剩余空间在主轴方向上进行平均分配，space-around表示居中对齐然后在主轴方向上将剩余空间平均分配

justify-content:space-between

css代码：

.flex-container{
            display:flex;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-between;
        }
.flex-item{
            background-color:blue;
            width: 100px;
            margin: 5px;
        }

效果如下：

可以看到它将各个可伸缩项目在主轴方向上两端对齐并平分了剩余空间；

justify-content:space-around

css代码：

.flex-container{
            display:flex;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
        }
.flex-item{
            background-color:blue;
            width: 100px;
            margin: 5px;
        }

效果如下：

可以看到这个属性让可伸缩项目沿着主轴方向进行了居中对齐并且均分了剩余空间；

align-items属性：该属性是用来表示可伸缩项目在侧轴方向上的对齐方式，可取的值有flex-start,flex-end,center,baseline,stretch，需要解释的是baseline值，它是按照一个计算出来的基准线然后让这些项目沿这个基准线对齐，基准线的计算取决于可伸缩项目的尺寸及内容，如下：

align-items:baseline;

css代码：

.flex-container{
            display:flex;     
            flex-direction: row;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;
        }
        .flex-item{
            background-color:blue;
            width: 100px;
            margin: 5px;;
        }
        .a{
            margin-top: 10px;
            height: 100px;
        }
        .b{
            margin-top: 20px;
            height: 150px;
        }
        .c{
            margin-top: 30px;
            height: 80px;
        }

HTML代码：

 <div class="flex-container">
       <div class="flex-item a">A</div>
       <div class="flex-item b">B</div>
       <div class="flex-item c">A</div>
       <div class="flex-item a">B</div>
   </div>

效果如下：

可以看到四个可伸缩项目在侧轴方向上（垂直方向）高度不一，margin不一样，但是最后都按照计算出来的一个基准线对齐；

align-items:stretch;

这个是取值会让可伸缩项目在侧轴方向上进行拉伸，前提是这些项目在侧轴方向上没有设置尺寸，否则会按照你设置的尺寸来渲染。

css代码：

.flex-container{
            display:flex;
            flex-direction: row;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:stretch;
        }
        .flex-item{
            background-color:blue;
            width: 100px;
            /*height: 100px;*/
            margin: 5px;;
        }

HTML代码：

<div class="flex-container">
       <div class="flex-item ">A</div>
       <div class="flex-item ">B</div>
       <div class="flex-item ">A</div>
       <div class="flex-item ">B</div>
   </div>

效果如下：

可以看到这些可伸缩项目在侧轴方向上被拉伸了，因为在垂直方向上没有设置高度。

到目前为止，我们所有的伸缩项目都是在一行或者一列上进行的，并没有进行换行和换列，flex-wrap属性表示是否支持换行或者换列，它有nowrap,wrap,wrap-reverse三个取值，nowrap是默认值，表示不换行或者换列，wrap表示换行或者换列，wrap-reverse表示支持换行或者换列，但是会沿着相反方向进行排列（如主轴是垂直方向换行后就按照先下后上的顺序来排列伸缩项）

css代码：

.flex-container{
            display:flex;
            flex-direction: row;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;
            flex-wrap: wrap;
        }
        .flex-item{
            background-color:blue;
            width: 100px;
            height: 70px;
            margin: 5px;;
        }

HTML代码：

<div class="flex-container">
    <div class="flex-item ">A</div>
    <div class="flex-item ">B</div>
    <div class="flex-item ">A</div>
    <div class="flex-item ">B</div>
    <div class="flex-item ">A</div>
    <div class="flex-item ">B</div>
    <div class="flex-item ">A</div>
    <div class="flex-item ">B</div>
</div>

效果如下：

可以看到伸缩项增多之后一行难以放下的时候会接着换行。wrap属性保证换行后按照正常的从上到下顺序排列

align-content属性用来表示换行之后各个伸缩行的对齐方式，它的取值有 stretch,flex-start,flex-end,center,space-between,space-around，意义和align-items属性取值意义相同，上面我们将7个伸缩项目分成了两行来排列，

将css代码添加align-content属性，html代码不变，如下：

CSS代码：

.flex-container{
            display:flex;
            flex-direction: row;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;
            flex-wrap: wrap;
            align-content: space-between;
        }
        .flex-item{
            background-color:blue;
            width: 100px;
            height: 70px;
            margin: 5px;;
        }

效果如下：

可以看到两个伸缩行在侧轴（垂直）方向上两端对齐了。

flex-flow属性，该属性是个复属性，它是flex-direction和flex-wrap的复合属性，flex-direction：row;flex-wrap:wrap就等同于flex-flow:row wrap

order属性，该属性用来表示伸缩项目的排列方式，正常情况下伸缩项目会按照主轴起点到主轴终点排列，遇到换行或者换列会按照从侧轴起点到终点进行排列（除非设置了某些对齐方式的reverse），但是某些情况下这种默认显示顺序不符合要求，可以采用给伸缩项添加order属性来指定排列顺序，默认情况下，每个伸缩项的order都是0，改属性可正可负，越大的值会被排列在越后面。

css代码：

 .flex-container{
            display:flex;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;    
            flex-flow: row wrap;
            align-content: space-between;

        }
        .flex-item{
            background-color:blue;
            width: 100px;
            height: 70px;
            margin: 5px;;
        }
        .order1{
            order:1;
        }
        .order2{
            order:2;
        }

HTML代码：

<div class="flex-container">
    <div class="flex-item order1">1</div>
    <div class="flex-item  order2">2</div>
    <div class="flex-item ">3</div>
    <div class="flex-item ">4</div>
    <div class="flex-item ">5</div>
    <div class="flex-item ">6</div>
    <div class="flex-item ">7</div>
    <div class="flex-item ">8</div>
</div>

效果如下：

默认情况下，会按照HTML的顺序1-8进行显示，但是由于给div1和2设置了大于0的order,所以他们被放在了最后显示（因为其他没有被设置的div的order默认属性都是0）

margin属性在flexbox布局中有很强大的作用，如果给某个可伸缩项设置某个方向上的margin为auto，那么这个可伸缩项就会在这个方向上占用该方向的剩余空间来作为自己的这个方向上的margin。

css代码：

.flex-container{
            display:flex;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;
            flex-flow: row wrap;
            align-content: space-between;

        }
        .flex-item{
            background-color:blue;
            width: 100px;
            height: 70px;
            margin: 5px;;
        }
        .a{
            margin-right:auto;
        }

HTML代码：

<div class="flex-container">
    <div class="flex-item a">1</div>
    <div class="flex-item  ">2</div>
    <div class="flex-item ">3</div>

</div>

效果如下：

由于给伸缩项1添加了margin-right为auto，所以它独占了本行的剩余空间作为它的right margin值。

利用这个特性，我们在flexbox布局中很容易实现可伸缩元素的垂直水平居中，

css代码;

.flex-container{
            display:flex;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;
            flex-flow: row wrap;
            align-content: space-between;

        }
        .flex-item{
            background-color:blue;
            width: 100px;
            height: 70px;
            margin: 5px;;
        }
        .a{
            margin:auto;
        }

HTML代码：

<div class="flex-container">
    <div class="flex-item a">1</div>
</div>

效果如下：

align-self属性，该属性是给各个可伸缩项设置自己的在侧轴上的对齐方式的，之前在容器上设置的align-item属性是作为一个整体设置的，所有的元素对齐方式都一样，align-self属性会覆盖之前的align-item属性，让每个可伸缩项在侧轴上具有不同的对齐方式，取值和align-item相同：

css代码：

.flex-container{
            display:flex;
            flex-direction: row;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;
            align-content: space-between;

        }
        .flex-item{
            background-color:blue;
            width: 100px;
            height: 70px;
            margin: 5px;;
        }
        .a{
            align-self:flex-start ;
        }
        .b{
            align-self:flex-end;
        }
        .c{
            align-self:center;
        }

html代码：

<div class="flex-container">
    <div class="flex-item a">1</div>
    <div class="flex-item  b">2</div>
    <div class="flex-item c">3</div>

</div>

效果如下：

可以看到三个伸缩项在侧轴上被赋予了不同的对齐方式。

flex属性，这个属性是加在伸缩项上面的，它定义了伸缩项如何分配主轴尺寸，通常取值为auto或者数字，auto浏览器会自动均分，数字会按照伸缩项所占的数字比重来分配空间，

这个属性会覆盖伸缩项在主轴上设定的尺寸，当给主轴上伸缩项设定了尺寸（宽或高）和这个属性的时候，事实上还是会按照这个属性来进行空间分配。

css代码：

.flex-container{
            display:flex;
            flex-direction: row;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;
            align-content: space-between;

        }
        .flex-item{
            background-color:blue;
            width: 100px;
            height: 70px;
            margin: 5px;;
        }
        .a{
            align-self:flex-start ;
            flex:1;
        }
        .b{
            align-self:flex-end;
            flex:2;
        }
        .c{
            align-self:center;
            flex:1;
        }

HTML代码：

<div class="flex-container">
    <div class="flex-item a">1</div>
    <div class="flex-item  b">2</div>
    <div class="flex-item c">3</div>

</div>

效果如下：

可以看到伸缩项尽管设置了宽度，但是最终还是按照我们设置的flex比例对水平空间进行了分割。

——摘自博客园myzhibie

4、CSS优先级算法如何计算？

多重样式优先级

多重样式（Multiple Styles）：

如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。

一般情况下，优先级如下：

（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style

有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

   <style type="text/css">
     /* 内部样式 */
     h3{color:green;}
   </style>

    <!-- 外部样式 style.css -->
   <link rel="stylesheet" type="text/css" href="style.css"/>

2.CSS样式优先级算法如何计算？

内联样式表的权值最高 1000；
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1

1.css优先级

是由四个级别和各个级别出现的次数决定的，值从左到右，左面的最大，一级大于一级

2.优先级算法

每个规则对应一个初始四位数：0,0,0,0

若是行内样式优先级，则是1,0,0,0，高于外部定义

<div style=”color: red”>sjweb</div>

若是ID选择符，则分别加0,1,0,0

若是类选择符，属性选择符，伪类选择符，则分别加0,0,1,0

若是元素选择器，伪类选择器，则分别加0,0,0,1

3.需要注意

!important的优先级是最高的，但出现冲突时则需比较”四位数“

优先级相同时，则采用就近原则

继承得来的属性，其优先级最低

5、display有哪些值，说明他们的作用？

1、none：元素不会显示，而且该元素现实的空间也不会保留。但有另外一个 visibility: hidden，是保留元素的空间的。

2、inline： display的默认属性。将元素显示为内联元素，元素前后没有换行符。我们知道内联元素是无法设置宽高的，所以一旦将元素的display 属性设为 inline，设置属性height和width是没有用的。此时影响它的高度一般是内部元素的高度（font-size）和padding。

3、block：将元素将显示为块级元素，元素前后会带有换行符。设置为block后，元素可以设置width和height了。元素独占一行。

4、inline-block：行内块元素。这个属性值融合了inline 和 block 的特性，即是它既是内联元素，又可以设置width和height。

看例子

.inline{
    display:inline; 
    width:100px; 
    height:100px; 
    padding:10px; 
    background-color:red;
}
.block{
    display:block; 
    width:100px; 
    height:100px; 
    padding:10px;
    background-color:green;
}
.inline-block{
    display:inline-block; 
    width:100px;
    height:100px; 
    padding:10px;
    background-color:blue;
}


<div class="wrap">
    <div class="inline">
    inline
    </div>inline
    <div class="block">
    block
    </div> block
    <div class="inline-block">
    inline-block
    </div>inline-block
</div>

这里提及下内联元素和块级元素的一些特点：

内联元素：

和其他元素都在一行上；
元素的高度、宽度及顶部和底部边距不可设置；
元素的宽度就是它包含的文字或图片的宽度，不可改变。

块级元素：

   每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）；
   元素的高度、宽度、行高以及顶和底边距都可设置。
   元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form

内联块状元素：

和其他元素都在一行上；
元素的高度、宽度、行高以及顶和底边距都可设置。

常用的内联块状元素有：
<img>、<input>

空元素：即没有内容的HTML元素，例如：br、meta、hr、link、input、img

其他display的属性值不是很常用，其具体的含义如下：

list-item：     此元素会作为列表显示。
run-in：     此元素会根据上下文作为块级元素或内联元素显示。
table：     此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table：     此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group：     此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group：     此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group：     此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row：     此元素会作为一个表格行显示（类似 <tr>）。
table-column-group：     此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column：     此元素会作为一个单元格列显示（类似 <col>）
table-cell：     此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption：     此元素会作为一个表格标题显示（类似 <caption>）
inherit：     规定应该从父元素继承 display 属性的值。

另外有两个已经废除的属性值：
compact    CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker    CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。

6、浏览器的内核分别是什么？

一、Trident内核代表产品Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等

二、Gecko内核代表作品Mozilla FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至 9。

三、WebKit内核代表作品Safari、Chromewebkit 是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。

四、Presto内核代表作品OperaPresto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。

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

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

8、doctype的作用

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

标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

HTML5 为什么只需要写 <!DOCTYPE HTML>？

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

 而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

9、data-属性的作用是什么？

data-为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过 getAttribute方法获取。ppk提到过使用rel属性，lightbox库推广了rel属性，HTML5提供了data-做替代，这样可以更好地使用自定义的属性。

上面HTML代码提供了单个文章所拥有的一些属性。通过JS代码可以获得这些自定义的属性。

var post = document.getElementsByTagName('div')[0];
post.dataset; // DOMStringMap
post.dataset.commentNum; // 10

需要注意的是，data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。

并不是所有的浏览器都支持.dataset属性，测试的浏览器中只有Chrome和Opera支持。

通过js方式给data-*设置值

<div id="content" data-user-list="user_list">data-user_list自定义属性 </div>

//js

var content= document.getElementById('content');

content.dataset.name='我叫tom'

alert(content.dataset.name)

//jquery

$('#content').data('name','我叫tom');//写

getAttribute/setAttribute方法的使用

var content= document.getElementById('content');

content.dataset.birthDate = '19990619';

content.setAttribute('age', 25);

console.log(content.getAttribute('data-age')); //25 console.log(content.getAttribute('data-birth-date')); //19990519

10、描述一下<script>、<script async>、<script defer>之间的不同？

向html页面中插入javascript代码的主要方法就是通过script标签。其中包括两种形式，第一种直接在script标签之间插入js代码，第二种即是通过src属性引入外部js文件。由于解释器在解析执行js代码期间会阻塞页面其余部分的渲染，对于存在大量js代码的页面来说会导致浏览器出现长时间的空白和延迟，为了避免这个问题，建议把全部的js引用放在</body>标签之前。

　　script标签存在两个属性，defer和async，因此script标签的使用分为三种情况：

　　1.<script src="example.js"></script>

　　　没有defer或async属性，浏览器会立即加载并执行相应的脚本。也就是说在渲染script标签之后的文档之前，不等待后续加载的文档元素，读到就开始加载和执行，此举会阻塞后续文档的加载；

　　2.<script async src="example.js"></script>

　　有了async属性，表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的，即异步执行；

　　3.<script defer src="example.js"></script>

有了defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本的执行需要等到文档所有元素解析完成之后，DOMContentLoaded事件触发执行之前。

　　下图可以直观的看出三者之间的区别:

　　其中蓝色代表js脚本网络加载时间，红色代表js脚本执行时间，绿色代表html解析。

　　从图中我们可以明确一下几点：

　　1.defer和async在网络加载过程是一致的，都是异步执行的；

　　2.两者的区别在于脚本加载完成之后何时执行，可以看出defer更符合大多数场景对应用脚本加载和执行的要求；

　　3.如果存在多个有defer属性的脚本，那么它们是按照加载顺序执行脚本的；而对于async，它的加载和执行是紧紧挨着的，无论声明顺序如何，只要加载完成就立刻执行，它对于应用脚本用处不大，因为它完全不考虑依赖。

小结：

defer 和 async 的共同点是都是可以并行加载JS文件，不会阻塞页面的加载，不同点是 defer的加载完成之后，JS会等待整个页面全部加载完成了再执行，而async是加载完成之后，会马上执行JS，所以假如对JS的执行有严格顺序的话，那么建议用 defer加载。

11、实现add(2,5);//7

add(2)(5);//7的函数

var add = function(x,r) { if(arguments.length == 1){ return function(y) { return x + y; }; }else{ return x+r; } }; console.log(add(2)(5)); console.log(add(2,5));

12、写出一下程序的打印结果。

console.log('one');

setTimeout(function(){

　　console.log('two');

},0);

console.log('three');

//one

//three

//two

console.log('one');

setTimeout(function(){

　　console.log('two');

},0);

console.log('three');


for (var i = 0; i < 5; i++) {
    setTimeout(function () {
        console.log(i);
    }(),0);
}
与上面配合结果为：//one three 0 1 2 3 4 two

for (var i = 0; i < 5; i++) {
    setTimeout(function () {
        console.log(i);
    },0);
}

与上面配合结果为：//one three two 5个5

for (let i = 0; i < 5; i++) {
    setTimeout(function () {
        console.log(i);
    },0);
}

与上面配合结果为：//one three two 0 1 2 3 4

解析：

for (var i = 0; i < 3; i++) {
2     setTimeout(function() {
3         console.log(i);
4     }, 0);
5     console.log(i);
6 }

结果是：0 1 2 3 3 3
很多公司面试都爱出这道题，此题考察的知识点还是蛮多的。都考察了那些知识点呢？
异步、作用域、闭包。
我们来简化此题：

1 setTimeout(function() {
2         console.log(1);
3 }, 0);
4 console.log(2);   //先打印2，再打印1

因为是setTimeout是异步的。
正确的理解setTimeout的方式(注册事件)：有两个参数，第一个参数是函数，第二参数是时间值。调用setTimeout时，把函数参数，放到事件队列中。等主程序运行完，再调用。

就像我们给按钮绑定事件一样：

1 btn.onclick = function() {
2         alert(1);
3 };

这么写完，会弹出1吗。不会！！只是绑定事件而已！必须等我们去触发事件，比如去点击这个按钮，才会弹出1。

setTimeout也是这样的！只是绑定事件，等主程序运行完毕后，再去调用。

setTimeout的时间值是怎么回事呢？

1 setTimeout(fn, 2000)

程序会不会报错？不会！而且还会准确得打印1。为什么？因为真正去执行console.log(i)这句代码时，var i = 1已经执行完毕了！

所以我们进行dom操作。可以先绑定事件，然后再去写其他逻辑。

1 window.onload = function() {
2         fn();
3 }
4 var fn = function() {
5         alert('hello')
6 };

这么写，完全是可以的。因为异步！

es5中是没有块级作用域的。

1 for (var i = 0; i < 3; i++) {}
2 console.log(i); //3，也就说i可以在for循环体外访问到。所以是没有块级作用域。

这回我们再来看看原题。
原题使用了for循环。循环的本质是干嘛的？是为了方便我们程序员，少写重复代码。

原题等价于：

 1 var i = 0;
 2 setTimeout(function() {
 3     console.log(i);
 4 }, 0);
 5 console.log(i);
 6 i++;
 7 setTimeout(function() {
 8     console.log(i);
 9 }, 0);
10 console.log(i);
11 i++;
12 setTimeout(function() {
13     console.log(i);
14 }, 0);
15 console.log(i);
16 i++;

因为setTimeout是注册事件。根据前面的讨论，可以都放在后面。
原题又等价于如下的写法：

 1 var i = 0;
 2 console.log(i);
 3 i++;
 4 console.log(i);
 5 i++;
 6 console.log(i);
 7 i++;
 8 setTimeout(function() {
 9     console.log(i);
10 }, 0);
11 setTimeout(function() {
12     console.log(i);
13 }, 0);
14 setTimeout(function() {
15     console.log(i);
16 }, 0);  //弹出 0 1 2 3 3 3

怎么保证能弹出0，1， 2呢？

1 for (var i = 0; i < 3; i++) {
2     setTimeout((function(i) {
3         return function() {
4             console.log(i);
5         };
6     })(i), 0);  //改为立即执行的函数
7     console.log(i);  
8 }

11、用ajax请求后台数据，是否每次响应状态码为200时，都会执行success函数，什么时候会进入error函数？

1. 返回的数据类型一定要符合定义的数据类型。即如果你定义的 dataType 是 json 类型的，那么返回来的数据一定是 json 才可以，平且不然就会执行 error 里的程序块儿。[/b] [color=red]
(1) 同时需要特别的注意返回的JSON数据是否是严格的JSON格式.
(2) 也应该严重关切当后台返回的是一个List 数据（List当中的数据是Json格式）时，有没脏数据即不是严格的JSON格式。
很隐蔽的可能是数据某一个字段中在开始或末尾含有特殊字符，以"回车键"、"Tab键"等
这类隐蔽错误的规避措施就是好的编程习惯：
a. 对于在页面填写入库的数据最好强制性的做，去空操作<利用客户端最好>。
b. 特殊的业务需注意特殊字符。
这样还不够，因为在开发过程中测试或开发人员自己在数据库中手动添加数据，可能会多加了空格等，导致程序调试，测试带来了麻烦。这时就需要考虑在后台代码对获取的数据做处理。[/color][/align][/color]
[b]
2. 原因是ajax请求跨域了，解决方法是在两个文件里都添加一段 js: [/b]document.domain，或者采用Jsonp的方式，如我的前一篇blog中提到的。

还有一点对JQuery 中Ajax的一点其它的认识：客户端发起请求，得到服务器端的相应是200，<正确拿到服务器响应的数据>没有问题.此时在判断进入success 对应的回调函数还是进入到error对应的回调函数之前，可能会校验一些东西：
1. 返回的每条数据是否是dataType中定义的数据类型。如果有部分数据不是或者哪怕一条数据没有严格的按照dataType定义的类型，程序就会进入到error:function(){****}
2. 请求的域和当前域是否是同一域，如果不是同一域也十分有可能进入error:function(){***}

12、常见的http请求错误代码原因及解决方法？

HTTP 错误 400

400 请求出错由于语法格式有误，服务器无法理解此请求。不作修改，客户程序就无法重复此请求。

HTTP 错误 401

401.1 未授权：登录失败

此错误表明传输给服务器的证书与登录服务器所需的证书不匹配。

请与 Web 服务器的管理员联系，以确认您是否具有访问所请求资源的权限。 401.2 未授权：服务器的配置导致登录失败

此错误表明传输给服务器的证书与登录服务器所需的证书不匹配。此错误通常由未发送正确的 WWW 验证表头字段所致。

请与 Web 服务器的管理员联系，以确认您是否具有访问所请求资源的权限。 401.3 未授权：由于资源中的 ACL 而未授权

此错误表明客户所传输的证书没有对服务器中特定资源的访问权限。此资源可能是客户机中的地址行所列出的网页或文件，也可能是处理客户机中的地址行所列出的文件所需服务器上的其他文件。

请记录试图访问的完整地址，并与 Web 服务器的管理员联系以确认您是否具有访问所请求资源的权限。

401.4 未授权：授权服务被筛选程序拒绝

此错误表明 Web 服务器已经安装了筛选程序，用以验证连接到服务器的用户。此筛选程序拒绝连接到此服务器的真品证书的访问。请记录试图访问的完整地址，并与 Web 服务器的管理员联系以确认您是否具有访问所请求资源的权限。

401.5 未授权：ISAPI/CGI 应用程序的授权失败

此错误表明试图使用的 Web服务器中的地址已经安装了 ISAPI 或 CGI程序，在继续之前用以验证用户的证书。此程序拒绝用来连接到服务器的真品证书的访问。

请记录试图访问的完整地址，并与 Web服务器的管理员联系以确认您是否具有访问所请求资源的权限

HTTP 错误 403 
403.1 禁止：禁止执行访问 
如果从并不允许执行程序的目录中执行 CGI、ISAPI或其他执行程序就可能引起此错误。  
403.2 禁止：禁止读取访问 
如果没有可用的默认网页或未启用此目录的目录浏览，或者试图显示驻留在只标记为执行或脚本权限的目录中的HTML 页时就会导致此错误。  
403.3 禁止：禁止写访问 
如果试图上载或修改不允许写访问的目录中的文件，就会导致此问题。 
403.4 禁止：需要 SSL 
此错误表明试图访问的网页受安全套接字层（SSL）的保护。要查看，必须在试图访问的地址前输入https:// 以启用 SSL。 
403.5 禁止：需要 SSL 128 
此错误消息表明您试图访问的资源受 128位的安全套接字层（SSL）保护。要查看此资源，需要有支持此SSL 层的浏览器。 
请确认浏览器是否支持 128 位 SSL安全性。如果支持，就与 Web服务器的管理员联系，并报告问题。 
403.6 禁止：拒绝 IP 地址 
如果服务器含有不允许访问此站点的 IP地址列表，并且您正使用的 IP地址在此列表中，就会导致此问题。  
403.7 禁止：需要用户证书 
当试图访问的资源要求浏览器具有服务器可识别的用户安全套接字层（SSL）证书时就会导致此问题。可用来验证您是否为此资源的合法用户。 
请与 Web服务器的管理员联系以获取有效的用户证书。 
403.8 禁止：禁止站点访问 
如果 Web服务器不为请求提供服务，或您没有连接到此站点的权限时，就会导致此问题。 
403.9 禁止访问：所连接的用户太多 
如果 Web太忙并且由于流量过大而无法处理您的请求时就会导致此问题。请稍后再次连接。 
403.10 禁止访问：配置无效 
此时 Web 服务器的配置存在问题。 
403.11 禁止访问：密码已更改 
在身份验证的过程中如果用户输入错误的密码，就会导致此错误。请刷新网页并重试。 
403.12 禁止访问：映射程序拒绝访问 
拒绝用户证书试图访问此 Web 站点。 请与站点管理员联系以建立用户证书权限。如果必要，也可以更改用户证书并重试。

HTTP 错误 404

404 找不到 Web 服务器找不到您所请求的文件或脚本。请检查URL 以确保路径正确。

HTTP 错误 405

405 不允许此方法对于请求所标识的资源，不允许使用请求行中所指定的方法。请确保为所请求的资源设置了正确的 MIME 类型。

HTTP 错误 406

406 不可接受根据此请求中所发送的“接受”标题，此请求所标识的资源只能生成内容特征为“不可接受”的响应实体。

HTTP 错误 407

407 需要代理身份验证在可为此请求提供服务之前，您必须验证此代理服务器。请登录到代理服务器，然后重试。

HTTP 错误 412

412 前提条件失败在服务器上测试前提条件时，部分请求标题字段中所给定的前提条件估计为FALSE。客户机将前提条件放置在当前资源 metainformation（标题字段数据）中，以防止所请求的方法被误用到其他资源。

HTTP 错误 414

414 Request-URI 太长 Request-URL太长，服务器拒绝服务此请求。仅在下列条件下才有可能发生此条件：客户机错误地将 POST 请求转换为具有较长的查询信息的 GET 请求。客户机遇到了重定向问题（例如，指向自身的后缀的重定向前缀）。服务器正遭受试图利用某些服务器（将固定长度的缓冲区用于读取或执行 Request-URI）中的安全性漏洞的客户干扰。

HTTP 错误 500

500 服务器的内部错误 Web 服务器不能执行此请求。请稍后重试此请求。

HTTP 错误 501

501 未实现 Web 服务器不支持实现此请求所需的功能。请检查URL 中的错误

HTTP 错误 502

502 网关出错当用作网关或代理时，服务器将从试图实现此请求时所访问的upstream 服务器中接收无效的响应。

13、网页常见错误代码列表

1 网址协议不支持的协议。

2 检测器内部错误。

3 网址格式不正确。

5 无法连接到代理服务器。

6 无法连接到服务器或找不到域名。

7 连接服务器失败。

28 操作超时。可能原因：页面执行时间过长、服务器压力大。

52 服务器未返回任何内容。

100 Continue 初始的请求已经接受，客户应当继续发送请求的其余部分。

101 Switching Protocols 服务器将遵从客户的请求转换到另外一种协议

200 OK 一切正常

201 Created 服务器已经创建了文档，Location头给出了它的URL。

202 Accepted 已经接受请求，但处理尚未完成。

203 Non-Authoritative Information 文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝。

204 No Content 没有新文档，浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的。

205 Reset Content 没有新的内容，但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容。

206 Partial Content 客户发送了一个带有Range头的GET请求，服务器完成了它。

300 Multiple Choices 客户请求的文档可以在多个位置找到，这些位置已经在返回的文档内列出。如果服务器要提出优先选择，则应该在Location应答头指明。

301 Moved Permanently 客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL。

302 Found 类似于301，但新的URL应该被视为临时性的替代，而不是永久性的。注意，在HTTP1.0中对应的状态信息是“Moved Temporatily”。出现该状态代码时，浏览器能够自动访问新的URL，因此它是一个很有用的状态代码。注意这个状态代码有时候可以和301替换使用。例如，如果浏览器错误地请求http://host/~user（缺少了后面的斜杠），有的服务器返回301，有的则返回302。严格地说，我们只能假定只有当原来的请求是GET时浏览器才会自动重定向。请参见307。

303 See Other 类似于301/302，不同之处在于，如果原来的请求是POST，Location头指定的重定向目标文档应该通过GET提取。

304 Not Modified 客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。

305 Use Proxy 客户请求的文档应该通过Location头所指明的代理服务器提取。

307 Temporary Redirect 和302（Found）相同。许多浏览器会错误地响应302应答进行重定向，即使原来的请求是POST，即使它实际上只能在POST请求的应答是303时才能重定向。由于这个原因，HTTP 1.1新增了307，以便更加清除地区分几个状态代码：当出现303应答时，浏览器可以跟随重定向的GET和POST请求；如果是307应答，则浏览器只能跟随对GET请求的重定向。

400 Bad Request 请求出现语法错误。

401 Unauthorized 客户试图未经授权访问受密码保护的页面。应答中会包含一个WWW-Authenticate头，浏览器据此显示用户名字/密码对话框，然后在填写合适的Authorization头后再次发出请求。

403 Forbidden 资源不可用。服务器理解客户的请求，但拒绝处理它。通常由于服务器上文件或目录的权限设置导致。

404 Not Found 无法找到指定位置的资源。这也是一个常用的应答。

405 Method Not Allowed 请求方法（GET、POST、HEAD、Delete、PUT、TRACE等）对指定的资源不适用。

406 Not Acceptable 指定的资源已经找到，但它的MIME类型和客户在Accpet头中所指定的不兼容。

407 Proxy Authentication Required 类似于401，表示客户必须先经过代理服务器的授权。

408 Request Timeout 在服务器许可的等待时间内，客户一直没有发出任何请求。客户可以在以后重复同一请求。

409 Conflict 通常和PUT请求有关。由于请求和资源的当前状态相冲突，因此请求不能成功。

410 Gone 所请求的文档已经不再可用，而且服务器不知道应该重定向到哪一个地址。它和404的不同在于，返回407表示文档永久地离开了指定的位置，而404表示由于未知的原因文档不可用。

411 Length Required 服务器不能处理请求，除非客户发送一个Content-Length头。

412 Precondition Failed 请求头中指定的一些前提条件失败。

413 Request Entity Too Large 目标文档的大小超过服务器当前愿意处理的大小。如果服务器认为自己能够稍后再处理该请求，则应该提供一个Retry-After头。

414 Request URI Too Long URI太长。

416 Requested Range Not Satisfiable 服务器不能满足客户在请求中指定的Range头。

500 Internal Server Error 服务器遇到了意料不到的情况，不能完成客户的请求。

501 Not Implemented 服务器不支持实现请求所需要的功能。例如，客户发出了一个服务器不支持的PUT请求。

502 Bad Gateway 服务器作为网关或者代理时，为了完成请求访问下一个服务器，但该服务器返回了非法的应答。

503 Service Unavailable 服务器由于维护或者负载过重未能应答。例如，Servlet可能在数据库连接池已满的情况下返回503。服务器返回503时可以提供一个Retry-After头。

504 Gateway Timeout 由作为代理或网关的服务器使用，表示不能及时地从远程服务器获得应答。

505 HTTP Version Not Supported 服务器不支持请求中所指明的HTTP版本。

10003 网址内容不是文本，无法执行文本检测

10002 网址内容不知是什么类型，无法执行文本检测

10000 网址内容未包含指定的文字

20000 内容被修改

30000 检测到木马、病毒

面试总结与积累

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea

多重样式优先级

2.CSS样式优先级算法如何计算？

推荐阅读