H5的新特性知道有哪些？
1、用于绘画的canvas元素；
2、用于媒介回放的video和audio元素；
3、对本地离线存储的更好的支持；
4、新的特殊内容元素，比如article、header、nav等；
5、新的表单控件，比如date、time等；
html5总的来说比html4多了十个新特性，但其不支持ie8及ie8以下版本的浏览器：
https://www.cnblogs.com/jane-panyiyun/p/13092297.html
一、语义标签
二、增强型表单
三、视频和音频
四、Canvas绘图
五、SVG绘图
六、地理定位
七、拖放API
八、WebWorker
九、WebStorage
十、WebSocket
css3新特性
css3新特性—C语言中文网
1. 完善选择器
2. 完善视觉效果
3. 完善背景效果
4. 完善盒模型
5. 增强背景功能
6. 增加阴影效果
7. 增加多列布局与弹性盒模型布局
8. 完善 Web 字体和 Web Font 图标
9. 增强颜色和透明度功能
10. 新增圆角与边框功能
11. 增加变形操作
12. 增加动画和交互效果
13. 完善媒体特性与 Responsive 布局
WEB前端面试系列
CSS3新特性总结
1.CSS3选择器
2.CSS3边框与圆角
3.CSS3背景与渐变
4.CSS3过度
5.CSS3变换
6.CSS3动画
怎么实现水平居中，怎么垂直居中
水平居中和垂直居中
盒模型
CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
不同部分的说明：
1.Margin(外边距) - 清除边框外的区域，外边距是透明的。
2.Border(边框) - 围绕在内边距和内容外的边框。
3.Padding(内边距) - 清除内容周围的区域，内边距是透明的。
4.Content(内容) - 盒子的内容，显示文本和图像。
display:none和 visibility：hidden区别
相同点：
都是使用css让元素不可见的方法
不同点：
1.display与元素的隐藏
如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏，它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间消失。
<body>
<div>
<strong>给元素设置visibility:hidden样式</strong>
<p>A元素</p>
<p style='display:none;'>B元素</p>
<p>C元素</p>
</div>
</body>
2.visibility与元素的隐藏
给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。
<body>
<div>
<strong>给元素设置visibility:hidden样式</strong>
<p>A元素</p>
<p style='visibility:hidden;'>B元素</p>
<p>C元素</p>
</div>
</body>
当visibility: hidden和display: none的区别不仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留。
1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别。
2、visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样。
3、CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。
响应式布局实现的几种方法
什么是响应式布局？
Responsive design,可以检测设备信息，实现不同屏幕分辨率的终端上浏览网页的效果，让用户们有很好的阅读体验。但是为了实现这一目的我们不得不利用媒体查询写很多冗余的代码，所以这种布局往往用在一些以浏览内容为主的网站上，比如：官网，新闻网。
弹性布局
弹性布局是一种十分方便的，只需要依赖于CSS样式的实现响应式布局的方式，也是K最多用到的一种实现响应式的方法。尤其是现在类似于某宝、某东一类的电商web站或者手机app的页面，利用弹性布局是都可以很轻松的实现的。
弹性布局 flex 是CSS中 display 的一个属性值，通过在父容器上添加 display:flex; 属性，便可以实现其子元素在父元素中的弹性布局，但要注意的是 display:flex; 这一条样式只会作用在添加这一属性的父容器和非隔代子容器上，换句话说，父容器上的 diaplay:flex; 属性并不会使其直系子元素中的子元素产生弹性布局。通俗来讲，爹只能管得到自己的儿子、而管不到自己的孙子。如果想要在下一层中继续使用弹性布局，我们可以在相应的子元素上再次添加 display:flex; 属性来实现。
bootstrap
Bootstrap框架是一个开源、移动优先的前端框架，是基于HTML、CSS、JavaScript、JQuery的，写很少代码，实现多终端的页面搭配。它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。
Bootstrap 栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
<div class="row">
<div class="col-xs-6 col-lg-4">
<h2>HTML</h2>
</div>
<div class="col-xs-6 col-lg-8">
<h2>HTML</h2>
</div>
</div>
栅格系统是往上兼容的,意味着小屏幕上的效果在大屏幕上也是可以正常显示的人，但是大屏幕上的设置在小屏幕上却无法正常显示。
Media Query媒体查询
查询到当前屏幕(媒介媒体)的宽度，针对不同的屏幕宽度设置不同的样式来适应不同屏幕。
超小屏 extra small <768px
小屏 small >=768px
中等 medium >=992px
大屏 large >=1200px
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
body{
background-color: black;
}
@media screen and (min-width: 768px){ /*大于等于768*/
body{
background-color: red;
}
}
@media screen and (min-width: 992px){ /*大于等于992*/
body{
background-color: green;
}
}
@media screen and (min-width: 1200px){ /*大于等于1200*/
body{
background-color: blue;
}
}
</style>
</head>
<body>
</body>
</html>
js有哪些基本数据类型
1.字符串型（string)、
2.数字（number）、
3.布尔（boolean）、
4.null、
5.undefined、
6.对象（object）、
它们共分为两大类，分别为：
基本类型：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）
引用类型：对象(Object)、数组(Array)、函数(Function)
前端跨域问题
什么是跨域
在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。
怎么造成跨域
1.不同域名
2.同一域名，不同端口
3.同一域名，不同协议
4.同一域名，不同文件或路径
5.域名与域名对应的ip相同
6.主域相同，子域不同
9种跨域解决方案
9种常见的前端跨域解决方案
1、JSONP跨域
1）原生JS实现
2）jquery Ajax实现
3）Vue axios实现
2、跨域资源共享（CORS）
(1)使用下列方法之一：
head
get
post
(2)请求的Header是
Accept
Accept-Language
Content-Language
Content-Type: 只限于三个值：application/x-www-form-urlencoded、multipart/form-data、text/plain
setInterval与setTimeout的区别
https://www.cnblogs.com/DSC1991/p/8665891.html
setInterval
setInterval()方法可按照指定的周期来调用函数或者计算表达式（以毫秒为单位）
语法：
setInterval(函数表达式，毫秒数)；
setInterval()会不停的调用函数，直到clearInterval()被调用或者窗口被关闭，由 setInterval()返回的ID值可用作clearInterval()方法的参数。
setTimeout
setTimeout()方法用于在指定毫秒数后再调用函数或者计算表达式（以毫秒为单位）
语法：
setTimeout(函数表达式，毫秒数)；
setTimeout()只执行函数一次，如果需要多次调用可以使用setInterval(),或者在函数体内再次调用setTimeout()
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h64263.shtml
