By 管理员 in 学习和资源 — Aug 16, 2024

html5和css3相较于过去的主要变化

HTML5 相较于之前的 HTML 版本（如 HTML 4.01）进行了许多重要的更新和改进，包括删除了一些过时的标签，增加了一些新的标签，以及对现有标签的增强。以下是 HTML5 中删除和增加的标签的详细列表：

在 HTML5 中，以下标签被认为是过时的，并且不再推荐使用：

HTML5 引入了许多新的标签，以增强语义和功能，主要包括：

结构性标签：
- <header> - 定义文档的头部。
- <footer> - 定义文档的底部。
- <nav> - 定义导航链接的部分。
- <article> - 定义独立的内容块。
- <section> - 定义文档中的一个区域。
- <aside> - 定义与主内容相关的侧边内容。
多媒体标签：
- <audio> - 用于嵌入音频内容。
- <video> - 用于嵌入视频内容。
- <track> - 用于为 <video> 和 <audio> 提供文本轨道（如字幕）。
图形和效果：
- <canvas> - 用于绘制图形和动画。
- <svg> - 用于嵌入可缩放矢量图形。
表单控件：
- <input type="date"> - 日期选择器。
- <input type="time"> - 时间选择器。
- <input type="email"> - 电子邮件输入框。
- <input type="url"> - URL 输入框。
- <input type="range"> - 范围选择器。
- <input type="color"> - 颜色选择器。
- <datalist> - 提供输入建议的列表。
- <output> - 用于显示计算结果。
其他标签：
- <progress> - 用于表示任务的进度。
- <meter> - 用于表示测量的范围。

CSS3 相较于之前的 CSS 版本（如 CSS2.1）进行了显著的改进和扩展，增加了许多新特性和功能。以下是 CSS3 中的一些主要变化，包括新增的特性和功能，以及一些不再推荐使用的特性。

选择器：
- 新增了许多选择器，如 :nth-child(), :nth-of-type(), :last-child, :first-of-type, :not(), :focus, :hover 等。
盒模型：
- box-shadow - 为元素添加阴影效果。
- text-shadow - 为文本添加阴影效果。
边框和背景：
- border-radius - 创建圆角边框。
- linear-gradient 和 radial-gradient - 创建渐变背景。
- background-size - 控制背景图像的大小。
布局：
- Flexbox - 提供了一种新的布局模型，使得在容器中对齐和分配空间变得更加简单。
- Grid Layout - 允许创建复杂的二维布局。
过渡和动画：
- transition - 定义元素状态变化时的过渡效果。
- animation - 创建复杂的动画效果。
多列布局：
- column-count 和 column-gap - 支持多列文本布局。
媒体查询：
- 媒体查询的增强，使得响应式设计变得更加容易，支持不同设备的样式调整。
自定义属性：
- CSS 变量（如 --my-variable）允许在样式表中定义和使用自定义属性。
新单位：
- 新增了 vh（视口高度）、vw（视口宽度）、vmin 和 vmax 单位，便于响应式设计。
文本效果：
- text-overflow - 控制文本溢出时的显示方式。
- word-wrap 和 overflow-wrap - 控制文本换行。

虽然 CSS3 没有正式删除任何 CSS2.1 的特性，但一些特性被认为是不推荐使用的，主要是因为它们的功能可以通过 CSS3 的新特性实现，或者它们在现代浏览器中的支持不佳：