如何查看HTML文档的源代码

骑猪看日落 2022-11-28 15:24 226阅读 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)奠定坚实的基础。

This tutorial will introduce you to a basic HTML document and teach you how to view the source code of an HTML document in a browser.

本教程将向您介绍基本HTML文档，并教您如何在浏览器中查看HTML文档的源代码。

HTML is used to mark up a document with instructions that tell a browser how to display and interpret the document’s content. For example, HTML can tell the browser which text content should be interpreted as a heading and which text content should be interpreted as paragraphs. HTML is also used to add images and assign links to text and images. These instructions are communicated through HTML tags, which are written like this: `<tagname>`. Many, though not all tags, use an opening tag and closing tag to wrap around the content that they are used to modify.

HTML用于通过指示浏览器如何显示和解释文档内容的指令来标记文档。 例如，HTML可以告诉浏览器哪些文本内容应解释为标题，哪些文本内容应解释为段落。 HTML还用于添加图像并为文本和图像分配链接。 这些指令通过HTML标记传达，这些标记的编写方式如下： `<tagname>` 。 许多(尽管不是全部)标记使用开始标记和结束标记来包装它们用于修改的内容。

To get a sense of how these tags are used, let’s inspect a snippet of HTML code. The HTML code below shows how HTML tags are used to structure text and add links and images. Don’t worry if you don’t understand the tags immediately- we’ll study those in the next tutorial.

为了了解如何使用这些标记，让我们检查一段HTML代码。 下面HTML代码显示了如何使用HTML标签构造文本以及添加链接和图像。 如果您不立即了解这些标记，请不要担心-我们将在下一个教程中对其进行研究。

<h1>Sammy's Sample HTML</h1>
    
    <p>This code is an example of how HTML is written.</p>
    
    <p>It uses HTML tags to structure the text.</p>
    
    <p>It uses HTML to add a <a href="digitalocean.com/community">link</a>.</p>
    
    <p>And it also uses HTML to add an image:</p>
    
    <img src="https://html.sammy-codes.com/images/small-profile.jpeg"/>

This HTML code is rendered in the browser as follows:

此HTML代码在浏览器中的呈现方式如下：

You should now have an understanding of how the HTML example code is rendered in a browser. Next, we will learn how to view the source code of any webpage using a browser tool.

现在，您应该了解如何在浏览器中呈现HTML示例代码。 接下来，我们将学习如何使用浏览器工具查看任何网页的源代码。

## 查看网页的源代码 **(**Viewing the Source Code of a Webpage**)** ##

Nearly every webpage you come across uses HTML to structure and display HTML pages. You can inspect the source code of any webpage by using a web browser like Firefox or Chrome. On Firefox, navigate to the “Tools” menu item in the top menu and click on “Web Developer/Page Source” like so:

您遇到的几乎每个网页都使用HTML来构造和显示HTML页面。 您可以使用Firefox或Chrome之类的网络浏览器检查任何网页的源代码。 在Firefox上，导航至顶部菜单中的“工具”菜单项，然后单击“ Web开发人员/页面源”，如下所示：

On Firefox, you can also use the keyboard shortcut `Command-U` to view the source code of a webpage.

在Firefox上，您也可以使用键盘快捷键`Command-U`来查看网页的源代码。

On Chrome, the process is very similar. Navigate to the top menu item “View” and click on “Developer/View Source.” You can also use the keyboard shortcut `Option-Command-U`.

在Chrome上，过程非常相似。 导航到顶部菜单项“视图”，然后单击“开发人员/视图源”。 您也可以使用键盘快捷键`Option-Command-U` 。

Try inspecting the source code of the [demo website that we will build][] in this tutorial series. You should receive a page with many more HTML tags than our example above. Don’t be alarmed if it seems overwhelming. By the end of this tutorial series, you should have a better understanding of how to interpret HTML source code and how to use HTML to build and customize your own websites.

尝试检查[我们将][demo website that we will build]在本教程系列中[构建][demo website that we will build]的[演示网站][demo website that we will build]的源代码。 您应该会收到一个页面，其中包含比上述示例更多HTML标签。 如果它看上去势不可挡，请不要惊慌。 在本教程系列结束时，您应该对如何解释HTML源代码以及如何使用HTML建立和定制自己的网站有更好的了解。

**Note**: As mentioned above, you can inspect the source code of any webpage using tools from the Firefox or Chrome web browser. Try inspecting the code of a few of your favorite websites to get a sense of the underlying code that structures web documents. Though the source code of these sites will likely contain more languages than HTML, learning HTML first will help prepare you to learn additional languages and frameworks for creating websites later on if you wish.

**注意** ：如上所述，您可以使用Firefox或Chrome网络浏览器中的工具检查任何网页的源代码。 尝试检查一些您喜欢的网站的代码，以了解构成Web文档的基础代码。 尽管这些站点的源代码可能包含比HTML更多的语言，但是如果您愿意，先学习HTML可以帮助您准备学习其他语言和框架，以便以后创建网站。

You should now have a general understanding of the format of an HTML document and know how to inspect HTML source code using a browser tool. To better understand how HTML works, let’s inspect its key components. In the next tutorial, we will learn more about HTML *elements*, the building blocks that are used to create HTML documents.

现在，您应该对HTML文档的格式有了一般的了解，并且知道如何使用浏览器工具检查HTML源代码。 为了更好地理解HTML的工作原理，让我们检查其关键组件。 在下一个教程中，我们将学习有关HTML *元素的*更多信息，HTML *元素*是用于创建HTML文档的构建块。

> 翻译自: [https://www.digitalocean.com/community/tutorials/how-to-view-the-source-code-of-an-html-document][https_www.digitalocean.com_community_tutorials_how-to-view-the-source-code-of-an-html-document]

[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/
[demo website that we will build]: https://html.sammy-codes.com/
[https_www.digitalocean.com_community_tutorials_how-to-view-the-source-code-of-an-html-document]: https://www.digitalocean.com/community/tutorials/how-to-view-the-source-code-of-an-html-document