1，HTML5 新增的语义化标签有哪些？
语义化标签优点：1.提升可访问性 2.seo 3.结构清晰，利于维护
Header 页面头部
main 页面主要内容
footer 页面底部
Nav 导航栏
aside 侧边栏
article 加载页面一块独立内容
Section 相 当 于 div
figure 加 载 独 立 内 容 （ 上 图 下 字 ）
figcaption figure 的标题
Hgroup 标题组合标签
mark 高亮显示 dialog
加载对话框标签（必须配合 open 属性）
Embed 加载插件的标签
video 加载视频
audio 加载音频（支持格式ogg，mp3，wav）
2，CSS3 新增的特性
边框：
border-radius 添加圆角边框
border-shadow：给框添加阴影 （水平位移，垂直位移，模糊半径，阴影尺寸，阴影颜色，insetr（内/外部阴影））
border-image：设置边框图像
border-image-source 边框图片的路径
border-image-slice 图片边框向内偏移
border-image-width 图片边框的宽度
border-image-outset 边框图像区域超出边框的量
border-image-repeat 图像边框是否平铺（repeat 平铺 round 铺满stretch 拉伸）
背景：
Background-size 背景图片尺寸
Background-origin规定background-position属性相对于什么位置定位
Background-clip 规定背景的绘制区域（padding-box，border-box，
content-box）
渐变：
Linear-gradient（）线性渐变
Radial-gradient（）径向渐变
文本效果：
Word-break：定义如何换行
Word-wrap：允许长的内容可以自动换行
Text-overflow：指定当文本溢出包含它的元素，应该干啥
Text-shadow：文字阴影（水平位移，垂直位移，模糊半径，阴影颜色）
转换：
Transform 应用于 2D3D 转换，可以将元素旋转，缩放，移动，倾斜
Transform-origin 可以更改元素转换的位置，（改变 xyz 轴）
Transform-style 指定嵌套元素怎么样在三位空间中呈现
2D 转换方法：
rotate 旋转 translate（x，y）指定元素在二维空间的位移 scale（n）定义缩放转换
3D 转换方法：
Perspective（n）为 3D 转换 translate rotate scale
过渡：
Transition-proprety 过渡属性名
Transition-duration 完成过渡效果需要花费的时间
Transition-timing-function 指定切换效果的速度
Transition-delay 指定什么时候开始切换效果
动画：animation
Animation-name 为@keyframes 动画名称
animation-duration 动画需要花费的时间
animation-timing-function 动画如何完成一个周期
animation-delay 动画启动前的延迟间隔
animation-iteration-count 动画播放次数
animation-direction 是否轮流反向播放动画
3，清除浮动的方式有哪些？请说出各自的优点
高度塌陷：当所有的子元素浮动的时候，且父元素没有设置高度，这时
候父元素就会产生高度塌陷。
清除浮动方式 1：
给父元素单独定义高度
优点：快速简单，代码少 缺点：无法进行响应式布局
清除浮动方式 2：
父级定义 overflow：hidden；zoom：1（针对 ie6 的兼容）
优点：简单快速、代码少，兼容性较高 缺点：超出部分被隐藏，布局时
要注意
清除浮动方式 3：
在浮动元素后面加一个空标签，clear：both；height：0；overflow：hidden
优点：简单快速、代码少，兼容性较高。
缺点：增加空标签，不利于页面优化
清除浮动方式 4：
父级定义 overflow：auto
优点：简单，代码少，兼容性好
缺点：内部宽高超过父级 div 时，会出现滚动条
清除浮动方式 5：
万能清除法：
给塌陷的元素添加伪对象
.father：after{
Content：“随便写”；
Clear：both；
display：block；
Height：0；
Overflow：hidden；
Visibility：hidden
}优点：写法固定，兼容性高
缺点：代码多
4，Vue双向数据绑定？原理？
<div id="app">
<input type="text" id="input">
<span id="span"></span>
</div>
<script>
let obj = {};
let val = '' // 初始值
Object.defineProperty(obj, 'val', {
get () {
return val
},
set (newvalue) {
document.getElementById('input').value = newvalue
document.getElementById('span').innerHTML = newvalue
}
})
document.addEventListener('keyup', function (e) {
obj.val = e.target.value
})
let vm = new Vue({
el: '#app',
data: {
}
})
</script>5，中央事件总线怎么完成两个组件间的传值
<div id="app">
<myll></myll>
<myll2></myll2>
</div>
<script>
// 通过bus进行兄弟组件传参
let bus = new Vue()
Vue.prototype.bus = bus
Vue.component('myll', {
data () {
return {
name: '高启强',
msg: '开心一天是一天'
}
},
template: `
<div>
<input type="text" v-model="name">
<input type="text" v-model="msg">
<button @click="add">点击传参</button>
</div>
`,
methods: {
add () {
this.bus.$emit('add', { name: this.name, msg: this.msg })
}
}
})
Vue.component('myll2', {
data () {
return {
name: '高启强',
msg: '开心一天是一天'
}
},
template: `
<div>
<div>我叫：{
{name}}</div>
<div>个性签名：{
{msg}}</div>
</div>
`,
mounted () {
this.bus.$on('add', (data) => {
this.name = data.name
this.msg = data.msg
})
}
})
let vm = new Vue({
el: "#app",
data: {
}
})
</script>6，如何判断一个数据是 NaN？
NaN 非数字 但是用 typeof 检测是 number 类型
利用 NaN 的定义 用 typeof 判断是否为 number 类型并且判断是否满
足 isnan
利用 NaN 是唯一一个不等于任何自身的特点 n！==n
利用 ES6 中提供的 Object.is()方法（判断两个值是否相等） n==nan
Js 中 null 与undefined 区别
相同点：用 if 判断时，两者都会被转换成 false
不同点：number 转换的值不同 number（null）为 0 number（undefined）为 NaN
Null 表示一个值被定义了，但是这个值是空值
Undefined 变量声明但未赋值
7.Ajax 如何使用
一个完整的 AJAX 请求包括五个步骤：
创建一个XMLHttpRequest实例
调用open方法，开始发送请求
开始和服务端进行交互，调用send方法
注册监听
渲染页面
var xhr = new XMLHttpRequest()
// 调用open方法，开始发送请求
// xhr.open(参数一，参数二，参数三)
// 参数一：请求的方式：get（请求数据）/post（传递数据）
// // 参数二：请求地址 url http：//ww ./数据.json
// 参数三：是否异步 true--异步 false--同步
xhr.open('get', './数据.json', true)
// 开始和服务端进行交互，调用send方法
xhr.send()
// 注册监听
console.log(xhr);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 渲染页面
// console.log(xhr.responseText);
var text=JSON.parse(xhr.responseText)
document.body.innerHTML=text[0].name
}
}
}