前端知识体系
HTML和CSS
1.如何理解HTML语义化？
所谓的HTML语义化就是使用合理的标签布局网页，例如H1就是网页的一级标题，em表示强调,i是斜体字，定义强调文本等。这样做有以下好处.
- 可以提高代码的可读性。
- 有利于seo优化(可以提高搜索引擎的排名，获取自然流量)
2.DOCTYPE(⽂档类型)的作⽤
DOCTYPE是HTML的文档类型声明，它会告诉浏览器以哪种文档类型(HTML/XHTML)解析文档，不同的渲染模式会影响浏览器对css和js代码的解析，它必须声明 代码的第一行。
浏览器的渲染模式:
- CSS1Compat：标准模式（Strick mode），默认模式，浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。
- BackCompat：怪异模式(混杂模式)(Quick mode)，浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。
3.常⽤的meta标签有哪些
charset: 用来描述HTML的文档编码类型 <meta charset="UTF-8" >
keywords: 页面关键词<meta name="keywords" content="关键词" /> description: 页面的描述 <meta name="description" content="页面描述内容" />
viewport，适配移动端，可以控制视口的大小和比例<meta http-equiv="refresh" content="0;url=" />
refresh，页面重定向和刷新<meta http-equiv="refresh" content="0;url=" />
4.script标签中defer和async的区别
defer和async都是异步的方式加载外部的js脚本，他们都不会阻塞页面的解析，唯一的区别就是多个 defer属性的脚本按照加载顺序执行，多个async的js脚本都是并行的，不能保证加载顺序s
5.什么是块元素和行内元素?
块元素的特点是单独占一行，块元素可以包含行内元素
例如： p table ul ol h1~h6
行内元素的特点是不会单独占一行，每个标签会依次排列，知道超出容器才换行,行内元素不能包含块元素。
例如：span img input button
6.什么是盒模型？
盒模型本质上就是一个标签所占空间的具体划分，一个完整的盒模型是有外边距，边框，内边距和内容区四部分组成。
盒模型分为标准盒模型和IE盒模型，标准盒模型的宽度只包含内容区的宽和高。IE盒模型的宽度是由内容区，内边距和边框组成的。
7.外边距重叠问题
当父子元素的子元素设置一个margin时，父元素也会有margin,这就是所谓的外边距重叠。
当兄弟元素上面的元素存在margin-bottom并且下面元素存在margin-top的情况下，两个元素的间距哪个值大用哪个。
具体看下列的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: #000;
}
.content{
width: 400px;
height: 400px;
background: #bfa;
}
.item{
width: 200px;
height: 200px;
background: red;
margin-top: 20px;
}
</style>
<body>
<div class="content">
<div class="item">
111
</div>
</div>
</body>
</html>具体效果如下: 
如何解决？
- 让父元素开启bfc,给父元素添加
overflow: hidden;或者overflow: auto; - 给父元素添加一个边框
8. margin负值的问题
margin-left 自身向左移动
margin-right 自身不动，右侧元素向左移动
margin-top 自身向上移动
margin-bottom 自身不动，下边的元素向上移动
9.什么是BFC？
BFC是块级格式化上下文，会形成一个独立的渲染区域，内部元素不会影响外部元素的布局。 形成条件:
- float不是none
- position是absolute或者fixed
- overflow不是visible
- display是flex或者inline-block
应用： 清楚浮动:overflow: hidden;触发bfc
10. 高度塌陷是什么? 如何解决?
当父子元素中父元素的宽高由子元素的宽高撑起来时，子元素浮动，会造成父元素的高度为0。
通常我们会使用如下代码给父元素添加同时解决高度塌陷和边距重叠问题
.clearfix{
content:'';
display:table;
clear:both;
}