HTML5 和 CSS3 新特性全解析：从入门到实战，一篇搞定！

📚 目录

HTML5 新特性
- 语义化标签
- 多媒体标签
- 新增表单类型和属性
CSS3 新特性
- 新增选择器
- 盒子模型
- 过渡动画
- 其他实用特性
实战案例与总结

一、HTML5 新特性 🎯

1. 语义化标签

HTML5 新增了一些语义化标签，让网页结构更清晰，便于搜索引擎理解和维护。

常用标签：

<header>：头部
<nav>：导航
<article>：内容
<section>：区域
<aside>：侧边栏
<footer>：尾部

优点：

提升SEO（搜索引擎优化）
代码更易读和维护

示例：

<header>这是头部</header>
<nav>这是导航</nav>
<article>这是内容</article>
<footer>这是尾部</footer>

2. 多媒体标签

HTML5 新增了 <audio> 和 <video> 标签，无需插件即可播放音视频。

视频 `<video>`

常用属性：

controls：显示播放控件
autoplay：自动播放（需配合 muted）
loop：循环播放
poster：视频封面

示例：

<video src="video.mp4" controls autoplay muted loop poster="cover.jpg"></video>

音频 `<audio>`

常用属性：

controls：显示播放控件
autoplay：自动播放
loop：循环播放

示例：

<audio src="audio.mp3" controls autoplay loop></audio>

3. 新增表单类型和属性

HTML5 新增了多种表单输入类型和属性，提升用户体验。

新增输入类型：

type="email"：邮箱输入
type="url"：URL输入
type="date"：日期选择
type="number"：数字输入
type="search"：搜索框

新增属性：

required：必填项
placeholder：提示文本
autofocus：自动聚焦
multiple：多文件上传

示例：

<input type="email" placeholder="请输入邮箱" required>
<input type="date">
<input type="file" multiple>

二、CSS3 新特性 🎨

1. 新增选择器

CSS3 新增了多种选择器，让元素选择更灵活。

属性选择器

E[att]：选择具有 att 属性的元素
E[att="val"]：选择 att 属性值为 val 的元素

示例：

input[type="text"] { border: 1px solid #ccc; }

结构伪类选择器

:nth-child(n)：选择第 n 个子元素
:first-child：选择第一个子元素
:last-child：选择最后一个子元素

示例：

li:nth-child(2n) { background: #f0f0f0; }

伪元素选择器

::before：在元素前插入内容
::after：在元素后插入内容

示例：

p::before { content: "★"; color: red; }

2. 盒子模型

CSS3 新增了 box-sizing 属性，控制盒子大小的计算方式。

content-box：默认值，盒子大小为 width + padding + border
border-box：盒子大小为 width，padding 和 border 不撑大盒子

示例：

.box { box-sizing: border-box; width: 200px; padding: 20px; border: 10px solid #000; }

3. 过渡动画

CSS3 的 transition 属性可以实现简单的动画效果。

语法：

transition: 属性 时间 运动曲线 延迟;

示例：

button { transition: background 0.5s ease; }
button:hover { background: #f00; }

4. 其他实用特性

滤镜效果 `filter`

blur()：模糊效果
grayscale()：灰度效果

示例：

img { filter: blur(5px); }

计算函数 `calc()`

支持动态计算宽度、高度等

示例：

div { width: calc(100% - 20px); }

三、实战案例与总结 🛠️

1. 进度条案例

实现步骤：

使用 <div> 作为进度条容器。
使用 transition 实现宽度变化的动画效果。

代码：

<div class="progress-bar">
  <div class="progress"></div>
</div>
<style>
  .progress { width: 0; height: 20px; background: #f00; transition: width 1s; }
  .progress-bar:hover .progress { width: 100%; }
</style>

2. 小米Logo效果