著名的阿西莫夫机器人三大法则：
机器人不得伤害人类，或袖手旁观人类受伤害；
机器人必须服从人类命令，除非命令违反第一法则；
机器人必须自卫，只要不违背第一和第二法则。
xhtml1.0与html4.0相同点：
1、两个规范的内容是一样的；
2、词汇表是一样的；
3、所有的元素是一样；
4、所有的属性也都是一样的。
xhtml1.0与html4.0唯一不同点：
XHTML 1.0要求使用XML语法(严格的编码风格)，即：
1、所有属性都必须使用小写字母；
2、所有元素也必须使用小写字母；
3、所有属性值都必须加引号；
4、你还得记着使用结束标签，记着对img和br要使用自结束标签。
XHTML 1.1与xhtml1.0唯一的变化： 把文档标记为XML文档
1、XML的错误处理模型:解析器如果遇到错误，停止解析；
2、不能理解XML的浏览器，用户直接看不到这个网页了。
XHTML 2特点(这个规范没有完成):
仍然使用XML错误处理模型，你必须保证以XML文档类型发送文档；
有意不再向后兼容已有的HTML的各个版本,开发人员和浏览器厂商永远不会支持它。
真正广泛地应用的 设计原理 ：
1、发送时要保守;接收时要开放；
2、作为专业人士，在发送文档的时候，我们会尽量保守一些，尽量采用最佳实践，尽量确保文档格式良好；
3、但从浏览器的角度说，它们必须以开放的姿态去接收任何文档。
而HTML5：
1、2004成立了Web Hypertext Applications Technology Working Group(Web超文本应用技术工作组，WHATWG)，完全脱离W3C；
2、W3C在2007年组建了HTML5工作组，在WHATWG工作成果的基础上继续开展工作。
HTML5 设计原理 一：避免不必要的复杂性
代码如下：
一、DOCTYPE的写法：
HTML 4.01：
<!DOCTYPE html PUBLIC “-//W3C/DTD HTML 4.01//EN” “4/strict.dtd”>
XHTML 1.0：
<!DOCTYPE html PUBLIC “-//W3C/DTD XHTML 1.0 Strict//EN” “1/DTD/xhtml1-strict.dtd”>
HTML5：
<!DOCTYPE html>//
这种写法会触发浏览器的标准模式。
备注：doctype它不是写给浏览器看的,Doctype是写给验证器看的。让验证器按照该doctype来验证我的文档。
二、指定文档的字符编码的写法：
代码如下
HTML 4.01：
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
XHTML 1.0：
<?xml version=”1.0″ encoding=”UTF-8″ ?>
HTML5：
<meta charset=”utf-8″/>
备注： 此简短写法，它不仅适用于最新版本的浏览器，只要是今天还有人在用的浏览器都同样有效。
HTML5其他简洁写法：
代码如下
<link href=”#” rel=”stylesheet”/>（无需再写type=”text/css”，否则那就是重复自己了）
<script></script>（无需再写使用的脚本语言 type=”text/javascript”）
HTML5 设计原理 二：支持已有的内容
<img src=”foo” alt=”bar” />
<p class=”foo”>Hello world</p>
<img src=”foo” alt=”bar”>
<p class=”foo”>Hello world
<IMG SRC=”foo” ALT=”bar”>
<P CLASS=”foo”>Hello world</p>
<img src=foo alt=bar>
<p class=foo>Hello world</p>
备注：HTML5支持已存在的各种不严谨的写法。
在JavaScript，你可以在每条语句末尾加上分号，但不是必需的，因为JavaScript会自动插入分号……JSlint确实是个非常棒的工具,规范统一JavaScript编码风格，在团队项目非常有用。
HTML5 设计原理 三：解决现实的问题
给整块内容(含多个块级元素)加个链接
代码如下
HTML 4.01和XHTML 1.0：
<h2><a href=”/path/to/resource”>Headline text</a></h2>
<p><a href=”/path/to/resource”>Paragraph text.</a></p>
HTML5：
<a href=”/path/to/resource”>
<h2>Headline text</h2>
<p>Paragraph text.</p>
备注：这种写法其实早就已经存在于浏览器中了，但以前这样写是不合乎规范的，现在我们把标准改了，允许你这样写了。
HTML5 设计原理 四：求真务实
新增语义元素涉及头部(header)、脚部(footer)、分区(section)、文章(article)……
代码如下
HTML 4.01和 XHTML 1.0：
<div id=”header”>…</div>
<div id=”navigation”>…</div>
<div id=”main”>…</div>
<div id=”sidebar”>…</div>
<div id=”footer”>…</div>
</body>
HTML5：
<body>
<header>…</header>
<nav>…</nav>
<div id=”main”>…</div>
<aside>…</aside>
<footer>…</footer>
</body>
备注： 新元素section、article、aside和nav代表了一种新的内容模型，一种HTML中前所未有的内容模型——给内容分区。将新元素作为类的替代品更有价值，因为这些元素在一个页面中不止可以使用一次，而是可以使用多次，可嵌套使用。
其中最为通用的section，可以说是与内容最相关的一个。 而article则是一种特殊的section。Aside呢，是一种特殊的section。 最后， Nav也是一种特殊的section。
代码如下
HTML 4.01 和XHTML 1.0：
<div class=”item”>
<h2>…</h2>
<div class=”meta”>…</div>
<div class=”content”>
…
</div>
<div class=”links”>…</div>
</div>
HTML5：
<section class=”item”>
<header><h1>…</h1></header>
<footer class=”meta”>…</footer>
<div class=”content”>
…
</div>
<nav class=”links”>…</nav>
备注： 在HTML5中，只要你建立一个新的内容块，不管用section、article、aside、nav，还是别的元素，都可以在其中使用H1，而不必担心这个块里的标题在整个页面中应该排在什么级别;H2、H3，都没有问题。
HTML5设计原理五：平稳退化
渐进增强的另一面就是平稳退化。
使用type属性增强表单：
代码如下
input type=”number”
input type=”search”
input type=”range”
input type=”email”
input type=”date”
input type=”url”
备注： 现有的浏览器无法理解这些新type值的，但在它们看到自己不理解的type值时，会将type的值解释为text。
HTML5还为输入元素增加了新的属性，比如placeholder(占位符) ，就是用于在文本框中预先放一些文本。无需JavaScript去实现，太完美了。
HTML5视频对Flash视频(video元素)：
代码如下
<video>
<source src=”movie.mp4″>
<source src=”movie.ogv”>
<object data=”movie.swf”>
<a href=”movie.mp4″>download</a>
</object>
</video>
备注： 两者要兼顾，无论是HTML5，还是Flash:
如果浏览器支持video元素，也支持H264，没什么好说的，用第一个视频；
如果浏览器支持video元素，支持Ogg，那么用第二个视频；
如果浏览器不支持video元素，那么就要试试Flash影片了；
遵循另一个设计原理，即梅特卡夫定律(Metcalfe’s Law)。
本文作者:记者 来源:CIOZJ
CIO之家 www.ciozj.com 微信公众号:imciow