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的用法:

标签

用法

链接 (<a> 标签)

为链接提供额外信息,例如说明链接将要带用户前往的内容。

缩写 (<abbr> 标签)

解释缩写或首字母缩略词的完整形式。

图片 (<img> 标签)

为视觉受损的用户提供图片内容的文本描述,通常与 alt 属性一起使用来增强无障碍性。

 

表格单元 (<td> 标签)

为表格中的数据提供额外信息或上下文。

使用示例:

<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>类型,包括textemailhiddennumberpassword等。

<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>

推荐阅读
cjavapy编程之路首页