一、HTML 部分
1、HTML 标签语义化优缺点
优点:
- 使HTML的结构更清晰
- 代码的可读性较好
- 代码的可维护性好
- 搜索引擎可根据标签的语言确定上下文和权重
- 移动设备的支持度更好 缺点:
- 低版本浏览器存在兼容性问题(例如 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
- 本地存储:
- localStorage: 永久保存(需要手动清除),大小5M,不能与服务器进行交互
- sessionStorage: 临时保存(直到浏览器关闭为止),大小5M,不能与服务器进行交互
- 与cookie的区别: cookie能与服务器进行交互(存在安全问题),存储大小比较小(只有4k),可设置过期时间
- websocket: 是一种在单个TCP连接上进行全双工通信的协议,让客户端和服务端之间可进行实时通信
- 参考链接:WebSocket 教程
- Geolocation: navigator的一个属性,可以获取和监听设备的定位信息(经纬度)
- 参考链接:Geolocation 文档
- webworker:
- 在
Javascript
单线程执行的基础上,开启一个子线程,进行程序处理,而不影响主线程的执行,当子线程执行完毕之后再回到主线程上,在这个过程中并不影响主线程的执行过程,也相当于在浏览器端实现多线程 - 主要是用于创建一个新线程来加载
javascript
的文件资源 - 参考链接:Web Worker 详细介绍
二、CSS 部分
1、CSS3 新特性
- 边框;border-radius(圆角)、border-image(图片)、border-shadow(阴影)等等
- 文字效果:text-justify(对齐方式)、text-shadow(阴影)、text-wrap(换行)等等
- 过度(transition)
- 动画(animation)
- 计算属性(calc)
- 伪类:nth-child、nth-of-type等
- ...
- 参考链接:css3之新增伪类
- 参考链接:css3新增属性有哪些?
- 参考链接:个人总结(css3新特性)
2、常见的布局方式
- 弹性布局(flex)
- 流式布局(百分比布局)
- 响应式布局(使用媒体查询让一套代码适配多种设备终端)
- rem布局(通过设置html根节点的font-size大小实现)
- bfc布局
- 瀑布流布局
- 双飞翼布局
- ...
- 参考链接:前端常见的布局方案大全
- 参考链接:超详细常用css布局
- 参考链接: