码迷,mamicode.com
首页 > Web开发 > 详细

HTML5学习摘录

时间:2015-02-18 00:56:05      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:

设计原理

不是规范里都包含什么,而是规范里为什么会包含它们,以及在设计这个规范的时候,设计者们是怎么看待这些东西的。

发展史:HTML2.0——》HTML3.2——》HTML4.0.1——》XHTML1.0——》XHTML1.1和XHTML2.0的失败——》HTML5

原理:

(1)避免不必要的复杂性

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。避免-不必要的-复杂性。

(2)支持已有的内容

 元素属性可以不区分大小写,属性值可以不加引号

  (3) 解决现实的问题

  页面中已经有了一块内容,我想给整块内容加个链接,怎么办?

<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)……,相

(5)平稳退化

<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,我还给出了下载链接。

(6)最终用户优先

一旦遇到冲突,最终用户优先,其次是作者,其次是实现者,其次标准制定者,最后才是理论上的完满。

  Drupal社区曾联系马克·博尔顿(Mark Boulton)和丽莎·雷贺特(Leisa Reichilt)设计Drupal的界面。他们计划遵循一些设计原理。为此,他们并没有纸上谈兵,而是经过了一段时间的思考和酝酿,提出指导将来工作的4个设计原理:

简化最常见的任务,让不常见的任务不至于太麻烦。
只为80%设计。
给内容创建者最大的权利。
默认设置智能化。

 HTML5到底是什么?

  一般广义而言的HTML5则包含了HTML、CSS和JavaScript三个部分,不单单只是HTML部分而已,CSS 3和JavaScript也有许多的创新,让整个网页程序功能更加缤纷。

  HTML5的技术组成

  脱机功能

  HTML5透过JavaScript提供了数种不同的脱机储存功能,相对于传统的Cookie而言有更好的弹性以及架构,并且可以储存更多的内容。

  • WebStorage: 比 Cookies 更大、更有弹性的的储存
  • Web SQL Database: 本地端的SQL数据库
  • Indexed DB: Key-value 的本地数据库
  • Application Cache: 将部分常用的网页内容cache起来

  实时通讯

  以往网站由于HTTP协议以及浏览器的设计,实时的互动性相当的受限,只能使用一些技巧来「仿真」实时的通讯效果,但HTML5提供了完善的实时通讯支持。

  • WebSocket: 实时的socket联机
  • Web Workers: 以往 JavaScript 都是 single thread,透过 Worker 可以有多个运算
  • Notifications: 原生的提示讯息,类似像OS X的Growl提示

  档案以及硬件支持

  不知道大家有没有发现,在Gmail等新的网页程序当中,已经可以透过拖拉的方式将档案作为邮件附件?这就是这部份HTML5档案的功能中的Dragn Drop和File API。

  • Dragn Drop: HTML元素的拖拉
  • File API: 读取用户本机计算机的内容
  • Geolocation: 地理定位
  • Device orientation: 手持装置的方向
  • Speech input: 语音输入

  语义化

  语义化的网络是可以让计算机能够更加理解网页的内容,对于像是搜索引擎的优化(SEO)或是推荐系统可以有很大的帮助。

  • New tags: 新的标签,像是 header、 section等
  • Application tags: 也是新的标签,像是 meter、 progress
  • Microdata: 加入语义的数据让搜索引擎等网站可以正确显示
  • Form type: form可以加入的type便多了,包含email和tel等属性,浏览器会协助进行数据格式的验证

  多媒体

  Audio、Video的卷标支持以及Canvas的功能应该是大家对于HTML5最熟悉的部份了,也是许多人认为Flash会被取代的主要原因。

  • Audio video: 影片和音乐的原生播放支持
  • Canvas: 2D的绘图功能支持
  • Canvas 3D: 3D的绘图功能支持
  • SVG: 向量图支援

  CSS 3

  CSS3支持了字体的嵌入、版面的排版,以及最令人印象深刻的动画功能。

  • Selector: 更有弹性的选择器
  • Webfonts: 嵌入式字体
  • Layout: 多样化的排版选择
  • Stlying radius gradient shadow: 圆角、渐层、阴影
  • Border background: 边框的背景支持
  • Transition: 组件的移动效果
  • Transform: 组件的变形效果
  • Animation: 将移动和变形加入动画支持

  JavaScript

  在比较JavaScript的基本面也新增了DOM的API、和浏览器上下页的纪录修改。

  • DOM API: 更方便的查询DOM组件
  • History API: 浏览器的上下页内容修改,方便AJAX可以保留浏览记录

  而对于旧的浏览器兼容性而言,先前撰文介绍过的CSS3 Pie便是一个让旧版浏览器也能支持CSS 3功能的JavaScript函数库。

  而Modernizer也是一个相当重要的JavaScript函数库,提供开发者轻松的方式判别目前使用者的浏览器是否有支持特定的HTML5功能。

 

 

HTML5学习摘录

标签:

原文地址:http://www.cnblogs.com/doit8791/p/4295564.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!