当前位置：首页 > news >正文

Web前端：HTML篇（二）元素属性

news 来源：原创 2024/9/17 3:46:03

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>	指示文本是否应该换行。