59、HTML 4 属性参考全解析

HTML 4 属性参考全解析

1. HTML 4 标签基础介绍

HTML 4 中有众多标签，每个标签都有其特定的功能：
- 样式与文本标签
- <style> ：为文档定义样式表。
- <sub> ：将文本渲染为下标。
- <sup> ：将文本渲染为上标。
- <tt> ：以固定宽度字体（如电传打字机终端字体）渲染文本。
- <u> ：已弃用，原本用于渲染下划线文本，建议使用 CSS 样式进行字符格式化。
- <var> ：定义指定变量名的文本，例如 <var>filename</var>=c:\someFile 。
- <wbr> ：在 <nobr> 文本行中插入软换行符。
- <xmp> ：已过时，建议使用 <pre> 标签代替， <xmp> 标签以小的固定宽度字体渲染示例文本。
- 表格标签
- <table> ：定义表格。
- <tbody> ：可选标签，用于将表格的主体与表头和页脚部分分隔开。
- <td> ：定义表格单元格，代表表格数据。
- <tfoot> ：可选标签，定义表格的页脚区域。
- <th> ：在表格的 <thead> 部分使用，代替 <td> 标签。
- <thead> ：定义表格的表头部分。
- <tr> ：定义表格行。
- 表单与输入标签
- <textarea> ：定义多行文本输入控件，与 <input type='text'> 标签不同， <textarea> 标签的文本需放在开始和结束标签之间。

2. HTML 4 主要通用属性

HTML 4 规范提供了七个主要属性，几乎适用于所有元素，且对所有元素具有相同的含义：
| 属性 | 描述 |
| ---- | ---- |
| id | 应明确且唯一地标识单个项目。在 HTML 早期版本中，只能链接到锚标签，而在本版本中，可以链接到任何具有唯一 id 的元素。如果要为旧版本浏览器提供内容，应避免将标签的 id 和 name 属性设置为相同的值。 |
| name | 为元素提供标识名称。在 HTML 4 中，建议优先使用 id 属性而非 name 属性。 |
| class | 定义标签的类名，确定哪些 CSS 类样式适用于该标签元素。在开始从脚本对标签元素进行编程之前，此属性不太重要，但之后会变得重要，因为可以通过更改类关联轻松更改标签的外观和感觉。 |
| style | 包含指定该元素样式设置的字符串。 <style> 标签中指定的样式设置称为内联样式，与元素从级联样式表（CSS）继承的样式设置不同。内联样式始终优先于 CSS 样式。 |
| title | 定义当鼠标悬停在元素上时显示的工具提示文本，可以留空该属性。 |
| lang | 定义元素的语言，值为任何有效的语言代码，可在 语言代码列表 中找到。 |
| language | 定义用于处理元素事件的脚本语言，有效值为 VBScript、VBS、JavaScript 和 JScript。 |

3. 其他 HTML 4 属性及适用元素

以下是部分 HTML 4 属性及其适用元素和描述：
| 属性 | 适用元素 | 值或描述 |
| ---- | ---- | ---- |
| abbr | td 和 th | 指定表格标题单元格的缩写。 |
| accept-charset | Form | 包含支持的字符集列表。 |
| accesskey | A 、 area 、 button 、 input 、 label 、 legend 、 textarea | 指定快捷键。 |
| action | form | 指定提交表单数据的 URI。 |
| align | applet (d) 、 caption (d) 、 col 、 colgroup 、 div (d) 、 h1 (d) 、 h2 (d) 、 h3 (d) 、 h4 (d) 、 h5 (d) 、 h6 (d) 、 hr (d) 、 iframe (d) 、 img (d) 、 input (d) 、 legend (d) 、 object (d) 、 p (d) 、 tbody 、 td 、 tfoot 、 th 、 thead 、 tr | 指定对齐方式，在某些情况下，对齐方式可能相对于包含的父标签；在其他情况下，指定标签内内容的对齐方式。 |
| alink (d) | body | 选定链接的颜色。 |
| alt | applet (d) 、 area 、 img 、 input | 包含简短的文本描述，当用户将鼠标悬停在元素上时显示此文本。 |

4. 元素事件相关属性

HTML 4 中有许多与元素事件相关的属性，例如：
- onblur ：当元素失去焦点时触发的事件，适用于 a 、 area 、 button 、 input 、 label 、 select 、 textarea 等元素。
- onchange ：当输入元素的值发生变化时触发的事件，适用于 input 、 select 元素。
- onclick ：当用户点击可见元素时触发的事件，适用于除 applet (d) 、 base 、 basefont (d) 、 bdo 、 br 、 font (d) 、 frame 、 frameset 、 head 、 html 、 iframe 、 isindex (d) 、 meta 、 param 、 script 、 style 等元素外的大多数元素。

5. 流程图展示部分属性逻辑

graph LR
    A[元素] --> B{是否有 id 属性}
    B -- 是 --> C[可唯一标识元素]
    B -- 否 --> D{是否有 name 属性}
    D -- 是 --> E[提供元素标识名称]
    D -- 否 --> F[无明确标识]
    C --> G{是否用于链接}
    G -- 是 --> H[可创建链接到该元素]
    G -- 否 --> I[仅作标识]

通过以上内容，我们对 HTML 4 的标签和属性有了较为全面的了解。在实际开发中，需要根据具体需求选择合适的标签和属性，同时要注意弃用属性的使用，尽量采用推荐的方式进行页面设计和开发。

HTML 4 属性参考全解析

6. 更多 HTML 4 属性详解

除了前面介绍的属性，HTML 4 还有很多其他属性，下面继续详细介绍：
| 属性 | 适用元素 | 值或描述 |
| ---- | ---- | ---- |
| archive | applet (d) 、 object | 指定存档位置列表。 |
| axis | td 、 th | 包含逗号分隔的相关标题列表。 |
| background (d) | body | 为文档指定平铺背景图像。 |
| bgcolor (d) | body 、 table 、 td 、 th 、 tr | 指定元素的背景颜色。 |
| border (d) | img 、 object 、 table | 指定元素边框的宽度。 |
| cellpadding | table | 指定内容外边缘与表格单元格边框内边缘之间的空白。 |
| cellspacing | table | 指定表格单元格之间的间距。 |
| char | col 、 colgroup 、 tbody 、 td 、 tfoot 、 th 、 thead 、 tr | 指定控制对齐的字符，与 align='char' 属性结合使用。例如，如果指定小数点为对齐字符，数字应按小数点对齐。 |
| charoff | col 、 colgroup 、 tbody 、 td 、 tfoot 、 th 、 thead 、 tr | 对齐字符相对于包含元素边距的偏移量。 |
| charset | a 、 link 、 script | 指定锚点、链接或脚本中指定内容的字符编码。 |
| checked | input | 控制复选框或单选按钮是否显示为选中状态。 |
| cite | blockquote 、 del 、 ins | 引用或块引用的源的 URL。对于删除或插入的文本，此属性说明更改的原因。 |
| class | 除 base 、 basefont (d) 、 head 、 html 、 meta 、 param 、 script 、 style 、 title 外的所有元素 | 元素所属类的空格分隔列表。 |
| classid | object | 指定类实现的 URL。 |
| clear (d) | br | 指定 <br> 标签后行的起始位置，在 HTML 4 中建议使用样式表和类来实现此行为。 |
| code | applet (d) | 指定小程序类文件的路径。 |
| codebase | applet (d) 、 object | 确定小程序对象的基本 URI。指定代码库后，可以相对于代码库 URI 指定所有后续 URI。 |
| codetype | object | 指定 <object> 的内容类型。 |
| color (d) | basefont (d) 、 font (d) | 确定文本颜色，若要更改其他元素的颜色，建议使用 style 属性。 |
| cols | frameset 、 textarea | 对于 <frameset> 标签，以像素为单位指定框架集的宽度；对于 <textarea> 标签，以字符为单位指定文本区域的宽度。 |
| colspan | td 、 th | 控制表格单元格跨列的数量。 |
| compact (d) | dir 、 dl 、 menu 、 ol 、 ul | 减少项目之间的间距。 |
| content | meta | 指定 <meta> 标签的内容。 |
| coords | area | 包含用于客户端图像映射的逗号分隔的坐标（点）列表。 |
| data | object | 包含指定对象数据位置的 URI。 |
| datetime | del 、 ins | 包含内容更改的日期和时间。 |
| defer | script | 用户代理可以推迟脚本的执行。 |
| dir | 除 applet (d) 、 base 、 basefont (d) 、 br 、 frame 、 frameset 、 iframe 、 param 外的所有元素 | 当 Unicode 中缺少方向信息时，指定文本的方向。对于 <bdo> 标签， dir= 属性会覆盖 Unicode 方向性。 |
| disabled | button 、 input 、 optgroup 、 option 、 select 、 textarea | 指定输入控件不能获得焦点，不生成事件，并从控件选项卡顺序中移除。 |
| enctype | form | 指定表单提交到服务器的内容类型，默认值为 application/x-www-form-urlencoded 。对于文件上传（ input type=file ），使用值 multipart/form-data 。 |
| face (d) | basefont (d) 、 font (d) | 指定字体名称，或可选的以逗号分隔的替代字体名称列表。 |
| for | label | 确定标签所属的字段。 |
| frame | table | 控制浏览器应渲染表格边框的哪些部分。 |
| frameborder | frame 、 iframe | 指定浏览器是否应在一个边框和另一个边框之间渲染分隔符（通常为一个像素）。 |
| headers | td 、 th | 包含逗号分隔的列标题列表，使用此属性可使非可视化浏览器（如盲人语音浏览器）能够提供有关表格内容的信息。 |
| height | applet (d) 、 iframe 、 img 、 object 、 td (d) 、 th (d) | 以像素为单位指定元素/对象的高度。 |
| href | a 、 area 、 base 、 link | 包含指定内容源（ base ）或目标（ a 、 area 、 link ）的 URL。 |
| hreflang | a 、 link | 包含 href 属性指定的目标语言的语言代码。 |
| hspace (d) | applet (d) 、 img 、 object | 确定元素周围添加的水平空格量。 |
| http-equiv | meta | HTTP 响应头名称。 |
| id | 除 base 、 head 、 html 、 meta 、 script 、 style 、 title 外的所有元素 | 为元素指定唯一 ID。 |
| ismap | img 、 input | 指定服务器端图像映射，此属性无值。 |
| lang | 除 applet (d) 、 base 、 basefont (d) 、 br 、 frame 、 frameset 、 iframe 、 param 外的所有元素 | 包含元素的语言代码。 |
| language (d) | script | 包含脚本语言名称，建议使用 <meta http-equiv='Content-Script-Type' content='VBScript|VBS|JScript|JavaScript'> 标签代替，尽管此属性已弃用，但在 Web 上仍普遍使用。 |
| link (d) | body | 指定链接的初始颜色，即访问前的颜色。 |
| longdesc | img 、 frame 、 iframe | 指定长描述的链接，短描述使用 alt 属性。 |
| marginheight | frame 、 iframe | 以像素为单位确定顶部和底部内部边距高度。 |
| marginwidth | frame 、 iframe | 以像素为单位确定左侧和右侧内部边距宽度。 |
| maxlength | input | 指定输入字段允许的最大字符数。 |
| media | link | 包含应渲染内容的媒体的逗号分隔列表，可能的值为 screen 、 tty 、 tv 、 projection 、 handheld 、 print 、 braille 、 aural 和 all ，默认值为 screen 。 |
| method | form | 指定提交表单使用的 HTTP 方法，值为 get 和 post ，遗憾的是，默认值为 get ，会将表单内容附加到 URL 上，使其可见。 |
| multiple | select | 指定用户可以在选择列表中选择多个值，此属性无值。 |
| name | a 、 applet (d) 、 button 、 form 、 frame 、 iframe 、 img 、 input 、 map 、 meta 、 object 、 param 、 select 、 textarea | 提供识别元素的方法。 |
| nohref | area | 指定图像映射上的区域没有目标 URL。 |
| noresize | frame | 确定用户是否可以调整框架大小。 |
| noshade (d) | hr | 指定扁平规则而非凸起规则。 |
| nowrap (d) | td 、 th | 禁用单元格内的自动文本换行。 |
| object (d) | applet (d) | 序列化小程序代码的 URI。 |
| onblur | a 、 area 、 button 、 input 、 label 、 select 、 textarea | 当元素失去焦点时触发的事件。 |
| onchange | input 、 select | 当输入元素的值发生变化时触发的事件。 |
| onclick | 除 applet (d) 、 base 、 basefont (d) 、 bdo 、 br 、 font (d) 、 frame 、 frameset 、 head 、 html 、 iframe 、 isindex (d) 、 meta 、 param 、 script 、 style 外的所有元素 | 当用户点击可见元素时触发的事件。 |
| ondblclick | 除 applet (d) 、 base 、 basefont (d) 、 bdo 、 br 、 font (d) 、 frame 、 frameset 、 head 、 html 、 iframe 、 isindex (d) 、 meta 、 param 、 script 、 style 外的所有元素 | 当用户双击可见元素时触发的事件。 |
| onfocus | a 、 area 、 button 、 input 、 label 、 select | 当元素获得焦点时触发的事件。 |
| onkeydown | 除 applet (d) 、 base 、 basefont (d) 、 bdo 、 br 、 font (d) 、 frame 、 frameset 、 head 、 html 、 iframe 、 isindex (d) 、 meta 、 param 、 script 、 style 外的所有元素 | 当用户在元素具有焦点时按下键时触发的事件。 |
| onkeypress | 除 applet (d) 、 base 、 basefont (d) 、 bdo 、 br 、 font (d) 、 frame 、 frameset 、 head 、 html 、 iframe 、 isindex (d) 、 meta 、 param 、 script 、 style 外的所有元素 | 当用户在元素具有焦点时按下并释放键时触发的事件。 |
| onkeyup | 除 applet (d) 、 base 、 basefont (d) 、 bdo 、 br 、 font (d) 、 frame 、 frameset 、 head 、 html 、 iframe 、 isindex (d) 、 meta 、 param 、 script 、 style 外的所有元素 | 当用户在元素具有焦点时释放按下的键时触发的事件。 |
| onload | frameset 、 body | 对于 <frameset> 标签，当浏览器加载所有框架时触发；对于 <body> 标签，当浏览器加载文档时触发。 |
| onmousedown | 除 applet (d) 、 base 、 basefont (d) 、 bdo 、 br 、 font (d) 、 frame 、 frameset 、 head 、 html 、 iframe 、 isindex (d) 、 meta 、 param 、 script 、 style 外的所有元素 | 当用户在鼠标指针位于可见元素上时按下鼠标按钮时触发的事件。 |
| onmousemove | 除 applet (d) 、 base 、 basefont (d) 、 bdo 、 br 、 font (d) 、 frame 、 frameset 、 head 、 html 、 iframe 、 isindex (d) 、 meta 、 param 、 script 、 style 外的所有元素 | 当用户在由可见元素定义的屏幕区域上移动鼠标指针时触发的事件。 |
| onmouseout | 除 applet (d) 、 base 、 basefont (d) 、 bdo 、 br 、 font (d) 、 frame 、 frameset 、 head 、 html 、 iframe 、 isindex (d) 、 meta 、 param 、 script 、 style 外的所有元素 | 当用户将鼠标指针移出由可见元素定义的区域时触发的事件。 |
| onmouseover | 除 applet (d) 、 base 、 basefont (d) 、 bdo 、 br 、 font (d) 、 frame 、 frameset 、 head 、 html 、 iframe 、 isindex (d) 、 meta 、 param 、 script 、 style 外的所有元素 | 当用户将鼠标指针移入由可见元素定义的区域时触发的事件。 |
| onmouseup | 除 applet (d) 、 base 、 basefont (d) 、 bdo 、 br 、 font (d) 、 frame 、 frameset 、 head 、 html 、 iframe 、 isindex (d) 、 meta 、 param 、 script 、 style 外的所有元素 | 当用户在鼠标指针位于可视元素上时释放按下的鼠标按钮时触发的事件。 |
| onreset | form | 当用户按下重置按钮（ input type=reset ）时触发的事件。 |
| onselect | input 、 textarea | 当用户选择一些文本时触发的事件。 |
| onsubmit | form | 当用户提交表单时触发的事件。 |
| onunload | frame | 当浏览器移除所有框架（对于 <frameset> 标签）或文档（对于 <body> 标签）时触发的事件。 |
| profile | head | 包含包含文档元信息的 URI 的逗号分隔列表。 |
| prompt (d) | isindex (d) | 包含输入提示消息。 |
| readonly | input 、 textarea | 指定输入字段不可编辑。 |
| rel | a 、 link | 指定此文档与前向链接之间的关系。 |
| rev | a 、 link | 指定此文档与反向链接之间的关系。 |
| rows | frameset 、 textarea | 对于 <frameset> 标签，属性值是逗号分隔的值列表，指定由 <frameset> 标签定义的框架的宽度；对于 <textarea> 标签， rows 属性值以字符为单位指定文本区域的宽度。 |
| rowspan | td 、 th | 控制表格单元格跨行的数量。 |
| rules | table | 控制表格是否包含内部网格线（规则）。 |
| scheme | meta | 指定如何解释标签内容。 |
| scope | td 、 th | 指定表格标题适用的列或行，有效值为 row 、 col 、 rowgroup 和 colgroup 。 |
| scrolling | frame 、 iframe | 确定框架或内联框架是否显示滚动条。 |
| selected | option | 存在时，此属性控制选择列表中的项目是否最初显示为选中状态，该属性无值。 |
| shape | a 、 area | 指定服务器端或客户端图像映射区域的形状，可能的值为 rect 、 circle 、 poly 和 default 。 |
| size | hr (d) 、 font (d) 、 input 、 select 、 basefont (d) | 此属性根据标签具有不同的含义。对于 <hr> 标签，控制规则的宽度；对于 <font> 标签，控制文本的相对大小，默认值为 3；对于 <input> 标签，每个 <input> 标签对该属性的指定不同；对于 <select> 标签，控制控件中可见行的数量；对于 <basefont> 标签，控制文档中使用的基本字体的大小。 |
| span | col 、 colgroup | 对于 <col> 标签，指定列组中的列数；对于 <colgroup> 标签，确定组中的默认列数。 |
| src | frame 、 iframe 、 img 、 input 、 script | 对于 <script> 标签，指定外部脚本的 URI；对于 <frame> 和 <iframe> 标签，指定获取文档内容的 URI；对于 <input> 和 <img> 标签，指定关联图像的 URI。 |
| standby | object | 指定在浏览器加载内容时显示的文本消息。 |
| start (d) | ol | 控制编号项目的起始编号。 |
| style | 除 base 、 basefont (d) 、 head 、 html 、 meta 、 param 、 script 、 style 外的所有元素 | 包含元素的样式设置。 |
| summary | table | 包含表格内容的简短描述，用于非可视化渲染，如音频浏览器或盲文阅读器。 |
| tabindex | a 、 area 、 button 、 input 、 object 、 select 、 textarea | 控制元素在文档选项卡顺序序列中的位置。 |
| target | a 、 area 、 base 、 form 、 link | 指定渲染内容的框架。 |
| text (d) | body | 控制浏览器渲染文档文本的默认颜色。 |
| title | 除 base 、 basefont (d) 、 head 、 html 、 meta 、 param 、 script 、 title 外的所有元素 | 对于大多数浏览器，控制当鼠标悬停在元素上时显示的工具提示文本。某些浏览器在等待内容（如图像）加载时渲染此文本。 |
| type | a 、 button 、 li (d) 、 link 、 object 、 ol (d) 、 param 、 script 、 style 、 input 、 ul (d) | 对于 <li> 、 <ol> 和 <ul> 标签，控制列表项的样式；对于 <button> 标签，指定按钮的类型： button 、 submit 或 reset ；对于 <a> 、 <link> 、 <object> 、 <param> 、 <script> 和 <style> 标签，值为引用内容或项目的 MIME 类型；对于脚本标签，使用包含脚本的 MIME 类型，例如 text/javascript 或 text/vbscript ；对于 <input> 标签，控制控件的类型，如 button 、 text 、 password 等。 |
| usemap | img 、 input 、 object | 指定与元素关联的命名图像映射。 |
| valign | col 、 colgroup 、 tbody 、 td 、 tfoot 、 th 、 thead 、 tr | 确定标签内容的垂直对齐方式。 |
| value | button 、 input 、 li (d) 、 option 、 param | 对于除 <li> 标签外的所有适用标签， value 属性指定初始显示的值以及用户提交包含表单时发送到服务器的值。对于有序列表中的 <li> 标签， value 属性覆盖默认编号。 |
| valuetype | param | 指定如何解释元素的 value 参数。 |
| version (d) | html | 指定 HTML 版本号。 |
| vlink (d) | body | 指定已访问链接的颜色。 |
| vspace (d) | applet (d) 、 img 、 object | 确定元素周围添加的垂直空格量。 |
| width | applet (d) 、 col 、 colgroup 、 hr (d) 、 iframe 、 img 、 object 、 pre 、 table 、 td (d) 、 th (d) | 指定元素的宽度。 |

7. 部分属性的使用示例

下面通过一些示例来展示部分属性的使用：

<!DOCTYPE html>
<html>

<head>
    <title>HTML 4 属性示例</title>
</head>

<body>
    <form action="submit.php" method="post">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" maxlength="20" required>
        <br>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" minlength="6" required>
        <br>
        <input type="submit" value="提交">
    </form>
    <table border="1" cellpadding="5" cellspacing="0">
        <thead>
            <tr>
                <th abbr="Name">姓名</th>
                <th abbr="Age">年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>25</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>30</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

8. 流程图展示表单提交逻辑

graph LR
    A[用户填写表单] --> B{点击提交按钮}
    B -- 是 --> C{表单数据验证}
    C -- 通过 --> D[表单数据提交到服务器]
    C -- 未通过 --> E[提示用户重新填写]
    D --> F[服务器处理数据]
    F --> G[返回处理结果]
    G --> H{结果是否成功}
    H -- 是 --> I[显示成功信息]
    H -- 否 --> J[显示错误信息]

综上所述，HTML 4 的标签和属性丰富多样，涵盖了页面结构、样式、交互等多个方面。在实际开发中，要充分利用这些属性来实现所需的功能和效果，同时要遵循规范，减少弃用属性的使用，以确保页面的兼容性和可维护性。