一、DOCTYPE
HTML5的文档声明，告诉浏览器，使用哪个版本html标准解析文档。
二、html语义化
正确的标签做对应的事，使用语义化可以让html不用css也能让页面展示出清晰的结构。
三、前端页面的构成
- 结构层：html
- 表示层：css
- 行为层：js
四、严格模式与混杂模式
- 严格模式：严格按照W3C保准解析和渲染网页，遵循最新的HTML、CSS等规范。
- 混杂模式：兼容旧页面，不符合w3c标准，同一网页在不用浏览器中的显示效果不一致。
五、W3C标准
结构、表现、行为分别对应html标准、css标准、js标准，来解析渲染页面，统一代码维护。
六、行级元素和块级元素分别有哪些及怎么转换
1.常见块级元素
div、p、table、ul、li、h、form
2.常见行内元素
span、img、a、表单标签：input、select...
3.行内元素注意事项：
- 不能设置宽高，可以通过line-height设置度，宽度就是文本或图片等行内元素本身的宽度
- 设置margin、padding只有左右会生效，上下不生效
4.切换
display属性可切换块级元素和行内元素。
5.display：inline-block
既有块级元素属性又有行内元素属性，可以同行显示，但能设置宽高，内外边距
七、适配多端布局
1.媒体查询、弹性布局、网格布局
2.字体适配：
- 使用相对单位：em、rem设置字体大小，避免使用px固定单位
- em：相对于父级元素
- rem：相对于根元素html
3.利用meta 和 viewPort设置放缩比例
八、canvas 和 iframe
canvas：用于在网页上通过脚本（js）绘制图形、图像和动画等。用法：创建canvas元素，通过getContext获取绘图上下文。通常用2d，3D可以用webgl
iframe：用于在当前HTML文档中嵌入另个一文档，通过src属性指定要嵌入的文档的URL
九、css盒模型
1.什么是盒模型？
标准盒模型：包含元素内容，内边距，边框，外边距 IE盒模型：宽度 = 元素内容 + 内边距 + 边框
十、选择器及其优先级
- ！important
- 内联样式
- id选择器
- 类选择器
- 伪类选择器
- 标签选择器
十一、定位
static：静态定位（默认） relative：相对定位，相对于其在正常文本流中的位置进行定位 absolute：绝对定位，相对于祖先元素进行定位 fixed：固定定位，相对于浏览器窗口定位
十二：BFC
- 相当于css里的一个独立空间,空间里的元素布局只在该空间内生效，和外面的元素互不干扰。
- 让指定元素机器内部形成一个独立的布局环境，解决布局冲突
- 阻止相邻元素的margin重叠
- 清除浮动导致的父元素高度塌陷
- 避免元素内容被浮动元素环绕
如何创建bfc：
- overflow：hidden
- float
- display：inline-block
- position：absolute、fixed
