HTML – 属性

预计阅读时间2 分钟 62 views

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

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

  • 名称是要设置的属性。例如,<p>示例中的 paragraph 元素带有一个属性,其名称为 align,可用于指示页面上段落的对齐方式。
  • 该值是您希望设置的属性值,并始终放在引号中。以下示例显示了 align 属性的三个可能值:left、center 和 right。

属性名称和属性值不区分大小写。但是,万维网联合会 (W3C) 在其 HTML 建议中建议使用小写的属性/属性值。

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

在执行上述示例时,我们可以观察到与页面左侧、中间和右侧对齐的句子。

 核心属性

可用于大多数 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 属性用于将元素与样式表相关联,并指定元素的类。在学习级联样式表 (CSS) 时,您将了解有关 class 属性使用的更多信息。所以现在你可以避免它。

该属性的值也可以是以空格分隔的类名列表。例如 −

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 DevHap...</p>
</body>
</html>

在执行上述示例时,它将显示文本“欢迎使用 DevHap...”采用“Arial”字体和红色。

目前,我们还没有学习 CSS,所以让我们继续学习,不要过多地关注 CSS。在这里,您需要了解什么是 HTML 属性以及如何在格式化内容时使用它们。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

11 − 7 =

分享此教程

HTML – 属性

或复制链接

内容