HTML、XML、XHTML 有什么区别 (SGML、DTD 标准 )

总结：

SGML 定义电子文档和内容描述的标准。DTD 标准是SGML 的一部分

XML 是SGML 的子集，优化版

     HTML 是遵循了 DTD 标准的 SGML 的文档，也可以说是 SGML 的一个实例

     XHTML 是遵循了XML标准的 HTML 文档。

     HTML5 是HTML最新的HTML标准。但不基于SGML，所以不遵循 DTD 标准

 

1. HTML

HTML(Hyper Text Mark-up Language)即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。它告诉浏览器如何显示内容。

主要特点

1. 简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。
2. 可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
3. 平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
   通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

HTML 和 SGML 关系：

SGML规定了在文档中嵌入描述标记的标准格式，指定了描述文档结构的标准方法，目前在WEB上使用的HTML格式便是使用固定标签集的一种SGML文档。

HTML是SGML的一个实例，它的DTD作为标准被固定下来

2. XML

XML是可扩展标记语言，（eXtensible Markup Language）, 翻译成中文就是“可扩展标识语言。XML用于描绘封装数据，而HTML超文本标记语言用于展示数据，XHTML就是用XML规则规范的HTML，由于XML语法严格，因此，XHTML要求

• 元素被正确嵌套
• 必须有关闭标签</br>，
• 必须小写
• 属性必须有值且用双引号,用id代替name。

XML与HTML的主要区别

• XML 被设计用来传输和存储数据，其焦点是数据的内容。HTML 超文本标记语言被设计用来显示数据，其焦点是数据的外观。
• HTML 旨在显示信息；而XML旨在传输信息，它是独立于软件和硬件的信息传输工具。

1. 目标 :HTML的设计目标是显示数据并集中于数据外观，而XML的设计目标是描述数据并集中于数据的内容，它的显示形式靠CSS或XSL帮完成。

2. 语法：HTML的标记不是所有的都需要成对出现，XML则要求所有的标记必须成对出现；HTML标记不区分大小写，XML则大小敏感，即区分大小写。

3. 更新：XML允许粒度更新，不必在XML文档每次有局部改变时都发送整个文档的内容，只有改变的元素才必须从服务器发送到客户机，而HTML却不支持这样的功能。

4. 可读性：HTML侧重于网页数据表现形式的定义和描述，欠缺对文档数据含义的确切描述，不能适应对于日益增多的各类信息进行传递与存档的需求。例如<H2>Apple</H2>,在浏览器中显示的Apple，人们并不知道它具体是水果还是一个手机，HTML并不能解释数据Apple的含义；而XML不会给大家这个错觉如果描述的是水果中的苹果的话它会很清楚的这样表示<水果>Apple</水果>。所以说HTML的可读性相对较差。

5. XML标记由架构或文档的可自定义：还有一点就是XML标记由架构或文档的作者定义，并且是无限制的。HTML 标记则是预定义的;HTML 作者只能使用当前 HTML 标准所支持的标记。

3. XHTML

意义:指扩展超文本标签语言（EXtensible HyperText Markup Language）,目标是取代HTML.

XML是可扩展标记语言，用于描绘封装数据，而HTML超文本标记语言用于展示数据，XHTML就是用XML规则规范的HTML，由于XML语法严格，因此，XHTML要求

• 元素被正确嵌套
• 必须有关闭标签</br>，
• 必须小写
• 属性必须有值且用双引号,用id代替name。

与HTML的主要区别

1. XHTML是当前HTML版的继承者,由于HTML的语法较为松散,对于许多其他设备的要求较高,因此就出现了由DTD定义规则,语法要求更加严格的XHTML。
2. XHTML与HTML的最大的变化在于所有标签必须闭合。
3. XHTML中所有的标签必须小写。
4. XHTML 元素必须被正确地嵌套。
5. XHTML 文档必须拥有根元素。

怎样理解 HTML 语义化

含义:根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

优点:

1. 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构；
2. 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
3. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
4. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
5. 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

怎样理解内容与样式分离的原则

含义:对于内容、结构与表现相分离，最早是在软件开发架构理论中提出来的, HTML的标签只用来定义文档的结构，所有涉及表现的东西通通剥离出来，把它放到一个单独的文件里，这个单独的文件就是CSS。

1）网页分离

一个网页分为三个部分：Html——结构，css——表现，javascrip——行为。内容也就是html，样式也就是css。所以内容和样式的分离，就是指在网页编码的过程中，要将html和css两大部分分开。

2）如何实现

内容与样式分离的原则的实现，一个是要依靠意识，另一个是依靠经验。
　　举例而言，面对一个分块明显的网页设计图时：

初级的开发人员思路及制作方法：div 层层嵌套；
中级的开发人员思路及制造方法：去掉多余的 div ,进行简化；
高级的开发人员思路及制造方法：最大化的简化 html 的结构，然后用 css 进行设置，减少 html 与 css 的契合度。
正确做法是写HTML的时候先不管样式，重点放在HTML的结构和语义化上，让HTML能提现页面结构或者内容,，然后进行 css 样式设置，减少 HTML 与 CSS 契合度（即内容与样式分离） ，写JS的时候，尽量不要用JS去直接操作样式，而是通过给元素添加删除class来控制样式变化（即行为分离）。

3）分离原则的优点

1. 浏览器加载网页页面速度变快。分离原则下，大部分页面代码写在了CSS当中，页面体积容量变得更小。
2. 网页修改设计时，效率、省时。根据html标签内ID或class的标记，到CSS里找到相应的ID或class，可以快速替换指定位置的样式，不会破坏页面架构和其他部分的样式。
3. 典型的应用就是网页换肤，使用相同的 html 结构，不同的 css 样式。
4. 更好地被搜索引擎收录。基于内容与样式分离的原则，html的语义化就是首要考虑的,网页中语义化的标签代码就会更加适合搜索引擎。
5. css样式的分离，它可以根据不同的浏览器，达到显示效果的统一。保证网页架构不变形的前提下，放心在不同浏览器渲染显示样式。

4、HTML5

HTML5是最新的HTML标准，他的主要目标是提供所有内容而不需要任何的像flash，silverlight等的额外插件，这些内容来自动画，视频，富GUI等

1、HTML5没有使用SGML或者XHTML，他是一个全新的东西，因此你不需要参考DTD，对于HTML5，你仅需放置下面的文档类型代码告诉浏览器识别这是HTML5文档

HTML5新特性：

图像方面 canvas
位置方面 Geolocation
存储方面 localStorage,sessionStorage
多任务方面 webworker
持久连接方面 websocket
离线响应请求方面 service-worker
语义化标签 header，nav，artical，section，footer
表单控件 calendar，time，color，email，search，date

假设如果我不放入<! DOCTYPE html> ，HTML5还会工作么？

答：不会，浏览器将不能识别他是HTML文档，同时HTML5的标签将不能正常工作

---

有哪些常见的meta标签

< meta >元素

标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。 —— W3School5

必要属性

属性	值	描述
content	some text	定义与http-equiv或name属性相关的元信息

可选属性

属性	值	描述
http-equiv	content-type / expire / refresh / set-cookie	把content属性关联到HTTP头部。
name	author / description / keywords / generator / revised / others	把 content 属性关联到一个名称。
content	some text	定义用于翻译 content 属性值的格式。

其他

SGML

SGML( Standard Generalized Markup language 即标准通用标记语言)是一种类XML的语言，甚至是XML的父语言。 SGML通过没有数据类型约定的语法为定义数据提供了一种十分广泛的形式。不同于SGML，XML具有严格且极端简化的语法，且十分易懂。 与SGML不同，XML也具有数据类型定义的特征。 XML中的元素以lambda方式提供名字空间范围，而SGML不支持名称空间。

　　SGML是国际上定义电子文档和内容描述的标准。它源于1969年IBM公司开发的文档描述语言GML，GML主要用来解决不同系统中文档格式不同的问题。后经过多年发展，1986年经ISO批准为国际标准ISO8897，并被称为SGML。

　　制定SGML的基本思想是把文档的内容与样式分开。在SGML中，标记分两种：一种用来描述文档显示的样式，称为程序标记；另一种用来描述文档中语句的用途，称为描述标记。

       一个SGML文件通常分三个层次：结构、内容和样式。结构为组织文档的元素提供框架，内容是信息本身，样式控制内容的显示

SGML (1) 结构

       HTML 可以说是SGML 结构里面的一个实例。

　　为了描述文档的结构，SGML定义了一个称为“文档类型定义(Document Type Definition，DTD)”的文件(file)，它为组织文档的文档元素(例如章和章标题，节和主题等)提供了一个框架。此外，DTD还为文档元素之间的相互关系制定了规则。例如，“章的标题必须是在章开始之后的第一个文档元素”，“每个列表至少要有两个项目”等。DTD定义的这些规则可以确保文档的一致性。

SGML (2) 内容

　　这里指的内容就是信息本身。内容包括信息名称(标题)、段落、项目列表和表格中的具体内容，具体的图形和声音等。确定内容在DTD结构中的位置的方法称为“加标签(tagging)”，而创建SGML文档实际上就是围绕内容插入相应的标签。这些标签就是给结构中的每一部分的开始和结束做标记。

SGML 的DTD 标准（Document type definition）

SGML是XML的前身，由于SGML难理解浏览器支持差等原因被放弃，XML和HTML都基于SGML。SGML的DTD作为标准被固定下来。也就是说，DTD 标准是SGML 的一部分。所以HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

SGML与XML有是什么关系呢?

XML是SGML的一个子集，比SGML要简单，但是能实现SGML的大部分功能。

DOCTYPE文档类型

DOCTYPE文档类型指出浏览器按照什么规则解释HTML或XHTML中的标记，在W3C标准出来之前，浏览器对页面的渲染没有统一的标准，即混杂模式，W3C出来后有了统一的标准即标准模式。

有的网页没有doctype声明或者doctype声明错误（DTD的URL错误等），以混杂模式解析，即兼容老版浏览器
完整的doctype声明一般都会以标准模式解析，在HTML4.0中，doctype声明引用DTD，因为HTML4.0基于SGML，H5不基于SGML，因此不需要引用DTD。
常用的doctype声明： 
严格型，strict，不允许展示性和弃用的元素(font)，不允许框架集frameset
过渡型，transitional，允许展示性和弃用的元素，不允许frameset
框架型，允许展示性和弃用的元素，允许frameset
 

HTML5 为什么只需要写 <!DOCTYPE HTML>？

• HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为
• 而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型
• 如今的HTML5标准制定了两种实现语法HTML和XHTML。HTML不再基于任何特定的标记语言系统，它有自己完整的标准。而XHTML是XML的一个应用。

备注：

当HTML5文档使用text/html MIME类型传输时，它将被Web浏览器是为HTML文档处理。当使用XML MIME类型，例如application/xhtml+xml传输时，它将被Web浏览器视为XML文档，由XML处理器进行分析。

作者：YQY_苑
链接：https://www.jianshu.com/p/21f66c4f0e50
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。