属性（Attributes）

优质

小牛编辑

122浏览

2023-12-01

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

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

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

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

例子 (Example)

<!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
Title
Class
Style

Id属性

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

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

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

Example

<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属性的解释类似 -

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

Example

<!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元素。

dir
lang
xml:lang

dir属性

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

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

Example

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

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

lang属性

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

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

Example

<!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属性是xml:lang属性的XHTML替换。 xml:lang属性的值应为ISO-639国家/地区代码，如上一节所述。

通用属性

这是一个可以与许多HTML标记一起使用的其他属性的表。

属性	选项	功能
align	right, left, center	水平对齐标签
valign	top, middle, bottom	垂直对齐HTML元素中的标记。
bgcolor	数字，十六进制，RGB值	在元素后面放置背景颜色
background	URL	在元素后面放置背景图像
id	User Defined	命名用于层叠样式表的元素。
class	User Defined	对用于层叠样式表的元素进行分类。
width	Numeric Value	指定表，图像或表格单元格的宽度。
height	Numeric Value	指定表，图像或表格单元格的高度。
title	User Defined	“弹出”元素的标题。

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