前端知识点整理

一、HTML 部分

1、HTML 标签语义化优缺点

优点：

1. 使HTML的结构更清晰
2. 代码的可读性较好
3. 代码的可维护性好
4. 搜索引擎可根据标签的语言确定上下文和权重
5. 移动设备的支持度更好 缺点：

• 低版本浏览器存在兼容性问题（例如 IE9 以下浏览器）

2、HTML5 新特性

2.1、新增的常用标签

• header、nav、article、footer、section、aside、audio(音频)、video(视频)、embed、canvas、svg等
• 参考链接：HTML 标签参考手册

2.2、新增的常用属性

• input的属性值：calendar、date、time、email、url、search
• hidden、draggable等
• 参考链接： HTML 5 标准属性

2.3、新增的 API

1. 本地存储:

• localStorage： 永久保存(需要手动清除)，大小5M，不能与服务器进行交互
• sessionStorage： 临时保存(直到浏览器关闭为止)，大小5M，不能与服务器进行交互
• 与cookie的区别： cookie能与服务器进行交互（存在安全问题），存储大小比较小（只有4k），可设置过期时间

1. websocket： 是一种在单个TCP连接上进行全双工通信的协议，让客户端和服务端之间可进行实时通信

• 参考链接：WebSocket 教程

1. Geolocation： navigator的一个属性，可以获取和监听设备的定位信息（经纬度）

• 参考链接：Geolocation 文档

1. webworker：

• 在Javascript单线程执行的基础上，开启一个子线程，进行程序处理，而不影响主线程的执行，当子线程执行完毕之后再回到主线程上，在这个过程中并不影响主线程的执行过程，也相当于在浏览器端实现多线程
• 主要是用于创建一个新线程来加载javascript的文件资源
• 参考链接：Web Worker 详细介绍

二、CSS 部分

1、CSS3 新特性

1. 边框；border-radius(圆角)、border-image(图片)、border-shadow(阴影)等等
2. 文字效果：text-justify(对齐方式)、text-shadow(阴影)、text-wrap(换行)等等
3. 过度(transition)
4. 动画(animation)
5. 计算属性(calc)
6. 伪类：nth-child、nth-of-type等
7. ...

• 参考链接：css3之新增伪类
• 参考链接：css3新增属性有哪些？
• 参考链接：个人总结（css3新特性）

2、常见的布局方式

1. 弹性布局(flex)
2. 流式布局(百分比布局)
3. 响应式布局(使用媒体查询让一套代码适配多种设备终端)
4. rem布局(通过设置html根节点的font-size大小实现)
5. bfc布局
6. 瀑布流布局
7. 双飞翼布局
8. ...

• 参考链接：前端常见的布局方案大全
• 参考链接：超详细常用css布局
• 参考链接：