html5学习大纲

一、 简述html的发展
   蒂姆•伯纳斯-李研究出html,属于html初版。
   超文本置标语言(第一版)——在1993年6月发为互联网工程工作小组 (IETF)工作草案发布(并非标准).
   HTML 2.0——1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时
   HTML 3.2——1996年1月14日,W3C推荐标准
   HTML 4.0——1997年12月18日,W3C推荐标准
   HTML 4.01(微小改进)——1999年12月24日,W3C推荐标准
   ISO/IEC 15445:2000(“ISO HTML”)——2000年5月15日发布,基于严格的HTML 4.01语法,是国际标准化组织和国际电工委员会的标准
   XHTML 1.0——发布于2000年1月26日,是W3C推荐标准,后来经过修订于2002年8月1日重新发布。
   XHTML 1.1, 于2001年5月31日发布
   (XHTML 2.0, W3C工作草案)
   2007年HTML 5草案被W3C接纳,并成立了新的HTML工作团队。
   2008年1月22日第一份正式HTML 5草案发布。

二、 html5的目标
  HTML5发展的目标是希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如AdobeFlash、Microsoft   Silverlight,与Oracle JavaFX的需求,并且提供更多能有效增强网络应用的标准集。
  HTML 5增加了更多样化的API,提供了嵌入音频、视频、即时二维绘图、客户端数据存储,以及交互式文档,同时还整合了SVG内容。

三、 html5的新特征

1. 新的doctype
  doctype是文档用来告知浏览器使用何种文档规范,如html,xhtml等。由于html4.01是基于SGML的,所以需要声明DTD,而html5虽然保持SGML的相似性,但是不是基于它的,而是被设计成向后兼容对老版本的html的解析。html5使用下面doctype声明文档规范:
  <!DOCTYPE html> //会触发和标准兼容的渲染模式。

2. 绘图元素canvas
  二维绘图API,可以用在一个新的画布(Canvas)元素上以便呈现图像、游戏图形或者其他运行中的可视图形。

3. 本地存储
  html5的一个重要特性,使用本地存储数据并且允许应用程序离线运行。本地存储分为三种,包括Web存储,离线存储和本地数据库。目前Web存储的适用性比较大,可以在实现本地永久性存储和会话存储,使用key/value的形式存储。但是离线存储具有更大的发展潜力,可以对文件进行离线存储,对于静态化页面的存储最有效果,可以使页面瞬间展示,目前对于动态页面还不够好,不能识别动态页面的变化情况。Web数据库应该是发展潜力最好的,可以存储各种格式的数据,而且在本地存储一些查询数据(必须说明,本地存储的表结构最好不要和后台一致,否则用户则可以知道后台存储字段及数据格式了),可以在一定程度上减轻服务器压力 。

4. 支持音频和视频播放

  音频和视频播放是html5的另外一个重要特征。这符合前面提到减少浏览器插件的目标。目前线上多数运行的视频播放器和音乐播放器都是使用flash插件的,如果html5正式成为标准,flash势必提早退出历史的舞台。

5. ajax的前进后退功能
  History API新增了两个方法,分别是pushState和replaceState。这个两个方法可以用以向浏览器添加历史记录,但是不触发页面载入。这个是一个怎样的概念呢?就是说以前浏览器跳转页面或者打开新页面的时候,会同时记录历史页面。而现在,我们可以分离这两个操作,只是记录历史页面,而不重载新页面。

6. 跨文档的消息传递
  跨文档的消息传递,它提供了一种方式,使得文档可以互相通信而不用考虑它们的源域。在某种程度上,这样的设计是为了防止跨站点的脚本攻击。

7. 拖放操作
  以前我们开发经常使用DOM事件模型中的mousedown、mousemove、mouseup的事件监听来模拟拖拽效果,为了实现实时的拖拽移动效果,还要不停地获取鼠标的坐标,还要不停的修改元素的位置,代码要堆很多,而且浏览器兼容性也不好。现在有了html5原生的Drag和 Drop拖拽事件,使用起来简直事半功倍了。同时,HTML5为元素新增了用于拖拽的属性draggable,这个属性决定了元素是否能被拖拽,如果draggable=”true”则说明元素可被拖曳,否则只能选择文本。

8. 编辑操作
  编辑操作是html5的很实用的新特征,可以使得表格的每个文本都是在网页中可编辑的。编辑操作不仅仅限于表格,也可以应用于其他标签,只要增加属性contenteditable="true",就可以使得元素可编辑。如在div上面使用:
<div contenteditable="true">支持html5的浏览器可编辑</div>

9. Web Socket
  以前我们有些站点需要实时获取动态信息的时候,习惯使用轮询和其他的服务器推送技术。但是我们也知道,如果使用不恰当,轮询方式很容易导致服务器性能下降,得不偿失。而Web socket通过Web上的一个单一Socket定义了一个全双工通信信道。它支持web应用程序在本地网络上互相通信,并在它们的源服务器上维持双向的通信。一旦建立好连接,WebSocket数据帧就可以在客户端和服务器之间以全双工模式传输,在同一时间任何方向,可以全双工发送文本和二进制帧,最小的帧只有2个字节。

10. 新的元素
  新增的元素很多,其中分为几类,包括结构元素,块级的语义元素,行内语义元素,嵌入多媒体元素,交互元素等。
  1) 结构元素
    section:这可以表达书本的一部分或一章,或者一章内的一节。
    header:页面主体上的头部。并非head元素。
    footer:页面的底部(页脚),可以是一封邮件签名的所在。
    nav:到其他页面的链接集合。
    article:诸如blog, 杂志,纲要等之中的一条独立记录。
  2) 块级block的语义元素
    aside:可以用以表达注记、贴士、侧栏、摘要、插入的引用等诸如作为补充主体的内容。
    figure:元素表示一个有说明的块级图片。
    dialog:用于表达人们之间的对话。
  3) 行内语义元素
    m:用来标记一些不是那么需要着重强调的文本。
    time: 用来表达时间。它需要一个datetime的特性来标明机器能够认识的时间。
    meter:表达特定范围内的数值。可用于薪水、百分比、分数等。
    progress:用以表达进度
  4) 嵌入多媒体元素
    新增video和audio元素。顾名思义,分别是用来插入视频和声音的。
  5) 交互元素
    details:用来表示一段具体的内容,但是内容默认可能不显示,通过某种手段(如点击)与legend交互才显示出来。这跟现在各种通过JavaScript隐藏一段内容,在点击后才显示出来的做法有些类似。
    datagrid:用来控制数据,可以由用户或者脚本来更新。
    menu:使用用于排列表单控件。
    command:标签可以定义命令按钮,比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时,该元素才是可见的。否则不会显示这个元素,但是可以用它规定键盘快捷键。

四、 html5丢弃的标签
  html5不支持以下标签<basefont>,<big>,<center>,<font>,<strike>,<tt>。由于这些标签只是纯粹的显示,可以使用css实现。
  Html5不支持以下标签<frame>,<frameset>,<noframes>。由于这些标签破坏了页面的可用性和访问性。
  HTML5不支持以下标签<acronym>,<applet>,<isindex>,<dir> 。由于这些标签不经常使用,也容易引起混乱,而且其它元素也可以很好地实现他们的功能。
  在 HTML 4.01 中,<acronym> 标签定义首字母缩略词,html5中使用<abbr>标签代替。
  HTML 4.01 中不赞成使用<applet>标签,HTML5中不支持<applet>标签,建议使用<object>标签代替。
  HTML5不支持<isindex >标签,可以使用表单控件代替。
  HTML4.01不建议使用<dir>标签,HTML5不支持<dir>标签,建议使用<ul>

  参考地址:http://www.w3.org/TR/html5-diff/#obsolete-elements

 

posted @ 2019-05-22 13:30  hlsblog  阅读(374)  评论(0编辑  收藏  举报