HTML 属性
属性是 HTML 元素提供的附加信息。
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现,比如:name="value"。
属性实例
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定:
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>原神·启动</title>
</head>
<body>
<a href="https://ys-api.mihoyo.com/event/download_porter/link/ys_cn/official/pc_default">这是一个神秘链接</a>
</body>
</html>
在网页中点击,可以跳转到指定的连接。(下载原神)
HTML 属性常用引用属性值
属性值应该始终被包括在引号内。
双引号是最常用的,不过使用单引号也没有问题。
提示: 在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:
name='John "ShotGun" Nelson'
几个注意点:
- 属性和属性值,尽量小写,本来这样做也方便些。
- class 属性可以多用 class=" " (引号里面可以填入多个class属性)
- id 属性只能单独设置 id=" "(只能填写一个,多个无效)
属性列表:
copy来的,带链接,可以直接跳转到原网页。
属性名 | 元素 | 描述 |
---|---|---|
accept | <form>、<input> | 服务器接受内容(通常是文件类型)的列表。 |
accept-charset | <form> | 支持的字符集列表。 |
accesskey | 全局属性 | 用于激活或聚焦元素的键盘快捷键。 |
action | <form> | 处理通过表单提交的信息的程序的 URI。 |
align 已弃用 | <caption>、<col>、<colgroup>、<hr>、<iframe>、<img>、<table>、<tbody>、<td>、<tfoot>、<th>、<thead>、<tr> | 指定元素水平对齐的方式。 |
allow | <iframe> | 指定 iframe 的特性策略。 |
alt | <area>、<img>、<input> | 在图片无法显示时展示的替代文本。 |
async | <script> | 异步执行该脚本。 |
autocapitalize | 全局属性 | 设置用户输入时是否自动大写。 |
autocomplete | <form>、<input>、<select>、<textarea> | 指示浏览器是否可以自动填充表单中的值。 |
autofocus | <button>、<input>、<select>、<textarea> | 页面加载后,该元素应自动获得焦点。 |
autoplay | <audio>、<video> | 音视频应该自动播放。 |
background | <body>、<table>、<td>、<th> | 指定图像文件的 URL。 备注:虽然浏览器和电子邮件客户端可能仍然支持此属性,但它已经过时。请使用 CSS background-image 代替。 |
bgcolor | <body>、<col>、<colgroup>、<marquee>、<table>、<tbody>、<tfoot>、<td>、<th>、<tr> | 元素的背景颜色。 备注:这是遗留属性。请使用 CSS background-color 属性代替。 |
border | <img>、<object>、<table> | 边框宽度。 备注:这是遗留属性。请使用 CSS border 属性代替。 |
buffered | <audio>、<video> | 包含已缓存媒体的时间范围。 |
capture | <input> | 来自 Media Capture 规范,指定一个新文件是否可以被捕获。 |
charset | <meta> | 申明该页面或脚本的字符编码。 |
checked | <input> | 指出该元素在页面加载后是否处于选中状态。 |
cite | <blockquote>、<del>、<ins>、<q> | 包含一个指明引用或修改的来源的 URI。 |
class | 全局属性 | 通常和 CSS 配合使用,使用常用属性来为元素添加样式。 |
color | <font>、<hr> | 该属性为文本设置颜色,可以使用具名颜色或十六进制 #RRGGBB 格式的颜色。 备注:这是遗留属性。请使用 CSS color 属性代替。 |
cols | <textarea> | 定义一个 textarea 中包含多少列。 |
colspan | <td>、<th> | colspan 属性定义了一个单元格跨越的列数。 |
content | <meta> | 与 http-equiv 或 name 关联的值,取决于上下文。 |
contenteditable | 全局属性 | 指示该元素的内容是否可以被编辑。 |
controls | <audio>、<video> | 指示浏览器是否应该向用户显示播放控件。 |
coords | <area> | 指定热点区域坐标的一组值。 |
crossorigin | <audio>、<img>、<link>、<script>、<video> | 元素如何处理跨源请求。 |
csp 实验性 | <iframe> | 指定嵌入文档必须同意对自身强制执行的内容安全策略。 |
data | <object> | 指定资源的 URL。 |
data-* | 全局属性 | 允许你对一个 HTML 元素附加自定义的属性。 |
datetime | <del>、<ins>、<time> | 指示与元素关联的日期和时间。 |
decoding | <img> | 指示解码图像的首选方法。 |
default | <track> | 指示应启用该轨道,除非与用户首选项指示的不同。 |
defer | <script> | 指示该脚本应在页面解析后执行。 |
dir | 全局属性 | 定义文本的方向。允许的值有 ltr(从左到右)或 rtl(从右到左)。 |
dirname | <input>、<textarea> | |
disabled | <button>、<fieldset>、<input>、<optgroup>、<option>、<select>、<textarea> | 指示用户是否可以与该元素交互。 |
download | <a>、<area> | 指示用于下载资源的超链接。 |
draggable | 全局属性 | 定义元素是否可以被拖拽。 |
enctype | <form> | 定义 method 为 POST 时,表单数据的内容类型。 |
enterkeyhint 实验性 | <textarea>, contenteditable | enterkeyhint 指定在虚拟键盘上显示的回车键的动作标签(或图标)。该属性可用于表单控件(例如 textarea 元素的值),或者在可编辑宿主中的元素(例如使用 contenteditable 属性)。 |
for | <label>、<output> | 描述与当前元素绑定的元素。 |
form | <button>、<fieldset>、<input>、<label>、<meter>、<object>、<output>、<progress>、<select>、<textarea> | 指示该元素所属的表单。 |
formaction | <input>、<button> | 指示元素的动作,覆盖 <form> 中定义的动作。 |
formenctype | <button>、<input> | 如果按钮/输入是提交按钮(例如,type="submit" ),该属性用于设置表单提交时要使用的编码类型。如果指定了该属性,则会覆盖按钮所属的 form 的 enctype 属性。 |
formmethod | <button>、<input> | 如果按钮/输入是提交按钮(例如,type="submit" ),该属性用于设置表单提交时要使用的提交方法(GET 、POST 等)。如果指定了该属性,则会覆盖按钮所属的 form 的 method 属性。 |
formnovalidate | <button>、<input> | 如果按钮/输入是提交按钮(例如,type="submit" ),该布尔属性用于指示在提交表单时不进行验证。如果指定了该属性,则会覆盖按钮所属的 form 的 novalidate 属性。 |
formtarget | <button>、<input> | 如果按钮/输入是提交按钮(例如,type="submit" ),该属性用于指定提交表单后接收到的响应在哪个浏览上下文(例如,标签页、窗口或内联框架)中显示。如果指定了该属性,则会覆盖按钮所属的 form 的 target 属性。 |
headers | <td>、<th> | 应用于 <th> 元素的 ID。 |
height | <canvas>、<embed>、<iframe>、<img>、<input>、<object>、<video> | 指定此处列出的元素的高度。对于其他所有元素,请使用 CSS height 属性。 备注:对于某些实例,例如 <div>,这是一个遗留属性,对于这些实例应使用 CSS height 属性代替。 |
hidden | 全局属性 | 阻止对给定元素的渲染,同时保持子元素(例如脚本元素)处于激活状态。 |
high | <meter> | 指示高值区间的下限值。 |
href | <a>、<area>、<base>、<link> | 关联资源的 URL。 |
hreflang | <a>、<link> | 指定关联资源的语言。 |
http-equiv | <meta> | 定义编译程序指令(pragma directive)。 |
id | 全局属性 | 通常与 CSS 一起使用,以为特定元素添加样式。此属性的值必须是唯一的。 |
integrity | <link>、<script> | 指定子资源完整性值,允许浏览器验证它们获取的内容。 |
intrinsicsize 已弃用 | <img> | 此属性指示浏览器忽略图像的实际的固有大小,并假设它是属性中指定的大小。 |
inputmode | <textarea>, contenteditable | 提供一个提示,指示用户在编辑元素或其内容时可能输入的数据类型。该属性可用于表单控件(例如 textarea 元素的值),或者在可编辑宿主中的元素(例如使用了 contenteditable 属性的)。 |
ismap | <img> | 指示图像是服务器端图像映射(image map)的一部分。 |
itemprop | 全局属性 | |
kind | <track> | 指定文本字幕的类型。 |
label | <optgroup>、<option>、<track> | 为元素指定用户可读的标题。 |
lang | 全局属性 | 定义元素中使用的语言。 |
language 已弃用 | <script> | 定义元素中使用的脚本语言。 |
loading 实验性 | <img>、<iframe> | 指示元素是否应该被懒加载(loading="lazy" )或立即加载(loading="eager" )。 |
list | <input> | 指示建议用户输入的预定义选项列表。 |
loop | <audio>、<marquee>、<video> | 指示媒体在播放结束时是否应从头开始播放。 |
low | <meter> | 指示低值区间的上限值。 |
max | <input>、<meter>、<progress> | 指示允许的最大值。 |
maxlength | <input>、<textarea> | 定义元素中允许的最大字符数。 |
minlength | <input>、<textarea> | 定义元素中允许的最小字符数。 |
media | <a>、<area>、<link>、<source>、<style> | 指定链接资源所设计的媒体的提示。 |
method | <form> | POST . 定义用于提交表单的 HTTP 方法。可以是 GET (默认)或 POST 。 |
min | <input>、<meter> | 指示允许的最小值。 |
multiple | <input>、<select> | 指示是否可以在 email 或 file 类型的输入中输入多个值。 |
muted | <audio>、<video> | 指示页面加载时音频是否会被静音。 |
name | <button>、<form>、<fieldset>、<iframe>、<input>、<object>、<output>、<select>、<textarea>、<map>、<meta>、<param> | 元素的名称。例如,用于服务器标识表单提交中的字段。 |
novalidate | <form> | 此属性指示在提交表单时不应验证表单。 |
open | <details>、<dialog> | 指示内容目前是否可见(若用于 <details> 元素)或对话框是否处于活动状态且可以与之交互(若用于 <dialog> 元素)。 |
optimum | <meter> | 指示最佳数值。 |
pattern | <input> | 定义用于验证元素值的正则表达式。 |
ping | <a>、<area> | ping 属性指定一个用空格分隔的 URL 列表,以便在用户访问超链接时通知这些 URL。 |
placeholder | <input>、<textarea> | 提供用于告诉用户可以在字段中输入什么的提示。 |
playsinline | <video> | 布尔属性,指示视频是否要“内嵌”播放;也就是说,在元素的播放区域内播放。请注意,该属性的缺失并不意味着视频将始终以全屏模式播放。 |
poster | <video> | 用于指示在用户播放或搜索之前要显示的海报帧的 URL。 |
preload | <audio>、<video> | 指示是否应预加载整个资源、部分资源或者不预加载。 |
readonly | <input>、<textarea> | 指示元素是否可以被编辑。 |
referrerpolicy | <a>、<area>、<iframe>、<img>、<link>、<script> | 指定在获取资源时发送哪个引荐来源(referrer)。 |
rel | <a>、<area>、<link> | 指示目标对象与链接对象的关系。 |
required | <input>、<select>、<textarea> | 指示是否必须填写此元素。 |
reversed | <ol> | 指示列表是否应以降序而不是升序显示。 |
role | 全局属性 | 定义元素的显式角色,供辅助技术使用。 |
rows | <textarea> | 定义文本区域的行数。 |
rowspan | <td>、<th> | 定义表格单元格应跨越的行数。 |
sandbox | <iframe> | 阻止在 iframe 中加载的文档使用某些特性(例如提交表单或打开新窗口)。 |
scope | <th> | 定义表头单元格(在 th 元素中定义)所关联的单元格。 |
scoped 非标准 已弃用 | <style> | |
selected | <option> | 定义页面加载时将被选中的值。 |
shape | <a>、<area> | |
size | <input>、<select> | 定义元素的宽度(以像素为单位)。如果元素的 type 属性是 text 或 password ,则它是字符数。 |
sizes | <link>、<img>、<source> | |
slot | 全局属性 | 为影子 DOM(shadow DOM)影子树中的插槽分配一个元素。 |
span | <col>、<colgroup> | |
spellcheck | 全局属性 | 指示是否允许对元素进行拼写检查。 |
src | <audio>、<embed>、<iframe>、<img>、<input>、<script>、<source>、<track>、<video> | 可嵌入内容的 URL。 |
srcdoc | <iframe> | |
srclang | <track> | |
srcset | <img>、<source> | 一个或多个响应式图像候选项。 |
start | <ol> | 定义除 1 以外的第一个数字。 |
step | <input> | |
style | 全局属性 | 定义将覆盖先前设置的 CSS 样式。 |
summary 已弃用 | <table> | |
tabindex | 全局属性 | 使用指定的聚焦(tab)顺序覆盖浏览器的默认聚焦顺序。 |
target | <a>、<area>、<base>、<form> | 指定打开链接文档的位置(若用于 <a> 元素)或显示接收到的响应的位置(若用于 <form> 元素)。 |
title | 全局属性 | 在鼠标悬停在元素上时显示的提示文本。 |
translate | 全局属性 | 指定当页面本地化时,元素的属性值和其文本节点后代的值是否应该被翻译,或者是否应该保持不变。 |
type | <button>、<input>、<embed>、<object>、<ol>、<script>、<source>、<style>、<menu>、<link> | 定义元素的类型。 |
usemap | <img>、<input>、<object> | |
value | <button>、<data>、<input>、<li>、<meter>、<option>、<progress>、<param> | 定义页面加载时元素中显示的默认值。 |
width | <canvas>、<embed>、<iframe>、<img>、<input>、<object>、<video> | 确定此处所列元素的宽度。 备注:对于其他所有实例,例如 <div>,这是一个遗留属性,对于这些实例应使用 CSS height 属性代替。 |
wrap | <textarea> | 指示文本是否应该换行。 |