首页 web前端 H5教程 HTML5标准学习-文档结构详解

HTML5标准学习-文档结构详解

Mar 27, 2017 pm 03:34 PM

说起HTML的结构,很多人都能说得头头是道,一般来说答案可能是这样的:

一个DOCTYPE,一个html,里面有head和body元素。

这当然不能说是不正确的,但是如果问到一个最小的HTML源文件必须有哪一些东西的话,恐怕很少有人能正确地做出回答。

先来回答一下这个问题,一个最简的HTML5源码文件需要的内容如下:

<!DOCTYPE html>
登录后复制

是的,就这样,一个字符不多,一个字符不少,除了大小写可任意变化外,其他的任何内容都是不能变动的。

那么究竟是怎么样的规则,导致一个最简的源码文件必须有doctype声明呢?根据标准,一个HTML文档有如下内容组成(严格按照顺序):

  1. 一个BOM标记,且这个BOM标记必须为U+FEFF。

  2. 0-n个空格或注释。

  3. DOCTYPE声明。

  4. 0-n个空格或注释。

  5. 一个HTML元素。

  6. 0-n个空格或注释。

这里存在着一些和HTML4的不同,一个HTML4的最简源码文件是这样的:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                      "http://www.w3.org/TR/html4/loose.dtd">
<title>这里是标题</title>
登录后复制

两者的区别是显而易见的:

  • HTML5把DOCTYPE修改为更简单的&lt;!DOCTYPE html&gt;,这个已经众所周知了。

  • 在HTML4中多了一个<title>标签。

这里的重点就是<title>标签了,关于这个标签,在HTML4.01标准中是这么说的:

Every HTML document must have a TITLE element in the HEAD section.

也即是说,HTML4要求<title>标签是必须存在的。

而在HTML5的标准中,又是这么说的:

There must be no more than one title element per document.

HTML5中只设定了<title>标签数量的上限,却没有指明下限,也就是说,没有<title>的文档已经被视为一个合法的文档了。

对于DOCTYPE,HTML4中设定了6种DOCTYPE,HTML5中将DOCTYPE分为3种,这个在以后的章节中再具体说明。

再回过来看一下文档组成,除去这样并没有多大意义的元素之外,组成的列表中还说明有一个HTML元素,但是最简的源码中却没有这东西。这是因为在HTML的规范中,一直存在“隐式标签”这样的概念,关于隐式标签,大致可以这么解释:

一部分元素,当满足特定的前提条件时,其开始标签或结束标签可以在源码中省略。在这种情况下,被省略的标签称为“隐式标签”。

需要注意的是,此处的省略指的是在源码中省略,而在最终成型的DOM树中,这个标签是存在的,因此才称为隐式标签。因此上面最简的源码结构,在生成DOM树后,其真正的结构是这样的:

&lt;!DOCTYPE html&gt;
<html>
    
    
登录后复制

最后,再总结一下XHTML中的一些规范:

  • 因为是XML,所以为了表示这是一个HTML文档,必须有一个命名空间,其值为www.w3.org/1999/xhtml

  • 因为是XML,所以MIME type不能是text/html了,text/xmlapplication/xmlapplication/xml+html都是比较好的选择。

  • 因为是XML,必须有根元素,根元素为<html>,即<html>的开始和结束标签不能省略了。

  • 因为是XML,所有元素只要有了开始标签,就不能没有结束标签,或者自闭合。

  • 因为是XML,所有元素都得严格遵守大小写,元素名称必须为小写。

因为是XML,文档变得严格了很多,也因为是XML,其可读性和规范性提高了不少。但最终,我们始终要在HTML的宽容性和XML的规范性之间找到最佳的平衡点,一味地追求极端始终是一个错误。


以上是HTML5标准学习-文档结构详解的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1657
14
CakePHP 教程
1415
52
Laravel 教程
1309
25
PHP教程
1257
29
C# 教程
1230
24
HTML 中的表格边框 HTML 中的表格边框 Sep 04, 2024 pm 04:49 PM

HTML 表格边框指南。在这里,我们以 HTML 中的表格边框为例,讨论定义表格边框的多种方法。

HTML 左边距 HTML 左边距 Sep 04, 2024 pm 04:48 PM

HTML 左边距指南。在这里,我们讨论 HTML margin-left 的简要概述及其示例及其代码实现。

HTML 中的嵌套表 HTML 中的嵌套表 Sep 04, 2024 pm 04:49 PM

这是 HTML 中嵌套表的指南。这里我们讨论如何在表中创建表以及相应的示例。

HTML 表格布局 HTML 表格布局 Sep 04, 2024 pm 04:54 PM

HTML 表格布局指南。在这里,我们详细讨论 HTML 表格布局的值以及示例和输出。

HTML 输入占位符 HTML 输入占位符 Sep 04, 2024 pm 04:54 PM

HTML 输入占位符指南。在这里,我们讨论 HTML 输入占位符的示例以及代码和输出。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在这里我们还分别讨论了 HTML 有序列表和类型的介绍以及它们的示例

HTML onclick 按钮 HTML onclick 按钮 Sep 04, 2024 pm 04:49 PM

HTML onclick 按钮指南。这里我们分别讨论它们的介绍、工作原理、示例以及各个事件中的onclick事件。

在 HTML 中移动文本 在 HTML 中移动文本 Sep 04, 2024 pm 04:45 PM

HTML 中的文本移动指南。在这里我们讨论一下marquee标签如何使用语法和实现示例。

See all articles