HTML5和CSS3新增属性简要概括

HTML5和CSS3的出现极大地丰富了网页开发的功能和用户体验。它们引入了许多新属性和特性，使得网页设计更加灵活、语义化和交互性强。以下是对HTML5和CSS3新增属性的详细总结。

HTML5新增属性

1. 语义化标签

HTML5引入了一系列语义化标签，使网页结构更加清晰，便于搜索引擎优化（SEO）和辅助技术的理解：

<header>：页面或区块的页眉。
<nav>：导航链接组。
<section>：独立的内容区块。
<article>：独立的、完整的内容块。
<aside>：侧边栏或与主要内容相关的辅助信息。
<footer>：页面或区块的页脚。

2. 表单增强

HTML5为表单控件引入了新的输入类型和属性，提升了用户体验：

新的输入类型：email、url、search、date、time、range 等，新增的属性可以帮助用户高效率的输入信息，也可以方便后台管理数据。
新的表单属性：
- autofocus：页面加载时自动获取焦点（自动获取光标）。
- required：输入框不能为空（必填项）。
- placeholder：提供输入提示。

3. 多媒体支持

HTML5原生支持音频和视频，无需依赖插件：

<audio>：用于播放音频文件，大多数浏览器都支持MP3。
<video>：用于播放视频文件，大多数浏览器都支持MP4。

CSS3新增属性

1. 外观与布局

CSS3引入了许多新属性，用于增强页面的视觉效果：

border-radius：实现圆角边框，我们可以美化一些元素。
box-shadow 和 text-shadow：分别为元素和文本添加阴影效果。

2. 新增选择器

CSS3增加了一些可以提高代码效率的选择器：

1.属性选择器：

CSS 复制代码

input[value] {
//选择具有value属性的输入框
}
div[class="box"] {
//选择类名为box的div盒子
}
input[type="password"] {
//选择类型为密码的输入框
}

当需要选择多个类名同根的元素时：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div[class^="box"] {
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: #f00;
      float: left;
      //选择类名以box开头的元素
    }

    div[class$="icon"] {
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: #0f0;
      float: left;
      //选择类名以icon结尾的元素
    }

    div[class*="Data"] {
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: #00f;
      float: left;
      //选择类名中含有Data的元素
    }
  </style>
</head>

<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <div class="first-icon"></div>
  <div class="second-icon"></div>
  <div class="third-icon"></div>
  <div class="fourth-icon"></div>
  <div class="first-Data-1"></div>
  <div class="second-Data-2"></div>
  <div class="third-Data-3"></div>
  <div class="fourth-Data-4"></div>
</body>

</html>

3. 动画与过渡

CSS3支持动画和过渡效果，无需JavaScript即可实现复杂的视觉效果：

transition：实现属性值的平滑过渡，给需要过渡的元素添加，代码规则如下：transition: width 1s ease 0s,对应的四个值是：需要过渡的属性、过渡时间、过渡曲线、开始时间（延时时间）
@keyframes 和 animation：定义动画的关键帧和控制动画行为。

关键帧的动画定义如下：

CSS 复制代码

@keyframes move {
    0% {}
    
    50% {
         width： 225px;
    }
    
    100% {
        width: 300px
    }
    //百分比表示运动时间的分段，表示在该时间分段时某个属性的变化到何值
}
//move是动画的名字，支持自定义
//调用时使用animation属性调用
div {
    width: 150px;
    high: 150px;
    animation: move;
}
//关键帧动画同样可以设置一些动画时间、动画曲线等等属性：

属性	意义	值
animation-name	动画名称	自定义的名称
animation-duration	动画时间	0.1s
animation-timing-function	动画曲线	ease等
animation-delay	开始时间（延时）	0s
animation-iteration-count	循环次数	数字或infinite（无限）
animation-fill-mode	终末状态	backwards/forwards返回或不返回
animation-play-state	动画状态	pause/running暂停或继续（通常搭配`hover`使用）

4. 3D和变换

CSS3支持2D和3D变换，以及更复杂的视觉效果：

transform：实现旋转、缩放、倾斜等变换。

后续会详细介绍一些转换的属性及特点。