HTML基本的文档结构

HTML（Hyper Text Markup Language）基本文档结构是指组成一个基本的HTML页面所必须的元素标签。它的根节点是由一个文档声明“<!doctype html>”和一个“<html>”标签组成的，而<html>标签下级（又称“子节点”）又包含“<head>”和“<body>”两个主要的标签，具体编写格式如下：

在HTML中标签名是不区分大小写的，也就是说一个标签既可以全部写成大写的英文字母，也可以全部写成小写的英文字母（主流的写法），如：“<head>”写成“<HEAD>”，“<body>”写成“<BODY>”都不会影响页面的正常运行。甚至还可以将一个标签元素的英文字母大小混写都是不影响页面正常运行的，但这种做法会影响代码的可读性，并不推荐。

标签的组成

一个HTML文档是由标签组成的，所以说，html不是一种编程语言，它是一种标记语言，标记语言采用标签(Tag)来描述一个网页，而一个标签是由标签名、属性名、属性值和内容组成。

正确地记识标签的组成，对以后的学习和交流都有帮助，也是学习Web前端开发中的一门基本环节，所以务必要正确地识别一个标签中的各个组成部分和它代表的术语名称。

<!doctype html>

Document type HTML，定义文档的类型为HTML。若无该标签，则很多浏览器不能正确识别HTML文档内的内容，导致显示出现乱码，页面内的样式不能渲染，功能也会失效，像这种无类型声明而进行页面渲染的模式称作“混杂模式”。

<!doctype html>这种写法是HTML5标准后定义的写法，可以适当向前兼容。早期版本的HTML定义会比较复杂，通常是从已有的页面拷贝，或编辑器自动生成的。下面是“HTML4”和“XHTML1”相关文档类型的一些声明方式，不要求记忆，只需在看到的时候能正确的识别。

<html>标签

HTML文件最基本的标签，在一些新版本的浏览器中没有该标签也能显示出HTML内的内容，但是为了兼容更多的浏览器还是应该避免这种“缺斤少两”的行为（除非该页面是通过Ajax异步导入到一个公共页内的，那外层的所有标签都可以省略，只用保留<body>标签内的内容），通常编辑器会将里面的“lang”属性的值设为“en”，这时用带自动翻译的浏览器（如Google Chrome）打开会识别到该属性值，从而询问用户是否翻译。因而，若网站面向的是中国客户，可以将该属性设置为“zh”或“zh-cn”。

由于该标签是HTML文档中最基本的标签，所以它反而是一个非常容易被开发经验不足的开发者所忽略的标签，它在页面中也会根据自身的内容来调整占据浏览器内的高度，也可以设置CSS样式，这在以后的项目开发中要稍加留心，特别是做页面CSS样式初始化的时候要注意。

<head>标签

用于放置网页基本信息的标签，需要包含<meta>标签和<title>标签对，可包含外部文件引入的标签，如：<style>标签对、<link>标签和<script>标签对。

<meta>标签: 不包含任何内容，并且没有结束标签。它是通过对应的属性来设置编码格式（必要）、设备显示缩放、搜索引擎关键字、描述、浏览器内核渲染方式等内容。<参考文献>
<title>标签: 不需要设置任何属性，只需包含纯文本内容，用于显示网页标题，在浏览器端会将该标签内设置的文本内容显示于浏览器标签页上。如：<title>HTML基本文档结构</title>，在浏览器标签页上的显示效果就如下：
<style>标签对: 在该标签对内通过选择器设置页面内标签元素的样式。在HTML5规范中已不需要设置属性，若考虑到兼容性，通常需要加上样式类型说明的属性“<style type="text/css">”。
<link>标签: 该标签没有结束标签，用于导入外部文件。但目前的浏览器主要支持两种文件的引入方式，即外部样式表和浏览器标签上的图标。该标签主要支持两种属性：
<base>标签: 该标签为页面上的所有链接（路径）规定默认地址或默认目标，使开发者不必重复地去设置那些相同的链接路径和超链接的打开方式，它有两个属性：
<script>标签对: 在HTML5的规范中，该标签不需要加上任何属性，默认支持Javascript的执行，老版本的IE浏览器需要加上属性<script type="text/javascript">。在以前，这个标签通常是放置于<head>标签对以内的，后来很多前端工程师发现，将该标签放置于文档末尾，也就是</body>结束标签之前（图中的放置方式也是可以的，不过在浏览器实际渲染的时候还是会将那3个script标签对放置于body标签对以内）更利于提升HTML文档的加载显示速度。因为HTML文档是按顺序自上而下加载的，而script标签一般对应的是JavaScript涉及到功能部分的内容，而这些一般是不急于在用户眼前展现的，可以晚一些再进行加载（而根据页面内容的多寡和代码运行的速率，一般最多就是晚几百毫秒而已）。到现在，这种做法已经成为了一种主流的做法。

需要强调的是，<script>标签对和<style>标签对不同的一点是：<script>标签对内不仅可以直接编写JavaScript的代码，还能引用外部的js文件，而<style>标签对是不能引用外部CSS文件的，要引用外部CSS文件只能通过<link>标签来实现。

<body>标签对

该标签为HTML文档在浏览器内显示内容的标签，它定义了内容的显示类型，无论通过什么外部方式去进行控制和设置，最终都是通过<body>标签对将内容交付给浏览器进行渲染，也就是说如果没有<body>标签对内的内容，在浏览器端将是一片“苍白”，见不到任何实质性的内容。

HTML中所有的文本、基本标签、表单标签、<canvas>标签、超链接、图像、音频、视频等有实质内容的标签都应放置于<body>内，否则浏览器内核将不能正确的渲染并最终显示。

<章节练习>

通过熟记HTML的基本文档结构，然后通过系统提供的Notepad（文本编辑器）将HTML的文档结构默写下来。默写期间不能进行任何参考，写完之后若发现错误，需关掉Notepad，重新写一遍，直到能一字不错的默写出HTML的基本文档结构为止。

文档流

所谓文档流就是HTML文档中可显示元素在排列时所占用的位置。HTML文档流中的标签元素遵循“从左到右、从上到下”的排列次序，有如现代汉字的书写顺序一样，但又存在着一些差别。如：

运行效果：

在以后会学到的CSS样式表中，有一些CSS属性可以让指定的元素脱离文档流，也就是忽略元素的默认定位属性（position:static），将元素重新定位（“position:absolute”和“position:fixed”）或浮动（“float:left”和“float:right”）到指定位置以适应页面的布局需要，还有一个有些争议的脱离文档流的方式，就是将CSS的“display”属性值设置为“none”，之所以说有争议就是要看怎么去划分“脱离”和“隐藏”这两个词界限了，大家可以在学习到这一部分的内容之后自行进行思考。

标签的嵌套

所谓标签的嵌套，是指一个标签对以内包含另外一个标签，如：<html>标签内包含<head>和<body>两个标签对，而<head>标签内又可以包含<meta>和<title>等标签。也就是说标签不仅可以单独存在，又可以包含其它一个或多个标签，而且标签的嵌套可以是多层的，并且嵌套层数是没有限制的。

标签的嵌套根据代码规范性、性能和SEO等方面考虑，应当遵循以下规则：

HTML页面中所有需要显示在浏览器窗口内的内容均需要放置在<body>标签对以内。
在不影响页面显示、CSS样式设置和DOM操作的前提下，标签的嵌套层数是越少越好。
标签嵌套的基本顺序应该是“块级标签>行内块标签>行内标签”（这些显示类型会在以后的学习中慢慢地指引大家进行识记）。
同一个显示类型的标签可以进行嵌套，如：“块级标签>块级标签”（<p>标签比较特殊，会在下一章中讲到）、“行内块标签>行内块标签”和“行内标签>行内标签”。
避免使用“行内标签”去嵌套“行内块标签”和“块级标签”、“行内块标签”去嵌套“块级标签”，虽然有的时候在显示上并不会出现问题，但“行内标签”大部分是不具备布局属性的，需要进行显示类型转换才能够进行CSS的布局设置，既麻烦，又不规范。

我们可以通过这样一幅图来理解HTML文档中元素的“显示类型”及嵌套关系：

关于元素“显示类型”的类型种类和标签“显示类型”的分类，我们会在“CSS”课程分类中的“CSS显示与定位”章节中更加详细的讲解和分析，在本章内容中只需要大家在脑中建立起一个HTML基本文档结构的嵌套模型。