语义化标签
header nav main article section aside footer
语义化的优点:
- 在没CSS样式的情况下，页面整体也会呈现很好的结构效果
- 代码结构清晰，易于阅读，
- 利于开发和维护方便其他设备解析（如屏幕阅读器）根据语义渲染网页。
- 有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重
HTML5新特性
语义化标签
音视频处理API(audio,video)
canvas / webGL
拖拽释放(Drag and drop) API
history API
requestAnimationFrame
地理位置(Geolocation)API
webSocket
web存储 localStorage、SessionStorage
表单控件，calendar、date、time、email、url、search
HTML5新增了哪些功能
新增的功能API包括 Media APl、 Text Track API、 Application Cache API、User Interaction、 Data Transfer API、 Command API、 Constraint Validation API、 History API
HTML5引入了哪些新的表单属性？
新增表单属性包括 datalist、 datetime、 output、 keygen、date、 month、week、time、 number、 range、 email、url
HTML5中的应用缓存是什么？
HTML5应用缓存的最终目的是帮助用户离线浏览页面。换句话说，如果网络连接不可用，打开的页面就来自浏览器缓存，离线应用缓存可以帮助用户达到这个目的。
应用缓存可以帮助用户指定哪些文件需要缓存，哪些不需要
HTML5应用程序缓存为应用带来什么优势？
应用程序缓存为应用带来3个优势。
（1）离线浏览，让用户可在应用离线时（网络不可用时）使用它们。
（2）速度，让已缓存资源加载得更快。
（3）减少服务器负载，让浏览器将只下载服务器更新过的资源。
CSS 选择器及优先级
选择器
id选择器(#myid)
类选择器(.myclass)
属性选择器(a[rel=“external”])
伪类选择器(a:hover, li:nth-child)
标签选择器(div, h1,p)
相邻选择器（h1 + p）
子选择器(ul > li)
后代选择器(li a)
通配符选择器(*)
优先级：
!important
内联样式（1000）
ID选择器（0100）
类选择器/属性选择器/伪类选择器（0010）
元素选择器/伪元素选择器（0001）
关系选择器/通配符选择器（0000）
带!important 标记的样式属性优先级最高； 样式表的来源相同时：
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
CSS3新特性
圆角 阴影 变换
更多的CSS选择器
色彩模式，如rgba；
伪元素::selection;
媒体查询；
多栏布局；
图片边框（ border-image）。
CSS3新增伪类
新增伪类有以下几个：
p:first- of-type，选择属于其父元素的首个元素的每个元素。
p:last-of-type，选择属于其父元素的最后一个元素的每个元素。
p:only- of-type，选择属于其父元素的唯一元素的每个元素。
p:only- child，选择属于其父元素的唯一子元素的每个元素。
p:nth- child（2），选择属于其父元素的第二个子元素的每个元素。
:enabled:disabled，控制表单控件的禁用状态.
:checked，单选框或复选框被选中。
CSS3动画如何在动作结束时保持该状态不变
采用 animation- fill-mode。其可以设置为以下值。
none，不改变默认行为。
forwards，当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
backwards，在 animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both，向前和向后填充模式都可以应用。
box- sizing
box-sizing属性主要用来控制元素盒模型的解析模式。默认值是 content-box。
content-box让元素维持W3C的标准盒模型。元素的宽度/高度由 border+ padding+content的宽度/高度决定，设置 width/height属性指的是指定 content部分的宽度/高度。
border-box让元素维持IE传统盒模型（IE6以下版本和IE6、IE7的怪异模式）。设置 width/height属性指的是指定 border+ padding+ content的宽度/高度。
标准浏览器下，按照W3C规范解析盒模型。一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。
Animation与 Transition的异同
Animation与 Transition的功能相同，都是通过改变元素的属性值来实现动画效果的。
它们的区别在于，使用 Transition的功能时只能用指定属性的开始值和结束值，然后在这两个属性值之间使用平滑过渡的方式实现动画效果，因此不能实现比较复杂的动画效果。
Animation功能通过定义多个关键帧，以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。
Animation属性值
两个必要属性如下。
animation-name，即动画名称。
animation- duration，即动画持续时间。
其他属性值如下。
animation- play-state，即播放状态（ running表示播放， paused表示暂停），可以用来控制动画暂停。
animation- timing- function，即动画运动形式。
animation- delay，即动画延迟时间。
mation-iteration- count，即重复次数。
animation-direction，即播放前重置（ alternate动画直接从上一次停止的位置开始执行）。
媒体查询+rem的使用方法
@media媒体类型and（媒体特性）{样式规则}
这通常在移动端使用。在做移动端开发的时候，为了适配多屏幕，使用rem单位，然后根据屏幕尺寸的改变动态地设置根节点HIML的font-size值。这样可以解决多屏幕适配的问题。
html{
font-size：20px;
}
@media （min-width：320px） {
html
{
font-size：12px；
}
}
@media （min-width：360px）{
html{
font-size：16px；
}
}
但是这种做法有两个缺点。
（1）适配屏幕的尺寸不是连续的。
（2）会在CSS文件中添加大段的查询代码，增加了CSS文件的大小，为改进上述缺点，可以使用 JavaScript获取移动设备屏幕的宽度，根据设计稿的原型尺寸，动态地计算font-size的值。
盒阴影
盒阴影的语法结构与文本阴影类似，如box- shadow：5px 5px 5px rgba（255，15，255，0.5）。
但是，盒阴影多了一个属性，即外延值 inset.，如box- -shadow：5px 5px 25px rgba（0,0,255，0.5）inset。
通过CSS3实现背景颜色线性渐变具体代码如下：
div{
background：-webkit-linear-gradient （left, red, green 50%， blue）；
}
CSS3中 transition属性值及含义
transition属性是一个简写属性，用于设置以下4个过渡属性。
transition- property，哪个属性需要实现过渡
transition- duration，完成过渡效果需要多少秒/毫秒
transition- timing- function，速度效果的运动曲线，如 linear、ease-in、ease、ease-out、 ease-in-out, cube-bezier。
transition- delay，规定过渡开始前的延迟时间。
position 属性的值有哪些及其区别
固定定位 fixed： 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定 位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。
相对定位 relative： 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直 或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是 否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
绝对定位 absolute： 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那 么它的位置相对于。absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。
粘性定位 sticky： 元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定 位，之后为固定定位。
默认定位 Static： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声 明）。 inherit: 规定应该从父元素继承 position 属性的值。
让一个元素水平垂直居中
水平居中
对于 行内元素 : text-align: center;
对于确定宽度的块级元素：
（1）width和margin实现。margin: 0 auto;
（2）绝对定位和margin-left: margin-left: (父width - 子width）/2, 前提是父元素position: relative
对于宽度未知的块级元素
（1）table标签配合margin左右auto实现水平居中。使用table标签（或直接将块级元素设值为 display:table），再通过给该标签添加左右margin为auto。
（2）inline-block实现水平居中方法。display：inline-block和text-align:center实现水平居中。
（3）绝对定位+transform，translateX可以移动本身元素的50%。
（4）flex布局使用justify-content:center
垂直居中
利用 line-height 实现居中，这种方法适合纯文字类
通过设置父容器 相对定位 ，子级设置 绝对定位，标签通过margin实现自适应居中
弹性布局 flex :父级设置display: flex; 子级设置margin为auto实现自适应居中
父级设置相对定位，子级设置绝对定位，并且通过位移 transform 实现
table 布局，父级通过转换成表格形式，然后子级设置 vertical-align 实现。（需要注意的是：vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素）。
隐藏页面中某个元素的方法
opacity：0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click 事件，那么点击该区域，也能触发点击事件的
visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件 ，隐藏对应元素，在文档布局中仍保留原来的空间（重绘）
display：none，把元素隐藏起来，并且会改变页面布局， 不显示对应的元素。
页面布局
Flex 布局
布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
Flex 是 Flexible Box 的缩写，意为”弹性布局”,用来为盒状模型提供最大的灵活性。指定容器 display: flex 即可。 简单的分为容器属性和元素属性。
容器的属性：
flex-direction：决定主轴的方向（即子 item 的排列方法）flex-direction: row | row-reverse | column | column-reverse;
flex-wrap：决定换行规则 flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow： .box { flex-flow: || ; }
justify-content：对其方式，水平主轴对齐方式
align-items：对齐方式，竖直轴线方向
align-content
项目的属性（元素的属性）：
order 属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为 0
flex-grow 属性：定义项目的放大比例，即使存在空间，也不会放大
flex-shrink 属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果 定义个 item 的 flow-shrink 为 0，则为不缩小
flex-basis 属性：定义了在分配多余的空间，项目占据的空间。
flex：是 flex-grow 和 flex-shrink、flex-basis 的简写，默认值为 0 1 auto。
align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖
align-items，默认属 性为 auto，表示继承父元素的 align-items 比如说，用 flex 实现圣杯布局
Rem 布局
首先 Rem 相对于根(html)的 font-size 大小来计算。简单的说它就是一个相对单例 如:font-size:10px;,那么（1rem = 10px）了解计算原理后首先解决怎么在不同设备上设置 html 的 font-size 大小。其实 rem 布局的本质是等比缩放，一般是基于宽度。
优点：可以快速适用移动端布局，字体，图片高度
缺点：
① 目前 ie 不支持，对 pc 页面来讲使用次数不多；
② 数据量大：所有的图片，盒子都需要我们去给一个准确的值；才能保证不同机型的适配；
③ 在响应式布局中，必须通过 js 来动态控制根元素 font-size 的大小。也就是说 css 样式和 js 代码有一定的耦合性。且必须将改变 font-size 的代码放在 css 样式之前。
百分比布局
通过百分比单位 “ % “ 来实现响应式的效果。通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。 直观的理解，我们可能会认为子元素的百分比完全相对于直接父元素，height 百分比相 对于 height，width 百分比相对于 width。 padding、border、margin 等等不论是垂直方向还是水平方向，都相对于直接父元素的 width。 除了 border-radius 外，还有比如 translate、background-size 等都是相对于自身的。
缺点：
（1）计算困难
（2）各个属性中如果使用百分比，相对父元素的属性并不是唯一的。造成我们使用百分比单位容易使布局问题变得复杂。
浮动布局
浮动布局:当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变的好像浮动元素不存在一样。
优点
这样做的优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等，但它与inline-block还是有一些区别的，第一个就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的；还有一个就是inline-block在使用时有时会有空白间隙的问题
缺点
最明显的缺点就是浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素高度塌陷。
自适应布局（bootstrap）
自适应布局分别为不同屏幕不同分辨率定义布局，即是创建多个静态页面，每个静态页面对应一个屏幕分辨率的一个范围内。在改变不同的屏幕分辨率可以切换到不同的静态布局上，但是布局中的元素位置会发生改变，但是在每个静态布局中，页面中的元素不会随着窗口大小的调整发生变化。使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。
优点：
1.对网站的复杂程度兼容性更大；
2.对开发工程师来说制作的成本代价更低；
3.代码执行效果更高效；
4.测试时更加容易，运营相对更加精准。
缺点： 在现如今的移动端设计百花齐放的时期之下，同一个网站往往需要为不同的设备制作不同的页面，不但会增加开发成本，还会因为客户的需求改变时，可能会改动多套代码、流程相比较来说较繁琐。
流式布局（fluid）
流式布局的布局方式是页面的元素的宽度按照屏幕的分辨率进行适配的调整，但是整体布局不变，也称之为栅栏系统。使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。
缺点： 屏幕大小变化时，页面元素也随之变化但是布局不变。这就会因为如果屏幕太大或太小都会布局时元素无法正常显示。
响应式布局
一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验。
设计方法： 媒体查询+流式布局。通常使用@media媒体查询，和网格系统配合相对布局单位进行布局。
优点： 适应pc端和移动端，如果有足够的耐心，页面效果会很完美。
缺点：
1.只能适应主流的宽高；
2.如果匹配足够多的设备屏幕的大小，对于工程师来说工作量不小，设计更需要多个版本，工作量增大。
网页内容的优化
1、懒加载数据。
首先根据标签的left和top属性判断是否显示在了屏幕中（如果显示在屏幕中，其left和top属性值应该是在0到窗口长宽之间）。
如果显示在屏幕中，则将src标签的内容替换为图片的url。
2、不要缩放图片。
img计算缩放也需要时间
3、避免重定向。
重定向会重新渲染网页。
4、使用雪碧图（精灵图）：
通过使用background-position：-xpx -ypx;来调整图片的位置，不过HTTP2不适用，原因为HTTP2实际上是多路复用的，只用一个TCP连接，所以多个图片的请求也是在同一个TCP连接里，这样能省下非常多的请求时间，但坏处就是单连接开销很大，如果要传多个大文件，就很麻烦。
5、要有网站小图标favicon.ico。
如果没有小图标，会引起404，拖慢网页加载进度。
6、能使用jpeg就不要用png，能使用png8就不要用png24。
（1）色彩丰富的、大的图片切成jpg的；
（2）尺寸小的，色彩不丰富的和背景透明的切成gif或者png8的；
（3）半透明的切成png24。
7、使用canvas压缩图片。
css的优化
1、避免使用@import。
使用@import相当于将引入的css放在了页面底部，因为使用@import引用的文件只有在引用它的那个css文件被下载、解析之后，浏览器才会知道还有另外一个css需要下载，这时才去下载，然后下载后开始解析、构建render tree等一系列操作。因此使用@import会拖慢渲染的过程。
2、将样式表放在head中。
如果放在body中，可能出现在浏览器下载好css样式表之前，组件就已经加载好了的情况，这可能会导致重新渲染。
3、避免使用css表达式。
如：expression((new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00” );
解析表达式和计算都需要时间。
