如何使用和理解HTML元素

骑猪看日落 2022-11-28 15:22 182阅读 0赞

**[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 documents are composed of HTML *elements*. Most HTML elements contain content (such as text or an image) along with HTML tags that tell the browser how to interpret the content (such as a heading or paragraph text). HTML elements can be used to add structure, semantics, and formatting to different parts of an HTML document. An HTML element is often created—but not always—by opening and closing HTML tags, which wrap around a piece of content.

HTML文档由HTML *元素组成* 。 大多数HTML元素都包含内容(例如文本或图像)以及HTML标签，这些标记告诉浏览器如何解释内容(例如标题或段落文本)。 HTML元素可用于向HTML文档的不同部分添加结构，语义和格式。 通常通过打开和关闭环绕内容HTML标签来创建HTML元素，但并非总是如此。

Below is an illustration that labels each of the parts of an HTML element:

下面是标记HTML元素的每个部分的图示：

Let’s try exploring HTML in practice. Try pasting the following line into your “index.html” file that you created when [Setting Up Your HTML Project][]:

让我们尝试在实践中探索HTML。 尝试将以下行粘贴到[设置HTML项目][Setting Up Your HTML Project]时创建的“ index.html”文件中：

My strong text

In this example, the `` tag adds strong formatting by enclosing the text with a pair of opening and closing `` tags. Note that closing tags are always denoted by a forward slash (`/`).

在此示例中， ``标记通过用一对打开和关闭``标记将文本括起来来添加强格式。 请注意，结束标记始终以正斜杠( `/` )表示。

**Note**: You may note that the `` tag acts very similar to adding **bold** styling to the text. You can achieve the same styling effect by using the bold `` tag, however the `` tag adds bold styling *and* semantic meaning that indicates the text is of strong importance. If you are using the bold styling *because* you want to note the importance of the text, make sure to use the `` tag, which will enable screen readers to announce their importance to the user.

**注意** ：您可能会注意到``标记的作用与向文本添加**粗体**样式非常相似。 您可以通过使用粗体``标记来实现相同的样式效果，但是``标记添加了粗体样式*和*语义含义，表明文本非常重要。 如果*由于*要注意文本的重要性而使用粗体样式，请确保使用``标记，这将使屏幕阅读器向用户宣布其重要性。

Similarly, the emphasis tag `` adds italic styling *and* semantic meaning that indicates the text is emphasized. The italics tag `` only adds the italic styling to the text. If you are using the italic styling *because* you want to emphasize the text, make sure to use the `` tag, which will enable screen readers to announce their emphasis to the user.

同样，重点标记``添加斜体样式*和*语义含义，以指示强调了文本。 斜体标签``仅将斜体样式添加到文本。 如果*由于*要强调文本而使用斜体样式*，*请确保使用``标记，这将使屏幕阅读器向用户宣告其强调。

To check the results of this HTML code, we can load the “index.html” file in our browser. Though your file is not online, the browser will still be able to interpret the HTML file *as if* it were a web page document. Make sure to save your “index.html” file before loading it in the browser as only saved updates will be rendered.

要检查此HTML代码的结果，我们可以在浏览器中加载“ index.html”文件。 尽管您的文件不在线，但浏览器仍然可以将HTML文件解释*为*网页文件。 确保将“ index.html”文件保存在浏览器中之前，因为只会显示保存的更新。

## 如何在浏览器中查看脱机HTML文件 **(**How To View an Offline HTML File In Your Browser**)** ##

You can view an offline HTML file in the browser in several ways:

您可以通过几种方式在浏览器中查看脱机HTML文件：

*  Drag and drop the file into your browser
    
    将文件拖放到浏览器中
 *  `CTRL + Left Click` (on Macs) or `Right Click` (on Windows) to open the file with a browser
    
    `CTRL + Left Click` (在Mac上)或`Right Click` (在Windows上)以使用浏览器打开文件
 *  Copy the **full path** of your file and paste the file in your browser bar
    
    复制文件的**完整路径** ，然后将文件粘贴到浏览器栏中

If you are using the Visual Studio Code text editor, you can copy the file path using `CTRL + Left Click` (on Macs) or `Right Click` (on Windows) on the file “index.html” in the left hand panel and selecting “Copy Path.” Then paste the path in your web browser as illustrated in the gif below:

如果您使用的是Visual Studio代码文本编辑器，则可以使用`CTRL + Left Click` (在Mac上)或`Right Click` (在Windows上)复制文件路径，方法是在左侧面板中的“ index.html”文件上路径。” 然后将路径粘贴到您的Web浏览器中，如下图所示：

**Note**: To load the file in the browser, it’s important that you copy the **absolute path**, (which refers to the file location relative to the root directory), rather than the **relative path**, (which refers to the file relative to the current working directory). In Visual Studio Code, “Copy Path” refers to the full file path. Be aware, however, that we will use relative paths of files in other parts of this tutorial.

**注意** ：要在浏览器中加载文件，请务必复制**绝对路径** (这是相对于根目录的文件位置)，而不是**相对路径** (这是相对于当前工作目录的文件)，这一点很重要。目录)。 在Visual Studio代码中，“复制路径”是指完整的文件路径。 但是请注意，在本教程的其他部分中，我们将使用文件的相对路径。

After loading the file in your browser, you should receive a page that contains the following:

在浏览器中加载文件后，您应该会收到一个包含以下内容的页面：

**My bold text**

**我的粗体**

Let’s try experimenting with other HTML elements. On the next line of your “practice.html” file, try adding the `` element, which adds emphasis.

让我们尝试其他HTML元素。 在“ practice.html”文件的下一行，尝试添加``元素，这会增加重点。

My bold text
 My emphasized text

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

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

**My bold text** *My emphasized text*

**我的粗体文字** *我的强调文字*

The first phrase should be styled with strong formatting and the second phrase should be styled with emphasis. However, you may be surprised by the side-by-side placement of the two phrases. If you added `My emphasized text` to the second line of the text editor, you may have expected *“My emphasized text”* to show up on the line below “**My bold text**” in the web browser. However, certain HTML elements, such as `` and ``, require you to specify line breaks with additional HTML elements (if you desire lines breaks). We’ll explain why in the next tutorial.

第一个短语的样式应采用强格式，第二个短语的样式应强调。 但是，您可能会对两个短语的并排放置感到惊讶。 如果在文本编辑器的第二行中添加了`My emphasized text` ，则可能希望在网络浏览器中*“我的强调文本”*显示在“ **我的粗体文本** ”下方的行中。 但是，某些HTML元素(例如``和`` )要求您使用其他HTML元素指定换行符(如果需要换行符)。 在下一个教程中，我们将解释原因。

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

[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
[https_www.digitalocean.com_community_tutorials_how-to-use-and-understand-html-elements]: https://www.digitalocean.com/community/tutorials/how-to-use-and-understand-html-elements