1，元素分类
传统分类： 行内元素、块级元素、inline-block元素（inline元素可以跨行，inline-block不能）
位置分类：
head区元素： meta link style script title base(指定基础路径)；
body区元素： table、div、section、article、aside、header、footer；span em strong ul ol li dl dt dd a form input select textarea button
html5分类：flow元素（占据文档流的元素）和非flow元素（如meta元素）
html元素的嵌套关系：块级元素可以包含行内元素；
块级元素不一定能包含块级元素（如p元素不能包含div）；
行内元素一般不能包含块级元素（a是例外，a可以包含div）；
Question: 为什么a可以包含div元素？要从html规范来解释，html5中可以，html4不可以。html5重新划分了html元素的类别，行内元素是透明元素时，其能否包含块级元素，要看行内元素的父元素是否能够包含块级元素，如P只能包含 phrasing conent 类别的元素，所以 p->a->div，这种是不合法的；但是 div->a->div是合法的
html5新的分类：https://www.w3.org/TR/html5/dom.html#phrasing-content2，html5相对于html4的变化
2.1 如何理解html：整个html是一个文档，类似word文档；标签用来描述文档的结构；文档是有大纲的
2.2 更加强调语义化
新增语义化的标签：
section ：能表达一块独立内容的区块（更细化）
article：结构完整的区块（可由多个section构成）
aside
nav
强化原有元素的语义：strong、i
2.3 表单增强：
新增 input 类型 ： color/email/number/tel/url/search/range/date/time/datetime-local
表单验证
required/pattern
2.4 新的API(离线、音视频、图形、实时通信、本地存储、设备能力) 分类和嵌套变更（如a元素的变化）3，关于 form 表单
3.1 不写js就可以直接提交表单
3.2 使用submit/reset按钮
3.3 便于浏览器保存表单（如密码保存，提示用户体验）
3.4 第三方可以整体提取值（ jquery 可以针对 form 元素整体提取值）
3.5 第三方库进行表单验证4，form 表单的 enctype
4.1 form enctype 属性区别：[参考文献][1]
4.2 后台如何获取application/x-www-form-urlencoded的值:https://blog.csdn.net/soonfly/article/details/520825475，字体
5.1 字体族：衬线字体（serif）、非衬线字体（scans-serif）、等宽字体（monospace）、cursive（手写体）、 fantasy（花体）
5.2 多字体fallback
5.3 自定义字体
原理：网页上看到的字本质是一个一个的图片，用户输入的其实是一个
编码，计算机根据编码在字体库中找到对应的字体图片，显示在屏幕上，
通常所说的字体就是一个一个的字体库，比如黑体，它其实代表着
一个字体图片库。我们指定字体是黑体，浏览器就会根据用户输入的编码
到这个字体库中查找对应的字体图片，然后渲染
基于这个原理，我们可以创建一个字体图片库，告诉浏览器这是一个
字体库，并给他起个名字，比如：棕体。 使用时通过
font-family ： 棕体
告诉浏览器，去 棕体 这个库里面查找字体图片。
@font-face {
font-family: 'FontAwesome';// 指定一个字体库的名字
src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
font-weight: normal;
font-style: normal;
}
5.4 图标字体
图标字体的原理和自定义字体的原理是一样一样的，只不过，字体库里面
存的不再是文字或者字母了，而是我们精心设计的图标6，雪碧图 Demo1-Jsbin Demo2-Runjs
原理：雪碧图，性能优化，把多个图集中到一张图片上，减少http请求，
通过background、background-position 属性使用图片的不同部分起到多张图的效果7，行高 Demo1
概念：行内框、行框、行高、底线、顶线、基线、中线8，viewport:移动设备的分辨率高
viewport ：手机屏幕代表的页面尺寸，如果viewport设为width=980px，就是说在当前设备上屏幕的宽度等于页面上980px的宽度
通常移动设备的屏幕比PC小，比如说PC的屏幕宽度是980px，网页是按照
980px设计的，在PC端显示正常。
移动设备显示这个网页时，只能显示一部分。为了能全部显示整个网页，
各移动端浏览器厂商将浏览器视口宽度设置为980px，这是网页能完整的
显示了。但会出现下面的问题：
在pc上，网页设计是根据PC的真实宽度来设计的，css中的1个px对应于
屏幕的1个px（不一定）。而到了移动端，由于屏幕变小，但仍然要显示
css中980个像素的宽度，于是多个css像素绘制到一个屏幕像素上，内容
变小，而且模糊。
这种策略出现在移动设备出现初期，网页设计通常只有针对pc的设计，
没有移动端的设计。
当网站有了针对移动端的设计之后，这种浏览器的行为就会导致浏览器
不能按照我们的意图正常显示。
通过设置 viewport 属性，让浏览器以屏幕真正的宽度渲染网页。 9，base64优化图片
base64将图片转为文本编码格式
base64和性能优化 base64会增加约1/3的体积 base64减少网络请求 base64适用于小图标10，背景 Demo-多背景叠加,网格背景
背景图片、渐变色背景11，边框 三角形
图片边框
边框特效（三角形） table 布局：
display: table,table-row,table-cell
inline-block 布局
利用 inline-block 元素在同一行，并且可以设置 width 的特性
像排文本一样排元素
不需要考虑清除浮动
要考虑清除间隙
flex 布局
最新的布局方式，存在兼容性问题
浮动布局
利用浮动元素脱离文档流的特性13，css 属性分类 伪元素清除浮动Demo BFC清除浮动 绝对定位-破坏性
非布局属性：行高、背景、字体、字重、颜色、大小、行高 、边框、滚动、换行 粗体、斜体、下划线 其他
布局属性：padding、border、margin、width、height、display、position、float
absolute绝对定位：包裹性、破坏性、位置跟随---来自张鑫旭
要注意一个点：把一个元素设置为absolute后，如果不为其设置top、left，其位置
保持在原地不动，即它的定位会考虑它前面的元素的位置，但是其后面的元素并
不会考虑浮动元素的位置，会与浮动元素重叠--位置跟随特性。
此外，如果绝对定位元素位于父容器的最后位置，并且父元素有高度，由于父元
素的高度不会考虑到绝对定位元素，因此，绝对定位元素有可能因为超出父元素
的盒模型而不可见。
清除浮动：因为浮动会导致高度塌陷，所有有些情况需要清除浮动，让浮动元素
撑起父容器的高度。
原理：高度塌陷的原因是父容器在布局时不考虑浮动元素的尺寸
思路一： 让父元素变成BFC，则其需要负责内部所有元素的布局，包括
宽高计算
思路二：在父容器的最后添加一个伪元素，并清除浮动，display：block使其
成为块级元素14，产生BFC的情况
根元素或其它包含它的元素
浮动 (元素的 float 不为 none)
绝对定位元素 (元素的 position 为 absolute 或 fixed)
行内块 inline-blocks (元素的 display: inline-block)
表格单元格 (元素的 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素的 display: table-caption, HTML表格标题默认属性)
overflow 的值不为 visible的元素
弹性盒 flex boxes (元素的 display: flex 或 inline-flex)15，响应式布局
目标：
在不同设备上正常展示
主要处理对不同屏幕大小的适配
主要方法：
隐藏、折行、自适应空间
rem、viewport、midea query16，能做特效的 css 属性
background、box-shadow、border-radius、box-shadow box-shadow: 0px 0px 0px 10px inset;
第四个参数可以是负值，可以放大缩小阴影18，clip-path 使用 svg 裁剪
19,3d、2d变换
transform; translate/translatex/translateY/rotate/scale20，默认样式
默认样式的意义；
默认样式举例：body的margin；ul>li的padding
默认样式带来的问题：默认样式的效果不是我们想要的效果
解决默认样式的问题：css reset21，doctype的作用
浏览器以标准模式渲染
浏览器知道元素的合法性22，em和i
em是语义化的标签，起强调作用；
i表示斜体，是纯样式标签23，语义化的意义：
开发者容易理解，便于维护
机器容易理解结构
有助于seo24，自闭合元素
表单元素input
图片img
br hr
meta link25，html和dom的关系
html是死的，是静态的
dom由html解析而来，是活的
js可以维护dom26，property 和 attribute的区别
attribute是似的的，是html中标签的属性
property是html解析成dom之后的结点的属性，比如在input输入框中输入一个值，改变的是property而不是attribute27，你必须知道的css
选择器：用于匹配html元素，分类和权重，解析方式和性能（body div .nav，从右往左解析），值得关注的选择器
分类：伪类/类，元素/伪元素，属性选择器，id选择器，组合选择器，通用选择器，否定选择器1，非布局样式
字体（font、font-family、font-weight）
行高（line-height影响整行的高度，不影响文字大小，影响行间距）：line-height、text-align
背景（背景颜色：hsl，hsla，rgb，rgba，background：linear-gradient,background-repeat,雪碧图，background-position,background-size(用于多分辨率的适配)，base64（使用方式：background:url(base64)））
border(border-image:url(./bc.jpg) 30 repea/round)
换行（overflow-wrap(是否保留单词)，word-break 针对多字节文字，white-space空白处是否断行,white-space:no-wrap，不换行）
装饰性属性：text-decoration、font-weigth、font-style