HTML 文档结构
当用户通过互联网浏览网页时,他们会遇到各种形式的内容,包括文本、链接、图表、图片等。
你是否曾想过浏览器是如何显示这些页面内容的?我们可以按下 F12 来查看页面的源代码,如下图所示。
从上图中可以看到,所有的字符内容都被包裹在尖括号 <
和 >
中。这样的内容被称为标签 ,其中 <>
表示开始标签,</>
表示结束标签。
HTML 是一种由元素组成的语言,这些元素通过标签来表示。
HTML(H yperText M arkup L anguage)是用于结构化网页及其内容的代码。
超文本(Hyper) :与“线性”相对。早期的计算机程序大多是线性的,意味着它们必须从上到下按顺序执行。而使用 HTML 创建的网页则允许通过超链接从一个页面导航到另一个页面。
文本(Text) :与 C、C++ 或 Java 等编译型编程语言不同,HTML 是一种基于文本的脚本语言。它的源代码直接在浏览器中解释运行,无需编译。
标记(Markup) :HTML 的基本原理是使用标记(由成对的尖括号组成的标签)来描述网页内容在浏览器中的显示方式。
语言(Language) :HTML 是一种语言,但它是一种解释型语言而非编译型语言。所有的标记标签都由浏览器翻译成最终的显示结果。
在这一步中,你将开始设置网页的基本结构。你需要在目录 /home/labex/project
下创建一个名为 index.html
的新 HTML 文件,使用命令 touch ~/project/index.html
。用你喜欢的文本编辑器打开这个文件,并添加基本的 HTML 文档结构:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pet's House</title>
</head>
<body>
<!-- 我们将在接下来的步骤中添加内容 -->
</body>
</html>
<!DOCTYPE html>
声明告诉浏览器期望的文档类型。
<html lang="en">
元素是 HTML 文档的根元素。
<head>
元素包含元数据(关于文档的数据),例如标题和字符集。
<title>
元素指定网页的标题。
<meta charset="UTF-8">
元素指定网页的字符编码。
<body>
元素包含网页的可见内容。
点击环境右下角的 Go Live 以打开端口 8080,然后点击环境左上角的 Web 8080 查看页面结果。
注意:当前页面没有效果,因为 body 目前为空。当我们学习更多标签后,可以看到页面的效果。