每个页面都是一个独立的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. 初识orm

    初识orm 一.什么是orm 介绍 ORM: 对象关系映射 将随对象映射成 数据表中的鱼跳跳记录 类--->表名 对象--->记录 对象.属性--->字段 # 演示映射关系 ''' ...

  2. Violet 6 杯省选模拟赛 蒲公英

    https://www.luogu.com.cn/problem/P4168 题目 给$n$个数字,有$m$次询问,问$a_l, a_{l+1} , \dots , a_r$的众数是什么, $1\le ...

  3. 【安富莱】V6，V5开发板用户手册，重在BSP驱动包设计方法，HAL库的框架学习，授人以渔（2019-11-04）

    说明: 1.本教程重在BSP驱动包设计方法和HAL库的框架学习,并将HAL库里面的各种弯弯绕捋顺,从而方便我们的程序设计. 2.本次工程延续以往的代码风格,从底层BSP驱动包到应用代码,变量命名,文件 ...

  4. maven仓库之第一篇

    maven jar仓库 :存放maven项目使用的jar包. 中央仓库,存放99%免费开源项目jar包,apache公司负责维护的,以T为单位的存储. 例如 : struts2-core-2.3.24 ...

  5. javaWeb综合案例

    商城案例 分模块:用户模块→ 分类模块 → 商品模块→购物车模块(最难)→ 订单模块 后台模块(往前台的数据的增删改查) 今日任务: 1用户注册 a注册完成 b给注册人发邮件 2用户激活 a 去邮箱激 ...

  6. SpringCloud（七）：springcloud-config统一管理配置中心

    前言: Spring Cloud Config组件是独立的,不需要注册到eureka.config工作原理是把读取目标到配置拉取到本地缓存一份然后供给其他客户端使用,所以一旦config启动成功,可以 ...

  7. Android 开发时使用 ViewPager 的问题及解决方案整理

    1. ViewPager 的页面重置问题 当我们使用ViewPager控件时,假设我们的ViewPager有三页,当我们第一次启动ViewPager显示第一页的时候,ViewPager会预加载第二页, ...

  8. Thymeleaf常用语法：使用星号表达式

    在处理模板时,一般情况都是使用变量表达式 ${...} 来显示变量,还可以使用选定对象表达式 *{...},它也称为星号表达式.如果在模板中先选定了对象,则需要使用星号表达式.Thymeleaf的内置 ...

  9. JupyterLab安装与配置虚拟环境

    JupyterLab安装: 推荐使用miniconda,相比于anaconda更加简洁,下载连接:https://mirrors.tuna.tsinghua.edu.cn/anaconda/minic ...

  10. Sql之for update

    for updateselect * from xxxxxxx where namemc='筛查' for update那是一种行级锁,一旦用户对某个行施加了行级加锁,则该用户可以查询也可以更新被加锁 ...