HTML、XML、XHTML 有什么区别
首先从字面可以看出,他们都是ML,也就是说都是标记语言(Markup Language),所以不同就是前面的部分了。
HTML
超文本标记语言(HyperText Markup Language,简称:HTML)
HTML发展历史
- 超文本标记语言(第一版)——在1993年6月作为互联网工程工作小组(IETF)工作草案发布(* 并非标准*):
- HTML 2.0——1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时
- HTML 3.2——1997年1月14日,W3C推荐标准
- HTML 4.0——1997年12月18日,W3C推荐标准
- HTML 4.01(微小改进)——1999年12月24日,W3C推荐标准
- HTML 5——2014年10月28日,W3C推荐标准 (详见本处参考资料)
XML
可扩展标记语言(Extensible Markup Language ,简称:XML)
1998年2月,W3C正式批准了可扩展标记语言的标准定义,可扩展标记语言可以对文档和数据进行结构化处理,从而能够在部门、客户和供应商之间进行交换,实现动态内容生成,企业集成和应用开发。可扩展标记语言可以使我们能够更准确的搜索,更方便的传送软件组件,更好的描述一些事物。例如电子商务交易等。
- 它被设计用来传输和存储数据
- 超文本标记语言被设计用来显示数据。
- 它们都是标准通用标记语言的子集。
什么是可扩展标记语言?
- 可扩展标记语言是一种很像超文本标记语言的标记语言。
- 它的设计宗旨是传输数据,而不是显示数据。
- 它的标签没有被预定义。您需要自行定义标签。
- 它被设计为具有自我描述性。
- 它是W3C的推荐标准。
可扩展标记语言和超文本标记语言之间的差异
超文本标记语言旨在显示信息,而它旨在传输信息。对它最好的描述是:它是独立于软件和硬件的信息传输工具。
它不是超文本标记语言的替代。
它是对超文本标记语言的补充。
它和超文本标记语言为不同的目的而设计:
- 它被设计用来传输和存储数据,其焦点是数据的内容。
- 超文本标记语言被设计用来显示数据,其焦点是数据的外观。
可扩展标记语言是W3C的推荐标准
XML 于 1998 年 2 月 10 日成为 W3C 的推荐标准。
可扩展标记语言无所不在
XML 是各种应用程序之间进行数据传输的最常用的工具。
XHTML
可扩展标记语言(Extensible HyperText Markup Language,简称:XHTML)
可扩展超文本标记语言,是一种置标语言,表现方式与超文本标记语言(HTML)类似,不过语法上更加严格。
HTML是一种基本的WEB网页设计语言,XHTML是一个基于可扩展标记语言的标记语言,看起来与HTML有些相象,只有一些小的但重要的区别,XHTML就是一个扮演着类似HTML的角色的可扩展标记语言(XML),所以,本质上说,XHTML是一个过渡技术,结合了部分XML的强大功能及大多数HTML的简单特性。
2000年底,国际W3C组织(万维网联盟)组织公布发行了XHTML 1.0版本。XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言,目的是基于XML应用。XHTML是一种增强了的HTML,XHTML 是更严谨更纯净的 HTML 版本。它的可扩展性和灵活性将适应未来网络应用更多的需求。XML虽然数据转换能力强大,完全可以替代HTML,但面对成千上万已有的基于HTML语言设计的网站,直接采用XML还为时过早。因此,在HTML4.0的基础上,用XML的规则对其进行扩展,得到了XHTML。所以,建立XHTML的目的就是实现HTML向XML的过渡。国际上在网站设计中推崇的WEB标准就是基于XHTML的应用(即通常所说的CSS+DIV)。
XHTML与HTML的区别
XHTML是当前HTML版的继承者。HTML语法要求比较松散,这样对网页编写者来说,比较方便,但对于机器来说,语言的语法越松散,处理起来就越困难,对于传统的计算机来说,还有能力兼容松散语法,但对于许多其他设备,比如手机,难度就比较大。因此产生了语法要求更加严格的XHTML。
大部分常见的浏览器都可以正确地解析XHTML,即使老一点的浏览器,XHTML作为HTML的一个子集,许多也可以解析。也就是说,几乎所有的网页浏览器在正确解析HTML的同时,可兼容XHTML。当然,从HTML完全转移到XHTML,还需要一个过程。
跟层叠式样式表(外语缩写:CSS)结合后,XHTML能发挥真正的威力;这使实现样式跟内容的分离的同时,又能有机地组合网页代码,在另外的单独文件中,还可以混合各种XML应用,比如MathML、SVG。
从HTML到XHTML过渡的变化比较小,主要是为了适应XML。最大的变化在于文档必须是良构的,所有标签必须闭合,也就是说开始标签要有相应的结束标签。另外,XHTML中所有的标签必须小写。而按照HTML 2.0以来的传统,很多人都是将标签大写,这点两者的差异显著。在XHTML中,所有的参数值,包括数字,必须用双引号括起来(而在SGML和HTML中,引号不是必须的,当内容只是数字、字母及其它允许的特殊字符时,可以不用引号)。所有元素,包括空元素,比如img、br等,也都必须闭合,实现的方式是在开始标签末尾加入斜扛,省略参数,比如。两者的详细差别,可通过W3C XHTML说明来查阅。
总结
- XHTML 指扩展超文本标签语言(EXtensible HyperText Markup Language)。
- XHTML 的目标是取代 HTML。
- XHTML 与 HTML 4.01 几乎是相同的。
- XHTML 是更严格更纯净的 HTML 版本。
- XHTML 是作为一种 XML 应用被重新定义的 HTML。
表现(内容)、样式、行为分离原则
- 写HTML的时候先不管样式,重点放在HTML的结构和语义化上,让HTML能体现页面结构或者内容。之后再去写样式。
- 写JS的时候,尽量不要用JS去直接操作样式,而是通过给元素添加删除class来控制样式变化
- HTML内不允许出现属性样式,尽量不要出现行内样式。
HTML语义化
语义化HTML是一种编写HTML的方式
1. 运用合适的标签
2. 使用合理的代码结构
3. 便于开发者阅读
4. 使浏览器和爬虫可以很好地解析
常见的meta标签
1.
告诉浏览器,我这个页面的代码是用的xxx编码方式。(用xxx来解码)
2.
浏览器读到这些代码时,可以得到一些页面信息,更好的显示网页内容。
-
meta http-equiv='expires' content='时间' :【expires期限】,告诉浏览器到了某个时间就重新传输一次页面。
-
meta http-equic='refresh' content='数字;url=一个网址' :【refresh刷新】,告诉浏览器在【数字】秒后跳转到【一个网址】
-
meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' :强制浏览器按照特定的版本标准进行渲染。但不支持IE7及以下版本。如果是ie浏览器就用最新的ie渲染,如果是双核浏览器就用chrome内核。
3.
主要用于描述网页,更便于搜索机器人读取代码。
-
meta name='viewport' content='width=xxx等等' :让移动端能够以更合理的比例显示网页
-
meta name='keywords' content='xxxx' :告诉搜索引擎,当前页面的关键字
-
meta name='dscription' content='xxx' :告诉搜索引擎,当前页面的主要内容是xxx
HTML之前的准备工作
1. 文档声明
告知浏览器的解析器, 用什么 文档类型规范 来解析这个文档。
2. DOCYTYPE html
- 在HTML文件开头第一行,出现的的意思是,告诉加载网页的浏览器,我要用html5的方式解码,也就是标准模式。
- 如果没有文档声明,浏览器就会使用混杂模式,可能会出现乱码的情况。
2. 标准模式和混杂模式
- 在标准模式中,浏览器以其支持的最高标准呈现页面
- 在混杂模式中,页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。
浏览器乱码?
因为代码的编码保存方式和浏览器的解码方式不同,从而导致加载出的网页一堆乱码,所以只要保证编辑器写代码的时候首行的声明好编码方式
并且保存的时候仍选择同样的编码方式,就不会出现乱码的情况了
常见的浏览器及其对应内核
1. 使用Trident的是internet explorer,国产的绝大部分浏览器。Trident是就是ie内核
2. 使用Gecko的是Mozilla Firefox,使用 Gecko 内核的浏览器也有不少,如 Netscape MozillaSuite/SeaMonkey 等
3. 使用Presto的是opera,这是目前公认网页浏览速度最快的浏览器内核
4. 使用WebKit的有苹果的safari,谷歌的chrome,还有国产的大部分双核浏览器其中一核就是WebKit
HTML常见标签及使用时机
常用标签 | 使用时机 | 代码样式 |
---|---|---|
h1~h6 | 标题 |
|
p | 段落 |
|
a | 链接 | This is a link |
img | 展示一张图片 | ![](boat.gif) |
div | 给页面划分区块 |
|
ul li | 无序列表 | 如下 |
常用标签 | 使用时机 | 代码样式 |
---|---|---|
ol li | 有序列表 | 如下 |
把大象关到冰箱的步骤
- 把大象变小
- 打开冰箱
- 把大象塞进去
常用标签 | 使用时机 | 代码样式 |
---|---|---|
dl dt dd | 展示一系列 “标题:内容... ” | 如下 |
- 商品名称:
- 青花瓷
- 特征:
- 白色
- 圆口
- 商品介绍
- 这是一个年代久远的瓷器,很贵,易碎
常用标签 | 使用时机 | 代码样式 |
---|---|---|
button | 按钮 |
|
em | 需要强调一下 |
|
strong | 很重要、强调性更强 |
|
iframe | 嵌入一个页面 | 如下 |
常用标签 | 使用时机 | 代码样式 |
---|---|---|
table | 表格 | 如下 |
姓名
年纪
姓名
年纪
小明
18
小花
20
姓名
年纪
小明
18
小花
20
本博客版权归流光号船长和饥人谷所有,转载需说明来源