列举你了解的 HTML5、CSS3 新特性？

题干

• HTML5、CSS3 新特性

题解

HTML5 新特性

• 语义化标签：HTML5 引入了一些新的标签，如 <section>、<article>、<nav>、<header>、<footer>、<aside> 等，用来表示页面的不同部分和内容，使得页面结构更加清晰和有意义。
• 多媒体标签：HTML5 提供了 <audio> 和 <video> 标签，用来嵌入和播放音频和视频文件，不需要依赖外部的插件或播放器。还有 <canvas> 标签，用来绘制图形和动画，可以实现各种复杂的效果。
• 表单类型和属性：HTML5 增加了一些新的表单输入类型，如 color、date、email、number、range 等，用来接收特定格式的数据，并提供相应的验证和交互功能。还有一些新的表单属性，如 placeholder、required、autofocus 等，用来增强表单的可用性和用户体验。
• 离线存储和网络通信：HTML5 提供了一些新的 API，用来实现离线存储和网络通信的功能。例如，localStorage 和 sessionStorage 用来在浏览器中存储键值对数据，可以在不同的页面或会话中共享；IndexedDB 用来在浏览器中存储大量的结构化数据，并提供高效的查询和检索功能；Web Socket 用来在浏览器和服务器之间建立双向的实时通信连接；Server-sent Events 用来让服务器向浏览器推送事件和数据；等等。
• 设备访问和用户交互：HTML5 提供了一些新的 API，用来访问设备的功能和增强用户的交互体验。例如，Geolocation 用来获取用户的地理位置信息；Device Orientation 和 Device Motion 用来获取设备的方向和运动状态；Web Workers 用来在后台线程中执行 JavaScript 代码，不影响主线程的运行；等等。

CSS3 新特性

• 选择器和伪类：CSS3 增加了一些新的选择器和伪类，用来更灵活地选择和匹配元素。例如，属性选择器可以使用 ^=、$=、*= 等符号来匹配属性值的开头、结尾或包含某个字符串；结构伪类可以使用 :nth-child()、:first-of-type() 等选择符来匹配元素在其父元素中的位置或类型；目标伪类可以使用 :target 选择符来匹配 URL 中指定的锚点元素；等等。
• 背景和边框：CSS3 提供了一些新的属性和值，用来设置背景和边框的效果。例如，可以使用 background-size 属性来调整背景图片的大小；可以使用 background-clip 和 background-origin 属性来控制背景图片的裁剪和定位区域；可以使用 border-radius 属性来设置边框的圆角效果；可以使用 border-image 属性来设置边框的图片效果；等等。
• 文本和字体：CSS3 提供了一些新的属性和值，用来设置文本和字体的效果。例如，可以使用 text-shadow 属性来给文本添加阴影效果；可以使用 text-overflow 属性来设置文本溢出的处理方式；可以使用 @font-face 规则来引入自定义的字体文件；可以使用 font-feature-settings 属性来控制字体的特性，如连字、变体、大小写等；等等。
• 变换和动画：CSS3 提供了一些新的属性和值，用来设置元素的变换和动画效果。例如，可以使用 transform 属性来对元素进行旋转、缩放、倾斜、移动等变换操作；可以使用 transition 属性来设置元素在不同状态之间的过渡效果；可以使用 animation 属性和 @keyframes 规则来设置元素的动画效果；等等。
• 布局和定位：CSS3 提供了一些新的属性和值，用来设置元素的布局和定位方式。例如，可以使用 flex 属性和相关属性来实现弹性布局，可以灵活地调整元素的大小和顺序；可以使用 grid 属性和相关属性来实现网格布局，可以按照规则的网格线来排列元素；可以使用 position: sticky 值来实现粘性定位，可以让元素在滚动时固定在某个位置；等等。

贡献者

isboyjc