HTML - 属性

我们已经看到了一些 HTML 标签及其用法，例如标题标签<h1>、<h2>、段落标签<p>和其他标签。到目前为止，我们以最简单的形式使用它们，但大多数 HTML 标签也可以具有属性，它们是额外的信息位。

属性用于定义 HTML 元素的特征，并放置在元素的开始标记内。所有属性都由两部分组成 -名称和值

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

属性名称和属性值不区分大小写。但是，万维网联盟 (W3C) 在其 HTML 4 建议中建议使用小写属性/属性值。

例子

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>Align Attribute  Example</title> 
   </head>
	
   <body> 
      <p align = "left">This is left aligned</p> 
      <p align = "center">This is center aligned</p> 
      <p align = "right">This is right aligned</p> 
   </body>
	
</html>

这将显示以下结果 -

核心属性

可用于大多数 HTML 元素（尽管不是全部）的四个核心属性是 -

ID
标题
班级
风格

ID 属性

HTML 标签的id属性可用于唯一标识 HTML 页面中的任何元素。您可能希望在元素上使用 id 属性有两个主要原因 -

如果元素携带 id 属性作为唯一标识符，则可以仅识别该元素及其内容。
如果网页（或样式表）中有两个同名的元素，则可以使用 id 属性来区分同名的元素。

我们将在单独的教程中讨论样式表。现在，我们使用 id 属性来区分两个段落元素，如下所示。

例子

<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>

标题属性

title属性给出了元素的建议标题。title属性的语法与id属性的解释类似-

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

例子

现场演示

<!DOCTYPE html>
<html>

   <head>
      <title>The title Attribute Example</title>
   </head>
	
   <body>
      <h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
   </body>
	
</html>

这将产生以下结果 -

现在尝试将光标移到“标题标题标记示例”上，您将看到您在代码中使用的任何标题都会作为光标的工具提示出现。

类属性

class属性用于将元素与样式表关联起来，并指定元素的类。当您学习层叠样式表 (CSS) 时，您将了解有关 class 属性的使用的更多信息。所以现在你可以避免它。

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

class = "className1 className2 className3"

样式属性

style 属性允许您在元素内指定级联样式表 (CSS) 规则。

现场演示

<!DOCTYPE html>
<html>

   <head>
      <title>The style Attribute</title>
   </head>
	
   <body>
      <p style = "font-family:arial; color:#FF0000;">Some text...</p>
   </body>
	
</html>

这将产生以下结果 -

此时，我们还没有学习 CSS，所以让我们继续，不要太关心 CSS。在这里，您需要了解什么是 HTML 属性以及在格式化内容时如何使用它们。

国际化属性

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

目录
郎
xml:语言

目录属性

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

价值	意义
左转	从左到右（默认值）
回程	从右到左（对于希伯来语或阿拉伯语等从右到左阅读的语言）

例子

现场演示

<!DOCTYPE html>
<html dir = "rtl">

   <head>
      <title>Display Directions</title>
   </head>
	
   <body>
      This is how IE 5 renders right-to-left directed text.
   </body>
	
</html>

这将产生以下结果 -

当dir属性在 <html> 标记中使用时，它确定文本在整个文档中的呈现方式。当在另一个标签中使用时，它仅控制该标签内容的文本方向。

语言属性

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

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

例子

现场演示

<!DOCTYPE html>
<html lang = "en">

   <head>
      <title>English Language Page</title>
   </head>

   <body>
      This page is using English Language
   </body>

</html>

这将产生以下结果 -

xml:lang 属性

xml :lang属性是lang属性的 XHTML 替代品。xml:lang属性的值应该是 ISO-639 国家/地区代码，如上一节中所述。

通用属性

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

属性	选项	功能
对齐	右、左、中	水平对齐标签
瓦利尼	上、中、下	垂直对齐 HTML 元素内的标签。
背景颜色	数字、十六进制、RGB 值	将背景颜色放置在元素后面
背景	网址	将背景图像放置在元素后面
ID	用户自定义	命名与级联样式表一起使用的元素。
班级	用户自定义	对与级联样式表一起使用的元素进行分类。
宽度	数值	指定表格、图像或表格单元格的宽度。
高度	数值	指定表格、图像或表格单元格的高度。
标题	用户自定义	元素的“弹出”标题。

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