HTML5 与 CSS3 作为前端技术体系的重要升级，分别从文档结构、媒体支持、表单交互及视觉效果等维度解决了传统 Web 开发的痛点，推动网页向更语义化、动态化、轻量化方向发展。二者均存在兼容性限制，主要支持 IE9 及以上现代浏览器，成为现代前端开发的核心基础。
一、HTML5：语义化与交互体验的革新
HTML5 的核心升级聚焦于语义化结构优化 、原生媒体支持 与表单功能增强，摆脱了对第三方插件的依赖，提升了文档可读性与开发效率。
1. 新增语义化标签：提升文档结构性
针对传统div标签语义模糊的问题，HTML5 新增一批具有明确语义的布局标签，主要服务于搜索引擎解析与代码维护。
| 标签 | 语义用途 |
|---|---|
<header> |
页面或区块的头部区域 |
<nav> |
导航菜单区域 |
<article> |
独立的文章或内容块 |
<section> |
文档中的逻辑分区 |
<aside> |
侧边栏或辅助内容区域 |
<footer> |
页面或区块的尾部区域 |
核心注意事项：
- 标签可在页面中多次使用，需遵循逻辑语义嵌套；
- IE9 中需通过 CSS 将其转换为块级元素（如
display: block）； - 移动端对语义化标签支持更佳，适配性更强。
2. 原生多媒体标签：无需插件的音视频播放
HTML5 新增<video>（视频）与<audio>（音频）标签，实现原生媒体播放，无需依赖 Flash 等插件，简化了媒体嵌入流程。
（1）视频标签<video>
支持 MP4、WebM、Ogg 三种格式，其中 MP4 格式兼容性最广（支持所有主流浏览器）。
基础语法：
css
<video src="video.mp4" controls muted loop poster="cover.jpg"></video>核心属性：
| 属性 | 功能描述 | 关键说明 |
|---|---|---|
src |
视频文件 URL 地址 | 必选属性 |
controls |
显示默认播放控件 | 需显式设置才会展示 |
autoplay |
视频就绪后自动播放 | 谷歌浏览器需配合muted静音播放 |
loop |
播放完毕后循环播放 | - |
poster |
加载等待时显示的封面图片 | 提升用户体验 |
muted |
静音播放 | 解决现代浏览器自动播放限制 |
（2）音频标签<audio>
支持 MP3、Wav、Ogg 三种格式，MP3 为兼容性最优选择。其语法与核心属性（autoplay、controls、loop、src）与<video>基本一致，但无poster、width等视觉相关属性。
媒体标签总结：
- 音视频标签属性用法高度统一，仅视觉相关属性存在差异；
- 现代浏览器普遍禁止音视频自动播放，视频可通过
muted突破限制，音频无此方案； - 实际开发中视频标签更常用，需重点掌握尺寸控制、封面设置等技巧。
3. 增强型表单：精准输入与交互优化
HTML5 新增多种表单输入类型与属性，减少前端验证代码，提升输入体验与数据准确性。
（1）新增 input 类型
| 类型值 | 功能描述 |
|---|---|
email |
限制输入为合法邮箱格式 |
url |
限制输入为合法 URL 地址 |
date/time |
提供日期 / 时间选择器 |
number |
仅允许输入数字 |
tel |
适配移动端数字键盘 |
search |
提供搜索框（支持清空按钮） |
color |
提供颜色选择器 |
（2）新增表单属性
| 属性 | 功能描述 |
|---|---|
required |
标记字段为必填项，未填则阻止提交 |
placeholder |
显示输入提示文本，输入内容后自动消失 |
autofocus |
页面加载完成后自动聚焦到目标表单元素 |
autocomplete |
开启 / 关闭输入历史提示（需配合name属性） |
multiple |
允许上传多个文件或输入多个值 |
二、CSS3：视觉效果与选择器的升级
CSS3 在选择器、盒子模型、视觉效果及动画等方面实现突破，让网页样式更灵活、动态效果更丰富。
1. 新增选择器：精准高效的元素匹配
CSS3 扩展了选择器体系，减少对class和id的依赖，提升样式代码的简洁性与可维护性。
（1）属性选择器
根据元素的属性及属性值匹配元素，支持精确匹配、前缀匹配、后缀匹配及包含匹配。
| 选择符 | 匹配规则 | 示例 |
|---|---|---|
E[att] |
匹配具有att属性的 E 元素 |
input[type]（匹配所有带 type 的输入框） |
E[att="val"] |
匹配att属性值为val的 E 元素 |
input[type="email"]（匹配邮箱输入框） |
E[att^="val"] |
匹配att属性值以val开头的 E 元素 |
a[href^="http"]（匹配 http 链接） |
E[att$="val"] |
匹配att属性值以val结尾的 E 元素 |
img[src$=".png"]（匹配 PNG 图片） |
E[att*="val"] |
匹配att属性值包含val的 E 元素 |
div[class*="box"]（匹配含 box 类的 div） |
（2）结构伪类选择器
根据元素在文档树中的结构位置匹配元素，常用于父子元素关系的样式控制。
核心选择符及规则：
| 选择符 | 匹配规则 |
|---|---|
E:first-child |
匹配父元素的第一个子元素 E |
E:last-child |
匹配父元素的最后一个子元素 E |
E:nth-child(n) |
匹配父元素的第 n 个子元素 E |
E:first-of-type |
匹配父元素中 E 类型的第一个子元素 |
E:nth-of-type(n) |
匹配父元素中 E 类型的第 n 个子元素 |
关键区别：
nth-child(n)：先按位置排序所有子元素，再判断是否为 E 类型；nth-of-type(n)：先筛选出 E 类型子元素，再按位置排序匹配。
n的取值规则：
- 数字：直接匹配第 n 个元素（从 1 开始）；
- 关键字：
even（偶数）、odd（奇数）； - 公式：如
2n（偶数）、2n+1（奇数）、-n+5（前 5 个）。
（3）伪元素选择器
通过 CSS 创建虚拟元素，无需额外 HTML 标签即可插入内容或装饰效果，核心为::before与::after。
| 选择符 | 功能 |
|---|---|
E::before |
在 E 元素内容内部的最前面插入虚拟元素 |
E::after |
在 E 元素内容内部的最后面插入虚拟元素 |
使用注意：
- 伪元素为行内元素，需通过
display转换类型； - 必须设置
content属性（空内容需写content: ""）； - 权重与标签选择器相同（权重值 1）；
- 常用于清除浮动、添加装饰性图标等场景。
2. 盒子模型优化：box-sizing属性
CSS3 通过box-sizing属性改变盒子尺寸的计算方式，解决了传统模型中padding和border撑大盒子的问题。
| 属性值 | 尺寸计算规则 | 适用场景 |
|---|---|---|
content-box |
盒子大小 = width/height + padding + border（默认） | 需精确控制内容区域大小时 |
border-box |
盒子大小 = width/height（padding 和 border 包含在内） | 响应式布局，避免尺寸溢出 |
优势 ：设置box-sizing: border-box后，调整padding和border无需重新计算width/height，简化布局代码。
3. 视觉效果增强：滤镜与计算函数
（1）图片滤镜filter
为元素应用图形效果（如模糊、灰度等），无需修改原图即可实现视觉变化。
常用语法：
css
img {
filter: blur(5px); /* 模糊效果，数值越大越模糊 */
/* 其他效果：grayscale(100%)（灰度）、brightness(1.5)（亮度）等 */
}（2）动态计算函数calc()
在 CSS 中直接执行数值计算，支持+、-、*、/运算，常用于响应式尺寸适配。
常用语法：
css
.box {
width: calc(100% - 80px); /* 宽度 = 父容器宽度 - 80px */
height: calc(50vh + 20px); /* 高度 = 视口高度的50% + 20px */
}4. 2D 转换：元素变形的核心技术
transform属性实现元素的位移、旋转、缩放等 2D 变形效果，无需 JavaScript 即可达成动态视觉反馈。
（1）移动：translate(x, y)
- 功能：沿 X 轴和 Y 轴移动元素，支持像素（px）和百分比（相对自身尺寸）；
- 优势：移动后不影响其他元素位置，对行内元素无效；
- 语法：
transform: translate(50px, 30px)或单独设置translateX()/translateY()。
（2）旋转：rotate(deg)
- 功能：以中心点为轴旋转元素，单位为
deg（度）； - 规则：正值顺时针旋转，负值逆时针旋转；
- 自定义旋转中心：通过
transform-origin: x y设置（支持方位名词或像素值，默认center center）。
（3）缩放：scale(x, y)
- 功能：按比例放大或缩小元素，取值为数字（无单位）；
- 规则：
1为原尺寸，大于 1 放大，小于 1 缩小，仅写一个值时 X、Y 等比例缩放； - 优势：默认以中心点缩放，可通过
transform-origin自定义基准点。
5. 过渡动画：transition
实现元素样式的平滑过渡，常与hover等交互事件配合，提升用户体验。
语法：
css
.box {
transition: 要过渡的属性 花费时间 运动曲线 延迟时间;
/* 示例：宽度和背景色在0.3秒内以ease曲线过渡 */
transition: width 0.3s ease, background-color 0.3s ease;
/* 简写：所有属性过渡，0.5秒后开始 */
transition: all 0.3s ease 0.5s;
}
.box:hover {
width: 200px;
background-color: pink;
}核心说明：
- 过渡效果需添加到目标元素本身，而非触发事件中；
- 支持多个属性过渡，用逗号分隔；
- 运动曲线默认
ease（先慢后快再慢），可选linear（匀速）等。
三、总结：HTML5 与 CSS3 的核心价值
HTML5 与 CSS3 的升级并非孤立存在，而是形成互补：
- HTML5 负责 "结构与交互"：通过语义化标签优化文档结构，用原生媒体与增强表单提升交互基础；
- CSS3 负责 "样式与动态"：以精准选择器、灵活盒子模型、丰富视觉效果及过渡动画实现界面升级。
二者共同推动 Web 开发从 "功能实现" 向 "体验优化" 转型，不仅简化了代码编写，更让网页具备了更接近原生应用的交互与视觉表现，是现代前端开发不可或缺的核心技术栈。