Html 简明教程

HTML - Attributes

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

HTML attributes are used to provide additional information about the HTML elements, attributes are the reserved keywords. We have seen few HTML tags and their usage like <h1>, <h2>, <p>, <br>, <hr> and other tags. We used them so far in their simplest form, but most of the HTML tags can also have attributes, which are extra bits of information.

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

An attribute is used to define the characteristics of an HTML element and is placed inside the element’s opening tag. All attributes are made up key & value paire.

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

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

As we can see attributes are used in the tag with name & value paire but there are some attributes that does not required any value like disabled, required, etc.

  1. Name: It holds the property we want to set. For example, the paragraph <p> element in the example carries an attribute whose name is align, which you can use to indicate the alignment of paragraph on the page.

  2. Value: It holds the value what we want the value of the property to be set and always put within quotations. The below example shows three possible values of align attribute: left, center and right.

HTML Attribute

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

There are some rules and characteristics of attributes like how we should use an attribute on an HTML element or tag.

  1. HTML provides additional information about the elements

  2. Attributes should always mention in the starting tag.

  3. All HTML elements can have attributes except a few like <head>, <title>, etc.

  4. W3C recommend to use attributes in lowercase and keep the value in quote.

HTML Attribute Example

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

In the following example we will use attributes to define the alignment of <p> element using HTML align attribute.

<!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> 元素的对齐方式。

As you have seen the above code where we used an attribute called align and use three different value of align attribute to specify the alignment of the <p> element.

HTML Global Attributes

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

Global attributes are common to all HTML elements and can be used universally. Some of the most important global attributes include:

HTML id Attribute

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

The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page. If you have two elements of the same name within a Web page (or style sheet), you can use the id attribute to distinguish between elements that have the same name.

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

We are using the id attribute to distinguish between two paragraph elements and styling it in CSS with id name.

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

The title attribute gives a suggested title for the element. The syntax for the title attribute is similar as explained for id attribute.

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

The behavior of this attribute will depend upon the element that carries it, although it is often displayed as a tooltip when cursor comes over the element or while the element is loading.

<!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 属性的更多信息。

The class attribute is used to associate an element with a style sheet, and specifies the class of element. You will learn more about the use of the class attribute when you will learn Cascading Style Sheet (CSS).

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

The value of the attribute is a space-separated list of class names. For example

<!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) 规则。

The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element.

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

There are three internationalization attributes, which are available for most (although not all) HTML Elements.

HTML dir Attribute

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

The dir attribute allows you to indicate to the browser about the direction in which the text should flow. The dir attribute can take one of two values, as you can see in the table that follows.

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>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 属性替换。

The lang attribute allows you to indicate the main language used in a document, but this attribute was kept in HTML only for backwards compatibility with earlier versions of HTML. This attribute has been replaced by the xml:lang attribute in new XHTML documents.

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

The values of the lang attribute are ISO-639 standard two-character language codes. Check HTML Language Codes: ISO 639 for a complete list of language codes.

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

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

There are certain practices you should follow to use attributes on any element, please check below mentioned ways to do so.

<!-- 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 标记一起使用的属性的表格。

Here’s a table of some other attributes that are readily usable with many of the HTML tags.

Attribute

Options

Function

align

right, left, center

Horizontally aligns tags

bgcolor

numeric, hexadecimal, RGB values

Places a background color behind an element

id

User Defined

Names an element for use with Cascading Style Sheets.

class

User Defined

Classifies an element for use with Cascading Style Sheets.

width

Numeric Value

Specifies the width of tables, images, or table cells.

height

Numeric Value

Specifies the height of tables, images, or table cells.

title

User Defined

A text to display in a tool tip.

Video - HTML Attributes