HTML 属性 - 易学教程，面试笔记经验！

在前面的章节中已经学习了一些HTML 标签及其用法，例如标题标签 <h1>、<h2>、段落标签 <p> 和其他标签。到目前为止，我们以最简单的形式使用它们，但大多数 HTML 标记也可以具有属性，用于定义元素的特征。

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

属性名称是您要设置的属性。例如，示例中的段落<p>元素带有一个名为align的属性，您可以使用该属性来指示段落在页面上的对齐方式。
属性值跟在属性名称后面并用引号将其括起来。下面的示例显示了align 属性的三个可能值:left、center 和right，它表示居左、居中和居右对齐。

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

示例

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

测试一下

核心属性

核心属性可用于大多数 HTML 元素，四个核心属性分别是 -

id
title
class
style

id 属性

HTML 标记的 id 属性可用于唯一标识 HTML 页面中的任何元素。使用 id 属性有以下两个主要原因，它们分别是：

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

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

示例

<p id = "html">这个段落解释什么是HTML</p>
<p id = "css">这个段落解释什么是CSS样式表</p>

title 属性

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

该属性的行为将取决于携带它的元素，我们可以将鼠标移动在相应的元素上则显示title的内容。

示例

<!DOCTYPE html>
<html>

   <head>
      <title>这是title属性的例子</title>
   </head>
	
   <body>
      <h3 title = "Hello HTML!">带有标题标签的例子</h3>
   </body>
	
</html>

测试一下

现在尝试将光标移到"带有标题标签的例子"上，您将可以看到 Hello HTML。

class属性

class属性用于关联元素带有样式表，并指定元素的类。当您学习层叠样式表 (CSS) 时，您将了解有关 class 属性的使用的更多信息。

属性的值也可能是一个以空格分隔的类名列表。例如:

class = "className1 className2 className3"

style属性

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

<!DOCTYPE html>
<html>

   <head>
      <title>style属性例子</title>
   </head>
	
   <body>
      <p style = "font-family:arial; color:#FF0000;">一些文本内容...</p>
   </body>
	
</html>

测试一下

此时，我们还没有学习CSS，可以暂时先跳过它。在这里，您需要了解什么是 HTML 属性以及如何在格式化内容时使用它们。

国际化属性

共有三种国际化属性，大多数人都可以使用它们（尽管不是所有）XHTML 元素。

dir
lang
xml:lang

dir 属性

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

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

示例

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

   <head>
      <title>显示方向</title>
   </head>
	
   <body>
      这就是 IE 5 呈现从右到左定向文本的方式。
   </body>
	
</html>

测试一下

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

lang 属性

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

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

示例

<!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	right、left、center	标签对齐方式。
valign	top、middle、bottom	HTML 元素内的标签垂直对齐方式。
bgcolor	数字、十六进制、RGB 值	将背景颜色放置在元素后面
background	URL	将背景图像放置在元素后面
id	用户定义	命名与级联样式表一起使用的元素。
class	用户定义	对与级联样式表一起使用的元素进行分类。
width	数值	指定表格、图像或表格单元格的宽度。
height	数值	指定表格、图像或表格单元格的高度。
title	用户定义	元素的标题。

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