面试总结与积累
一、行内元素有哪些？块级元素有哪些？空元素有哪些？CSS盒模型？javascript
行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h六、blockquotecss
空元素：即没有内容的HTML元素，例如：br、meta、hr、link、input、imghtml
CSS盒模型：前端
首先要清楚，咱们写CSS样式，目的就是为告终构与表现相分离。其次，ＣＳＳ中的盒子模型是为了让咱们充分理解html5
ｄｉｖ＋ｃｓｓ模型的定位功能，就是利用盒子模型这样的布局方式代替传统的表格布局方式。java
在进行ｈｔｍｌ布局时常常会遇到布局ｄｉｖ，而盒模型则是重中之重，ＣＳＳ盒模型的尺寸基准(box-sizing的值)有两种，一种是默认的jquery
content-box 一种是border-box；关于元素是哪一种盒模型，咱们可使用火狐浏览器的firebug插件的布局选项中进行查看。程序员
理论上说，content-box和border-box的主要区别是两者的盒子的宽度是否包含元素的边框和内边距。前者width不包含内边距和边框，后者的width包含内边距和边框。web
二、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>
<style> @import url(style.css)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不支持。
三、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
四、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的优先级是最高的，但出现冲突时则需比较”四位数“
优先级相同时，则采用就近原则
继承得来的属性，其优先级最低
五、display有哪些值，说明他们的做用？
display 的属性值有：none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-caption|inherit
其中经常使用的的有none、inline、block、inline-block。分别的意思是：
一、none： 元素不会显示，并且该元素现实的空间也不会保留。但有另一个 visibility: hidden， 是保留元素的空间的。
二、inline： display的默认属性。将元素显示为内联元素，元素先后没有换行符。咱们知道内联元素是没法设置宽高的，因此一旦将元素的display 属性设为 inline， 设置属性height和width是没有用的。此时影响它的高度通常是内部元素的高度（font-size）和padding。
三、block： 将元素将显示为块级元素，元素先后会带有换行符。设置为block后，元素能够设置width和height了。元素独占一行。
四、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>
这里说起下内联元素和块级元素的一些特色：
内联元素：
和其余元素都在一行上；
元素的高度、宽度及顶部和底部边距不可设置；
元素的宽度就是它包含的文字或图片的宽度，不可改变。
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
块级元素：
每一个块级元素都重新的一行开始，而且其后的元素也另起一行。（真霸道，一个块级元素独占一行）；
元素的高度、宽度、行高以及顶和底边距均可设置。
元素宽度在不设置的状况下，是它自己父容器的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 中删除。
六、浏览器的内核分别是什么？
1、Trident内核表明产品Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括：IE、傲游、世界之窗浏览器、Avant、 腾讯TT、Netscape 八、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等
2、Gecko内核表明做品Mozilla FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至 9。
3、WebKit内核表明做品Safari、Chromewebkit 是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特色在于源码结构清晰、渲染速度极快。缺点是对网页代 码的兼容性不高，致使一些编写不标准的网页没法正常显示。主要表明做品有Safari和Google的浏览器Chrome。
4、Presto内核表明做品OperaPresto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或 其部分可随着DOM及Script语法的事件而从新排版。
七、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
* HTML5 如今已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增长。
绘画 canvas;
用于媒介回放的 video 和 audio 元素;
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除;
语意化更好的内容元素，好比 article、footer、heade
八、doctype的做用
<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签以前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会致使文档以兼容模式呈现。
标准模式的排版 和JS运做模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点没法工做。
HTML5 为何只须要写 <!DOCTYPE HTML>？
HTML5 不基于 SGML，所以不须要对DTD进行引用，可是须要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）； 而HTML4.01基于SGML,因此须要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
九、data-属性的做用是什么？
data-为前端开发者提供自定义的属性，这些属性集能够经过对象的dataset属性获取，不支持该属性的浏览器能够经过 getAttribute方法获取。ppk提到过使用rel属性，lightbox库推广了rel属性，HTML5提供了data-作替代，这样能够更好 地使用自定义的属性。
data-comment-num="10" data-category="javascript">
....
</div>
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
十、描述一下<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加载。
十一、实现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));
十二、写出一下程序的打印结果。
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 }
十一、用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(){***}
十二、常见的http请求错误代码缘由及解决方法？
400 请求出错 因为语法格式有误，服务器没法理解此请求。不做修改，客户程序就没法重复此请求。
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 站点。 请与站点管理员联系以创建用户证书权限。若是必要，也能够更改用户证书并重试。
404 找不到 Web 服务器找不到您所请求的文件或脚本。请检查URL 以确保路径正确。
HTTP 错误 405
405 不容许此方法 对于请求所标识的资源，不容许使用请求行中所指定的方法。请确保为所请求的资源设置了正确的 MIME 类型。
HTTP 错误 406
406 不可接受 根据此请求中所发送的“接受”标题，此请求所标识的资源只能生成内容特征为“不可接受”的响应实体。
407 须要代理身份验证 在可为此请求提供服务以前，您必须验证此代理服务器。请登陆到代理服务器，而后重试。
412 前提条件失败 在服务器上测试前提条件时，部分请求标题字段中所给定的前提条件估计为FALSE。客户机将前提条件放置在当前资源 metainformation（标题字段数据）中，以防止所请求的方法被误用到其余资源。
HTTP 错误 414
414 Request-URI 太长 Request-URL太长，服务器拒绝服务此请求。仅在下列条件下才有可能发生此条件： 客户机错误地将 POST 请求转换为具备较长的查询信息的 GET 请求。 客户机遇到了重定向问题（例如，指向自身的后缀的重定向前缀）。 服务器正遭受试图利用某些服务器（将固定长度的缓冲区用于读取或执行 Request-URI）中的安全性漏洞的客户干扰。
500 服务器的内部错误 Web 服务器不能执行此请求。请稍后重试此请求。
HTTP 错误 501
501 未实现 Web 服务器不支持实现此请求所需的功能。请检查URL 中的错误
502 网关出错 当用做网关或代理时，服务器将从试图实现此请求时所访问的upstream 服务器中接收无效的响应。
1三、网页常见错误代码列表
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 检测到木马、病毒
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 升级Gradle后报错Gradle‘s dependency cache may be corrupt (this sometimes occurs
- 2. Smarter, Not Harder
- 3. mac-2019-react-native 本地环境搭建(xcode-11.1和android studio3.5.2中Genymotion2.12.1 和VirtualBox-5.2.34 )
- 4. 查看文件中关键字前后几行的内容
- 5. XXE萌新进阶全攻略
- 6. Installation failed due to: ‘Connection refused: connect‘安卓studio端口占用
- 7. zabbix5.0通过agent监控winserve12
- 8. IT行业UI前景、潜力如何？
- 9. Mac Swig 3.0.12 安装
- 10. Windows上FreeRDP-WebConnect是一个开源HTML5代理，它提供对使用RDP的任何Windows服务器和工作站的Web访问