如何使用HTML为您的网页添加标题和样式

在本教程中，我们将为主页添加标题和副标题并为其设置样式。 对于演示站点，我们使用的是Sammy的名字和Sammy的职称，但是你可以在这里添加任何你喜欢的内容。 对于此内容，我们将使用 <h1> 标题元素、<p> 段落元素和 <em> 强调元素。

在您的配置文件 <img> 元素之后和结束 </div> 标记之前粘贴以下突出显示的代码片段：

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

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

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

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

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

<h1 style="font-size:100px; color:white; margin:10px;">Sammy the Shark</h1>

<p style="font-size:30px; color: white;"><em>Senior Selachimorpha at DigitalOcean</em></p>

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

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

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