IT兄弟连 HTML5教程 HTML文件的主体结构

每个页面都是一个独立的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文件的主体结构的更多相关文章
- IT兄弟连 HTML5教程 设置IE9以下版本浏览器支持HTML5
HTML2.HTML5刚发布时由于各浏览器之间的标准不统一,开发者的时间都浪费在解决Web浏览器之间的兼容性上.但由于W3C和WHATWG对HTML5新版本的制定,以及近年来对HTML5的使用,再加上 ...
- IT兄弟连 HTML5教程 多媒体应用 小结及习题
小结 在互联网上,图像和链接则是通过URL唯一确定信息资源的位置.URL分为绝对URL和相对URL.通过使用<img />标记在浏览器中显示一张图像.超文本具有的链接能力,可层层链接相关文 ...
- IT兄弟连 HTML5教程 HTML5的基本语法 小结及习题
小结 一个完整的HTML文件由标题.段落.列表.表格.文本,即嵌入的各种对象所组成,这些逻辑上统一的对象称为元素.HTML文档主体结构分为两部分,一部分是定义文档类型,另一部分则是定义文档主体的结构框 ...
- IT兄弟连 HTML5教程 HTML文档头部元素head
HTML头部标记是<head>,主要包括页面的一些基本描述语句,以及CSS和JavaScript,一般都可以定义在头部元素中.它用于包含当前文档的有关信息,例如网页标题和关键字等.通常位于 ...
- IT兄弟连 HTML5教程 CSS3揭秘 小结及习题
小结 CSS3对于开发者来说,给web应用带来了更多的可能性,极大提高了开发效率.CSS3在选择器上的支持可谓是丰富多彩,使得我们能够灵活的控制样式,而不必为元素进行规范化的命名.CSS3支持的动画类 ...
- IT兄弟连 HTML5教程 HTML5表单 小结及习题
小结 HTML表单提交的方法有get方法和post方法,get方法的作用是从指定的资源请求数据,post方法的作用是向指定的资源提交要被处理的数据.HTML表单一直都是Web的核心技术之一,有了它我们 ...
- IT兄弟连 HTML5教程 HTML5表单 HTML表单中的get和post方法
指引 表单在网页应用中十分重要,基本上任何一个网站都必须使用到表单元素,所以表单的美观和易于交互对于网站设计就变得十分重要.HTML5对目前Web表单进行了全面提升,使得我们使用表单更加智能.它在保持 ...
- IT兄弟连 HTML5教程 多媒体应用 新增多媒体播放元素
在HTML5之前,要在网站上展示视频.音频.动画等多媒体信息,除了使用第三方自主开发的播放器,使用最多的工具应该算是Flash了,但是它们都需要在浏览器中安装各种插件才能使用,有时速度很慢.HTML5 ...
- IT兄弟连 HTML5教程 HTML语言的语法 1
HTML是文本类型的语言,和其他任何一门语言相比,语法都是最简单的.但在编写HTML文件时,必须遵循HTML的语法规则.一个完整的HTML文件由标题.段落.列表.表格.文本,即嵌入的各种对象所组成,这 ...
随机推荐
- 逆向学习周记-C语言空函数
实验环境:WIN7虚拟机 软件:VC6 首先在VC6里面写一个空函数Fun(): F7编译运行一下,没有出错,接着在函数处使用F9下断点,使程序运行到Fun函数时停下. 接着F5开始运行这个程序 程序 ...
- linux 源设置
ubuntu 18.04.3 sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak cat > /etc/apt/sources.lis ...
- 蓝牙spp协议分析
基本概念 蓝牙串口是基于 SPP 协议(Serial Port Profile),能在蓝牙设备之间创建串口进行数据传输的一种设备. 蓝牙串口的目的是针对如何在两个不同设备(通信的两端)上的应用之间保证 ...
- 关于dom4j解析XML的问题分享
最近在在做个程序需要将C#小工具转成java,因为需要涉及到操作xml文件所以需要引用dom4j: 使用dom4j解析XML时,要快速获取某个节点的数据,使用XPath是个不错的方法,dom4j的快速 ...
- IT兄弟连 HTML5教程 HTML5表单 HTML表单设计2
5 隐藏域 隐藏域不会在表单中显示.如果需要在页面之间传递重要数据,则在<input>标签中设置type属性值为“hidden”建立一个隐藏域.name和value属性是必需的,用来表示 ...
- 一文带你深入浅出Spring 事务原理
Spring事务的基本原理 Spring事务的本质其实就是数据库对事务的支持,没有数据库的事务支持,spring是无法提供事务功能的.对于纯JDBC操作数据库,想要用到事务,可以按照以下步骤进行: 获 ...
- SpringBoot2.0 整合 SpringSecurity 框架,实现用户权限安全管理
本文源码:GitHub·点这里 || GitEE·点这里 一.Security简介 1.基础概念 Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方 ...
- vue事件监听机制
vue事件是同步的.如果绑定了事件(组件标签上绑定事件) 组件的事件触发 组件调用时绑定事件 之后监听事件: $emit 抛出后活等着 $on ,如果监听到了则阻塞执行: 如果为监听到或者未绑定,则会 ...
- Scrapy中response属性以及内容提取
一.属性 url :HTTP响应的url地址,str类型 status:HTTP响应的状态码, int类型 headers :HTTP响应的头部, 类字典类型, 可以调用get或者getlist方法对 ...
- Can not find the tag library descriptor for “http://java.sun.com/jstl/core"
此文原博文地址:https://blog.csdn.net/kolamemo/article/details/51407467 按照查到的资料,JSTL taglib需要jstl.jar来支持.在1. ...