专栏首页老码农的一亩三分地IT兄弟连 HTML5教程 HTML文件的主体结构

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/ITXDL123/article/details/101437097

每个页面都是一个独立的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文档结构完整性,会让可读性更好。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • MySQL auto_increment问题

    https://yq.aliyun.com/articles/59263?spm=5176.8091938.0.0.bjzoFN

    二狗不要跑
  • 用Python爬虫下载整本小说

    如今网络上很多小说网站都有免费的小说阅读,但是它不提供下载全本的服务,目的也是为了获得更多的流量,资源君就不服了,今天刚好看到一个小说网站,就想弄本小说来看看,...

    JAVAandPython君
  • 资源君带你抓取网站数据

    这是公众号Java模板(跟资源君一起学Java)的第一篇推文,资源君创建这个模板也是为了监督自己不断的学习,并且不断的跟大家一起分享编程当中的一些好...

    JAVAandPython君
  • PG Logical Replication 逻辑复制

    我下面演示的PG环境是单机多实例的方式部署在同一台物理机上的。部署方式可以参考 上一篇博客。

    二狗不要跑
  • pipelinedb 初探

    http://docs.pipelinedb.com/installation.html#installation

    二狗不要跑
  • 一种基于proxysql的数据脱敏思路

    背景:我们这边给研发查数据的是通过phpmyadmin进行的,通常情况下研发人员查数据写法是 select * from db1.tb1 where id=xx...

    二狗不要跑
  • 如何检测遗传相关的显著性:LRT检验操作方法

    3. 软件实现遗传相关计算 3.1 数据格式 前三列是系谱,有3个性状: y1, y2, y3 , 想要计算y1和y3的遗传相关,并用LRT检验显著性

    邓飞
  • 《中餐厅》弹幕数据分析,我不要你觉得,我只要我觉得!

    这段时间奇怪了,周围朋友都爱上了同一个口头禅“我不要你觉得,我只要我觉得”;我就纳闷了汉语文字那么多,你们偏偏都爱上了同一句,我怀疑他们在玩梗,果不其然,在B站...

    小小詹同学
  • Pandas常见的性能优化方法

    Pandas是数据科学和数据竞赛中常见的库,我们使用Pandas可以进行快速读取数据、分析数据、构造特征。但Pandas在使用上有一些技巧和需要注意的地方,如果...

    石晓文
  • Java SPI机制浅析

    在平时开发项目的过程中,相信很多读者都看到过这样的目录,/META-INF/services目录,该目录下的文件名是接口的全称,其内容是具体的接口实现。这就是使...

    孟君

扫码关注云+社区

领取腾讯云代金券