HTML - 属性

HTML 属性用于提供有关 HTML 元素的附加信息，属性是保留关键字。我们已经看到了很少的 HTML 标签及其用法，如 <h1>、<h2>、<p>、<br>、<hr> 和其他标签。到目前为止，我们以最简单的形式使用它们，但大多数 HTML 标签也可以具有属性，这些属性是额外的信息位。

属性用于定义 HTML 元素的特征，并放置在元素的开始标记内。所有属性都由键和值对组成。

正如我们所看到的，属性在标签中使用了名称和属性值，但有些属性不需要任何值，如disabled、required等。

属性名字：它包含我们想要设置的属性。例如，示例中的段落 <p> 元素带有一个名为 align 的属性，您可以使用该属性来指示页面上段落的对齐方式。
属性值：它包含我们想要设置的属性值的值，并始终放在引号中。以下示例显示了 align 属性的三个可能值：left、center 和 right。

属性名称和属性值不区分大小写。但是，万维网联合会（W3C）在其 HTML 建议中建议使用小写的属性/属性值。

HTML 属性

属性有一些规则和特征，例如我们应该如何在 HTML 元素或标签上使用属性。

HTML 提供有关元素的其他信息
属性应始终在起始标记中提及。
所有 HTML 元素都可以具有属性，除了少数属性，例如 <head>、<title> 等。
W3C 建议使用小写的属性，并将值保留在引号中。

HTML 属性示例

在下面的示例中，我们将使用属性来定义 <p> 元素的对齐方式，并使用 HTML align 属性。


<!DOCTYPE html>
<html>
<head>
<title>HTML属性示例</title>
</head>
<body>
<p align="left">左对齐</p>
<p align="center">居中对齐</p>
<p align="right">右对齐</p>
</body>
</html>

如上所述，在上面的代码中，我们使用了一个名为 align 的属性，并使用三个不同的 align 属性值来指定 <p> 元素的对齐方式。

HTML 全局属性

全局属性是所有 HTML 元素通用的，可以普遍使用。一些最重要的全局属性包括：

HTML id 属性

HTML 标记的 id 属性可用于唯一标识 HTML 页面中的任何元素。如果网页（或样式表）中有两个同名的元素，则可以使用 id 属性来区分具有相同名称的元素。

我们使用 id 属性来区分两个段落元素，并在 CSS 中使用 id name 设置其样式。


<!DOCTYPE html>
<html>
<head>
<title>HTML id 属性</title>
<style>
#html{
color: red;
}
#html{
color:green;
}
</style>
</head>
<body>
<p id="html">
本段解释了什么是HTML
</p>
<p id="css">
本段解释了什么是CSS
</p>
</body>
</html>

HTML title 属性

title 属性为元素提供建议的标题。title 属性的语法与 id 属性的语法类似。

此属性的行为将取决于携带它的元素，尽管当光标位于元素上或加载元素时，它通常显示为工具提示。


<!DOCTYPE html>
<html>
<head>
<title>HTML title Att属性itle>
</head>
<body>
<h3 title="Hello HTML!">
将鼠标悬停在此处以查看我的标题
</h3>
</body>
</html>

HTML class 属性

class 属性用于将元素与样式表相关联，并指定元素的类。当您学习级联样式表（CSS）时，您将了解有关 class 属性使用的更多信息。

该属性的值是以空格分隔的类名列表。例如


<!DOCTYPE html>
<html>
<head>
<title>HTML class 属性</title>
<style>
.borderStyle{
border: solid black 5px;
}
.colorStyle{
color:red;
}
</style>
</head>
<body>
<p class="borderStyle colorStyle" >
欢迎使用七科普教程。。。
</p>
</body>
</html>

HTML style 属性

style 属性允许您在元素中指定级联样式表（CSS）规则。


<!DOCTYPE html>
<html>
<head>
<title>HTML style 属性</title>
</head>
<body>
<p style="font-family:arial; color:#FF0000;">
欢迎使用启科普教程..
</p>
</body>
</html>

国际化属性

有三个国际化属性，可用于大多数（尽管不是全部）HTML 元素。

HTML dir 属性

dir 属性允许您向浏览器指示文本的流动方向。dir 属性可以采用两个值之一，如下表所示。

值	意义
ltr	从左到右（默认值）。
rtl	从右到左（适用于从右到左阅读的希伯来语或阿拉伯语等语言）。


<!DOCTYPE html>
<html dir="rtl">
<head>
<title>HTML dir 属性</title>
</head>
<body>
这就是在浏览器显示从右到左定向文本的方式。
</body>
</html>

HTML lang 属性

lang 属性允许您指示文档中使用的主要语言，但此属性保留在 HTML 中只是为了向后兼容早期版本的 HTML。此属性已替换为新 XHTML 文档中的 xml：lang 属性。

lang 属性的值是 ISO-639 标准双字符语言代码。查看 HTML 语言代码：ISO 639 以获取语言代码的完整列表。


<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML lang 属性</title>
</head> 

<body>
本页为英语
</body> 

</html>

如何使用 HTML 属性？

在任何元素上使用属性时，您应该遵循某些做法，请查看下面提到的方法。


<!-- 好示例 -->
<a href="https://www.qikepu.com/html/html_overview.htm">
HTML 简介
<a>
<!-- 不好的示例 -->
<a href=https://www.qikepu.com/html/html_overview.htm>
HTML 简介
<a>


<!-- 可以使用单引号和双引号 -->
<p title="我们以‘简单易学’而闻名">
七科普教程
</p>
<p title='我们以"简单易学"而闻名'>
七科普教程
</p>

通用属性

下面是一些其他属性的表格，这些属性很容易与许多 HTML 标记一起使用。

属性	选项	功能
align	right, left, center	水平对齐标签
bgcolor	numeric, hexadecimal, RGB values	在元素后面放置背景色
id	User Defined	命名用于级联样式表的元素。
class	User Defined	对元素进行分类以用于级联样式表。
width	Numeric Value	指定表格、图像或表格单元格的宽度。
height	Numeric Value	指定表格、图像或表格单元格的高度。
title	User Defined	要在工具提示中显示的文本。

在继续研究其他 HTML 标签时，我们将看到相关示例。有关 HTML 标签和相关属性的完整列表，请查看 HTML 标签列表和 HTML 属性的参考。

打印本页