HTML – 属性
我们很少看到 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 属性以及如何在格式化内容时使用它们。