一、前端的关注点
产品功能、网络安全（csrf、xss）、用户体验、加载性能、无障碍性、浏览器兼容。
我的理解：核心还是一切围绕“体验”的开发技术。
二、前端的边界
服务端开发：node.js
桌面端开发：Electron…
客户端跨平台开发：React-Native、Weex、Flutter…
3D渲染：WebGL、Three.js（基于webgl）…
前端的未来：WASM、前端智能化、PWA、WebIDE、Serverless…
三、常见前端开发环境
四、为什么需要DOM
DOM是生成页面的基础数据结构；DOM负责提供给 JavaScript 脚本操作的接口，JavaScript可以通过这些接口对 DOM 结构进行访问，从而改变文档的结构和样式；此外，DOM是一道安全防线，DOM 解析阶段会过滤掉一些不安全的 DOM 内容。
五、原生HTML文本下拉框
Input标签属性带list，后跟datalist标签包裹，包裹内容填入想要显示的option标签，option标签内显示textTag内容。
六、为什么需要HTML语义化？
1、提升代码可读性与可维护性（对于开发者而言）
2、利于SEO（对于搜索引擎、爬虫而言）
3、提升无障碍性（对于各类阅读人群而言）
七、CSS的使用方式
1、外链式（推荐，利于维护和代码打包，加载过程中也不会轻易改变DOM树）
2、嵌入式（写Demo常用）
3、内联式（不推荐，增大了阅读难度和代码的耦合性）
八、CSS解析的工作流程
CSS 解析器最终的目的也是构建树；不过它构建的树是 CSSOM 树，树的构建流程和 DOM 树的构建流程基本较为类似。
页面上的任何对象计算最后一组样式时，浏览器都会先从适用于该节点的最通用规则开始（例如，如果该节点是 body 元素的子项，则应用所有 body 样式），然后通过应用更具体的规则（即规则“向下级联的CSS规则”）以递归方式优化计算的样式。
九、常见CSS的选择器
通配、标签、id、类、属性（[attr]、[attr=value]、开头[attr^=value]、结尾[attr$=value]、伪类（状态、结构）…
十、CSS的选择器组合
1、常见的组合：交集（input.error）、后代（input .error）、亲子（input>.error）…
2、“，”在CSS选择器中表示并列关系
3、混合与嵌套尽量不要超过三层。
十一、CSS的一些text相关属性
1、letter-spacing：字母之间的属性。
2、word-spacing：单词之间的距离（英文）。
3、text-indent：调整文段之间的首行缩进。
4、white-spacing：控制空格和换行的形为；normal-常规形为；no-wrap-永不换行；pre-保留html原始代码的空格；pre-wrap-文字显示不下的时候自动换行；pre-line-合并空格但是会保留换行。
十二、关于CSS的继承
1、文字相关的属性往往是可以隐式继承的。
2、显式继承，属性值输入inherit。
十三、关于CSS的文档流
主要包括：
十四、关于CSS的IFC
十五、关于CSS的BFC
1、在一个块格式化上下文中，盒在垂直方向一个接一个地放置，从包含块的顶部开始（就如根元素一般）。
2、两个兄弟盒之间的垂直距离由margin属性决定。
3、同一个块格式化上下文中，即在BFC盒的内部，相邻块级盒之间的垂直外边距会合并（外边距的塌陷情况，共用margin，margin取最大）。常见于：父子盒子与兄弟盒子。常见解决方案：父子内外边距塌陷让父亲变BFC；兄弟盒子内外边距塌陷，给任意一个兄弟套一个父级BFC。
4、同一个块格式化上下文中，每个盒的左外边界（left outer edge）挨着包含块的左外边界（对于从右向左的格式化，右外边界挨着）。
5、BFC的区域不会与float box的区域接触时，不会发生上下的重叠；基于这个思路可以实现双栏自适应布局。
6、计算BFC的高度时，浮动元素也参与计算；因为浮动元素会脱离文档流，所以浮动元素撑不开块元素的高度，导致高度发生塌陷。父级使用BFC，父元素会计算包含块的高度，即浮动元素会撑开BFC。
十六、子元素的flex属性
默认值：
（1）flex-grow：0（不会伸展）；
（2）flex-shrink：1（可以收缩）
（3）flex-basis：默认参考元素的width，如果设置了具体值则可能忽略。
十七、CSS3的新动画类属性
1、Transform：变形、含3d
2、Transition：过渡，决定一个状态到另一个状态时的中间变化。
注意这种情况下，第二行的第二个1s表示delay的值，即宽度过渡过1秒钟才开始发生变化，可以用来制作有流程的过渡效果。
3、animation：手写方式主要是通过定义关键帧来实现（引发重绘）：
简单示例如下：
.test{
width:200px;
height:200px;
background-color:hotpink;
animation: rotate 3s linear infinite;
}
@keyframes rotate{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}Animation-direction可以用来制作往返倒置、连贯的动画。
十八、background-size属性
1、contain：不管容器怎么改变，都会通过缩放的手段让这张图片能够完整的显示出来。
2、cover：不管容器怎么变，都会通过缩放的手段让这张图片能够完整的填满整个容器，但这意味着可能对图片本身进行裁切。
十九、媒体查询
举例，上面是只针对宽度大于480px才生效的样式。常查询的属性包括：width、height、dw/dh、dpr（1px问题）、orientation。
