所有题目答案整理自网络，如有错误，接受指正，拒绝批评！
关于html5
- 语义化标签使得页面的内容结构化，见名知义
- header, footer, nav, article, dialog
- 增强型表单
- date, email, tel, url
- 视频音频(audio, video)
- canvas
- 地理定位
- 拖拽(drag)
- Web Worker
- Web Storage
- Web Socket(TCP)
关于CSS3
个人总结（css3新特性）
动画，形状变化，选择器，阴影，背景……
布局（grid, flex...）, box-sizing
- box-sizing:border-box的时候，边框和padding包含在元素的宽高之内！如下图
- box-sizing:content-box的时候，边框和padding不包含在元素的宽高之内
Transform、Transition和Animation
Transform
旋转，缩放，移动，或者沿着水平或者垂直方向扭曲（斜切变换）等等，不会改变周围的元素
- 旋转：transform:rotate(-45deg);
- 缩放：transform:scale(.5);scaleX(2);scaleY(3)。如果给了负值，能够达到翻转的效果：scaleX(-1)
- 移动：transform:translate(1px,2px).使用其他单位：em,%也是可以的。
- 倾斜：transform:skew(45deg,0);
transition
一定时间之内，一组css属性变换到另一组属性的动画展示过程。需要有最初的样式，最终的样式。
animation
transition只能从一组css属性变成另一组css属性。animation则可以在多组属性之间变换
CSS优先级
CSS样式在浏览器中被解析的先后顺序
优先级逐渐增加
- 通用选择器*
- 元素(类型)选择器
- 类选择器
- 属性选择器
- 伪类(CSS 伪类用于向某些选择器添加特殊的效果a:hover{color:#ccc})
- ID 选择器
- 内联样式
meta标签
meta
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
必须属性
content,值是有效字符串。content 属性始终要和 name 属性或 http-equiv 属性一起使用。
可选属性
http-equiv
content-type,
expires,
refresh,
set-cookie,
http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。
当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。
name
name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。
"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。
scheme
scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由 <head> 标签的 profile 属性指定的概况文件中进行了定义。
block，inline和inline-block概念和区别
block
- block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
- block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
- block元素可以设置margin和padding属性。
inline
- inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
- inline元素设置width,height属性无效。
- inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
inline-block
- 将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。简言之，就是不独占一行的块级元素。
水平居中布局
- inline-block+text-align
原理：先将子框由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。
用法：对子框设置display:inline-block，对父框设置text-align:center。 - table+margin
原理：先将子框设置为块级表格来显示（类似 ），再设置子框居中以达到水平居中
用法：对子框设置display:table，再设置margin:0 auto。 - absolute+transform (CSS3)
原理：将子框设置为绝对定位，移动子框，使子框左侧距离相对框左侧边框的距离为相对框宽度的一半，再通过向左移动子框的一半宽度以达到水平居中。当然，在此之前，我们需要设置父框为相对定位，使父框成为子框的相对框。
用法：对父框设置position:relative，对子框设置position:absolute，left:50%，transform:translateX(-50%)。 - flex+margin
原理：通过CSS3中的布局利器flex将子框转换为flex item，再设置子框居中以达到居中。
用法：先将父框设置为display:flex，再设置子框margin:0 auto。 - flex+justify-content
原理：通过CSS3中的布局利器flex中的justify-content属性来达到水平居中。
用法：先将父框设置为display:flex，再设置justify-content:center。
垂直居中布局
- table-cell+vertical-align
原理：通过将父框转化为一个表格单元格显示，再通过设置属性，使表格单元格内容垂直居中以达到垂直居中。
用法：先将父框设置为display:table-cell，再设置vertical-align:middle。 - absolute+transform
原理：类似于水平居中时的absolute+transform原理。将子框设置为绝对定位，移动子框，使子框上边距离相对框上边边框的距离为相对框高度的一半，再通过向上移动子框的一半高度以达到垂直居中。当然，在此之前，我们需要设置父框为相对定位，使父框成为子框的相对框。
用法：先将父框设置为position:relative，再设置子框position:absolute，top:50%，transform:translateY(-50%)。 - flex+align-items
原理：通过设置CSS3中的布局利器flex中的属性align-times，使子框垂直居中。
用法：先将父框设置为position:flex，再设置align-items:center。
水平垂直居中
- absolute+transform
将水平居中时的absolute+transform和垂直居中时的absolute+transform相结合。详见：水平居中的3）和垂直居中的2）。 - inline-block+text-align+table-cell+vertical-align
原理：使用inline-block+text-align水平居中，再用table-cell+vertical-align垂直居中，将二者结合起来 - flex+justify-content+align-items
原理：通过设置CSS3布局利器flex中的justify-content和align-items，从而达到水平垂直居中。
inline-block和float的共性和区别
共性：
①inline-block: 是把一个元素的display设置为块状内联元素，意思就是说，让一个元素的容器inline展示，并且里面的内容block展示；inline属性使元素内联展示，内联元素设置宽度无效，相邻的inline元素会在一行显示不换行，直到本行排满为止。block的元素始终会独占一行，呈块状显示，可设置宽高。所以inline-block的元素就是宽高可设置，相邻的元素会在一行显示，直到本行排满，也就是让元素的容器属性为block，内容为inline。
②float： 设置元素的浮动为左或者右浮动，当设置元素浮动时，相邻元素会根据自身大小，排满一行，如果父容器宽度不够则会换行。当我们设置了元素的浮动时，这个元素就脱离了文档流，相邻元素会呈环绕装排列。
两者共同点是都可以实现元素在一行显示，并且可以自由设置元素大小。
区别：
①inline-block: 水平排列一行，即使元素高度不一，也会以高度最大的元素高度为行高，即使高度小的元素周围留空，也不回有第二行元素上浮补位。可以设置默认的垂直对齐基线。
②float: 让元素脱离当前文档流，呈环绕装排列，如遇上行有空白，而当前元素大小可以挤进去，这个元素会在上行补位排列。默认是顶部对齐。
import和link
页面的回流与重绘
页面加载过程
- 根据文档生成DOM树（包括display:none的节点）
- 在DOM树基础上根据节点的几何属性（margin/padding/width/height等)生成render树（不包括display:none、head节点但会包含visibility:hidden节点）
- 在render树基础上进行进一步渲染包括color,outline等样式
-
reflow:当render树中的一部分或者全部因为大小边距等问题发生改变而需要重建的过程叫做回流
- dom树结构变化，比如你删除或者添加某个node
- 元素几何属性变化，包括margin,padding,height,width,border等
- 页面渲染初始化
- 获取某些属性
- 浏览器窗口发生变化-resize事件发生时
repaint:当元素的一部分属性发生变化，如外观背景色不会引起布局变化而需要重新渲染的过程叫做重绘
回流一定会伴随着重绘，但是重绘不一定会引起回流
SEO
内部优化
- META标签优化：例如：TITLE，KEYWORDS，DESCRIPTION等的优化
- 内部链接的优化，包括相关性链接（Tag标签），锚文本链接，各导航链接，及图片链接
- 网站内容更新：每天保持站内的更新(主要是文章的更新等)
外部优化
- 外部链接类别：友情链接、博客、论坛、B2B、新闻、分类信息、贴吧、知道、百科、站群、相关信息网等尽量保持链接的多样性
- 外链运营：每天添加一定数量的外部链接，使关键词排名稳定提升。
- 外链选择：与一些和你网站相关性比较高,整体质量比较好的网站交换友情链接,巩固稳定关键词排名
CSS的各种定位
static
HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到 top, bottom, left, right影响
div.static {
position: static;
border: 3px solid #73AD21;
}
fixed
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动
p.pos_fixed {
position:fixed;
top:30px;
right:5px;
}
relative
相对于其正常位置产生的移动
h2.pos_top {
position:relative;
top:-50px;
}
absolute
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
flex
Flexible box的缩写，意为弹性布局
Webkit内核的浏览器，必须加上-webkit前缀
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
容器的属性
- flex-direction属性
flex-direction属性决定主轴的方向（即项目的排列方向）
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
- flex-wrap属性
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
- flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
- justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
- align-items属性
align-items属性定义项目在交叉轴上如何对齐。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
- align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
项目的属性
- order属性
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
.item {
order: <integer>;
}
- flex-grow属性
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.item {
flex-grow: <number>; /* default 0 */
}
- flex-shrink属性
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.item {
flex-shrink: <number>; /* default 1 */
}
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
- flex-basis属性
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
.item {
flex-basis: <length> | auto; /* default auto */
}
- flex属性
flex属性是flex-grow（放大）, flex-shrink（缩小） 和 flex-basis（项目占据的主轴空间）的简写，默认值为0 1 auto。后两个属性可选。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
常见简写含义描述
- 当flex取值为一个非负数字，则该数字为flex-grow，flex-shrink取1;flex-basis取0%;
.item {
flex: 1;
}
/*等价于*/
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
- 当flex取值为一个长度或者百分比，则该数字为flex-basis，flex-grow取1，flex-shrink取1
.item {
flex: 0%;
}
/*等价于*/
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
.item {
flex: 20px;
}
/*等价于*/
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 20px;
}
- 当flex取值为两个非负数字，则该数字为flex-grow和flex-shrink，flex-basis取0%
.item {
flex: 1 2;
}
/*等价于*/
.item {
flex-grow: 1;
flex-shrink: 2;
flex-basis: 0%;
}
- 当flex取值为一个非负数字和一个长度或者百分比，则该数字为flex-grow和flex-basis，flex-shrink取1
.item {
flex: 2 200px;
}
/*等价于*/
.item {
flex-grow: 2;
flex-shrink: 1;
flex-basis: 200px;
}
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
- align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
圣杯布局
(达芬奇密码么。。。)
页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。
各种神奇单位
px
绝对单位，页面按精确像素展示
em
相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
rem
相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持
vw：
viewpoint width，视窗宽度，1vw等于视窗宽度的1%
vh：
viewpoint height，视窗高度，1vh等于视窗高度的1%
vmin
vw和vh中较小的那个
vmax
vw和vh中较大的那个
ppi
指Pixels Per Inch也就是每英寸的像素点，此处的像素点就是物理像素点（也就是最小的显示单元）。 ppi描述的是像素的密度
pt
苹果单位
dp sp
Android单位，dp表示图形，sp表示字体。pt/dp/sp是相对单位
各种display显示
- block
- 块级元素会独占一行，其宽度自动填满其父元素宽度
- 块级元素可以设置 width, height属性
- 块级元素可以设置margin 和 padding
- 常见的块级元素: body from select textarea h1-h6 html table button hr p ol ul dl center div
- inline
- 行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化
- 行内元素设置width, height无效
- 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果换句话说就是 水平方向有效，竖直方向无效
- 常见行内元素:head meta title lable span br a style em b i strong
- inline-block
- 不自动换行
- 能够识别宽高
- 默认排列方式为从左到右
- 常见行内块元素: img input td
- none
各种overflow溢出
- visible: 不剪切内容也不添加滚动条。
- auto: 超出自动显示滚动条，不超出不显示滚动条
- hidden: 不显示超过对象尺寸的内容，超出的部分隐藏掉
- scroll: 不管超出内容否，总是显示滚动条
CSS设置背景图片
景图片自动的铺满而不repeat，并且为了美观，我们希望保持其图片原有的长宽比
.bk{
background-image: url(http://tupian.aladd.net/photo2/1611.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
移动端适配
MediaQuery
//在320px和大于320px的屏幕，显示样式不一样
@media screen and (max-width: 320px) {
/* CSS样式*/
}
@media screen and (min-width: 321px) {
/* css样式*/
}
rem
font size of the root element
CSS不常用内容整理
text
text-indent 属性，该属性可以方便地实现文本缩进
word-spacing 属性可以改变字（单词）之间的标准间隔
a
- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
float
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。清除浮动使用 clear。
CSS组合选择符
- 后代选取器(以空格分隔) div p
- 子元素选择器(以大于号分隔）div > p
- 相邻兄弟选择器（以加号分隔）div + p
- 普通兄弟选择器（以波浪号分隔）div ~ p
伪类
:first-child
伪类来选择元素的第一个子元素，前面是带匹配的子元素名称
p:first-child 选择器匹配作为任何元素的第一个子元素的<p> 元素
p > i:first-child 选择相匹配的所有<p>元素的第一个 <i>元素
:lang
为不同的语言定义特殊的规则
CSS伪元素
:first-line
用于向文本的首行设置特殊样式
first-letter
:before
:after
属性选择器
[title]
[title=w3cschool]
常见浏览器兼容问题
BFC
b和strong的区别
<b>与<strong>用在网页上都能使字体加粗，二者的不同是：<b>是物理元素 ;<strong>是逻辑元素。
物理元素强调的是一种物理行为。比如说，把一段文字用b加粗，意思是告诉浏览器应该加粗显示，没有其他作用。而<strong>可以从字面理解知道它是强调的意思，<strong>是逻辑标签，强调文档逻辑。
对于搜索引擎（SEO）来说，<strong>比<b>重视的多。
<em>和<i>都是斜体，但是<em>是逻辑元素，<i>是物理元素。
png jpg gif
JPEG：照片，有损，不支持透明度，内存最小，不支持动画
png：支持logo边框，单色图像，无损，会压缩，可透明
GIF：仅一种颜色透明，支持动画
