H5有哪些新特性?Css3有哪些新特性?

H5新特性

1.拖拽释放

拖放（Drag and Drop）是HTML5中引入了的一个重要新特性，它允许用户通过鼠标或触屏将网页上的元素拖动到其他位置，或者从外部应用程序中拖动文件到网页上。拖放提供了一种直观、自然的交互方式，可以增强用户体验并改善用户工作流程。

在HTML5中，拖放事件和API被定义在Drag and Drop API规范中。以下是几个常用的拖放相关事件：

1. ondragstart：当元素开始被拖拽时触发。
2. ondragenter：当被拖拽元素进入目标元素时触发。
3. ondragover：当被拖拽元素在目标元素内移动时触发。
4. ondragleave：当被拖拽元素离开目标元素时触发。
5. ondrop：当被拖拽元素放置在目标元素上时触发。
6. ondragend：当拖拽操作完成后触发。

使用拖放功能的基本流程如下：

1. 将需要支持拖放的元素设置为可拖动（draggable=“true”）。
2. 为拖放源元素（drag source）添加ondragstart事件监听器，用于在拖动开始时执行自定义操作，并且设置拖动的数据类型和数据。
3. 为目标元素（drop target）添加ondragover事件监听器，用于确定是否可以在该元素上放置被拖动的数据。
4. 为目标元素添加ondrop事件监听器，在元素上释放被拖动元素时执行自定义操作。
5. 通过ondragend事件监听器处理拖动结束后的清理工作。

拖放API还提供了一些其他的方法和属性，例如dataTransfer对象、setDragImage()方法、dragenter和dragleave事件等，可以根据具体的需求进行使用。

2.自定义属性

自定义属性（Custom attribute）是指在HTML元素中使用自定义的属性，以用于JavaScript、CSS或其他客户端技术中。自定义属性可以为开发者提供非常灵活的方式来存储和处理数据。

HTML5规范明确规定，自定义属性名称必须以"data-"前缀开头，这样可以避免与标准的HTML属性混淆。例如：

<div id="myElement" data-custom-attribute="value"></div>

在JavaScript中，可以通过元素的dataset属性来读取和修改自定义属性的值，例如：

// 获取自定义属性的值
const myElement = document.getElementById("myElement");
const customValue = myElement.dataset.customAttribute;

// 修改自定义属性的值
myElement.dataset.customAttribute = "new value";

在CSS中，可以使用属性选择器（Attribute Selector）来选取具有特定自定义属性的元素，并且根据其值设置相应的样式，例如：

/* 选取具有data-custom-attribute属性的元素 */
[data-custom-attribute] {
    color: red;
}

/* 选取具有特定值的data-custom-attribute属性的元素 */
[data-custom-attribute="value"] {
    font-weight: bold;
}

总之，自定义属性为开发者提供了一种非常方便的方式来扩展HTML元素的功能和行为，但要注意避免与标准的HTML属性冲突，同时在JavaScript或CSS中正确地使用它们。

3.HTML5语义化标签

1. header：定义页面或区域的页眉。
2. nav：定义页面中的导航链接。
3. main：定义页面中的主要内容区域。
4. section：定义文档中的节或区域。
5. article：定义独立的、完整的文章内容。
6. aside：定义页面中的侧边栏或相关信息。
7. footer：定义页面或区域的页脚。
8. figure和figcaption：定义图片、图表或其他媒体内容及其说明。
9. time：定义日期和时间，也可以用于表示事件或持续时间。
10. progress：定义任务进度条。

使用这些语义化标签可以提高页面的可读性和可访问性，并且有助于搜索引擎优化（SEO），同时也方便开发者理解和维护代码。需要注意的是，在使用这些标签时，应该使用合适的标签来包含相应的内容，不应该仅仅因为某个标签样式适合而滥用它。

4.音频视频

HTML5提供了内置的音视频功能，通过使用和标签.支持多种格式。以下是一些常见的用法：

1. 基本语法：使用或标签来定义一个音频或视频元素，例如：

<-- 音频 --!>
<audio src="audio.mp3"></audio>
<-- 视频频 --!>
<video src="video.mp4"></video>

2.控制播放：使用JavaScript来控制音频或视频的播放、暂停、跳转等操作，例如：

const myAudio = document.getElementById("myAudio");
myAudio.play();  // 播放音频
myAudio.pause(); // 暂停音频
myAudio.currentTime = 10; // 跳转到10秒处

const myVideo = document.getElementById("myVideo");
myVideo.play();  // 播放视频
myVideo.pause(); // 暂停视频
myVideo.currentTime = 30; // 跳转到30秒处

3.添加字幕：使用标签来为音频或视频添加字幕，例如：

<video src="video.mp4">
  <track kind="captions" src="captions.vtt" label="English Captions" default></track>
</video>

如果浏览器不支持自动播放怎么办?在属性中添加autoplay(谷歌浏览器不支持音频自动播放,但是支持静音自动播放)

5.Canvas绘图

https://blog.csdn.net/BUG_CONQUEROR_LI/article/details/126933247

6.地理定位：

通过使用Geolocation API，可以获取用户的地理位置信息(也就是当前设备的地理位置)。

7.本地离线存储(localStorage)

localstorage用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动删除数据

对应的sessionStorage该数据对象临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据

8.表单控件

1. date、time、datetime、datetime-local、month、week：这些输入类型用于日期、时间和日期时间的选择。
2. email、url、tel：这些输入类型用于输入电子邮件地址、URL 和电话号码，浏览器可以对输入进行验证。
3. search：这个输入类型用于搜索框，浏览器可以提供特殊的 UI 以便用户输入。
4. color：这个输入类型用于颜色选择器，可以方便地选择颜色。

此外，HTML5 还新增了一些属性和方法，用于进一步增强表单控件的功能和交互性，例如 placeholder、autocomplete、required、pattern、min、max 等。这些新功能可以让开发者更加方便地实现各种表单需求，并提高用户体验。

Css3新特性

1.颜色

1. RGBA：RGBA 是一种增强的 RGB 颜色模式，其中 A 表示透明度。通过设置透明度，可以制作出更加自然流畅的渐变效果。
2. HSLA：HSLA 是一种基于色调、饱和度和亮度的颜色模式，其中 A 也表示透明度。与 RGBA 不同，它可以非常方便地控制颜色的明暗和饱和度。
3. 渐变：CSS3 支持线性渐变和径向渐变两种。通过渐变可以实现各种炫酷的背景效果，例如彩虹渐变、镜面渐变等。
4. filter：filter 属性可以用来对元素进行图像处理，包括模糊、灰度、饱和度等效果。这些滤镜可以让网页更具有创意和艺术感。
5. mix-blend-mode：mix-blend-mode 属性可以控制元素与其后代元素的混合方式，包括正片叠底、滤色、叠加等多种模式。这个属性可以为元素添加更加丰富的视觉效果

2.布局：

Flexbox 和 Grid 布局可以更方便地进行页面布局和排版。

Grid 布局是 CSS3 新增的一种强大的布局方式，它通过将网页分割成行和列，并定义每个单元格的大小和位置，来实现灵活的页面布局。
使用 Grid 布局可以轻松实现复杂的网页布局，例如多栏、响应式等。同时，与传统的浮动布局相比，Grid 布局更加直观且易于维护，提高了开发效率。

3.盒子模型

Box Sizing 可以更好地控制盒子的宽高计算方式，减少布局偏差。

4.动画和过渡

支持使用 (animate@keyfrom)CSS 控制动画和过渡效果，更加灵活自然。

5. 字体

新增字体属性，支持使用自定义字体和变量，提高排版美感。(iconfont/iconmoon)

6.边框和阴影

新增 border-image、border-radius、box-shadow 等属性，可以更简单精准地实现各种边框和阴影效果。

7.渐变和图片

新增linear-gradient、radial-gradient、filter 等属性，可以实现复杂的背景渐变和图片处理效果。

8.媒体查询

可以根据（ @mediaScreenand（））设备屏幕大小、分辨率等条件，为不同终端设备提供自适应布局。

9.选择器

新增众多选择器，例如通用兄弟选择器、属性选择器、伪类选择器等，可以更精确地定位元素。

10.2D/3D转换

1. transform：该属性可以实现旋转、缩放、移动等基本的变换操作。例如 transform: rotate(30deg) 可以将元素旋转 30 度。
2. translate：可以将元素沿 x 轴和 y 轴进行平移。例如 transform: translate(50px, 100px) 可以将元素向右移动 50 像素，向下移动 100 像素。
3. scale：可以控制元素的缩放比例。例如 transform: scale(2) 可以将元素放大两倍。
4. skew：可以使元素倾斜。例如 transform: skew(20deg, 10deg) 可以使元素在水平方向上倾斜 20 度，在垂直方向上倾斜 10 度。
5. perspective：该属性用于创建 3D 效果。它可以设置元素的透视点（视点），从而实现近大远小的效果。
6. rotateX、rotateY、rotateZ：这些属性可以分别对元素进行 X、Y、Z 轴的旋转。