H5篇
新特性、移除了哪些元素？如何处理新标签兼容？
新特性
- 语义化标签，header、nav 、footer、section、aside、dialog
- 增强型表单，Input新增date、email、color、number、tel类型
- 视频和音频
- Canvas绘图
- 本地存储，sessionStorage、localStorage
- WebSocket
移除的元素
<font> 字体标签
<center> 水平居中
<u> 下划线
<big> 大字体
新标签兼容方案
- 通过js动态创建新标签，实现兼容；
- 使用h5框架, Bootstrap、MUI、uni-app等，实现兼容。
标签语义化
- 便于阅读以及维护
- 结构更清晰，便于浏览器、搜索引擎解析
- 便于爬虫爬取，有利于SEO
离线储存
localStorage长期存储，浏览器关闭后数据不丢失；
sessionStorage会话存储，当前页关闭后自动删除。
cookie,localStorage,sessionStorage三者区别
- cookie 数据可在浏览器和服务器间来回传递，而sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存；
- cookie大小不超过 4k，sessionStorage 和 localStorage可达到5M或更大；
- cookie在设置的过期时间之前一直有效，即使窗口或浏览器关闭；sessionStorage在当前窗口关闭后自动删除，localStorage除非主动删除数据。
cookie和session区别
- 存放位置不同，cookie数据存放在客户端，session数据放在服务端；
- 安全性能不同，session比cookie更安全；
- 存储大小不同，cookie不能超过4K，而session存储在服务端，浏览器对其无限制。
实现浏览器多个标签页的通信
- websocket
- 调用localstorge、cookies等本地存储方式
盒模型
浏览器将元素解析成一个个具有空间大小的盒子，包含content、padding、border、margin四部分。
C3篇
新增伪类
nth-child，子元素选择器
first-of-type，选择其父元素的首个元素
last-of-type，选择其父元素的最后元素
enabled、disable，表单控件的禁用状态
checked，单选框或复选框被选中
元素垂直水平居中
- 先absolute定位，left、top都设为50%，再margin设定宽高一半的负值，可用来居中浮动元素；
- 先absolute定位，left、top、bottom、right都设为0，再margin：auto
- 先absolute定位,，left、top都设为50%，再设置偏移量transform: translate(-50%, -50%)
图片等比缩放
img设置max-width: 100%;max-height: 100%
flex常用属性
flex-direction，值row、column等，决定主轴方向
justify-content，值flex-start、flex-end、center等，决定主轴对齐方式
align-items，值flex-start、flex-end、center等，决定交叉轴上对齐方式
display: none与visibility: hidden区别
display：none不显示对应的元素，在文档布局中不再分配空间（重排+重绘）
visibility：hidden隐藏对应元素，在文档布局中仍保留原来的空间（重绘）
清除浮动方式
- 在结尾处添加空标签，再clear:both（不推荐）
- 父级元素定义overflow:hidden（不推荐）
- 使用after伪元素清除浮动（推荐）
- 使用before和after双伪元素（推荐）
