HTML - 属性 - 前端之家

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

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

名称是您要设置的属性.例如，示例中的段落< 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>

这将显示以下结果 :

Core Attributes

可以在大多数HTML元素（尽管不是全部）上使用的四个核心属性是:

Id
Title
Class
Style

The Id Attribute

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>

The title Attribute

title属性为元素提供建议的标题。它们对title属性的语法类似于对id属性的解释:

该属性的行为将取决于承载该属性的元素，尽管当光标移到该元素上方或加载该元素时，该属性通常显示为工具提示。

示例

<!DOCTYPE html>
<html>

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

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

The class Attribute

class属性用于将元素与样式表相关联，并指定元素的类。当您学习级联样式表（CSS）时，您将学到更多关于class属性的用法。所以现在您可以避免它。

该属性的值也可以是类名称的用空格分隔的列表。例如:

class = "classname1 classname2 classname3"

The style Attribute

样式属性允许您在元素内指定级联样式表（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

The dir 属性

dir属性使您可以向浏览器指示文本应沿哪个方向流动。 dir属性可以采用两个值之一，如下表所示:

Value	Meaning
ltr	Left to right (the default value)
rtl	Right to left (for languages such as Hebrew or Arabic that are read right to left)

示例

<!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属性时，它确定如何在整个文档中显示文本。在另一个标签中使用时，它仅控制该标签内容的文本方向。

The lang Attribute

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标记一起使用.

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

我们将看到相关示例，因为我们将继续研究其他HTML标记.有关HTML标记和相关属性的完整列表，请参阅 HTML标记列表.