HHML5 摒弃了许多主要用于控制表现的属性，推荐使用 CSS 来实现样式效果，以实现结构与表现的分离。本节课程代码号列了下面这个表格汇总了这些被废弃的属性、它们原先的应用元素以及推荐的替代方案。
HTML5 已废弃属性及替代方案
| 废弃属性 | 原应用元素 | 废弃原因 | HTML5 替代方案 | 核心概念/专业名词 |
|---|---|---|---|---|
align |
caption, div, h1-h6, p, table, img, tr, td, th, tbody, thead, tfoot, col, colgroup, input, legend, object, iframe, hr |
表现与结构混合 | CSS text-align, vertical-align, float 等 |
语义化 (Semantics) |
bgcolor |
body, table, tr, td, th |
表现与结构混合 | CSS background-color |
内容与表现分离 (Separation of Content and Presentation) |
border |
table, img, object |
表现与结构混合 | CSS border |
CSS 盒模型 (Box Model) |
cellpadding |
table |
表现与结构混合 | CSS padding (作用于 td, th) |
CSS 选择器 (Selectors) |
cellspacing |
table |
表现与结构混合 | CSS border-spacing |
|
char, charoff |
col, colgroup, tbody, td, tfoot, th, thead, tr |
用途有限，难以维护 | CSS (难以直接对应，通常用其他布局方式替代) | 渐进增强 (Progressive Enhancement) |
clear |
br |
表现与结构混合 | CSS clear |
|
compact |
dl, menu, ol, ul |
表现与结构混合 | CSS margin, padding, line-height |
|
frame |
table |
表现与结构混合 | CSS border-style |
|
frameborder |
iframe |
表现与结构混合 | CSS border |
|
height (用于布局) |
iframe, td, th |
表现与结构混合 | CSS height |
响应式设计 (Responsive Design) |
hspace, vspace |
img, object |
表现与结构混合 | CSS margin |
|
link, text, alink, vlink |
body |
表现与结构混合 | CSS color 和 :link, :visited, :active 伪类 |
CSS 伪类 (Pseudo-classes) |
noshade |
hr |
表现与结构混合 | CSS border, background-color, height |
|
nowrap |
td, th |
表现与结构混合 | CSS white-space |
|
rules |
table |
表现与结构混合 | CSS border 相关属性 |
|
scrolling |
iframe |
表现与结构混合 | CSS overflow |
|
size |
hr, input |
表现与结构混合 (hr); 有新的替代 (input) |
CSS height (hr); 使用新的 input types |
|
type |
li, ol, ul |
表现与结构混合 | CSS list-style-type |
|
valign |
col, colgroup, tbody, td, tfoot, th, thead, tr |
表现与结构混合 | CSS vertical-align |
|
width (用于布局) |
hr, table, td, th, col, colgroup, iframe, pre |
表现与结构混合 | CSS width |
响应式设计 (Responsive Design) |
background |
body |
表现与结构混合 | CSS background-image |
|
profile |
head |
未被广泛使用，能不明确 | 通常不再需要 | 元数据 (Metadata) |
version |
html |
冗余，由 <!DOCTYPE html> 声明 |
不再需要 | 文档类型声明 (DOCTYPE) |
name (部分元素) |
map, img, object, form, iframe, a |
标准化，使用 id 标识片段 |
使用 id 属性 |
DOM 遍历 |
scheme |
meta |
未被广泛支持和使用 | 依赖其他的元数据方案 | |
archive, classid, codebase, codetype, declare, standby |
object |
用于加载插件，技术过时（如 Java applet） | 使用 data 和 type 属性；现代 Web 技术替代插件 |
可访问性 (Accessibility) |
valuetype, type |
param |
随 object 插件相关属性废弃 |
使用 name 与 value 属性 |
|
charset |
link, a |
可通过 HTTP 响应头提供 | 在被链接的资源中使用 HTTP Content-Type 头 |
HTTP 头 (HTTP Headers) |
rev |
link, a |
语义不明确，使用 rel 即可 |
使用 rel 属性 |
超链接关系 (Link Relations) |
shape, coords |
a |
使链接变得复杂，可访问性差 | 使用 area 元素配合 map 替代 a 元素 |
图像映射 (Image Maps) |
longdesc |
img, iframe |
可访问性差，可用其他方式实现 | 使用 a 元素链接到详细描述页或使用 ARIA |
WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) |
target |
link |
在 link 元素中无意义 |
无需替代 | |
nohref |
area |
冗余 | 无需替代 | |
axis, abbr |
td, th |
为可访问性设计，但未被很好支持 | 使用以明确简洁的文字开头，后跟详述文字；或使用 title 属性 |
可访问性 (Accessibility) |
scope |
td |
不正确的使用（本用于 th） |
正确地在 th 元素中使用 scope 属性 |
表格可访问性 |
headers |
td, th |
为可访问性设计，但复杂且少用 | 简化表格结构或使用 ARIA | |
summary |
table |
为可访问性设计，但可用其他方式 | 使用 <caption> 元素或 ARIA |
|
accesskey |
a, area, button, input, label, legend, textarea |
可访问性实现方式不一致且易冲突 | 谨 慎使用，或使用 JavaScript 增强 | 键盘可访问性 (Keyboard Accessibility) |
HTML5 新增属性详解
新增全局属性
| 属性 | 描述 | 应用元素 | 专业名词/概念 |
|---|---|---|---|
contenteditable |
使元素内容可编辑 | 所有元素 | 富文本编辑(Rich Text Editing) |
contextmenu |
指定元素的上下文菜单 | 所有元素 | 自定义上下文菜单(Custom Context Menu) |
data-* |
存储自定义数据 | 所有元素 | 数据属性(Data Attributes), DOM数据集(DOM Dataset) |
draggable |
定义元素是否可拖动 | 所有元素 | HTML5拖放API(HTML5 Drag and Drop API) |
dropzone |
定义拖动数据在元素上放置时的处理方式 | 所有元素 | 拖放目标(Drop Target) |
hidden |
隐藏元素 | 所有元素 | 可见性控制(Visibility Control) |
spellcheck |
启用或禁用拼写检查 | 可编辑元素 | 输入验证(Input Validation) |
translate |
定义元素内容是否应被翻译 | 所有元素 | 国际化(i18n), 本地化(Localization) |
表单相关新增属性
| 属性 | 描述 | 应用元素 | 专业名词/概念 |
|---|---|---|---|
autocomplete |
启用或禁用自动完成功能 | form, input |
表单自动填充(Form Autofill) |
autofocus |
页面加载时自动获得焦点 | button, input, select, textarea |
用户体验(UX), 可访问性(Accessibility) |
form |
关联元素与表单 | button, fieldset, input, label, meter, object, output, progress, select, textarea |
表单关联(Form Association) |
formaction |
覆盖表单的action属性 | button, input |
表单提交处理(Form Submission Handling) |
formenctype |
覆盖表单的enctype属性 | button, input |
编码类型(Encoding Type) |
formmethod |
覆盖表单的method属性 | button, input |
HTTP方法(HTTP Methods) |
formnovalidate |
覆盖表单的novalidate属性 | button, input |
表单验证绕过(Form Validation Bypass) |
formtarget |
覆盖表单的target属性 | button, input |
目标窗口(Target Window) |
list |
引用datalist元素 | input |
数据列表(Data List), 自动建议(Auto-suggest) |
maxlength |
定义较大字符数 | input, textarea |
输入限制(Input Constraints) |
min, max |
定义数值范围 | input, meter |
范围约束(Range Constraints) |
multiple |
允许多个值 | input, select |
多值输入(Multiple Values Input) |
novalidate |
提交时不验证表单 | form |
表单验证控制(Form Validation Control) |
pattern |
定义输入模式 | input |
正则表达式验证(Regex Validation) |
placeholder |
提供输入提示 | input, textarea |
占位符文本(Placeholder Text) |
required |
定义必填字段 | input, select, textarea |
表单验证(Form Validation) |
step |
定义数值间隔 | input |
数值步进(Numeric Stepping) |
媒体元素新增属性
| 属性 | 描述 | 应用元素 | 专业名词/概念 |
|---|---|---|---|
autoplay |
自动播放媒体 | audio, video |
媒体自动播放(Media Autoplay) |
controls |
显示控制界面 | audio, video |
媒体控制器(Media Controls) |
crossorigin |
配置CORS请求 | audio, img, link, script, video |
跨域资源共享(CORS) |
loop |
循环播放媒体 | audio, video |
媒体循环播放(Media Looping) |
mediagroup |
将多个媒体元素分组 | audio, video |
媒体同步(Media Synchronization) |
muted |
静音播放 | audio, video |
音频控制(Audio Control) |
preload |
预加载媒体 | audio, video |
资源预加载(Resource Preloading) |
src |
媒体资源地址 | audio, video, track |
资源引用(Resource Reference) |
链接和脚本相关属性
| 属性 | 描述 | 应用元素 | 专业名词/概念 |
|---|---|---|---|
async |
异步执行脚本 | script |
异步加载(Asynchronous Loading) |
defer |
延迟执行脚本 | script |
延迟执行(Deferred Execution) |
sizes |
指定图标大小 | link |
响应式图标(Responsive Icons) |
srcdoc |
嵌入HTML文档 | iframe |
文档嵌入(Document Embedding) |
sandbox |
对iframe内容施加限制 | iframe |
安全沙箱(Security Sandbox) |
seamless |
使iframe看起来像父文档的一部分 | iframe |
无缝集成(Seamless Integration) |
图像和嵌入内容属性
| 属性 | 描述 | 应用元素 | 专业名词/概念 |
|---|---|---|---|
height, width |
定义尺寸 | canvas, embed, iframe, img, input, object, video |
尺寸控制(Dimension Control) |
poster |
视频加载时显示的图像 | video |
视频海报(Video Poster) |
元信息属性
| 属性 | 描述 | 应用元素 | 专业名词/概念 |
|---|---|---|---|
charset |
定义字符编码 | meta |
字符编码(Character Encoding) |
manifest |
指定应用缓存清单 | html |
离线Web应用(Offline Web Applications) |
scoped |
限制样式作用范围 | style |
作用域样式(Scoped Styles) |
本节课程知识要点
-
结构与表现分离：HTML5 废弃大量表现属性是为了推动 Web 开发中内容（HTML）与表现（CSS）的分离。这使代码更清晰、更易维护，并方便了响应式设计的实现。
-
语义化与可访问性：HTML5 推崇使用语义化标签（如
<header>、<nav>、<article>、<section>、<footer>等）和适当的属性来明确表达内容的结构和含义。这不仅有助于搜索引擎优化（SEO），更能显著提升网站对辅助技术用户的可访问性 (Accessibility)。 -
现代 Web 标准：摒弃如
object的相关属性，反映了 Flash、Java Applets 等旧插件的淘汰。现代 Web 应用依赖于 HTML5、CSS3、JavaScript 及各种 API（如 Canvas, Geolocation, Web Storage）。 -
渐进增强：虽然这些属性已废弃，但大多数浏览器仍支持它们以确保旧页面可用。开发新项目时应遵循新标准。
如何移除 HTML 属性
若需动态移除 HTML 元素属性，JavaScript 提供了 removeAttribute() 方法：
// 示例：移除元素的某个属性
document.getElementById("myElement").removeAttribute("align");
对于布尔属性（如 disabled, readonly, required 等），在 HTML5 中通常只需写上属性名即可表示真值，设为空字符串或属性名即可；若要禁用该特性，移除整个属性而非设置其为 false。
理解 HTML5 为何废弃这些属性，能帮助你编写出更符合现代 Web 标准、更语义化、更具可访问性且更易于维护的代码。关键是掌握如何使用 CSS 来处理样式，以及如何利用 HTML5 语义化标签和当前推荐的属性来构建内容结构。
希望这份详细的表格和说明能帮助你更好地掌握 HTML5 的属性变化！
