Html 简明教程

HTML - Attributes

HTML 属性用于提供有关 HTML 元素的其他信息，属性是保留关键字。我们已经看到了几个 HTML 标记及其用法，例如 * <h1>, <h2>* 、 * <p>* 、 * <br>* 、 * <hr>* 和其他标记。到目前为止，我们以最简单的形式使用它们，但大多数 HTML 标记也可以具有属性，这些属性是额外的信息片段。

属性用于定义 HTML 元素的特征，并放在元素的开始标记内。所有属性均由键值对组成。

<tag attribute="Value">...<tag>

如我们所见，属性在标记中使用名称和值对，但是有些属性不需要任何值，例如 * disabled* 、 * required* 等。

  1. Name: 它包含我们要设置的属性。例如，示例中的段落 &lt;p&gt; 元素带有名称为 align 的属性，你可以使用该属性指示段落页面上的对齐方式。

  2. Value: 它包含我们希望属性值设置为的值，并始终放在引号内。下面的示例显示了 align 属性的三种可能值： left, center 和 right 。

HTML Attribute

有关于属性的一些规则和特性，例如我们应该如何在 HTML 元素或标记上使用属性。

  1. HTML 提供有关元素的其他信息

  2. 属性应该始终在开始标记中提及。

  3. 除 &lt;head&gt; 、 &lt;title&gt; 等少数元素外，所有 HTML 元素都可以具有属性。

  4. W3C 建议使用小写字母的属性，并将值放在引号中。

HTML Attribute Example

在以下示例中，我们将使用属性使用 * HTML align attribute* 定义 * <p>* 元素的对齐方式。

<!DOCTYPE html>
<html>

<head>
    <title>HTML Attribute Example</title>
</head>

<body>
    <p align="left">Left Aligned</p>
    <p align="center">Center Aligned</p>
    <p align="right">Right Aligned</p>
</body>

</html>

正如你看到的，上面的代码中我们使用了 align 属性并使用了 align 属性的三个不同值，以指定 <p> 元素的对齐方式。

HTML Global Attributes

以下 * Global attributes* 适用于所有 HTML 元素，可在通用中使用。部分最重要的全局属性包括：

HTML id Attribute

HTML 标记的 * id* 属性可用于唯一标识 HTML 页面中的任意元素。如果你在网页（或样式表）中拥有两个同名的元素，则可以使用 id 属性区分拥有相同名称的元素。

我们使用 id 属性根据名称区分两个段落元素，并使用 id 名称对其在 CSS 中进行样式设置。

<!DOCTYPE html>
<html>

<head>
   <title>HTML id Attribute</title>
   <style>
         #html{
            color: red;
         }
         #html{
            color:green;
         }
   </style>
</head>

<body>
   <p id="html">
      This para explains what is HTML
   </p>
   <p id="css">
      This para explains what is CSS
   </p>
</body>

</html>

HTML title Attribute

  • title* 属性为元素提供了一个建议标题。 title 属性的语法与 id 属性的解释类似。

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

<!DOCTYPE html>
<html>

<head>
   <title>HTML title Attribute</title>
</head>

<body>
   <h3 title="Hello HTML!">
      Hover mouse here to see my title
   </h3>
</body>

</html>

HTML class Attribute

  • class* 属性用于将元素与样式表相关联并指定元素的 class。当你学习 Cascading Style Sheet (CSS) 时，你将了解有关 class 属性的更多信息。

属性的值是一个以空格分隔的 class 名称列表。例如

<!DOCTYPE html>
<html>

<head>
   <title>HTML class Attribute</title>
   <style>
      .borderStyle{
         border: solid black 5px;
      }
      .colorStyle{
         color:red;
      }
   </style>
</head>

<body>
   <p class="borderStyle colorStyle" >
      Welcome to Tutorialspoint...
   </p>
</body>

</html>

HTML style Attribute

  • style* 属性允许你在元素中指定级联样式表 (CSS) 规则。

<!DOCTYPE html>
<html>

<head>
   <title>HTML style Attribute</title>
</head>

<body>
   <p style="font-family:arial; color:#FF0000;">
      Welcome to Tutorialspoint...
   </p>
</body>

</html>

Internationalization Attributes

有三个国际化属性，它们可用于大多数（并非全部）HTML 元素。

HTML dir Attribute

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

Value

Meaning

ltr

自左向右（默认值）。

rtl

自右向左（针对诸如希伯来语或阿拉伯语等自右向左阅读的语言）。

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

<head>
   <title>HTML dir Attribute</title>
</head>

<body>
   This is how IE 5 renders right-to-left directed text.
</body>

</html>

HTML lang Attribute

lang 属性允许你指明文档中使用的主要语言，但该属性仅出于向后兼容性考虑而在 HTML 中保留了之前版本的 HTML。此属性在新的 XHTML 文档中已被 xml:lang 属性替换。

lang 属性的值是 ISO-639 标准的两位语言代码。请检查 * HTML Language Codes: ISO 639* 了解语言代码的完整列表。

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

<head>
   <title>HTML lang Attribute</title>
</head>

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

</html>

How to use HTML Attributes?

在任何元素上使用属性时，你应遵循某些做法，请查看以下提及的使用方式。

<!-- Good Practice -->
<a href="https://www.tutorialspoint.com/html/html_overview.htm">
   HTML Introduction
<a>

<!-- Bad Practice -->
<a href=https://www.tutorialspoint.com/html/html_overview.htm>
   HTML Introduction
<a>
<!-- Can use single and double Quotes -->
<p title="We are known for 'Simple Easy Learning'">
    Tutorialspoint
</p>
<p title='We are known for "Simple Easy Learning"'>
    Tutorialspoint
</p>

Generic Attributes

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

Attribute

Options

Function

align

right, left, center

Horizontally aligns tags

bgcolor

numeric, hexadecimal, RGB values

在元素后放置背景色

id

User Defined

使用级联样式表命名元素。

class

User Defined

将一个元素分类为级联样式表的用途。

width

Numeric Value

指定表格、图像或表格单元的宽度。

height

Numeric Value

指定表格、图像或表格单元的高度。

title

User Defined

需要在工具提示中显示的文本。

Video - HTML Attributes