HTML - 属性

上一个
下一个

我们已经看到了几个 HTML 标签及其用法，例如 标题标签 <h1>、<h2>、段落标签 <p> 和其他标签。到目前为止，我们以最简单的形式使用它们，但大多数 HTML 标签也可以具有属性，它们是额外的信息。

什么是 HTML 属性？

HTML 属性是提供 HTML 元素附加信息的特殊单词。属性放置在元素的开始标签内，用于配置或调整元素的行为。所有属性都由两部分组成：**名称**和**值** -

  • **名称：**属性名称是关键字，也称为属性标识符，它定义了使用它的元素的特定特征。例如，段落 **<p>** 元素（在下面给出的示例中）具有属性“**align**”，它定义了段落在页面上的对齐方式。
  • **值：**属性值是定义要为该属性设置的值的数据或信息。该值在双引号内分配。例如，“**left**”、“**center**”或“**right**”可以分配给段落标签的“**align**”属性（如以下示例所示）。

以下是具有属性的 HTML 元素的语法 -

<tag_name attribute="Value">...</tag_name>

规则和特征

以下是 HTML 属性的规则和特征；在将属性与 HTML 元素 一起使用时，您应该遵循这些规则和特征

  • 属性是可选的；您可以使用它们来提供有关 HTML 元素的其他信息。
  • 属性具有名称和值对，但某些属性不需要任何值；这些被称为布尔属性。
  • 一个 HTML 元素可以有多个属性，并且它们应该用空格隔开。
  • 属性应始终与开始标签一起写入。
  • 除了少数几个，例如 <head>、<title>、<script> 等，所有 HTML 元素都可以具有属性。
  • W3C 建议使用小写属性并将其值放在引号中。

HTML 属性示例

此示例演示了如何在 HTML 元素中使用属性。在这里，我们正在将 align 属性与不同的段落元素一起使用 -

<!DOCTYPE html>
<html>

<head>
    <title>Example of HTML Attributes</title>
</head>

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

</html>

HTML 核心属性

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

id 属性

HTML 标签的 id 属性 可用于唯一标识 HTML 页面中的任何元素。您可能希望在元素上使用 id 属性有两个主要原因 -

  • 如果元素带有 id 属性作为唯一标识符，则可以识别该元素及其内容。

  • 如果在网页（或样式表）中存在两个同名的元素，则可以使用 id 属性来区分名称相同的元素。

我们使用 id 属性来区分两个段落元素 -

示例

<!DOCTYPE html>
<html>
<head>
   <title>ID Attribute Example</title>
</head>
<body>
   <p id="html">This para explains what is HTML</p>
   <p id="css">This para explains what is Cascading Style Sheet</p>
</body>
</html>

title 属性

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>

执行上述示例后，它将显示标题“标题标题标签示例”。如果将光标悬停在其上，您会看到代码中使用的任何标题都作为光标的工具提示显示。

class 属性

class 属性 为 HTML 元素指定一个或多个 CSS 类。可以使用此属性在一个元素上使用多个类。如果要指定多个类，则此属性的值是类名称的空格分隔列表。

示例

class="className1 className2 className3"

style 属性

style 属性 允许您为元素编写内联 CSS 规则。

示例

<!DOCTYPE html>
<html>
<head>
   <title>The style Attribute</title>
</head>
<body>
   <p style="font-family:arial; color:#FF0000;">Welcome to Tutorialspoint...</p>
</body>
</html>

执行上述示例后，它将以“Arial”字体和红色显示文本“欢迎使用 Tutorialspoint…”。

HTML 国际化属性

有三个国际化属性，可用于大多数（尽管不是全部）XHTML 元素。

dir 属性

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

序号 值和含义
1

ltr

从左到右（默认值）
2

rtl

从右到左（对于希伯来语或阿拉伯语等从右到左阅读的语言）

示例

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

如果单击编辑和运行，您可以观察到文本向右对齐。

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

lang 属性

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>

HTML 布尔属性

布尔属性表示真值和假值，并且不需要在属性名称中使用任何值。要设置真值，您需要写入属性的名称，要将其设置为假，则应完全省略该属性。

以下是一些布尔属性 -

示例

以下是一个 HTML 布尔属性（required）的示例 -

<!DOCTYPE html>
<html>
<body>

<h1>Example of "required" attribute</h1>

<form>
  <label for="user_name">Input User Name:</label>
  <input type="text" id="user_name" name="user_name" required>
  <input type="submit">
</form>

</body>
</html>

xml:lang 属性

xml:lang 属性是 lang 属性的 XHTML 替代品。xml:lang 属性的值应为 ISO-639 国家/地区代码，如上一节所述。

HTML 通用属性

这是一个其他属性的表格，这些属性可以很容易地与许多 HTML 标签一起使用。

属性 选项 功能
align right, left, center 水平对齐标签。
valign top, middle, bottom 垂直对齐 HTML 元素内的标签。
bgcolor 数字、十六进制、RGB 值 在元素后面放置背景颜色。
background URL 在元素后面放置背景图片。
id 用户定义 为元素命名，以便与层叠样式表一起使用。
class 用户定义 对元素进行分类，以便与层叠样式表一起使用。
width 数值 指定表格、图像或表格单元格的宽度。
height 数值 指定表格、图像或表格单元格的高度。
title 用户定义 元素的“弹出”标题。

在继续学习其他 HTML 标签时，我们将看到相关的示例。有关 HTML 标签和相关属性的完整列表，请访问：HTML 标签参考 和 HTML 属性参考。

使用 HTML 属性的最佳实践

在任何元素上使用属性时，都应遵循某些实践，请查看以下方法：

1. 在引号中编写值

应始终在单引号或双引号中编写属性值。

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

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

2. 使用小写

HTML 不区分大小写，但最佳实践是将 HTML 属性写成小写。

<input type="text">

3. 同时使用单引号和双引号

如果需要在属性值中提供任何带引号的字符串，则可以使用单引号和双引号的组合。

<!-- 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>
打印页面
上一页
下一页
广告