[导读] 本文章是来源于alimama的ued的一篇关于设计理念的文章，主要是讲目前开始浏览的html5入门之设计原理，有需要的朋友可以参考一下哦。html5和css3的时代到来了，新版2011版淘宝网首页已全部使用html5，拥抱变化才
本文章是来源于alimama的ued的一篇关于设计理念的文章，主要是讲目前开始浏览的html5入门之设计原理，有需要的朋友可以参考一下哦。
html5和css3的时代到来了，新版2011版淘宝网首页已全部使用html5，拥抱变化才是王道。为之漫笔翻译的很好，看了一遍后，感觉理解了很多，强烈推荐其他做开发的童鞋尤其前端也来看看。
不仅让我摸清了html4，xhtml1.0, xhtml2.0, html5之间的关系，也理解了为什么会出现html5，同时，加紧推进在项目中应用html5。
--------------------------------------------------------------------------------
著名的阿西莫夫机器人三大法则：
机器人不得伤害人类，或袖手旁观人类受伤害。
机器人必须服从人类命令，除非命令违反第一法则。
机器人必须自卫，只要不违背第一和第二法则。
--------------------------------------------------------------------------------
xhtml1.0与html4.0相同点：
两个规范的内容是一样的;
词汇表是一样的;
所有的元素是一样;
所有的属性也都是一样的;
xhtml1.0与html4.0唯一不同点：
xhtml 1.0要求使用xml语法(严格的编码风格)
//所有属性都必须使用小写字母;
//所有元素也必须使用小写字母;
//所有属性值都必须加引号;
//你还得记着使用结束标签，记着对img和br要使用自结束标签。
xhtml 1.1与xhtml1.0唯一的变化：
把文档标记为xml文档
//xml的错误处理模型:解析器如果遇到错误，停止解析。
//不能理解xml的浏览器，用户直接看不到这个网页了。
xhtml 2特点（这个规范没有完成):
仍然使用xml错误处理模型，你必须保证以xml文档类型发送文档；
有意不再向后兼容已有的html的各个版本,开发人员和浏览器厂商永远不会支持它。
真正广泛地应用的设计原理：
发送时要保守；接收时要开放。
//作为专业人士，在发送文档的时候，我们会尽量保守一些，尽量采用最佳实践，尽量确保文档格式良好。
//但从浏览器的角度说，它们必须以开放的姿态去接收任何文档。
--------------------------------------------------------------------------------
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" "http://www.w3.org/tr/html4/strict.dtd">
//xhtml 1.0：
<!doctype html public "-//w3c/dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/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/javascripthtml5设计原理二：支持已有的内容
<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>
</a>备注：这种写法其实早就已经存在于浏览器中了，但以前这样写是不合乎规范的，现在我们把标准改了，允许你这样写了。
--------------------------------------------------------------------------------
html5设计原理四：求真务实
新增语义元素涉及头部（header）、脚部（footer）、分区（section）、文章（article）……
代码如下 复制代码
//html 4.01 xhtml 1.0:
<p id="header">...</p>
<p id="navigation">...</p>
<p id="main">...</p>
<p id="sidebar">...</p>
<p id="footer">...</p>
</body>
//html5:
<body>
<header>...</header>
<nav>...</nav>
<p id="main">...</p>
<aside>...</aside>
<footer>...</footer>
</body>
备注：新元素section、article、aside和nav代表了一种新的内容模型，一种html中前所未有的内容模型——给内容分区。
将新元素作为类的替代品更有价值，因为这些元素在一个页面中不止可以使用一次，而是可以使用多次，可嵌套使用。
其中最为通用的section，可以说是与内容最相关的一个。而article则是一种特殊的section。aside呢，是一种特殊的section。最后，nav也是一种特殊的section。
/
代码如下 复制代码
/html 4.01 xhtml 1.0:
<p class="item">
<h2>...</h2>
<p class="meta">...</p>
<p class="content">
...
</p>
<p class="links">...</p>
</p>
//html5:
<section class="item">
<header><h1>...</h1></header>
<footer class="meta">...</footer>
<p class="content">
...
</p>
<nav class="links">...</nav>
</section>备注：在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影片了。
如果浏览器不支持video元素，也不支持flash，我还给出了下载链接。
遵循另一个设计原理，即梅特卡夫定律(metcalfe’s law)：
以上就是 html5入门之设计原理解析的详细内容。