html属性

最新推荐文章于 2026-03-17 07:34:54 发布

原创最新推荐文章于 2026-03-17 07:34:54 发布 · 1.2k 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了HTML属性的基本概念，包括属性的作用、分类和常用的属性，如id、class和src等。属性用于为HTML标签添加额外信息，全局属性适用于多数标签，专用属性针对特定标签，而自定义属性则通过CSS和JavaScript实现样式和行为定制。

1. 什么是属性

属性可以为 HTML 标签提供一些额外信息，或者对 HTML 标签进行修饰。属性需要添加在开始标签中，语法格式为：

attr="value"

attr 表示属性名
value 表示属性值。属性值必须使用双引号" "或者单引号’ '包围。

注意⚠️ ：虽然双引号和单引号都可以包围属性值，但是为了规范和专业，请尽量使用双引号。

一个标签可以没有属性，也可以有一个或者多个属性。

2. 属性分类

HTML 属性有很多，大体可以分为三类：

全局属性：有些属性适用于大部分或者所有 HTML 标签
专用属性：有些属性只适用于一个或者几个特定的 HTML 标签
自定义属性：借助 CSS 和 JavaScript 处理自定义属性，为 HTML 标签添加指定样式或者行为

3. 属性列表

tip: 颜色加深是常用属性

属性名	元素	描述
accept	form， input	服务器接受内容或文件类型的列表
accept-charset	form	支持的字符集列表
accesskey	全局属性	定义键盘快捷键来激活或者聚焦元素
action	form	表单信息提交的 url 地址，指向进行处理的程序
align	applet, caption, col, colgroup, hr, iframe, img, table, tbody, td, tfoot , th, thead, tr	设置元素的水平对齐
allow	iframe	指定iframe的功能策略
alt	applet, area, img, input	在图片无法呈现时的替代文本
async	script	表示该脚本应该异步执行
autocapitalize	全局属性	设置用户输入时输入是否自动大写
autocomplete	form, input, select, textarea	表示该表单中是否可以由浏览器自动完成填值
autofocus	button, input, keygen, select, textarea	在网页加载后该元素应该自动聚焦
background	body, table, td, th	背景综合属性
bgcolor	body, col, colgroup, marquee, table, tbody, tfoot, td, th, tr	元素的背景颜色
border	img, object, table	边框宽度
buffered	audio, video	包含已缓存媒体的时间范围
challenge	keygen	与公钥一起提交的挑战字符
charset	meta, script	申明该页面或脚本的字符编码
checked	command, input	指出该元素在页面加载后是否处于选中状态
cite	blockquote, del, ins, q	包含一个 URI，用来指明引用或修改的源地址
class	全局属性	经常和 CSS 一起配合使用来修饰元素
code	applet	标明被加载和执行的 applet 类文件的 URL
color	basefont, font, hr	属性可用于指定颜色
cols	textarea	定义一个 textarea 中包含多少列
colspan	td, th	该属性一般用在 td 标签中，用于指定一个单元格占用多少列，例如:td colspan='2’表示占用一个单元格占 2 列
content	meta	与http equiv或名称相关联的值，具体取决于上下文
contenteditable	全局属性	指出该元素的内容是否可以被编辑
contextmenu	全局属性	定义将用作元素上下文菜单的menu元素的 ID
controls	audio, video	指出浏览器是否对用户显示播放控制台 (前进或回退)
coords	area	指定热点区域坐标的一组值
data	object	资源 URL 地址
data-*	自定义属性
允许你对于一个 HTML 元素绑定自定义的属性
dir	全局属性	定义文字方向。允许的值为ltr（从左到右）或rtl（从右到左）
disabled	button, command, fieldset, input, keygen, optgroup, option, select, textarea	指示用户是否可以与元素交互
download	a, area	指示超链接用于下载资源
for	label, output	描述与当前元素绑定的元素
form	button, fieldset, input, keygen, label, meter, object, output, progress, select, textarea	指示作为元素所有者的窗体
height	canvas, embed, iframe, img, input, object, video	注意：在某些情况下，例如div，这是一个遗留属性，在这种情况下应该使用 CSS height 属性。在其他情况下，例如canvas，必须使用此属性指定高度
hidden	全局属性	是否隐藏
href	a, area, base, link	关联资源的 URL
id	全局属性	通常与CSS一起使用以设置特定元素的样式。此属性的值必须唯一
itemprop	全局属性
language	script	定义元素中使用的脚本语言
loop	audio, bgsound, marquee, video	指示媒体完成后是否应从头开始播放
max	input, meter, progress	指示允许的最大值
maxlength	input, textarea	定义元素中允许的最大字符数
media	a, area, link, source, style	指定为其设计链接资源的媒体的提示
method	form	定义提交表单时要使用的HTTP方法。可以是GET（默认）或POST
min	input, meter	指示允许的最小值
multiple	input, select	指示是否可以在电子邮件或文件类型的输入中输入多个值
name	button, form, fieldset, iframe, input, keygen, object, output, select, textarea, map, meta, param	元素的名称。例如，服务器用于标识表单提交中的字段
required	input, select, textarea	指示是否需要填写此元素
rows	textarea	定义文本区域中的行数
rowspan	td, th	定义表单元格应跨越的行数
spellcheck	全局属性	指示元素是否允许拼写检查
scope	th
scoped	style
selected	option	定义将在页面加载时选择的值
size	input, select	定义元素的宽度（以像素为单位）。如果元素的类型属性是文本或密码，则为字符数
span	col, colgroup
src	audio, embed, iframe, img, input, script, source, track, video	可嵌入内容的URL
step	input	定义元素中使用的语言
style	全局属性	定义 CSS 样式，这些样式会覆盖之前设置的样式
tabindex	全局属性	替代浏览器的默认选项卡顺序，并遵循指定的顺序
target	a, area, base, form
title	全局属性	当鼠标悬停在元素上面时，提示框显示的文本
type	button, input, command, embed, object, script, source, style, menu	定义元素的类型
value	button, option, input, li, meter, progress, param	定义页面加载时，在元素内显示的默认值
width	canvas, embed, iframe, img, input, object, video	注意：在某些情况下，例如＜div＞，这是一个遗留属性，在这种情况下，应该使用CSS width属性。在其他情况下，如＜canvas＞，必须使用此属性指定宽度
wrap	textarea	指示文本是否应换行

3.1 例举几个常用的属性

id 全局属性

<div id="attr">我是id属性, 一个标签只有一个id</id>

class 全局属性

<div class="attr1 sttr2">我是class属性, 一个标签可以有多个class</id>

src 专用属性

<img src="./web入门.png" alt="在图片无法呈现时的替代文本" width="100" height="50">

data-* 自定义属性

<div data-params="web入门"></div>

标签

#html #前端 #javascript