HTML属性

  • 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属性。此属性用于在任何HTML元素上应用CSS属性。它为段落元素提供了50像素的高度，并将其颜色更改为蓝色。

<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.frpkj.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">

注意：这里的图片位置要和html文件再同一个目录下。另外，上面的示例还具有高度和宽度属性，这些属性定义了网页上图像的高度和宽度。

运行效果：

引号：单引号或双引号？

在本章中，您已经看到，我们使用双引号作为属性，但有些人可能在HTML中使用单引号。因此，允许在HTML属性中使用单引号。以下两个语句都是完全正确的。

<a href="https://www.frpkj.com">A link to HTML.</a> <a href='https://www.frpkj.com'>A link to HTML.</a>

在HTML5中，您还可以省略属性值周围的引号。

<a href=https://www.frpkj.com>A link to HTML.</a>