HTML5 元素变更详解：已废弃与新增元素表
代码号罗列了在HTML5规范中已废弃元素与新增元素，新增元素则分为语义化结构（如<article>）、多媒体与图形元素（如<video>）、表单元素与属性（如<input type="date">）和（如<canvas>）四大类，在提升文档可读性、功能扩展性和跨平台兼容性。表格按功能模块分组，并标注废弃原因或新增用途的简要说明。方便大家查阅！HTML5 已废弃元素列表
| 元素名称 | 功能描述 | 废弃原因 | 替代方案 |
|---|---|---|---|
<acronym> |
定义首字母缩写 | 语义不明确，可用性差 | 使用 <abbr> 替代 |
<applet> |
嵌入Java小程序 | 技术过时，安全性问题 | 使用 <object> 替代 |
<basefont> |
设置基准字体 | 表现与结构混合 | 使用CSS字体属性 |
<big> |
增大文本字号 | 表现与结构混合 | 使用CSS字体属性 |
<center> |
内容居中 | 表现与结构混合 | 使用CSS text-align |
<dir> |
目录列表 | 语义不明确 | 使用 <ul> 替代 |
<font> |
定义字体样式 | 表现与结构混合 | 使用CSS字体属性 |
<frame> |
定义框架 | 可用性、可访问性问题 | 使用CSS布局或响应式设计 |
<frameset> |
定义框架集 | 可用性、可访问性问题 | 使用CSS布局或响应式设计 |
<noframes> |
无框架内容 | 随框架一起废弃 | 使用响应式设计提供替代内容 |
<strike> |
删除线文本 | 表现与结构混合 | 使用 <del> 或CSS text-decoration |
<tt> |
电传文本 | 表现与结构混合 | 使用CSS字体属性 |
<u> |
下划线文本 | 表现与结构混合 | 使用CSS text-decoration |
HTML5 新增语义化元素列表
| 元素名称 | 功能描述 | 使用场景 |
|---|---|---|
<article> |
定义独立内容块 | 博客文章、新闻故事、论坛帖子 |
<aside> |
定义页面侧边栏内容 | 引用、侧栏、广告、导航组 |
<bdi> |
隔离可能方向格式不同的文本 | 多语言内容中的方向隔离 |
<details> |
定义用户可查看的额外细节 | 可折叠内容区域 |
<dialog> |
定义对话框或窗口 | 模态框、提示框 |
<figcaption> |
定义 <figure> 元素的标题 |
图像、图表、照片的标题 |
<figure> |
定义自包含内容流 | 图像、图表、照片、代码清单 |
<footer> |
定义文档或节的页脚 | 作者信息、版权信息、联系方式 |
<header> |
定义文档或节的页眉 | 介绍性内容、导航链接 |
<main> |
定义文档主要内容 | 页面核心内容区域 |
<mark> |
定义标记/高亮文本 | 突出显示相关文本 |
<meter> |
定义标量测量 within已知范围 | 磁盘使用量、投票结果 |
<nav> |
定义导航链接部分 | 主导航菜单、面包屑导航 |
<progress> |
定义任务进度条 | 下载进度、表单完成度 |
<rp> |
定义ruby注释不支持时显示的内容 | 为不支持ruby的浏览器提供后备 |
<rt> |
定义ruby注释的解释 | 东亚文字的发音注解 |
<ruby> |
定义ruby注释 | 东亚文字的发音注解 |
<section> |
定义文档中的节 | 章节、页眉、页脚、其他内容区块 |
<summary> |
定义 <details> 元素的可见标题 |
可折叠内容的标题 |
<time> |
定义日期/时间 | 发布日期、事件时间 |
<wbr> |
定义可能的换行机会 | 长单词或URL中的可选换行点 |
HTML5 新增多媒体与图形元素
| 元素名称 | 功能描述 | 使用场景 |
|---|---|---|
<audio> |
定义音频内容 | 音乐播放器、播客、音效 |
<canvas> |
定义图形容器 | 动态生成图形、图表、游戏 |
<embed> |
定义外部应用程序容器 | 插件内容、交互式内容 |
<source> |
定义多媒体资源 | 为 <audio> 和 <video> 提供多格式支持 |
<track> |
定义媒体文本轨道 | 字幕、章节导航 |
<video> |
定义视频内容 | 电影剪辑、视频流、教程视频 |
HTML5 新增表单元素与属性
| 元素/属性 | 功能描述 | 使用场景 |
|---|---|---|
<datalist> |
定义输入控件预定义选项列表 | 输入提示、自动完成 |
<keygen> |
定义密钥对生成器字段 | 表单安全、数字证书 |
<output> |
定义计算结果显示 | 表单计算结果显示 |
type="email" |
定义电子邮件地址输入字段 | 邮箱格式验证 |
type="url" |
定义URL地址输入字段 | 网址格式验证 |
type="tel" |
定义电话号码输入字段 | 电话号码输入 |
type="search" |
定义搜索字段 | 搜索框 |
type="number" |
定义数值输入字段 | 数量、年龄等数字输入 |
type="range" |
定义滑块控件 | 数值范围选择 |
type="date" |
定义日期选择器 | 生日、事件日期选择 |
type="month" |
定义月份选择器 | 信用卡到期日等 |
type="week" |
定义周选择器 | 工作计划周选择 |
type="time" |
定义时间选择器 | 会议时间安排 |
type="datetime" |
定义UTC日期时间选择器 | 国际事件时间 |
type="datetime-local" |
定义本地日期时间选择器 | 本地事件时间 |
type="color" |
定义颜色选择器 | 主题颜色选择 |
本节课程知识要点
-
语义化设计：HTML5新增了大量语义化元素，使文档结构更加清晰，有助于SEO和可访问性
-
分离表现与结构：废弃了大量用于表现的元素和属性，推荐使用CSS实现视觉效果
-
多媒体支持：新增原生多媒体元素，减少了对第三方插件的依赖
-
表单增强：引入了多种新的输入类型和表单元素，提高了用户体验和数据验证能力
-
渐进式增强：虽然许多旧元素已废弃，但现代浏览器仍支持它们，开发者应逐步迁移到新标准
