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等，也都必须闭合，实现的方式是在开始标签末尾加入斜扛，省略参数，比如<option selected>，也不允许，必须用<option selected="selected"/>。两者的详细差别，可通过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. <meta charset='xxx'>
<meta charset='xxx'>
告诉浏览器，我这个页面的代码是用的xxx编码方式。（用xxx来解码）
2. <meta http-equiv='参数' content='参数变量值'>
<meta http-equiv='参数' content='参数变量值'>
浏览器读到这些代码时，可以得到一些页面信息，更好的显示网页内容。
-
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='参数' content='具体的参数值'>
主要用于描述网页，更便于搜索机器人读取代码。
-
meta name='viewport' content='width=xxx等等' ：让移动端能够以更合理的比例显示网页
-
meta name='keywords' content='xxxx' ：告诉搜索引擎，当前页面的关键字
-
meta name='dscription' content='xxx' ：告诉搜索引擎，当前页面的主要内容是xxx
HTML之前的准备工作
1. 文档声明
告知浏览器的解析器， 用什么 文档类型规范 来解析这个文档。
2. DOCYTYPE html
<!DOCYTYPE html>
- 在HTML文件开头第一行，出现的<!DOCYTYPE html>的意思是，告诉加载网页的浏览器，我要用html5的方式解码，也就是标准模式。
- 如果没有文档声明，浏览器就会使用混杂模式，可能会出现乱码的情况。
2. 标准模式和混杂模式
- 在标准模式中，浏览器以其支持的最高标准呈现页面
- 在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。
浏览器乱码？
因为代码的编码保存方式和浏览器的解码方式不同，从而导致加载出的网页一堆乱码，所以只要保证编辑器写代码的时候首行的声明好编码方式
<meta charset='xxx'>
并且保存的时候仍选择同样的编码方式，就不会出现乱码的情况了
常见的浏览器及其对应内核
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 | 标题 | <h1>This is a heading</h1> |
| p | 段落 | <p>This is my first paragraph.</p> |
| a | 链接 | <a href="http://www.w3school.com.cn">This is a link</a> |
| img | 展示一张图片 |  |
| div | 给页面划分区块 | <div id="header">...</div> |
| ul li | 无序列表 | 如下 |
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li>
<a href="#">更多</a>
<ul>
<li>联系</li>
<li>地址</li>
</ul>
</li>
</ul>
| 常用标签 | 使用时机 | 代码样式 |
|---|---|---|
| ol li | 有序列表 | 如下 |
<h2>把大象关到冰箱的步骤</h2>
<ol>
<li>把大象变小</li>
<li>打开冰箱</li>
<li>把大象塞进去</li>
</ol>
| 常用标签 | 使用时机 | 代码样式 |
|---|---|---|
| dl dt dd | 展示一系列 “标题:内容... ” | 如下 |
<dl>
<dt>商品名称:</dt>
<dd>青花瓷</dd>
<dt>特征:</dt>
<dd>白色</dd>
<dd>圆口</dd>
<dt>商品介绍</dt>
<dd>这是一个年代久远的瓷器，很贵，易碎</dd>
</dl>
| 常用标签 | 使用时机 | 代码样式 |
|---|---|---|
| button | 按钮 | <button>点我</button> |
| em | 需要强调一下 | <p>小谷 <em>2</em> 岁了</p> |
| strong | 很重要、强调性更强 | <p>优惠 <strong>100</strong> 元</p> |
| iframe | 嵌入一个页面 | 如下 |
<iframe src="http://jirengu.com" name="myPage"></iframe>
<p><a href="http://www.w3cschool.cc" target="myPage">W3Cschool.cc</a></p>
| 常用标签 | 使用时机 | 代码样式 |
|---|---|---|
| table | 表格 | 如下 |
<table>
<thead>
<tr>
<th>姓名</th>
<th>年纪</th>
</tr>
</thead>
<tbody>
<tr>
<th>姓名</th>
<th>年纪</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
</tr>
<tr>
<td>小花</td>
<td>20</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<table>
<tr>
<th>姓名</th>
<th>年纪</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
</tr>
<tr>
<td>小花</td>
<td>20</td>
</tr>
</table>
本博客版权归流光号船长和饥人谷所有，转载需说明来源
网友评论