html 属性中使用变量_如何使用HTML属性

太过爱你忘了你带给我的痛 2022-11-28 15:20 547阅读 0赞

html 属性中使用变量

**[How To Build a Website With HTML][] [如何使用HTML构建网站][How To Build a Website With HTML]**

This tutorial series will guide you through creating and further customizing [this website][] using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the [beginning of the series][How To Build a Website With HTML] if you wish to recreate the demonstration website.

本教程系列将指导您使用HTML(用于在Web浏览器中显示文档的标准标记语言)创建和进一步自定义[此网站][this website] 。 不需要任何编码经验，但是如果您希望重新创建演示网站，建议您从[本系列][How To Build a Website With HTML]的[开头开始][How To Build a Website With HTML] 。

At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

在本系列的最后，您应该拥有一个可以部署到云的网站，并且对HTML有了基本的了解。 知道如何编写HTML将为学习其他前端Web开发技能(例如CSS和JavaScript)奠定坚实的基础。

HTML *attributes* can be used to change the color, size, and other features of HTML elements. For example, you can use an attribute to change the color or size of a font for a text element or the width and height for an image element. In this tutorial, we’ll learn how to use HTML attributes to set values for the size and color properties of HTML text elements.

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

An HTML attribute is placed in the opening tag like this:

将HTML属性放置在开始标记中，如下所示：

One common attribute is `style`, which allows you to add style properties to an HTML element. While it’s more common to use a separate stylesheet to determine the style of an HTML document, we will use the style attribute in our HTML document for this tutorial.

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

## 使用样式属性 **(**Using the Style Attribute**)** ##

We can change multiple properties of an `<h1>` element with the style attribute. Clear your “index.html” file and paste the code below into your browser. (If you have not been following the tutorial series, you can review instructions for setting up an `index.html` file in our tutorial [Setting Up Your HTML Project][].

我们可以使用style属性更改`<h1>`元素的多个属性。 清除“ index.html”文件，然后将以下代码粘贴到浏览器中。 (如果您还没有按照教程系列进行操作，则可以在我们的教程[设置HTML项目中][Setting Up Your HTML Project]查看有关设置`index.html`文件的说明。

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

Before we load the file in our browser, let’s review each of the parts of this HTML element:

在将文件加载到浏览器中之前，让我们回顾一下此HTML元素的每个部分：

*  `h1` is the name of the tag. It refers to the largest-sized Heading element.
    
    `h1`是标签的名称。 它是指最大的标题元素。
 *  `style` is the attribute. This attribute can take a variety of different properties.
    
    `style`是属性。 此属性可以采用各种不同的属性。
 *  `font-size` is the first property we’re setting for the `style` attribute.
    
    `font-size`是我们为`style`属性设置的第一个属性。
 *  `40px;` is the value for the property `font-size`, which sets the text content of the element to 40 pixels.
    
    `40px;` 是`font-size`属性的值，该属性将元素的文本内容设置为40像素。
 *  `color` is the second property we’re setting for the `style` attribute.
    
    `color`是我们为`style`属性设置的第二个属性。
 *  `green` is the value for the property `color`, which sets the text content color to green
    
    `green`是属性`color`的值，它将文本内容颜色设置为绿色

Note that the properties and values are contained by quotation marks, and that each `property:value` pair ends with a semicolon `;`.

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

Save the file and reload it in your browser. (For instructions on loading the file in your browser, see our [tutorial here][].) You should receive something like this:

保存文件并将其重新加载到浏览器中。 (有关在浏览器中加载文件的说明，请参见[此处][tutorial here]的[教程][tutorial here] 。)您应该收到类似以下内容的信息：

# 此文本为40像素，为绿色。 **(** This text is 40 pixels and green. **)** #

You have now learned how to use the `style` attribute to change the font size and font color of a text element. Note that certain elements *require* attributes, such as the `<a>` element which allows you to add a link to a text or image, and the `<img>` element, which allows you to add an image to the document. We’ll cover those two elements in the next tutorials and learn about additional attribute usage for `<div>` containers and other HTML elements later on in the tutorial series.

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

> 翻译自: [https://www.digitalocean.com/community/tutorials/how-to-use-html-attributes][https_www.digitalocean.com_community_tutorials_how-to-use-html-attributes]

html 属性中使用变量

[How To Build a Website With HTML]: https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-html
[this website]: http://html.sammy-codes.com/
[Setting Up Your HTML Project]: https://www.digitalocean.com/community/tutorials/setting-up-your-html-project
[tutorial here]: https://www.digitalocean.com/community/tutorials/html-elements#loading-an-html-file-in-your-browser
[https_www.digitalocean.com_community_tutorials_how-to-use-html-attributes]: https://www.digitalocean.com/community/tutorials/how-to-use-html-attributes