HTML 属性

2025年5月5日 | 阅读 5 分钟

HTML 属性是开标签中的关键字，用于提供关于特定元素的更多详细信息。CSS 用于管理 HTML 元素的行为、外观和功能。每个属性都采用 name="value" 的形式，并且应始终放在开始标签内。几乎每个 HTML 元素都可以使用属性来设置样式、链接、添加工具提示或包含图像和视频。

每个属性都提高了浏览器对元素的解释和呈现的准确性。虽然属性中的名称和值可以根据大小写而有很大差异，但 W3C 建议使用小写字母。通过在多个属性之间插入空格，可以将多个属性放置在一个标签上。

语法

示例

 <!DOCTYPE html>
<html>
<head>
</head>
<body>
    <h1> This is Style attribute</h1>
   <p style="height: 50px; color: blue">It will add style property in element</p>
    <p style="color: red">It will change the colour of content</p>
</body>
</html>

执行代码

输出

说明

我们通过使用标签给上面的段落赋予样式属性。样式属性用于在任何 HTML 标签上设置 CSS 样式。它添加了 50px 的高度并将段落颜色变为蓝色。

我们再次为段落添加了样式属性，将其颜色更改为红色。

注意：下面给出了一些常用的属性，所有属性的完整列表和解释在 HTML 属性列表中给出。

标题属性

标题属性在大多数浏览器中用作文本工具提示。当用户将光标移动到链接或任何文本上时，它会显示其文本。您可以将其与任何文本或链接一起使用，以显示有关该链接或文本的描述。在我们的示例中，我们将其与段落标签和标题标签一起使用。

语法

使用 <h1> 标签

使用 <p> 标签

<p title="This is paragraph tag">Move the cursor over the heading and paragraph, and you will see a description as a tooltip</p>

示例

<!DOCTYPE html>
<html>
  <head>
 </head>
<body>
	
  <h1 title="This is heading tag">Example of title attribute</h1>
  <p title="This is paragraph tag">Move the cursor over the heading and paragraph, and you will see a description as a tooltip </p>

</body>
</html>

执行代码

输出

说明

标题属性通常用于通过工具提示显示附加信息，在不杂乱界面的情况下增强用户指导。

href 属性

href 属性是 <a> 锚标签的主要属性。此属性提供该链接中指定的链接地址。href 属性提供超链接，如果将链接地址留空，则页面将不会重定向。

语法

带链接地址

不带链接地址

输出（描述）

Clickable text that reloads or stays on the current page.

说明

href 属性用于创建链接。缺少链接值将阻止重定向发生。

src、width 和 height 属性

src 属性是 <img> 元素的重要且必需的属性之一。它是需要在浏览器上显示的图像的来源。此属性可以包含同一目录或另一个目录中的图像。图像名称或来源应正确。否则，浏览器将不会显示图像。

图像的大小和替代信息由 width、height 和 alt 给出。

示例 1

注意：上面的示例还具有 height 和 width 属性，它们定义了网页上图像的高度和宽度。

输出（描述）

A 400x600 image of a white peacock with alternate text for screen readers or broken links.

说明

src 标记图像的来源，width 和 height 让您为其指定正确的大小，而 alt 则提供替代文本，以在图像无法正确显示时显示。

示例 2（绝对 URL）

输出

Image from the specified external source (TPointTech in this case)

alt 属性

您可以使用 alt 属性为图像提供替代文本，以防它无法正确加载。一个网站需要对所有人来说都易于导航，并且在 SEO 方面有效。

示例

输出（描述）

If the image doesn't load, the text "Girl with a jacket" is displayed.

说明

如果图像不可用，屏幕阅读器将读取 alt 文本并将其显示出来。它允许所有人理解和使用内容。

HTML 属性中的引号

属性值周围可以包含单引号和双引号。我们建议始终引用您的数据以确保一致性。

带双引号的示例

带单引号的示例

不带引号的示例（不推荐）

输出（描述）

All render correctly, but the last one may break if the value contains spaces.

lang 属性

文档的语言由 <html> 标签内的 lang 属性设置，以便搜索引擎和残障人士工具更轻松地进行处理。

示例

<!DOCTYPE html>
<html lang="en-US">
<body>
  ...
</body>
</html>

输出（描述）

Page with metadata indicating the language is U.S. English.

结论

元素属性改进了网页内容的运行方式、外观以及所有人使用的方式。它们使开发人员能够使用链接 (href)、图片 (src, alt, width, height)、样式元素 (style)、添加工具提示 (title) 并说明内容使用的语言 (lang)。小写名称和值的引号不是强制性的；但是，遵循这些最佳实践有助于实现代码一致性。您需要善用属性，以确保您的网页井然有序、易于访问且具有吸引力。

下一主题HTML 元素

HTML 属性

语法

示例

注意：下面给出了一些常用的属性，所有属性的完整列表和解释在 HTML 属性列表中给出。

标题属性

语法

示例

href 属性

语法

src、width 和 height 属性

注意：上面的示例还具有 height 和 width 属性，它们定义了网页上图像的高度和宽度。

alt 属性

HTML 属性中的引号

lang 属性

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML 属性

语法

示例

注意：下面给出了一些常用的属性，所有属性的完整列表和解释在 HTML 属性列表中给出。

标题属性

语法

示例

href 属性

语法

src、width 和 height 属性

注意：上面的示例还具有 height 和 width 属性，它们定义了网页上图像的高度和宽度。

alt 属性

HTML 属性中的引号

lang 属性

结论

相关帖子

HTML 与 CSS

HTML iframe

HTML 类

HTML JavaScript

HTML 实体

HTML 布局

HTML 有序列表

HTML 文件路径

HTML 图片

HTML 段落

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器