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属性可以采用两个值之一,如下表所示:

ValueMeaning
ltrLeft to right (the default value)
rtlRight 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水平对齐标签
valigntop,middle,bottom垂直对齐HTML元素中的标记.
bgcolor数字,十六进制,RGB值在元素后面放置背景颜色
backgroundURL在元素后面放置背景图像
id用户定义命名一个用于层叠样式表的元素.
class用户定义对用于层叠样式表的元素进行分类.
width数值指定表格,图像或表格单元格的宽度.
height数值指定表格,图像或表格单元格的高度.
title用户定义元素的"弹出"标题.

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