在学习 HTML 的基本结构之前,我们先来看一段简单的代码:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
</body>
</html>
这些由<
(左尖角号)、内容以及>
(右尖角号)组成的叫做标签(tag),三者缺一不可。在 HTML 中,使用<>
包围标签的目的是方便将它们与普通文本进行区分。
上述代码描述的是 HTML 的基本结构,主要使用了
<!DOCTYPE>
、<html>
、<head>
、<title>
、 <body>
等标签。我们来分别看一下:
<!DOCTYPE>
是 Document Type Declaration 的简称,用来声明文档,也就是告知 web
浏览器当前页面使用了哪种 HTML 版本编写代码,此处使用的是 HTML 5 的版本。声明文档必不可少,而且必须位于 HTML文档的第一行;<html>
表示页面编写的代码都是 HTML 代码。它是成对出现的标签,直到 结束。除了声明文档外的所有代码都必须写在<html></html>
中间;<head>
表示页面的"头部",页面的 title(标题)一般写在<head></head>
中间;<title>
表示页面的标题;<body>
表示页面的"身体",页面中的绝大部分内容都可以写在<body></body>
之间。
HTML 中的标签根据闭合状态可以分为 2 种,单闭合标签和自闭和标签。接下来看一下它们之间的区别。
1. 单闭合标签
HTML 基本结构中的 <html></html>
、<head></head>
、<title></title>
以及 <body></body>
标签都属于单闭合标签。其中 <html>
、<head>
、<title>
以及<body>
标签叫做起始标签,</html>
、</head>
、</title>
以及 </body>
标签叫做结束标签。由此我们可以看出,单闭合标签是指起始标签和结束标签同时存在的标签。
2. 自闭和标签
自闭和标签与单闭合标签的区别在于,它的结束标签可以使用/(结尾斜线)替代,直接写在起始标签的尾部。例如图像标签 <img>
可以写成 <img />
,换行标签 <br>
可以写成 <br />
。