如何使用HTML属性

来自菜鸟教程
跳转至:导航、​搜索

HTML attributes 可用于更改 HTML 元素的颜色、大小和其他特性。 例如,您可以使用属性来更改文本元素的字体颜色或大小或图像元素的宽度和高度。 在本教程中,我们将学习如何使用 HTML 属性为 HTML 文本元素的大小和颜色属性设置值。

HTML 属性放置在开始标记中,如下所示:

<element attribute="property:value;">

一个常见的属性是 style,它允许您向 HTML 元素添加样式属性。 虽然使用单独的样式表来确定 HTML 文档的样式更为常见,但我们将在本教程的 HTML 文档中使用 style 属性。

使用样式属性

我们可以使用 style 属性更改 <h1> 元素的多个属性。 清除“index.html”文件并将下面的代码粘贴到浏览器中。 (如果您还没有学习教程系列,您可以在我们的教程 设置 HTML 项目 中查看设置 index.html 文件的说明。

<h1 style="font-size:40px;color:green;">This text is 40 pixels and green.</h1>

在我们在浏览器中加载文件之前,让我们回顾一下这个 HTML 元素的每个部分:

  • h1 是标签的名称。 它指的是最大的标题元素。
  • style 是属性。 该属性可以采用多种不同的属性。
  • font-size 是我们为 style 属性设置的第一个属性。
  • 40px; 是属性 font-size 的值,它将元素的文本内容设置为 40 像素。
  • color 是我们为 style 属性设置的第二个属性。
  • green 是属性 color 的值,它将文本内容颜色设置为绿色

请注意,属性和值包含在引号中,并且每个 property:value 对都以分号 ; 结尾。

保存文件并在浏览器中重新加载。 (有关在浏览器中加载文件的说明,请参阅此处的 教程 。)您应该会收到如下内容:

此文本为 40 像素和绿色。

您现在已经学习了如何使用 style 属性来更改文本元素的字体大小和字体颜色。 请注意,某些元素 需要 属性,例如 <a> 元素,它允许您添加到文本或图像的链接,以及 <img> 元素,它允许您将图像添加到文档。 我们将在接下来的教程中介绍这两个元素,并在后面的教程系列中了解 <div> 容器和其他 HTML 元素的其他属性用法。