本文概述
- HTML属性是特殊的单词, 它们提供有关元素的附加信息, 或者属性是HTML元素的修饰符。
- 每个元素或标签都可以具有属性, 这些属性定义了该元素的行为。
- 属性应始终与开始标签一起应用。
- 属性应始终与名称和值对一起应用。
- 属性名称和值区分大小写, W3C建议仅将其写为小写。
- 你可以在一个HTML元素中添加多个属性, 但是需要在两个属性之间留出空格。
句法
<element attribute_name="value">content</element>
例
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> This is Style attribute</h1>
<p style="height: 50px; color: blue">It will add style property in element</p>
<p style="color: red">It will change the color of content</p>
</body>
</html>
立即测试
输出:
以上示例说明:
<p style="height: 50px; color: blue">It will add style property in element</p>
立即测试
在上面的语句中, 我们使用了应用了style属性的段落标签。此属性用于将CSS属性应用于任何HTML元素。它为50px的段落元素提供高度, 并将其颜色变为蓝色。
<p style="color: red">It will change the color of content</p>
在上面的语句中, 我们再次在段落标记中使用了style属性, 该属性将其颜色变为红色。
注意:下面提供了一些常用的属性, HTML属性列表中给出了所有属性的完整列表和说明。
HTML中的title属性
描述:title属性在大多数浏览器中用作文本工具提示。当用户将光标移到链接或任何文本上时, 它将显示其文本。你可以将其与任何文本或链接一起使用以显示有关该链接或文本的描述。在我们的示例中, 我们将其与段落标签和标题标签一起使用。
例
使用<h1>标签:
<h1 title="This is heading tag">Example of title attribute</h1>
立即测试
使用<p>标记:
<p title="This is paragraph tag">Move the cursor over the heading and paragraph, and you will see a description as a tooltip</p>
立即测试
码:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 title="This is heading tag">Example of title attribute</h1>
<p title="This is paragraph tag">Move the cursor over the heading and paragraph, and you will see a description as a tooltip</p>
</body>
</html>
立即测试
输出:
HTML中的href属性
说明:href属性是<a>锚标记的主要属性。此属性提供在该链接中指定的链接地址。 href属性提供了超链接, 如果为空, 则它将保留在同一页面中。
例
带有链接地址:
<a href="https://www.srcmini02.com/html-anchor">This is a link</a>
立即测试
没有链接地址:
<a href="">This is a link</a>
立即测试
src属性
src属性是<img>元素的重要且必需的属性之一。它是在浏览器上显示所需图像的源。此属性可以包含同一目录或另一个目录中的图像。图片名称或来源应该正确, 否则浏览器将不会显示图片。
例
<img src="whitepeacock.jpg" height="400" width="600">
立即测试
注意:上面的示例还具有height和width属性, 用于定义网页上图像的高度和宽度。
输出:
引号:单引号还是双引号?
在本章中, 你已经看到, 我们使用带双引号的属性, 但是有些人可能在HTML中使用单引号。因此, 也可以使用带有HTML属性的单引号。以下两个陈述绝对正确。
<a href="https://www.srcmini02.com">A link to HTML.</a>
<a href='https://www.srcmini02.com'>A link to HTML.</a>
立即测试
在HTML5中, 你也可以省略属性值两边的引号。
<a href=https://www.srcmini02.com>A link to HTML.</a>
立即测试