题目第三波

h5新语义化标签，为什么加强语义化 click
所有标签均可以使用div实现
a. header：页眉、footer：页脚、main：主题、hgroup：标题组合（主标题、副标题，使用hgroup将其包在一起）、nav：导航
header、main、footer只能出现一次
b. article：独立的内容（main中划分的不同结构的内容）、aside：辅助信息的内容（main中右侧边栏的信息）、section：区域（section组成article，article进行划分得到section）、figure：描述图像或视频(在section中)、figcaption：描述图像或视频的标题部分（在section中，图片或视频下方，对图片或视频进行描述）
c. datalist：选项列表（文本框输入的时候给出所有的提示信息，输入一个输入一个相关提醒，相当于搜索的时候的提示内容）、details / summary：文档细节 / 文档标题（总结和展开细节）、progress / meter：定义进度条/定义度量范围(progress：单纯进度条，meter：单纯进度条)、time：定义日期或时间（包裹文本）、mark：带有记号的文本（包裹文本，给用户一个提醒，相当于马克笔）
d. video、audio、canvas
优势：
1 搜索引擎会利用html" title=爬虫>爬虫分析抓取页面结构内容，有利于SEO（搜索引擎优化），
2 页面结构更加清晰，利于维护，
3 提高页面可访问性，不会在样式加载不正常的时候一团乱，维持基本结构。
4 利于部分残障人士页面阅读器解析

<header>
	<hgroup>
		<h1></h1>
		<h2></h2>
	</hgroup>
	<nav></nav>
</header>
<main>
	<article>
		<section>
			<figure>
				<img src = ""/>
				<figcaption>
				</figcaption>
			</figure>
		</section>
	</article>
	<article>
		<input type='text' list = 'elems'>
		<datalist id='elems'>
			<option value='a'></option>
			<option value='b'></option>
			<option value='c'></option>
		</datalist>
	</article>
	<article>
		<details open><!--默认打开状态-->
			<summary> <!--形成一个可以点击的三角形状，该处写总结，点开展示详细内容-->
			</summary>
			<p>详细内容</p>
		</details>
	</article>
	<progress min = "0" max = "10" value = "5"></progress>
	<meter min = "0" max = "100" value = "35" low="10" high="10"></meter><!--当value在小于low，大于low小于high，大于high，会由不同颜色-->
	<aside>
	</aside>
</main>
<footer></footer>

为什么要清楚浮动，怎样清除浮动 click
有左浮（float:left;）、右浮（float:right;）、none（不浮动）
浮动导致塌陷问题：浮动的元素会脱离文档流（相当于飘起来，空间释放，父元素塌陷）造成后面元素会挤到浮动元素下方。
解决方法：
1 在元素中添加一个新div，设置样式为：clear:both;可以清除其他元素的浮动；清除左浮：clear:left;清除右浮：clear:right;
2 为需要清楚浮动的元素添加class，通过添加伪元素的方式（::after），.clearfloat::after{content:’’;display:block;clear:both;}相当于在父元素最后添加了一个行元素；原理等于1
3 给父元素添加overflow:hidden;能够触发BFC（块级格式化上下文），开始使用BFC的规则渲染页面（其中一条：浮动元素也参与计算高度）
4 手动添加高度
行内元素、块级元素有哪些，它们有什么区别
块级元素：
独占一行
可以设置宽高，会存在溢出问题（太小的时候）

* address - 地址
* blockquote - 块引用
* center - 居中对齐块
* dir - 目录列表
* div - 常用块级容易，也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
* noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表

行级元素：
和兄弟元素排成一行，不另起一行，
宽高以及到顶部和底部的距离都不可以设置，宽高为内容的宽高
只能容纳内联元素和文本，通常被包含在块级元素中使用

* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量

行内块级元素：（img）
可以排成一排
宽高可以设置

有哪几种存储数据的方式，有什么不同
cookie sessionStorage localStorage indexDb,
cookie按设定的时间内有效，最多4k,
两个storage都是html5新api,存储键值对,sessionStorage会话存储,页面访问时间内有效，
关闭页面失效,localStorage一直有效，关闭页面不会失效，两个都是最大5M，
indexdb也是h5新api，浏览器内置小型数据库。
或click
vue组件之间如何通信
props$emit 适用父子组件通信；父子之间：父->子（子组件中使用props接收、父组件中v-bind绑定变量传送给子组件）子->父（子组件中$emit触发事件，父组件中使用v-on绑定一个函数，等号左边为子组件中emit的函数名，等号右边为本组件中的函数名）
provide/inject 适用于隔代组件通信
EventBus(事件总线) 适用于父子、隔代、兄弟组件。通信创建事件中央总线，引入第三方包，EventBus中的Bus，创建实例，并将其挂载到vue实例中，使用$bus.emit()调用，使用$bus.on()监听总线
vuex 适用于父子、隔代、兄弟组件通信
attrs/listeners 适用于隔代组件通信
ref与parent/children适用父子组件通信
slot插槽方式
依次点击两个按钮提交信息，因为ajax是异步会出现后点击的按钮早于先点击的按钮执行，如何保证两个按钮按顺序执行
async+await进行阻塞，保证顺序执行
示例

题外话：执行async函数，返回的都是Promise对象，若返回不是promise，也会将其封装为promise，click

async function test1(){
	return 1;
}
//等价于
async function test2(){
	return Promise.resolve(2)
}

//Promise.resolve().then() == await Promise.resolve
async function test3(){
	const p3 = Promise.resolve(3)
	p3.then(data3 =>{
		console.log('data3',data3)
	})
	
	//等价于
	const data3 = await p3
}

async function test4(){
	const data4 = await4;//等价于await Promise.resolve(4)，会将4封装为promise对象
}


//await后面可以跟函数，等带函数执行

//Promise.catch,因该使用try..catch
async function test6(){
	const p6 = Promise.reject(6);//此处为reject，try会出错，跳到catch
	try{
		const data6 = await p6
	}catch(e){
		console.log(e)
	}
}

如何实现文本不自动换行，超出部分显示省略号

white-space:nowrap;不换行
word-break: normal;自动换行
word-break:break-all;强制换行

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>换行 & 不换行</title>
    <style type="text/css">
        .app1{
            width: 200px;
            height:50px;
            border:red 1px solid;
            white-space:nowrap;
            margin-bottom: 10px;
        }
        /*该版将多余内容隐藏，并显示省略号
        .app1{
            width: 200px;
            height:50px;
            border:red 1px solid;
            white-space:nowrap;
            margin-bottom: 10px;
            overflow:hidden;     //增加
            text-overflow: ellipsis;  //增加
        }
        */
        .app2{
            width: 200px;
            height:50px;
            border:red 1px solid;
            word-wrap: break-word;
            word-break: normal;
            margin-bottom: 10px;
        }
        .app3{
            width: 200px;
            height:50px;
            border:red 1px solid;
            word-break: break-all;
        }
    </style>
  </head>
  <body>
    <div class="app1">不换行不换行不换行不换行不换行不换行不换行不换行</div>
    <div class="app2">换行换行换行换行换行换行换行换行换行换行换行换行</div>
    <div class="app3">换行换行换行换行换行换行换行换行换行换行换行换行</div>
  </body>
</html>

在这里插入图片描述显示省略号

** 微任务 & 宏任务** click
优先级：同步任务 > 微任务（promise中代码同步执行，但then之后代码异步执行（resolve().then），为微任务；async+await也是微任务） > 宏任务（settimeout）
先处理同步任务，再处理微任务，处理完所有微任务才会处理宏任务。且宏任务时间到了也需要等其他任务处理完成才会处理，有时会出现延迟；计时是在宏任务队列中就进行的，并不是拿到主队列才开始计时；宏任务根据自己本身时间的长短决定先调用还是后调用，存在先后顺序，若使用同一个变量，后边任务会使用前面任务的结果。
箭头函数和普通函数的区别 click 总结到位！
重绘+回流 click
重绘：该案容器外观风貌，如修改颜色
回流，所改变元素影响了当前布局，可能导致真个dom树重构
dom树+结构体（css）= 渲染树
闭包应用场景：用于创建内部变量，防止被随意更改，又向外界提供一个修改内部变量的接口。可用于作用域链，本身函数查找不到就向上层查找click
定义：当一个函数的返回值是另外一个函数，而返回的那个函数如果调用了其父函数内部的其它变量，如果返回的这个函数在外部被执行，就产生了闭包
高阶函数，一个函数内部能够接收函数，如map、filter、reduce、sort
浮动原理：让元素脱离文档流，不占用空间，元素靠近边框停留。
ajax实现

let xhr = new XMLHttpRequest()
xhr.open('get',url,true)
xhr.send(null)
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status){
        alert(xhr.reponsText)
    }
}

let xhr = new XMLHttpRequest()
xhr.open('post',url,true)
xhr.setRequestHeaders('Content-type','application/json')
xhr.send('ddddd')
xhr.onreadystatechange=function(){
    if(xhr.readyState ==4 && xhr.status==200){
        alert(xhr.reponseText)
    }
}