Web前端入门第 12 问：HTML 常用属性一览

HELLO，这里是大熊学习前端开发的入门笔记。

本系列笔记基于 windows 系统。

HTML 常用属性大约 70 个，是否又头大了？脸上笑嘻嘻，心里嘛...嘿嘿...

温馨提示：属性不用死记硬背，多练多写慢慢就记住了。

全局常用属性

全局属性为 HTML 元素的通用属性，可以在任何元素上使用。

autofocus：页面加载时自动聚焦到该元素，如：页面加载成功后输入框自动聚焦。

class：为HTML元素指定一个或多个类名，用于CSS和JavaScript。

contenteditable：使元素内容可编辑，如：富文本编辑框。

data-*：用于存储页面或应用程序的私有自定义数据。

draggable：指定元素是否可拖动。

id：定义一个标识符（ID），该标识符在整个文档中必须是唯一的。

lang：指定元素内容的语言。

style：为元素指定内联CSS样式。

tabindex：控制元素的键盘导航顺序，如键盘 Tab 切换顺序。

title：提供元素的额外信息，通常显示为工具提示，如：鼠标悬浮提示文本。

标签常用属性

meta 标签属性：

charset：定义文档的字符编码。

name/content：定义文档的元数据，如描述、关键词等。

link 标签属性：

href：链接到的URL。

rel：定义当前文档与被链接文档的关系。

type：被链接文档的MIME类型。

style 标签属性：

type：样式表的MIME类型，通常为text/css。

media：指定样式表应用于哪些媒体类型。

script 标签属性：

src：外部脚本文件的URL。

type：脚本的MIME类型，通常为text/javascript。

async/defer：控制脚本的加载和执行方式。

blockquote 标签属性：

cite：引用来源的URL。

a 标签属性：

href：链接到的URL。

target：指定链接打开的位置（如_blank为新窗口）。

rel：定义当前文档与被链接文档的关系。

img 标签属性：

src：图像的URL。

alt：图像的替代文本。

width/height：图像的宽度和高度。

video、audio 标签属性：

src：媒体文件的URL。

controls：显示播放控件。

autoplay：自动播放。

loop：循环播放。

muted：静音播放。

poster（仅video）：视频加载前的封面图像。

source 标签属性：

src：媒体文件的URL。

type：媒体文件的MIME类型。

media：指定媒体文件适用的媒体查询。

ol 标签属性：

type：列表项的标记类型（如1、A、i）。

form 标签属性：

action：表单提交到的URL。

method：表单数据的提交方式（如GET、POST）。

enctype：表单数据的编码类型。

target：表单提交后结果显示的位置。

input 标签属性：

type：输入字段的类型（如text、password、submit）。

name：输入字段的名称。

value：输入字段的初始值。

placeholder：输入字段的占位符文本。

required：指定输入字段为必填。

readonly/disabled：使输入字段只读或禁用。

textarea 标签属性：

name：文本区域的名称。

rows/cols：文本区域的行数和列数。

placeholder：文本区域的占位符文本。

required：指定文本区域为必填。

readonly/disabled：使文本区域只读或禁用。

select 标签属性：

name：下拉列表的名称。

multiple：允许选择多个选项。

size：显示的下拉列表项数。

required：指定下拉列表为必填。

disabled：禁用下拉列表。

option 标签属性：

value：选项的值。

selected：预选中该选项。

disabled：禁用该选项。

label 标签属性：

for：与标签关联的输入字段的ID。

button 标签属性：

type：按钮的类型（如button、submit、reset）。

disabled：禁用按钮。

td、th 标签属性：

colspan：跨越多列。

rowspan：跨越多行。

headers：与表头单元格关联的ID列表。

scope（仅th）：定义表头单元格与数据单元格的关系。

canvas 标签属性：

width/height：画布的宽度和高度。

iframe 标签属性：

src：嵌入内容的URL。

width/height：iframe的宽度和高度。

name：iframe的名称，用于目标定位。

sandbox：启用额外的安全限制。

allow：指定允许的功能（如全屏、摄像头访问）。

参考资料：https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey