如何使用HTML创建主页的正文

在本教程中，我们将使用 HTML <div> 元素和 HTML style 属性重新创建演示网站的主体或中间部分。

我们演示网站的中间部分包含一个大的个人资料图像和并排显示的一小段文字。我们可以使用 <div> 容器来实现这种布局，这些容器是我们在本系列的上一个教程中了解的。请注意，如果您继续学习 CSS 等前端技能，则基于我们将在本教程中使用的方法，可以使用改进的方法在网页上排列内容。

如何将大型个人资料图片添加到您的网页

首先，我们将添加演示站点中显示的大型配置文件图像。在我们开始之前，请确保您已选择要使用的大型个人资料图像或其他图像。我们将以 400 x 600 像素显示我们的图像，因此请确保您的图像尺寸适用于这些尺寸。如果您没有图像，您可以从我们的演示站点下载图像。获得图像后，将其保存在图像文件夹中。（有关如何使用 HTML 将图像添加到网页的复习，请访问本教程系列前面的教程 HTML 图像）。

接下来，将以下代码片段复制到“index.html”文件中最后一个结束 </div> 和结束 <body> 标记之前：

...
<!--Second section-->
<img src="images/large-profile.jpg" style="height:600px; margin:100px; float: left;" alt="A pretend invisible person wearing a hat, glasses, and coat.">
...

让我们暂停一下，回顾一下这段代码片段的每一部分：

 是一个注释，将 not 被浏览器读取，用于帮助组织我们的 html 文件以提高人类可读性
<img> 标签告诉浏览器我们正在将图像插入网页。
src="images/large-profile.jpg" 告诉浏览器在哪里可以找到正在显示的图像。
style 属性允许我们定义 height、margin 和 float 属性。 margin 属性允许您指定围绕 HTML 元素的空白区域的大小。 float 属性允许您将图像“浮动”到显示器的右侧和左侧，同时允许文本在其一侧流动。
alt 属性允许您将替代文本添加到图像中，以提高使用屏幕阅读器的访问者的网站可访问性。不要忘记将此代码段中的替代文本更改为与您的图像匹配的描述。

保存“index.html”文件并在浏览器中重新加载。网页顶部下方的部分现在应如下所示：

如果您有错误，请检查以确保您已将所有 HTML 代码添加到 index.html 文件的正确区域，并且您的图像位于您使用 src 指定的文件路径中属性。

如何在您的网页上添加“关于我”部分

接下来，我们将在图像右侧添加一段文字。随意用您自己选择的文本替换此示例中的虚拟文本。

我们将通过创建一个 <div> 容器并在其中插入文本内容来创建此文本部分。

在您的“index.html”文件中，在您在上述步骤中添加的图像之后和结束 </body> 标记之前添加以下代码片段：

...
<div style="height:600px; margin:100px;">
  <h1>Hello </h1>
  <p style="line-height: 2.0; font-size:20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et magnis dis parturient montes 
  nascetur ridiculus mus. Purus semper eget duis at tellus at urna condimentum mattis. Turpis in eu mi 
  bibendum neque egestas. Rhoncus dolor purus non enim praesent elementum facilisis. Ipsum nunc aliquet 
  bibendum enim facilisis gravida. Cursus turpis sa tincidunt dui ut ornare lectus. Enim nec dui nunc 
  mattis enim ut. Sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Tussa 
  ultricies mi quis hendrerit dolor magna. Elit eget gravida cum sociis natoque penatibus et magnis 
  dis. Enim tortor at auctor urna nunc id cursus metus.</p>
  <p style="line-height: 2.0; font-size:20px;">Email me at <a 
  href="mailto:Sammy@SampleEmail.com">Sammy@SampleEmail.com </a></p>
</div>

让我们暂停一下，回顾一下这段代码片段的每一部分：

这<div style="height:600px; margin:100px;">元素创建一个how-to-use-a-div-the-html-content-division-element

容器有一个height 600像素和margin 100 像素。 <h1> 元素为我们的内容添加了一个文本标题。两个 <p style="line-height: 2.0; font-size:20px;"> 标签创建两个段落，其行高扩展为 2.0，字体为 20 像素。 ' [[“mailto:Sammy%3Ca%7C@SampleEmail]] [[“mailto:Sammy%3Ct0%7C.com”>萨米]] community/users/sampleemail [[“mailto:Sammy%3Ct0%7C@SampleEmail]] [[“mailto:Sammy%3C/a%7C.com]] ` 将电子邮件链接添加到电子邮件地址。关闭 </div> 标记关闭我们的 <div> 容器。

保存“index.html”文件并在浏览器中重新加载。网页顶部下方的部分现在应如下所示：

您的图像和文本现在应该像在演示网站中一样显示。您可以调整代码片段中的样式属性以更改内容的高度、边距、字体大小或其他样式属性。

请注意，如果您的浏览器视口被大幅缩小，您的文本最终会流入页面上的其他元素。要创建响应一系列设备的布局，您需要学习额外的前端技能，例如 CSS（即将推出的教程系列）和 Flexbox。

您现在应该了解如何使用 <div> 容器、style 属性和样式属性并排排列图像和文本。在本系列的下一个也是最后一个教程中，我们将学习如何使用 HTML <footer> 元素创建网站页脚。