echarts标题添加样式_如何使用HTML向网页添加标题和样式

怼烎@ 2022-11-28 15:26 329阅读 0赞

echarts标题添加样式

**[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)奠定坚实的基础。

In this tutorial, we will add and style a title and subtitle to our homepage. For the [demonstration site][], we’re using Sammy’s name and Sammy’s professional title, but you can add any content here that you like. For this content, we’ll use the `<h1>` heading element, the `<p>` paragraph element, and the `<em>` emphasis element.

在本教程中，我们将为首页添加标题和副标题并为其设置样式。 对于[演示站点][demonstration site] ，我们使用Sammy的名称和Sammy的专业名称，但是您可以在此处添加任何您喜欢的内容。 对于此内容，我们将使用`<h1>`标题元素， `<p>`段落元素和`<em>`强调元素。

Paste the following highlighted code snippet after your profile `<img>` element and before the closing `</div>` tag:

在个人资料`<img>`元素之后和`</div>`标记之前粘贴以下突出显示的代码段：

...
    <img src="https://html.sammy-codes.com/images/small-profile.jpeg" style="height:150px; border-radius: 50%; border: 10px solid #FEDE00; margin-top:80px;">
    <h1>Sammy the Shark</h1>
    <em><p> Senior Selachimorpha at DigitalOcean </p></em>
    </div>

Make sure to change the text with your own information.

确保使用您自己的信息更改文本。

Save the file and reload it in the browser. You should receive something like this:

保存文件并将其重新加载到浏览器中。 您应该会收到以下信息：

The elements used in this code snippet apply some light styling to our title and subtitle. However, we’ll need to add additional style values if we want the style of our title and subtitle to match the style of the demonstration site.

此代码段中使用的元素对我们的标题和副标题采用了一些简单的样式。 但是，如果我们希望标题和副标题的样式与演示站点的样式匹配，则需要添加其他样式值。

To make these modifications, we’ll add the `style` attribute to these elements to set additional properties. Add the highlighted attributes to your `<h1>` and `<p>` elements as demonstrated in the following code snippet:

为了进行这些修改，我们将`style`属性添加到这些元素中以设置其他属性。 如以下代码片段所示，将突出显示的属性添加到`<h1>`和`<p>`元素中：

<h1 style="font-size:100px; color:white; margin:10px;">Sammy the Shark</h1>
    <em>
    <p style="font-size:30px; color: white;">Senior Selachimorpha at DigitalOcean </p>
    </em>

Save your file and reload it in the browser. You should receive something like this:

保存文件，然后将其重新加载到浏览器中。 您应该会收到以下信息：

These style properties adjust the font size to 30 pixels and change the font color to white. We have also added a margin of 10 pixels to the `<h1>` element.

这些样式属性将字体大小调整为30像素，并将字体颜色更改为白色。 我们还为`<h1>`元素添加了10个像素的边距。

You should now know how to add and style a title and subtitle to your webpage with HTML. In the next tutorial, we’ll learn how to create and link to an additional webpage on your website.

现在，您应该知道如何使用HTML在网页上添加标题和副标题并设置其样式。 在下一个教程中，我们将学习如何在您的网站上创建并链接到其他网页。

> 翻译自: [https://www.digitalocean.com/community/tutorials/how-to-add-and-style-a-title-to-your-webpage-with-html][https_www.digitalocean.com_community_tutorials_how-to-add-and-style-a-title-to-your-webpage-with-html]

echarts标题添加样式

[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/
[demonstration site]: https://html.sammy-codes.com/
[https_www.digitalocean.com_community_tutorials_how-to-add-and-style-a-title-to-your-webpage-with-html]: https://www.digitalocean.com/community/tutorials/how-to-add-and-style-a-title-to-your-webpage-with-html