标签:
设计原理
不是规范里都包含什么,而是规范里为什么会包含它们,以及在设计这个规范的时候,设计者们是怎么看待这些东西的。
发展史:HTML2.0——》HTML3.2——》HTML4.0.1——》XHTML1.0——》XHTML1.1和XHTML2.0的失败——》HTML5
原理:
HTML 4.01的doctype:
<!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0的doctype:
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML 5中doctype就简化成:
<!DOCTYPE html>
什么文档一开头就要写doctype?它不是写给浏览器看的。Doctype是写给验证器看的。也就是说,我之所以要在文档一开头写那行XHTML 1.0的doctype,是为了告诉验证器,让验证器按照该doctype来验证我的文档。浏览器在接收的时候必须要开放。因此,它不会检查任何格式类型,而验证器会,验证器才关心格式类型。HTML5的另一个设计原理,它必须向前向后兼容,兼容未来的HTML版本——不管是HTML6、HTML7,还是其他什么——都要与当前的HTML版本,HTML5,兼容。因此,把一个版本号放在doctype里面没有多大的意义,即使对验器证也一样。
注:当初微软在引入CSS的时候,走在了标准的前头,他们率先在浏览器中支持CSS,也推出了自己的盒模型——后来标准发布了,但标准中使用了不一样的盒模型。他们想出了一个非常巧妙的主意。那就是利用doctype,利用有效的doctype来触发标准模式,而不是兼容模型(quiks mode)。在我们向文档中加入doctype时,就相当于声明了“我想使用标准模式”,但这并不是发明doctype的本意。这只是为了达到特殊的目的在利用doctype。
在文档前面写完doctype html是在Internet Explorer中触发标准模式的最少字符数目。
还有一个例子,同样可以说明规范是如何省略不必要的复杂性,避免不必要的复杂性的。如果前面的文档使用的是HTML 4.01:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
在XHTML 1.0指定同样的编码,就得多敲一下键盘,因为你还得声明meta元素位于一个开始的XML标签中:
<?xml version="1.0" encoding="UTF-8" ?><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
在HTML5中,你要敲的字符只有:
<meta charset="utf-8">
在HTML5中,如果我使用link元素链接到一个样式表,用rel=”stylesheet”,不用再说type=”text/css”。用了script元素,不用再说type=”text/javascript”,浏览器自然会假设你在使用JavaScript。避免-不必要的-复杂性。
元素属性可以不区分大小写,属性值可以不加引号
页面中已经有了一块内容,我想给整块内容加个链接,怎么办?
<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解决现实的问题,其本质还是“你都这样写了很多年了吧?现在我们把标准改了,允许你这样写了。
(4)求真务实
HTML5中新的语义元素就是遵循求真务实原理的反映。新增的元素不算多,谈不上无限的扩展性,但却不失为一件好事。尽管数量屈指可数,但意义却非同一般。这些新元素涉及头部(header)、脚部(footer)、分区(section)、文章(article)……,相
<video>
<source src="movie.mp4">
<source src="movie.ogv">
<object data="movie.swf">
<a href="movie.mp4">download</a>
</object>
</video>
上面的代码中包含了4个不同的层次。
1、如果浏览器支持video元素,也支持H264,没什么好说的,用第一个视频。
2、如果浏览器支持video元素,支持Ogg,那么用第二个视频。
3、如果浏览器不支持video元素,那么就要试试Flash影片了。
4、如果浏览器不支持video元素,也不支持Flash,我还给出了下载链接。
一旦遇到冲突,最终用户优先,其次是作者,其次是实现者,其次标准制定者,最后才是理论上的完满。
Drupal社区曾联系马克·博尔顿(Mark Boulton)和丽莎·雷贺特(Leisa Reichilt)设计Drupal的界面。他们计划遵循一些设计原理。为此,他们并没有纸上谈兵,而是经过了一段时间的思考和酝酿,提出指导将来工作的4个设计原理:
简化最常见的任务,让不常见的任务不至于太麻烦。
只为80%设计。
给内容创建者最大的权利。
默认设置智能化。
HTML5到底是什么?
一般广义而言的HTML5则包含了HTML、CSS和JavaScript三个部分,不单单只是HTML部分而已,CSS 3和JavaScript也有许多的创新,让整个网页程序功能更加缤纷。
HTML5的技术组成
脱机功能
HTML5透过JavaScript提供了数种不同的脱机储存功能,相对于传统的Cookie而言有更好的弹性以及架构,并且可以储存更多的内容。
实时通讯
以往网站由于HTTP协议以及浏览器的设计,实时的互动性相当的受限,只能使用一些技巧来「仿真」实时的通讯效果,但HTML5提供了完善的实时通讯支持。
档案以及硬件支持
不知道大家有没有发现,在Gmail等新的网页程序当中,已经可以透过拖拉的方式将档案作为邮件附件?这就是这部份HTML5档案的功能中的Dragn Drop和File API。
语义化
语义化的网络是可以让计算机能够更加理解网页的内容,对于像是搜索引擎的优化(SEO)或是推荐系统可以有很大的帮助。
多媒体
Audio、Video的卷标支持以及Canvas的功能应该是大家对于HTML5最熟悉的部份了,也是许多人认为Flash会被取代的主要原因。
CSS 3
CSS3支持了字体的嵌入、版面的排版,以及最令人印象深刻的动画功能。
JavaScript
在比较JavaScript的基本面也新增了DOM的API、和浏览器上下页的纪录修改。
而对于旧的浏览器兼容性而言,先前撰文介绍过的CSS3 Pie便是一个让旧版浏览器也能支持CSS 3功能的JavaScript函数库。
而Modernizer也是一个相当重要的JavaScript函数库,提供开发者轻松的方式判别目前使用者的浏览器是否有支持特定的HTML5功能。
标签:
原文地址:http://www.cnblogs.com/doit8791/p/4295564.html