HTML5和CSS3新特性有哪些

古城微笑少年丶 2023-10-07 16:24 23阅读 0赞

**HTML5  
（1）问题分析**  
对于目前市场上来说HTML5中需要掌握的新特性有：  
1.拖拽释放(Drag and drop) API  
2.语义化更好的内容标签（header,nav,footer,aside,article,section）  
3.音频、视频API(audio,video)  
4.画布(Canvas) API  
5.地理(Geolocation) API  
6.本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；  
7.sessionStorage 的数据在浏览器关闭后自动删除  
8.表单控件，calendar、date、time、email、url、search  
9.新的技术webworker, websocket, Geolocation  
其中画布和地理api，本地存储用的比较的多。  
**（2）核心问题讲解**  
语义化标签，例如，多媒体就是可以添加视频元素。  
Canvas、svg，是实现前端数据可视化必不可少的东西。  
离线存储：用于优化用户体验。  
**（3）问题扩展**  
语义化标签可以更容易的理解这一块的代码是做什么的。  
例如，用户收货地址，可以用Localstorage存储用户当前的收货地址，如果没有新的添加就直接从localstorage中取出。  
**（4）结合项目中使用**  
例如：语义化标签、用来做导航栏的标签、使用多媒体增加页面的炫酷程度。  
Canvas、svg可以使用echarts、d3.js 制作数据可视化，简单又方便离线存储用于优化用户网速慢导致页面空白问题。

**CSS3  
（1）问题分析**  
该题旨在考核求职者对 CSS3的相关新特性有较为深入地了解。  
**（2）核心问题讲解**  
在回答这个问题的策略：先告诉面试官CSS3在CSS的基础上面，不仅添加了新的属性还有选择器也做了扩展。  
接下来开始列举：  
1）先从颠覆性的属性开始比如：rotate(旋转)，translate(位移)，scale(缩放)等  
2）Css3的动画 animation  
3）还有是css3的过渡， transition: all 1s;  
4）再列举一些简单的属性比如说: border-radius(圆角)，box-shadow(盒子阴影)，border-shadow(边框阴影)等  
5）新增了结构伪类选择器，像 first-child，nth-child(n)之类的  
6）先从颠覆性的属性开始比如：rotate(旋转)，translate(位移)，scale(缩放)等  
7）Css3的动画 animation  
8）还有是css3的过渡， transition: all 1s;  
9）再列举一些简单的属性比如说: border-radius(圆角)，box-shadow(盒子阴影)，border-shadow(边框阴影)等  
10）新增了结构伪类选择器，像 first-child，nth-child(n)之类

**进一步了解HTML5和CSS3请看：**[前端视频教程\_html5+css3+移动web实战项目][html5_css3_web]

[html5_css3_web]: https://www.bilibili.com/video/BV1pE411q7FU