如何查看HTML⽂档的源代码
html导航源码This tutorial series will guide you through creating and further customizing 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 if you wish to recreate the demonstration website.
本教程系列将指导您使⽤HTML(⽤于在Web浏览器中显⽰⽂档的标准标记语⾔)创建和进⼀步⾃定义 。 不需要任何编码经验,但是如果您希望重新创建演⽰⽹站,建议您从的 。
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/community">link</a>.</p>
<p>And it also uses HTML to add an image:</p>
<img src="html.sammy-codes/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 “Develope
r/View Source.”You can also use the keyboard shortcut Option-Command-U.
在Chrome上,过程⾮常相似。 导航到顶部菜单项“视图”,然后单击“开发⼈员/视图源”。 您也可以使⽤键盘快捷键Option-Command-U 。
Try inspecting the source code of the 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.
尝试检查在本教程系列中的的源代码。 您应该会收到⼀个页⾯,其中包含⽐上述⽰例更多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⽂档的构建块。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论