前端面试宝典每日一题（3）HTML5、CSS3新特性？_前端面试html5和css3都出了哪些属性-CSDN博客

本文链接：https://blog.csdn.net/weixin_43742274/article/details/123601046

🧑🏻‍写在前面的话：
这个系列文章可能开始，有人会觉得很low，我是打算从H5先开始整理，最后到常见的前端框架、以及一些前端常见的算法、leetcode的一些算法解析，感兴趣的小伙伴可以持续关注，每天分享一个前端知识点，希望大家一起进步。

HTML5新特性？CSS3新特性？

H5新增特性

Canvas、SVG – 用于绘画的元素，canvas绘制的图片会失真而SVG绘制的不会失真。
video、audio – 用于播放视频和音频的媒体。
Drag 、Drop – 用于拖放的。
Geolocation – 用于获取地理位置。
localStorage、sessionStorage – 用于本地离线存储。
webSocket – 单个TCP连接上进行全双工通讯的协议。
新的特殊内容元素 – 如：article、footer、header、nav、section。
新的表单控件 – 如：date、time、email、url、search

H5优势

提高可用性和可维护性，改进了用户体验。
新增语义化标签，有助于开发人员定义清晰的结构。
可以播放视频音频，增加多媒体元素。

c3新特性

@Font-face 特性
Word-wrap、Text-overflow
CSS3 的背景效果
CSS3 的 Transitions, Transforms 和 Animation

“Background Clip”，该属确定背景画区
“Background Origin”，用于确定背景的位置，它通常与 background-position 联合使用，您可以从 border、padding、content 来计算 background-position（就像 background-clip）。
“Background Size”，常用来调整背景图片的大小，注意别和 clip 弄混，这个主要用于设定图片本身。
“Background Break”属性，CSS3 中，元素可以被分成几个独立的盒子（如使内联元素 span 跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示。
多背景图片支持