使用js 创建html_如何使用HTML创建主页的中间部分

缺乏、安全感 2022-11-28 15:26 127阅读 0赞

使用js 创建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)奠定坚实的基础。

In this tutorial, we will recreate the middle section of our [demonstration website][] using HTML tables.

在本教程中，我们将使用HTML表重新创建[演示网站][demonstration website]的中间部分。

The middle section of our demonstration website contains a large profile image and a short paragraph of text displayed side by side. We can achieve this layout by using the HTML `<table>` element, which allows us to arrange content into rows and columns. Note that if you continue learning front-end skills such as CSS, there are improved methods for arranging content on a webpage. However, HTML tables provide an effective and simple way for arranging content when you are only using HTML.

演示网站的中间部分包含一个大型个人资料图片和一小段并排显示的文本。 我们可以使用HTML `<table>`元素实现此布局，该元素允许我们将内容排列为行和列。 请注意，如果您继续学习CSS等前端技能，则可以使用改进的方法在网页上排列内容。 但是，当您仅使用HTML时，HTML表提供了一种有效且简单的方式来安排内容。

We will create a simple table that contains one row and two columns. First, let’s add all of our table elements to create the structure of our table. Paste the following code snippet after your closing `</div>` tag:

我们将创建一个简单的表，其中包含一行和两列。 首先，让我们添加所有表元素以创建表的结构。 在您的`</div>`标记后粘贴以下代码段：

<table>
          <tr>
            <td>
            </td>
            <td>
            </td>
          </tr>
        </table>

Let’s pause briefly to review each part of this code snippet:

让我们暂时停下来回顾一下此代码片段的每个部分：

*  The `` is a comment that will *not* be read by the browser and is used to help organize our `html` file for the purpose of human readability
    
    ``是浏览器*不会*阅读的注释，用于帮助组织`html`文件，以便于人类阅读。
 *  The single set of `<table>` tags create the table
    
    一组`<table>`标记创建表
 *  The single set of `<tr>` tags create a table row
    
    一组`<tr>`标记创建一个表行
 *  The two sets of `<td>` tags (table data tags) create two columns
    
    两组`<td>`标记(表数据标记)创建两列

The content that we place in the first set of `<td>` tags will constitute the first column and the content that we place in the second set of `<td>` tags will constitute the second column.

我们放在第一组`<td>`标签中的内容将构成第一列，而我们放在第二组`<td>`标签中的内容将构成第二列。

Before we add content to our table, make sure you have selected a large profile image or other image to use. If you do not have an image, you can [download the image from our demo site][]. Once you have your image, save it in your images folder. (For a refresher on how to add images to webpages using HTML, please visit our tutorial [HTML Images][] from earlier in this tutorial series).

在我们向表格添加内容之前，请确保您已选择要使用的大型个人资料图片或其他图片。 如果没有图像，可以[从我们的演示站点下载图像][download the image from our demo site] 。 获得图像后，将其保存在图像文件夹中。 (有关如何使用HTML向网页添加图像的更新，请访问本系列教程前面的[HTML图像][HTML Images]教程)。

Next, we will add the image by placing an `<img>` element inside the first set of `<td>` tags. Add the following `<img>` element in between the first two `<td>` tags.

接下来，我们将通过在第一组`<td>`标签内放置一个`<img>`元素来添加图像。 在前两个`<td>`标签之间添加以下`<img>`元素。

Make sure to change the file path of the `src` attribute. Note that we are using the `style` attribute to specify the height and margin sizes of the image. We are also making the left margin 30 pixels greater than the other margins by using the `margin-left` property. The HTML code for your table should now be as follows:

确保更改`src`属性的文件路径。 请注意，我们使用`style`属性指定图像的高度和边距大小。 通过使用`margin-left`属性，我们还使左边距比其他边距大30个像素。 您的表格HTML代码现在应如下所示：

<table>
          <tr>
            <td>
          <img src="ImageLocation" ; style="height:600px; margin:70px; margin-left:100px;" />
            </td>
            <td>
            </td>
          </tr>
        </table>

Save your file and reload it in the browser. The section below the top section of your webpage should be like this:

保存文件，然后将其重新加载到浏览器中。 网页顶部下方的部分应如下所示：

Next we’ll add the text in the second column. Feel free to use the sample text for demonstration purposes. You can add your personalized text later.

接下来，我们将在第二栏中添加文本。 随意使用示例文本进行演示。 您可以稍后添加个性化文本。

In between the second set of `<td>` tags, add the following code snippet:

在第二组`<td>`标记之间，添加以下代码片段：

<h1> Hello </h1>
    
    <p> 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  tincidunt dui ut ornare lectus. Enim nec dui nunc mattis enim ut. Sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. 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>Email me at <a href="mailto:Sammy@SampleEmail.com">Sammy@SampleEmail.com </a></p>

In the table we’ve created text content using a variety of elements. The `<h1>` element creates a bold text heading, the `<p>` elements create paragraph text, and the `<a>` element creates a link to a sample email address.

在表中，我们使用各种元素创建了文本内容。 `<h1>`元素创建一个粗体文本标题， `<p>`元素创建一个段落文本，而`<a>`元素创建一个指向示例电子邮件地址的链接。

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

保存文件并重新加载它，以在浏览器中检查结果。 您应该会收到以下信息：

Note that the style of the text is different from the style of the text on the [demonstration website][]. The positioning of the text content is different as is the font size and the line spacing. Let’s now add some attributes and properties to style this column of content.

请注意，文字样式与[演示网站][demonstration website]上的文字样式不同。 文本内容的位置与字体大小和行间距不同。 现在，让我们添加一些属性和属性来设置内容的样式。

First, we’ll add the `valign` and `style` attributes to the *second* opening `<td>` element that wraps around the *text* so that the element is now as follows:

首先，我们将`valign`和`style`属性添加到*第二个* `<td>`元素中，该元素环绕*文本，*因此该元素现在如下所示：

Here we have used the `valign` attribute to position the text content to the “top” of the `<td>` element. The `valign` attribute is a special attribute for `<td>` elements that aligns content on a vertical basis.

在这里，我们使用了`valign`属性将文本内容`valign`在`<td>`元素的“顶部”。 `valign`属性是`<td>`元素的特殊属性，它可以垂直对齐内容。

We have also added the `style` attribute to add padding specifications to the top, right, and left of the element. Padding creates space between the border of an element and any content placed inside the element, such as text.

我们还添加了`style`属性，以在元素的顶部，右侧和左侧添加填充规范。 填充在元素的边框和放置在元素内的任何内容(例如文本)之间创建空间。

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

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

Next we will change the font size and line height of the paragraph content by adding `style` attributes to the `<p>` elements. Add the highlighted attributes to both of the `<p>` elements so that the opening `<p>` tags are like so:

接下来，我们通过将`style`属性添加到`<p>`元素来更改段落内容的字体大小和行高。 将突出显示的属性添加到两个`<p>`元素中，以使开头的`<p>`标记如下所示：

<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. sa 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>

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

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

If you have errors, check to make sure that you have added all the HTML code in the correct area of the `index.html` file.

如果有错误，请检查以确保已将所有HTML代码添加到`index.html`文件的正确区域中。

You should now have an understanding of how to use tables to arrange content on a webpage and how to add styling elements to table content. To try arranging content on a page with different combinations of rows and columns, please visit the tutorial on [HTML Tables][] from earlier in this tutorial series.

您现在应该了解如何使用表格在网页上排列内容以及如何向表格内容添加样式元素。 要尝试以行和列的不同组合在页面上排列内容，请访问本系列教程前面的[HTML表][HTML Tables]教程。

> 翻译自: [https://www.digitalocean.com/community/tutorials/how-to-create-the-middle-section-of-your-homepage-with-html][https_www.digitalocean.com_community_tutorials_how-to-create-the-middle-section-of-your-homepage-with-html]

使用js 创建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/
[demonstration website]: https://html.sammy-codes.com/
[download the image from our demo site]: https://html.sammy-codes.com/images/large-profile.jpg
[HTML Images]: https://www.digitalocean.com/community/tutorials/html-images
[HTML Tables]: https://www.digitalocean.com/community/tutorials/html-tables
[https_www.digitalocean.com_community_tutorials_how-to-create-the-middle-section-of-your-homepage-with-html]: https://www.digitalocean.com/community/tutorials/how-to-create-the-middle-section-of-your-homepage-with-html