HTML文档的结构

于刚刚接触到超文本的朋友来说，最大的障碍就是用“<”和“>”阔起来的句子，我们称之为标签。大多数标签都有自己的属性，属性要写在首标签中，属性用来进一步改变现实的效果。各属性之间为先后次序，属性是可选的。属性也可以省略而使用默认值。格式是这样的<标签名属性1=属性值 1 属性2=属性值 2 ......>。注意：标签和属性不区分大小写。

html文档结构由三个部分组成。

1.头部

2.标题

3.元标签

<1>大家都学过英语，一定知道头的英语单词是“head”。没错，在html中，我们也使用head来表示文档的头部，即<head>...</head>。头部位于<html>和</html>之间。

例如：<html>

<head>

</head>

</html>

<2>标题用英语怎么说呢？title，其实网页与人一样，网页的眼睛也在头上，在<title>标签对内部放入你想要看到的文字，这样我们就能随意操纵标题栏的内容了。比如：

<html>

<head>

</head>

</html>

<3>在<head> 标签的内部还可以嵌套另一个重要的标签：<meta>这个标签，此标签用于描述html页面文档的属性，如作者、日期和时间、网页描述、关键字、页面刷新等。例如：

TML 是什么？

表示超文本标记语言（Hyper Text Markup Language）
描述了网页的结构
由一些列元素组成
元素告诉浏览器如何显示内容，由标签表示
标签标记了“标题”，“段落”，“表”等内容
浏览器不显示HTMl标记，而是使用它们来呈现页面内容

基本结构

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>无标题文档</title>
 </head>
 <body>
 // 页面源代码内容
 </body>
</html>

<!DOCTYPE html>，文档声明，位于文档最前面位置。
<html>元素是一个HTML页面的根元素
<head>，元素包含关于文档的元信息
<meta>，定义文档元数据，常用来描述当前页面的特性，比如文档字符集 charset="utf-8"
<title>，元素指定该文档的标题
<body>，元素包含可见页面的所有内容

动手小练习：

1.试着默写HTML基本结构

TML文档结构

HTML文档，也被称为网页，包括头部和主体两大部分。头部主要描述浏览器和搜索引擎所需要的信息，浏览器不会将这些信息呈现给访问者；主体是文档的正文，是网页中真正要传达的信息，这些信息将在浏览器窗口的正文部分呈现给访问者。

HTML文档总是以 <html> 标签开始，以 </html> 标签结束，在 <head>...</head> 标签之间的内容是头部信息，<body>...</body> 标签之间的内容是主体部分，即文档的正文。此外，还要在文档的最开头，通过 <!DOCTYPE> 声明这是一个HTML文档。如图 1‑16 所示：

html文档结构图1-16 html文档结构

上图告诉我们，一个HTML文档由4个基本部分组成：

① 一个文档声明：<!DOCTYPE html>

② 一个html标签对：<html></html>

③ 一个head标签对：<head></head>

④ 一个body标签对：<body></body>

<!DOCTYPE>

<!DOCTYPE> 声明必须是HTML文档的第一行，位于 <html> 标签之前。该声明不是HTML标签，它是告诉浏览器该HTML文档的DTD类型（Document Type Definition，文档类型定义）。

在HTML5之前，有多种DTD类型，分别为Transitional类型、Strict类型、Frameset类型，而不同类型对文档标签严格程度的要求不同，并且<!DOCTYPE>的写法非常复杂，估计也没有人能够完全记住这些写法，这给开发带来了混乱。

到HTML5之后，一切化繁为简，只需声明<!DOCTYPE html>即可，它就告诉浏览器，该文档是一个HTML5文档。

在线咨询

上一篇：CSS+HTML ul li列表原点如何相连？
下一篇：好程序员web前端培训分享HTML元素强制不换行