每个页面都是一个独立的HTML文档，每个HTML文档的主体结构又都是相同的，而且在一个文档中这样的主体结构只能声明一次。可以简单的将HTML文档主体结构分为两部分，一部分是定义文档类型，HTML5中声明文档类型可比以前的版本简单多了，只需要15个字符就可以搞定。另一部分则是定义文档主体的结构框架标签，因为标签并不是任意排放的，需要有一定的嵌套规则。就像一颗树是从树根到树干、树枝、树叶这样的结构生长，而不能在树叶上长出树根来，HTML文档的结构也是如此，整个文档是一个整体，最外层标签只有一个，第二层标签有两个，是这样固定的结构，第三层以后可以任意嵌套，就像一颗倒立的树形结构。如图所示：

图 HTML文档的树状结构

在一个HTML文档中，不仅可以通过根节点去寻找到每个子层节点元素，只要是从任意一个元素节点出发，都可以通过节点关系找到其它元素。

HTML文档类型的新定义方式

在编写HTML5文档时，要求指定文档类型，以确保浏览器能在HTML5的标准模式下进行渲染。在HTML5中刻意不使用版本声明，一份文档将会适用于所有版本的HTML，非常简便，声明方法如下：

<!DOCTYPE html>              <!--  声明没有结束标签，对大小写不敏感  --> 

声明必须是HTML文档的第一行，位于 <html> 标签之前。另外声明不是HTML标签，它是指示Web浏览器关于页面使用哪个HTML版本进行编写的指令。在HTML 4.01中，<!DOCTYPE> 声明引用DTD，因为HTML 4.01基于SGML，DTD规定了标记语言的规则，这样浏览器才能正确地呈现内容。HTML5不基于SGML，所以不需要引用DTD。另外在HTML5中只有这一种，在HTML 4.01中有三种 <!DOCTYPE> 声明：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">   <!--  第一种：HTML 4.01 Strict   -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">   <!--  第二种HTML 4.01 Transitional  -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">    <!--  第三种HTML 4.01 Frameset   --> 

以前的版本中不光有上面几个，基于XHTML不同版本还有好多种，所以在HTML5时代，你不需要使用上面这个既麻烦又难记的文档类型了，就用新的HTML5文档类型吧，简单明了，这就是HTML5的进步。

提示

请始终向HTML文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。

HTML文档的主体标签

一个HTML文档的基本格式需要包含以下几个全局架构元素标签，并将HTML代码分为三部分编写，它们可以被看作文档的框架。如下所示：

本例在网页文件中声明的这几对标签，在每个网页文档中都是唯一的，head标签和body标签需要嵌套在HTML标签中。

Ø　第一部分：<html>和</html>是网页文件的最外层标签，HTML文件中所有的内容都应该在这两个标记之间。<html>标签告诉浏览器这个HTML文件的开始点，</html>标签告诉浏览器这是HTML文件的结束点。

Ø　第二部分：位于<head>和</head>标签之间的文本是头信息，放在<html>元素的最上面使用，头信息不会显示在浏览器窗口中。主要包括当前页面的一些基本描述的语句，用于说明文件的标题和整个文件的一些公共属性，例如声明网页的标题和关键字等。每个<head>元素应当包含一个<title>元素以指示文档的标题，它也可以以任意顺序包含<base>、<object>、<link>、<style>、<script>、<meta>元素的任意组合。

Ø　第三部分：<body>标签是HTML文件的主体标记，标签之间的文本是正文内容，是用户能够在浏览器主窗口中看到的。例如，文字、图片、链接、表单等都需要声明在这个标记中。该元素出现在<head>元素之后。

当然，在HTML5新的标准规范中，这些主体标签是可以省略的，浏览器会包容这一点而不会出错，这也是HTML5使用灵活的地方。但笔者认为在编写HTML5代码时，没有必要省略它们，保持HTML文档结构完整性，会让可读性更好。

IT兄弟连 HTML5教程 HTML文件的主体结构的更多相关文章

  1. IT兄弟连 HTML5教程 设置IE9以下版本浏览器支持HTML5

    HTML2.HTML5刚发布时由于各浏览器之间的标准不统一,开发者的时间都浪费在解决Web浏览器之间的兼容性上.但由于W3C和WHATWG对HTML5新版本的制定,以及近年来对HTML5的使用,再加上 ...

  2. IT兄弟连 HTML5教程 多媒体应用 小结及习题

    小结 在互联网上,图像和链接则是通过URL唯一确定信息资源的位置.URL分为绝对URL和相对URL.通过使用<img />标记在浏览器中显示一张图像.超文本具有的链接能力,可层层链接相关文 ...

  3. IT兄弟连 HTML5教程 HTML5的基本语法 小结及习题

    小结 一个完整的HTML文件由标题.段落.列表.表格.文本,即嵌入的各种对象所组成,这些逻辑上统一的对象称为元素.HTML文档主体结构分为两部分,一部分是定义文档类型,另一部分则是定义文档主体的结构框 ...

  4. IT兄弟连 HTML5教程 HTML文档头部元素head

    HTML头部标记是<head>,主要包括页面的一些基本描述语句,以及CSS和JavaScript,一般都可以定义在头部元素中.它用于包含当前文档的有关信息,例如网页标题和关键字等.通常位于 ...

  5. IT兄弟连 HTML5教程 CSS3揭秘 小结及习题

    小结 CSS3对于开发者来说,给web应用带来了更多的可能性,极大提高了开发效率.CSS3在选择器上的支持可谓是丰富多彩,使得我们能够灵活的控制样式,而不必为元素进行规范化的命名.CSS3支持的动画类 ...

  6. IT兄弟连 HTML5教程 HTML5表单 小结及习题

    小结 HTML表单提交的方法有get方法和post方法,get方法的作用是从指定的资源请求数据,post方法的作用是向指定的资源提交要被处理的数据.HTML表单一直都是Web的核心技术之一,有了它我们 ...

  7. IT兄弟连 HTML5教程 HTML5表单 HTML表单中的get和post方法

    指引 表单在网页应用中十分重要,基本上任何一个网站都必须使用到表单元素,所以表单的美观和易于交互对于网站设计就变得十分重要.HTML5对目前Web表单进行了全面提升,使得我们使用表单更加智能.它在保持 ...

  8. IT兄弟连 HTML5教程 多媒体应用 新增多媒体播放元素

    在HTML5之前,要在网站上展示视频.音频.动画等多媒体信息,除了使用第三方自主开发的播放器,使用最多的工具应该算是Flash了,但是它们都需要在浏览器中安装各种插件才能使用,有时速度很慢.HTML5 ...

  9. IT兄弟连 HTML5教程 HTML语言的语法 1

    HTML是文本类型的语言,和其他任何一门语言相比,语法都是最简单的.但在编写HTML文件时,必须遵循HTML的语法规则.一个完整的HTML文件由标题.段落.列表.表格.文本,即嵌入的各种对象所组成,这 ...

随机推荐

  1. python快速导出sql语句（mssql）的查询结果到Excel，解决SSMS无法加载大字段的问题

    遇到一个尴尬的问题,SSMS的GridView对于大字段的(varchar(max),text之类的),支持不太友好的,超过8000个长度之外的字符,SSMS的表格是显示不出来的(当然也就看不到了), ...

  2. windows系统搭建zookeeper

    安装&配置 在apache的官方网站提供了好多镜像下载地址,然后找到对应的版本 下载地址: http://mirrors.cnnic.cn/apache/zookeeper/zookeeper ...

  3. 集合系列 List（五）：Stack

    Stack 是先进后出的栈结构,其并不直接实现具体的逻辑,而是通过继承 Vector 类,调用 Vector 类的方法实现. public class Stack<E> extends V ...

  4. Python深拷贝与浅拷贝区别

    可变类型 如list.dict等类型,改变容器内的值,容器地址不变. 不可变类型 如元组.字符串,原则上不可改变值.如果要改变对象的值,是将对象指向的地址改变了 浅拷贝 对于可变对象来说,开辟新的内存 ...

  5. 你的首个golang语言详细入门教程 | your first golang tutorial

    本文首发于个人博客https://kezunlin.me/post/a0fb7f06/,欢迎阅读最新内容! your first golang tutorial go tutorial version ...

  6. spring的简易实现（一）

    [练习]spring的简易实现(一) 在第一部分我们实现读取xml的配置,然后实例化xml中的bean 首先定义一个xml和相关的class类 <?xml version="1.0&q ...

  7. CSAPP lab1——位运算

    本次为一次计算机系统实验,就是使用一些基本的运算符来实现函数功能. ps做这些题让我想起大一上学期刚学二进制时被鹏哥支配的痛苦. 知识准备: 1.负数等于正数取反加一. 2.左移一位相当于将这个数扩大 ...

  8. Flask 教程 第七章：错误处理

    本文翻译自The Flask Mega-Tutorial Part VII: Error Handling 这是Flask Mega-Tutorial系列的第七部分,我将告诉你如何在Flask应用中进 ...

  9. Evaluation Warning : The document was created with Spire.PDF for .NET.

    由于使用  Spire.Pdf 生成的书签带有 Evaluation Warning : The document was created with Spire.PDF for .NET. 字样 但是 ...

  10. Implement Property Value Validation in the Application Model 在应用程序模型中实现属性值验证

    In this lesson, you will learn how to check whether or not a property value satisfies a particular r ...