html5和css3新特性

最新推荐文章于 2024-07-31 23:13:20 发布

floret. 小花

最新推荐文章于 2024-07-31 23:13:20 发布

阅读量1.1k

点赞数 15

文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/heiioworld_/article/details/137497939

版权

HTML5新特性
新的语义元素 header article aside footer

多媒体支持：HTML5原生支持音频和视频，无需使用Flash或其他插件。此外，还引入了新的视频编解码器，例如H.264和WebM，可以提供更好的压缩和质量。

表单增强：HTML5改进了表单功能，引入了新的输入类型，例如<input type="email">。<input type="date">此外，还引入了新的表单验证API，可以帮助确保用户输入有效的数据。

其他特性：HTML5还引入了许多其他特性，例如断层、拖放、离线存储和WebSockets。

CSS3新特性

布局：CSS3引入了新的布局模式，例如Flexbox和Grid布局。这些模式可以帮助创建更复杂和灵活的布局。flexbox布局：" Flexbox布局也被称为弹性盒子布局，

flex-direction：设置主轴的方向。可以取以下值：
- row：主轴水平排列项目。
- column：主轴垂直排列项目。
flex-wrap：设置项目是否换行。可以取以下值：
- nowrap：项目不换行。
- wrap：项目换行。
- wrap-reverse：项目逆向换行。
justify-content：设置项目在主轴上的对齐方式。可以取以下值：
- flex-start：项目在主轴的起始位置对齐。
- flex-end：项目在主轴的结束位置对齐。
- center：项目在主轴的中心位置对齐。
- space-between：项目在主轴上均匀分布，两端留有空白。
- space-around：项目在主轴上均匀分布，项目之间留有空白。
align-items：设置项目在交叉轴上的对齐方式。可以取以下值：
- flex-start：项目在交叉轴的起始位置对齐。
- flex-end：项目在交叉轴的结束位置对齐。
- center：项目在交叉轴的中心位置对齐。
- baseline：项目在交叉轴的基线位置对齐。
align-content：设置项目在交叉轴上的对齐方式（当项目换行时）。可以取以下值：
- flex-start：项目在交叉轴的起始位置对齐。
- flex-end：项目在交叉轴的结束位置对齐。
- center：项目在交叉轴的中心位置对齐。
- space-between：项目在交叉轴上均匀分布，两端留有空白。
- space-around：项目在交叉轴上均匀分布，项目之间留有空白。
Flexbox 布局的优势
- 易于使用：Flexbox 布局的语法简单易学，可以快速上手。
- 灵活：Flexbox 布局可以创建各种复杂的布局，例如水平或垂直排列元素、网格布局等。
- 响应式：Flexbox 布局可以自动适应不同设备和屏幕尺寸，创建响应式布局。

",grid布局：" Grid 布局也被称为 网格布局

Grid 布局的基本概念

容器：使用 grid 布局的元素称为容器（grid container）。
项目：容器中的所有子元素称为项目（grid item）。
网格线：Grid 布局将容器划分为一系列行和列，称为网格线（grid line）。
网格单元格：网格线相交形成的区域称为网格单元格（grid cell）。

Grid 布局的属性

display：设置元素的 display 属性为 grid 或 inline-grid，即可将其转换为 grid 容器。
grid-template-rows：定义容器的行布局。可以指定行的高度，例如：
- grid-template-rows: 100px 200px 300px;
grid-template-columns：定义容器的列布局。可以指定列的宽度，例如：
- grid-template-columns: 100px 200px 300px;
grid-template-areas：定义项目的布局区域。可以指定项目的行列位置，例如：
- grid-template-areas: "header header header" "sidebar main main" "footer footer footer";
grid-auto-rows：定义自动生成的行的默认高度。
grid-auto-columns：定义自动生成的列的默认宽度。
grid-auto-flow：定义项目在网格中的排列方式。可以取以下值：
- none：项目不自动排列。
- row：项目按行排列。
- column：项目按列排列。
justify-content：设置项目在主轴上的对齐方式。可以取以下值：
- flex-start：项目在主轴的起始位置对齐。
- flex-end：项目在主轴的结束位置对齐。
- center：项目在主轴的中心位置对齐。
- space-between：项目在主轴上均匀分布，两端留有空白。
- space-around：项目在主轴上均匀分布，项目之间留有空白。
align-items：设置项目在交叉轴上的对齐方式。可以取以下值：
- flex-start：项目在交叉轴的起始位置对齐。
- flex-end：项目在交叉轴的结束位置对齐。
- center：项目在交叉轴的中心位置对齐。
- baseline：项目在交叉轴的基线位置对齐。
align-content：设置项目在交叉轴上的对齐方式（当项目换行时）。可以取以下值：
- flex-start：项目在交叉轴的起始位置对齐。
- flex-end：项目在交叉轴的结束位置对齐。
- center：项目在交叉轴的中心位置对齐。
- space-between：项目在交叉轴上均匀分布，两端留有空白。
- space-around：项目在交叉轴上均匀分布，项目之间留有空白。
Grid 布局的优势
- 强大：Grid 布局可以创建各种复杂的布局，例如网格布局、响应式布局等。
- 易于使用：Grid 布局的语法简单易学，可以快速上手。
- 兼容性好：Grid 布局得到了所有现代浏览器（包括 Chrome、Firefox、Safari、Edge 和 Opera）的支持。

选择器：CSS3引入了新的选择器，例如伪类和子元素选择器。这些选择器可以帮助更准确地选择元素。伪类选择器："

伪类选择器 是一种用于选择处于特定状态的元素的选择器。伪类选择器可以与其他选择器一起使用，以更精确地选择元素。

常见的伪类选择器

:hover：选择鼠标悬停在其上的元素。
:focus：选择获得焦点的元素。
:active：选择被激活的元素（例如，按钮被按下）。
:visited：选择已访问过的链接。
:link：选择未访问过的链接。
:first-child：选择父元素的第一个子元素。
:last-child：选择父元素的最后一个子元素。
:nth-child(n)：选择父元素的第 n 个子元素。
:nth-last-child(n)：选择父元素的倒数第 n 个子元素。
:even：选择偶数索引的子元素。
:odd：选择奇数索引的子元素。
:empty：选择不包含任何子元素的元素。
:not(selector)：选择不匹配指定选择器的元素。
伪类选择器的兼容性

大多数现代浏览器都支持伪类选择器。但是，一些较旧的浏览器可能不支持某些伪类选择器。

"，子元素选择器："

子元素选择器 是一种用于选择特定父元素的子元素的选择器。子元素选择器由两个或多个由空格分隔的选择器组成，第一个选择器选择父元素，第二个选择器选择子元素。

parent-selector > child-selector

其中：

parent-selector：选择父元素的选择器。
child-selector：选择子元素的选择器。

子元素选择器与后代选择器的区别

子元素选择器只能选择直接子元素，而后代选择器 可以选择所有子元素，包括直接子元素和间接子元素。

总结

子元素选择器和后代选择器都是非常有用的选择器，可以用于选择特定元素。选择器选择器可以用于选择更精确的元素，而后代选择器 可以用于选择更广泛的元素。

子元素选择器的兼容性

所有现代浏览器都支持子元素选择器。

视觉效果：CSS3引入了许多新的视觉效果，例如过滤器、动画和过渡。这些效果可以帮助创建更丰富和吸引人的用户界面。过滤器："

CSS3 过滤器 允许您对图像和视频应用各种视觉效果。过滤器可以用于创建模糊、阴影、饱和度、亮度等效果。

CSS3 过滤器语法

filter: <filter-function> | none;

其中：

<filter-function>：一个或多个过滤器函数，由空格分隔。
none：表示不应用任何过滤器。

常见的 CSS3 过滤器函数

blur(radius)：模糊图像。radius 参数指定模糊的半径，单位为像素。
brightness(value)：调整图像的亮度。value 参数是一个百分比，范围为 0% 到 200%。
contrast(value)：调整图像的对比度。value 参数是一个百分比，范围为 0% 到 200%。
drop-shadow(h-offset v-offset blur-radius color)：为图像添加阴影。h-offset 和 v-offset 参数指定阴影的水平和垂直偏移量，单位为像素。blur-radius 参数指定阴影的模糊半径，单位为像素。color 参数指定阴影的颜色。
grayscale(value)：将图像转换为灰度。value 参数是一个百分比，范围为 0% 到 100%。
hue-rotate(angle)：旋转图像的色调。angle 参数指定旋转的角度，单位为度。
invert(value)：反转图像的颜色。value 参数是一个百分比，范围为 0% 到 100%。
opacity(value)：调整图像的不透明度。value 参数是一个百分比，范围为 0% 到 100%。
saturate(value)：调整图像的饱和度。value 参数是一个百分比，范围为 0% 到 200%。
sepia(value)：将图像转换为棕褐色。value 参数是一个百分比，范围为 0% 到 100%。

CSS3 过滤器兼容性

CSS3 过滤器得到了所有现代浏览器（包括 Chrome、Firefox、Safari、Edge 和 Opera）的支持。

"，动画："

CSS3 动画 允许您创建动画效果，而无需使用 JavaScript 或 Flash。CSS3 动画可以使用 关键帧 来定义动画的各个阶段。

@keyframes animation-name {
  from {
    /* 动画开始时的样式 */
  }

  to {
    /* 动画结束时的样式 */
  }
}

element {
  animation: animation-name duration timing-function iteration-count direction fill-mode;
}

其中：

@keyframes：定义动画的关键帧。
animation-name：动画的名称。
from：动画开始时的样式。
to：动画结束时的样式。
element：要应用动画的元素。
animation：动画的属性，包括：
- duration：动画的持续时间，单位为秒或毫秒。
- timing-function：动画的计时函数，用于控制动画的进度。
- iteration-count：动画的重复次数。
- direction：动画的方向。
- fill-mode：动画在开始或结束时如何保持样式。

常见的 CSS3 动画属性

duration：动画的持续时间，单位为秒或毫秒。
timing-function：动画的计时函数，用于控制动画的进度。常见的计时函数包括：
- linear：匀速动画。
- ease：缓动动画。
- ease-in：动画开始时加速，然后减速。
- ease-out：动画开始时减速，然后加速。
- ease-in-out：动画开始和结束时都加速。
iteration-count：动画的重复次数。可以取以下值：
- 1：动画只播放一次。
- infinite：动画无限循环播放。
direction：动画的方向。可以取以下值：
- normal：动画按正常顺序播放。
- alternate：动画交替播放。
fill-mode：动画在开始或结束时如何保持样式。可以取以下值：
- none：动画结束时，元素恢复到初始状态。
- forwards：动画结束时，元素保持动画结束时的样式。
- backwards：动画开始时，元素保持动画开始时的样式。
- both：动画开始和结束时，元素都保持动画的最终样式。

CSS3 动画兼容性

CSS3 动画得到了所有现代浏览器（包括 Chrome、Firefox、Safari、Edge 和 Opera）的支持。

",过渡："

CSS 过渡 允许您在元素的样式之间平滑地进行转换。过渡可以用于创建各种效果，例如：

更改元素的颜色
更改元素的大小
更改元素的位置

CSS 过渡语法

element {
  transition: property duration timing-function delay;
}

其中：

element：要应用过渡的元素。
transition：过渡的属性，包括：
- property：要过渡的 CSS 属性。
- duration：过渡的持续时间，单位为秒或毫秒。
- timing-function：过渡的计时函数，用于控制过渡的进度。
- delay：过渡延迟的时间，单位为秒或毫秒。

常见的 CSS 过渡属性

property：要过渡的 CSS 属性。可以指定多个属性，由空格分隔。
duration：过渡的持续时间，单位为秒或毫秒。
timing-function：过渡的计时函数，用于控制过渡的进度。常见的计时函数包括：
- linear：匀速过渡。
- ease：缓动过渡。
- ease-in：过渡开始时加速，然后减速。
- ease-out：过渡开始时减速，然后加速。
- ease-in-out：过渡开始和结束时都加速。
delay：过渡延迟的时间，单位为秒或毫秒。

总结

CSS 过渡是一种强大的工具，可以用于创建各种动画效果。过渡可以使网页更加生动活泼，并吸引用户的注意力。

与 CSS 动画的区别

CSS 过渡和 CSS 动画都是用于创建动画效果的工具。它们之间主要的区别如下：

过渡用于在元素的样式之间平滑地进行转换。
动画用于创建更复杂的动画效果，例如运动、旋转、缩放等。

什么时候使用过渡

当您需要在元素的样式之间平滑地进行转换时，可以使用过渡。
例如，您可以使用过渡来更改元素的颜色、大小或位置。

什么时候使用动画

当您需要创建更复杂的动画效果时，可以使用动画。
例如，您可以使用动画来让元素运动、旋转或缩放。

总结

CSS 过渡和 CSS 动画都是非常有用的工具，可以用于创建各种动画效果。选择使用哪种工具取决于您要创建的动画效果的类型。

其他特性：CSS3还引入了许多其他特性，例如媒体查询、字体遮蔽和文本遮蔽。媒体查询："

CSS 媒体查询 允许您根据用户的设备和环境调整网页的样式。例如，您可以使用媒体查询来为不同的屏幕尺寸、设备类型或浏览器类型设置不同的样式。

CSS 媒体查询语法

@media media-type and (media-feature: value) {
  /* 针对特定设备或环境的 CSS 样式 */
}

其中：

@media：媒体查询关键字。
media-type：媒体类型，例如 screen、print 或 all。
media-feature：媒体特性，例如 width、height 或 device-aspect-ratio。
value：媒体特性的值。

常见的媒体类型和媒体特性

媒体类型
- screen：用于屏幕设备，例如台式机、笔记本电脑和智能手机。
- print：用于打印机。
- all：用于所有设备。
媒体特性
- width：设备的宽度，单位为像素。
- height：设备的高度，单位为像素。
- device-aspect-ratio：设备的宽高比。
- orientation：设备的方向，例如 portrait 或 landscape。
- resolution：设备的分辨率，单位为每英寸像素 (ppi)。

总结

CSS 媒体查询是一种强大的工具，可以用于根据用户的设备和环境调整网页的样式。媒体查询可以使您的网页更加适应不同的设备和环境，并提供更好的用户体验。

",字体遮蔽："

CSS 字体遮蔽 是一种使用文本内容的形状来遮蔽图像或其他元素的技术。这可以创建各种有趣的视觉效果，例如：

使用文本形状遮蔽图像以创建浮雕效果
使用文本形状遮蔽图像以创建镂空效果
使用文本形状遮蔽图像以创建文字动画

CSS 字体遮蔽语法

element {
  -webkit-mask-image: url(image.png);
  mask-image: url(image.png);
  mask-mode: alpha | luminance | match-source;
}

其中：

element：要应用遮蔽的元素。
-webkit-mask-image：用于 WebKit 浏览器（例如 Safari）的遮蔽图像 URL。
mask-image：用于其他浏览器（例如 Chrome 和 Firefox）的遮蔽图像 URL。
mask-mode：遮蔽模式，用于指定如何使用遮蔽图像来遮蔽元素。

常见的遮蔽模式

alpha：使用遮蔽图像的 alpha 通道来遮蔽元素。
luminance：使用遮蔽图像的亮度来遮蔽元素。
match-source：使用遮蔽图像的源图像来遮蔽元素。

CSS 字体遮蔽兼容性

CSS 字体遮蔽得到了所有现代浏览器（包括 Chrome、Firefox、Safari、Edge 和 Opera）的支持。

",文本遮蔽："

CSS 文本遮蔽是指使用文本内容的形状来遮蔽图像或其他元素的技术。这可以创建各种有趣的视觉效果，例如：

使用文本形状遮蔽图像以创建浮雕效果
使用文本形状遮蔽图像以创建镂空效果
使用文本形状遮蔽图像以创建文字动画

实现文本遮蔽

有两种主要方法可以实现 CSS 文本遮蔽：

1. 使用 mask-image 属性

element {
  mask-image: url(image.png);
  mask-mode: alpha | luminance | match-source;
}

content_copy

mask-image 属性指定遮蔽图像的 URL。
mask-mode 属性指定如何使用遮蔽图像来遮蔽元素。

2. 使用 clip-path 属性

element {
  clip-path: url(shape.svg);
}

content_copy

clip-path 属性指定用于遮蔽元素的形状的 URL。

选择合适的方法

选择使用哪种方法取决于您的需求：

如果您需要使用图像作为遮蔽，则应使用 mask-image 属性。
如果您需要使用矢量形状作为遮蔽，则应使用 clip-path 属性。

兼容性

CSS 文本遮蔽得到了所有现代浏览器（包括 Chrome、Firefox、Safari、Edge 和 Opera）的支持。

以下是一些具体的 HTML5 和 CSS3 新特性示例：

HTML5：<video>元素可用于播放视频，而无需使用Flash或其他插件。
CSS3：@media查询可根据设备或屏幕尺寸调整网页布局。
CSS3：flexbox可用于创建灵活的布局，例如水平或垂直排列元素。
CSS3：grid布局可用于创建复杂的布局，例如布局。
CSS3：filter可用于应用效果，例如模糊或阴影。
CSS3：animation可用于创建动画。
CSS3：transition可用于创建过渡效果。

floret. 小花

关注

15
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫