HTML标签属性
HTML（超文本标记语言）标签的属性为网页元素定义了额外的信息，用于调整元素的行为或外观。每个HTML标签都可以有多个属性，但某些属性只适用于特定的标签。属性提供了丰富的方式来控制HTML元素的行为和表示，是Web开发中不可或缺的部分。通过合理使用这些属性，可以提升网页的功能性、可访问性和用户体验。
参考文档：
1、class
定义元素的类名，用于引用CSS样式或JavaScript脚本中的元素。class属性是一种非常重要的属性，它用于指定元素的类名（classname）。通过使用class属性，可以为HTML元素分配一个或多个类名，这些类名之后可以在CSS中被引用来应用样式，或者在JavaScript中用于操作DOM。
1）单个类名
可以为元素分配单个类名，用于指定特定的样式规则。
<div class="container"></div>
2）多个类名
元素可以同时拥有多个类名，各个类名之间用空格分隔。可以将多个CSS规则组合应用到同一个元素上。
<div class="container highlight"></div>
2、id
指定元素的唯一ID，用于CSS样式和JavaScript。id属性是一种全局属性，可以用在任何HTML标签上。id属性为元素指定了一个唯一的标识符（ID）。这个ID在整个文档中必须是唯一的，用于标识单独的元素。
<div id="uniqueId">这里是内容</div>
3、style
直接在元素上应用CSS样式。style属性用于为单个HTML元素指定内联样式。通过使用style属性，可以直接在元素上应用CSS（层叠样式表）规则，而无需使用外部或内部样式表。这种方式允许开发者快速应用样式，但一般推荐使用外部或内部样式表进行样式管理，因为这有助于保持内容与表现的分离，使得样式的维护和管理更加高效。
<p style="color: blue; font-size: 20px;">这是一个带有内联样式的段落。</p>
4、title
提供有关元素的额外信息，通常以工具提示的形式显示。title 属性是一个非常实用的特性，它为元素提供额外的信息。这个属性通常被用于提供关于元素的更多细节，这些细节在用户将鼠标悬停在元素上时显示。title 属性可以被添加到几乎所有的 HTML 标签上，但最常见的用法是在<a>、<abbr>、<iframe>、<img> 和 <link> 等标签中。
title的用法：
|
标签 |
用法 |
|
链接 ( |
为链接提供额外信息，例如说明链接将要带用户前往的内容。 |
|
缩写 ( |
解释缩写或首字母缩略词的完整形式。 |
|
图片 ( |
为视觉受损的用户提供图片内容的文本描述，通常与 alt 属性一起使用来增强无障碍性。 |
|
表格单元 ( |
为表格中的数据提供额外信息或上下文。 |
使用示例：
<a href="https://www.example.com" title="访问示例网站">示例网站</a> <abbr title="Hypertext Markup Language">HTML</abbr> <img src="logo.png" alt="公司logo" title="我们的公司logo"> <td title="这是年度总销售额">¥500,000</td>
5、src
src 属性在HTML中用于指定嵌入内容的来源。它是一个常用于<img>, <script>, <iframe>, <audio>, 和 <video> 标签的属性，用来设置引用外部资源的URL。这个属性的值可以是一个相对URL或一个绝对URL，指向想要嵌入到HTML文档中的资源。
1）<img> 标签
用于在网页中嵌入图像。
<img src="image.jpg" alt="示例图像">
2）<script> 标签
用于在文档中包含JavaScript文件。
<script src="script.js"></script>
3）<iframe> 标签
用于在当前文档中嵌入另一个文档。
<iframe src="page.html"></iframe>
4）<audio> 标签
用于在文档中嵌入音频内容。
<audio src="audio.mp3" controls></audio>
5）<video> 标签
用于在文档中嵌入视频内容。
<video src="video.mp4" controls></video>
6、href
href属性是非常重要的一个属性，它用于指定链接的目的地地址。href这个名字代表“Hypertext Reference”，即超文本引用。最常见的用法是在<a>（锚点）标签中，用来创建一个到另一个页面或页面内特定部分的链接。除了在<a>标签中，href属性也用于其他几个标签，如<link>和<base>标签。
1）<a> 标签中的 href
在<a>标签中，href属性定义了链接的目标URL，用户点击这个链接后会被导向该URL指定的页面。
<a href="https://www.example.com">Visit Example.com</a>
2）<link> 标签中的 href
在<link>标签中，href属性用于指定外部资源的位置，常见于引入CSS文件。
<link rel="stylesheet" href="styles.css">
3）<base> 标签中的 href
在<base>标签中，href属性用于指定网页内所有相对URL的基础URL。<base>标签如果存在，必须位于<head>部分中，而且一个文档中最多只能有一个<base>元素。
<base href="https://www.example.com/">
7、alt
指定图像的替代文本，用于图像无法显示时或辅助技术（如屏幕阅读器）。alt 属性是专门用于 <img> 标签的，其全名为“alternate text”（替代文本）。这个属性的主要作用是提供图像的文本替代，以便在图像无法显示时（比如网速慢或者用户使用的是屏幕阅读器）向用户展示图像的内容或功能。alt 属性对于提高网站的可访问性（Accessibility）至关重要，同时也对搜索引擎优化（SEO）有好处，因为搜索引擎会索引这些替代文本，从而更好地理解网页上的图像内容。
<img src="image.jpg" alt="描述图像的内容">
8、type
type 属性用于指定不同标签的类型，具体表现形式取决于该属性所用的标签。这个属性在多个HTML标签中有着不同的用途和效果。
1）<input>标签的type属性
<input> 标签的 type 属性定义了用户输入数据的类型。
|
Type |
描述 |
|
type="text" |
定义单行的文本输入字段。 |
|
type="password" |
定义密码字段，输入内容被遮蔽。 |
|
type="submit" |
定义提交按钮。 |
|
type="radio" |
定义单选按钮。 |
|
type="checkbox" |
定义复选框。 |
|
type="file" |
定义文件选择字段， 允许用户选择一个或多个文件。 |
|
type="email" |
定义用于电子邮件地址的输入字段。 |
|
type="date" |
定义日期选择器。 |
<input type="text" name="fullname" placeholder="Enter your full name">
2）其他标签的type属性
<button type="submit">Submit</button>
<script type="application/javascript">
console.log("Hello, world!");
</script>
<embed type="image/jpg" src="image.jpg" width="300" height="200">
<object type="application/pdf" data="file.pdf" width="300" height="200"></object>
9、value
定义输入字段或选项的值。value属性是一个常用于表单元素（如<input>、<option>、<button>等）的属性，用于定义元素的值。这个值会在表单提交时被发送到服务器。
1）<input>标签
对于<input>标签，value属性定义了输入字段的初始（默认）值。这适用于多种<input>类型，包括text、email、hidden、number、password等。
<input type="text" name="username" value="用户名称">
2）<button>标签
对于<button>标签，value属性定义了按钮的值。如果表单被提交，这个值将随按钮名称作为一对键/值发送到服务器。
<button type="submit" name="submit_button" value="submit_value">提交</button>
3）<option>标签
在<select>下拉列表中，<option>标签使用value属性来定义每个选项的值。如果选项被选中，该值会在表单提交时发送到服务器。
<select name="country"> <option value="USA">美国</option> <option value="China">中国</option> <option value="UK">英国</option> </select>
4）<input type="checkbox">和<input type="radio">
对于复选框和单选按钮，value属性用于指定当该选项被选中时，提交到服务器的值。
<input type="checkbox" name="interest" value="music"> 音乐</input> <input type="checkbox" name="interest" value="sports"> 运动</input>
10、name
定义表单元素的名称，用于表单数据的提交和处理。在HTML中，name属性是用于指定元素名称的一个属性，它在不同的HTML元素中扮演着不同的角色。name属性主要用于表单元素（如<input>、<textarea>、<select>等），但也可以用于其他元素（如<iframe>、<meta>、<a>等）。在HTML表单中，name属性的值是非常关键的，因为它定义了表单数据在提交到服务器时使用的名称。
<form action="/submit-form" method="post"> <label for="username">Username:</label> <input type="text" id="username" name="username"> <input type="submit" value="Submit"> </form>
11、placeholder
placeholder 属性是HTML中输入字段（如 <input> 或 <textarea>）的一个属性，用于显示在输入字段为空时显示的提示文字。这个提示旨在提供关于该输入字段期望数据类型的指示，或者提示用户应该在字段中输入什么样的信息。当用户开始在输入字段中键入时，placeholder 中的文本会消失。提供输入字段的占位符文本，指示预期的输入类型。
1）<input> 标签使用 placeholder
<input type="text" placeholder="请输入您的姓名">
2）<textarea> 标签使用 placeholder
<textarea placeholder="请在此输入您的消息"></textarea>
12、disabled
HTML标签的 disabled 属性是一个布尔属性，用于指示用户无法与元素交互。当一个元素被设置为 disabled，它不仅会在视觉上变得不可用（通常是灰色的），而且用户也无法与之交互。只需在需要禁用的元素上添加 disabled 属性。不需要为 disabled 属性指定值，因为它是布尔属性。只要存在，无论其值为何，元素都会被禁用。
<input type="text" disabled> <button disabled>点击我</button>
13、checked
指定输入元素应该被预选中。checked 是一个HTML属性，用于指定一个 <input> 元素（如单选按钮或复选框）在页面加载时应该被预选（checked）状态。
<input type="checkbox" name="option" value="value1" checked> <input type="radio" name="group" value="value2" checked>
14、selected
HTML中，selected属性是一个布尔属性，用于指定一个 <option> 元素应该在页面加载时被预先选中。这个属性常用在<select>元素内部的<option>标签上，以定义哪个选项是默认选中的。当<select>元素包含多个<option>子元素时，可以通过在其中一个<option>元素上使用selected属性来指定哪个选项应该被默认选中。
<select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes" selected>Mercedes</option> <option value="audi">Audi</option> </select>
15、readonly
指示输入字段为只读状态，不能修改。readonly 是 HTML 中用于表单元素的一个属性，它指定输入字段是只读的，即用户不能修改字段中的值。但是，与 disabled 属性不同，只读字段的值会在表单提交时被发送到服务器。这个属性常用于需要向用户显示但不允许用户编辑的信息，如一个确认邮箱地址的字段。
1）只读文本框
<input type="text" name="email" value="user@example.com" readonly>
2）只读多行文本框
<textarea name="message" readonly>这是一段示例文本。</textarea>
16、rel
rel属性表示链接关系（relationship），用于定义当前文档与被链接文档之间的关系。这个属性主要用在<a>、<link>和<area>标签中。根据不同的rel值，浏览器和搜索引擎可以以不同的方式处理链接。
1）<a>标签中的rel属性
nofollow：用于告诉搜索引擎不要跟踪或者不给链接传递权重。
<a href="https://example.com" rel="nofollow">链接到example.com</a>
noopener：当链接打开一个新窗口（例如，使用target="_blank"）时，使用rel="noopener"可以防止新页面对原页面的JavaScript环境的访问，增强安全性。
<a href="https://example.com" target="_blank" rel="noopener">打开example.com</a>
noreferrer：与noopener类似，noreferrer还会防止发送HTTP Referer头部，用于增加隐私保护。
<a href="https://example.com" target="_blank" rel="noreferrer">打开example.com</a>
2）<link>标签中的rel属性
stylesheet：最常见的用法，用于链接外部CSS文件。
<link rel="stylesheet" href="styles.css">
icon：定义网站的图标（如浏览器标签页图标）。
<link rel="icon" href="favicon.ico" type="image/x-icon">
canonical：指定当前页面的规范URL，用于告知搜索引擎哪个版本是原始或首选版本，避免内容重复的问题。
<link rel="canonical" href="https://example.com/original-page.html">
alternate：用于指定当前文档的另一个语言版本的链接。
<link rel="alternate" hreflang="en" href="https://example.com/english-version.html"> <link rel="alternate" hreflang="fr" href="https://example.com/french-version.html">
preload：指示浏览器预先加载资源，如字体文件、脚本或样式表，以提高页面加载性能。
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
参考文档：
浙公网安备 33010602011771号