HTML5 概述

1、html5 发展史

　　1993年html首次以因特网草案形式发布。

　　20世纪90年代，html大幅发展，从2.0版，到3.2版和4.0版。最后到1999年的4.01版。

　　伴随html发展，W3C掌握了对html规范的控制权。

　　快速发布四个版本后，在业界人为html已经末路的同时，对web标准焦点开始转移到XML和XHTML上。HTML被放在次要位置。

　　致力于将web平台提升到一个新高度，一小组人在2004年成立WHATWG，他们创立了HTML5规范，同时开始转对web应用开发新功能。并发明web 2.0新名词。

　　2006年，W3C重新接入HTML，于2008年发布HTML5工作草案。

　　2009年，XHTML2工作组停止工作。

　　2010年，由于HTML5能解决非常实际的问题，所以在规范为定稿下，各大浏览器厂家已按耐不住，开始对旗下产品进行升级以支持HTML5新功能。这样，得益于浏览器的实验性反馈，HTML5规范得到了持续完善，HTML5以这种方式迅速融入到了对web平台的实质性改进中。

2、关于2022年的那个神话

　　关于html5发布关键时间点：

　　　　2012年，目标发布候选推荐版。

　　　　2022年，目标发布计划推荐版。

　　

3、谁在开发HTML5

　　WHATWG：由来自Apple、Mozilla、Google、Opera等浏览器厂商的人组成。成立于2004年。WHATWG开发HTML和Web应用API，同时为歌浏览器厂商以及其他有意向的组织提供开发式合作。

　　W3C：W3C下辖的HTML工作组目前负责发布HTML5规范。

　　IETF（Internet Engineering Task Force, 因特网工作任务组）：这个任务组下辖HTTP等负责Internet协议的团队。HTML5定义的一种新API（WebSocket API）依赖于新的WebSocket协议，IETE工作组正在开发这个协议。

4、新的认识

　　兼容性

　　实用性

　　互通性

　　通用访问性

　　4.1 兼容性和存在即合理

　　　　实际上HTML5的一个核心理念是保持一个新特性平滑过渡。

　　　　html5研究者花费了大量的经历来研究通用行为。如，Google分析了上百王的页面，从中分析出了DIV标签的通用ID名称，并且发现其重复量很大。例如，很多开发人员使用DIV id="header" 来标记页眉区域。进而，加入<header>标签。

　　　　尽管html5标准的一些特性非常具有革命性，但是html5旨在进化而非革命。

　　4.2 效率和用户优先

　　　　html5规范是基于用户优先准则编写的，其宗旨是“用户至上”，意味着在遇到无法解决的冲突时，规范会把用户放到第一位，其次是页面作者，再次是实现者（浏览器），接着是规定制定者（W3C/WHATWG），最后才考虑理论的纯粹性。

　　　　下面的示例，在html5中都能被识别：

　　　　id="prohtml5"

　　　　id=prohtml5

　　　　ID="prohtml5"

　　　　这里不去辩解语法是否严格，只关心一个底线，那就是最终用户其实并不在乎代码怎么写。PS：不提倡入门者一开始写不严谨的代码。毕竟归根结底，受害者还是最终用户，一旦由于开发人员的原因造成页面错误导致不能正常显示，那么被折磨的肯定是最终用户。

　　　　html5也衍生出xhtml5（可通过xml工具生成有效的html5代码）。html和xhtml两种版本的代码经过序列化应该可以生成近乎一样的DOM树。显然XHTML的验证规则严格得多。刚才示例中后两行代码是无法通过验证的。

　　　　1、安全机制的设计

　　　　　　html5足够安全。引入了一种新的基于来源的安全模型。该模型不仅易用，而且对各种不同的API都通用。不需要借助于任何所谓聪明、有创意却不安全的hack就能跨域进行安全对话。

　　　　2、表现和内容分离

　　　　　　html5规范已经不支持老版本html的大部分表现功能了。但得益于先前提到的html5兼容性方面的设计理念，哪些功能仍然可用。清晰的分开表现和内容显得更重要，否则会有如下弊端：

　　　　　　可访问性差

　　　　　　不必要的复杂度（所有样式代码都放在页面中，代码可读性很差）

　　　　　　文件变大（样式内容越多，文件越大），带来的后果就是页面载入变慢

　　4.3 化繁为简

　　　　html5的口号是“简单至上，尽可能简化”。因此，有如下改进：

　　　　　　以浏览器原生能力代替复杂的javascript代码

　　　　　　新的简化的DOCTYPE

　　　　　　新的简化的字符集声明

　　　　　　简单而强大的html5 API

　　　　另外，html5规范比遗忘的任何版本都要详细，为的是避免造成误解。

　　　　基于多重改进过的、强大的错误处理方案，html5具备了良好的错误处理机制。html5提倡重大错误的平缓恢复，再次把最终用户的利益放在了第一位。比如，如果页面中有错误的话，在以前可能会影响整个页面的显示，而html5不会出现这种情况，取而代之的是以标准方式显示“broken”标记，这要归功于html5中精确定义的错误恢复机制。

　　4.4 通用访问

　　　　可访问性：处于对残障用户的考虑。html5与WAI和ARIA做了紧密集合，WAI-ARIA中以屏幕阅读器为基础的元素已经被添加到html中。

　　　　媒体中立：如果可能的话，html5的功能在所有不同的设备和平台上应该都能正常运行。

　　　　支持所有语种：录入，新的<ruby>元素支持在东亚页面排版中会用到的Ruby注释。

5、无插件范式

　　过去，很多功能呢只能通过插件或者复杂的hack（本地绘图API、本地socket等）来实现，但在html5中提供了对这些功能的原生支持。

　　插件的方式存在很多问题：

　　　　插件安装可能失败

　　　　插件可以被禁用或者屏蔽（例如Applie的ipad就不支持flash插件）

　　　　插件自身会成为被攻击的对象

　　　　插件不容易和html文档的其他部分集成（因为插件边界、剪裁和透明度问题）

　　虽然一些插件的安装率很高，但在控制严格的公司内部网络环境中经常会被封锁。此外，由于插件经常还会给用户带来烦人的广告，一些用户也会选择屏蔽此类插件。这样，一旦用户禁用插件，就意味着依赖插件显示的内容也无法表现出来。

　　在已经设计好的页面中，要想把插件显示的内容与页面上其他元素集成也比较困难，因为会引起剪裁和透明度为问题。插件使用的是自带的渲染模型，与普通web页面所使用的不一样，所以当弹出菜单或者其他可视化元素与插件重叠时，会特别麻烦。相对的，html5可以直接用css和javascript的方式控制页面布局。

　　html5 包括：Canvas（2D、3D）、Cross-document消息传送、Geoocation、Audio和Video、Forms、MathML、Microdata、Server-Sent Events、Scalable Vector Graphics(SVG)、WebSocket API及协议、Web Origin Concept、Web Storage、索引数据库、引用缓存（离线Web应用）、Web Workers、拖放、XMLHttpRequest Level 2

　　www.caniuse.com —— 按照浏览器的版本提供了详尽的html5功能支持情况

　　www.html5test.com —— 该网站会直接显示用户浏览器对html5规范的支持情况

　　Modernizr —— 一个javascript库，提供非常现金的html5和css3检测功能，是检测浏览器是否支持某些特性的最佳工具

6、html5的新功能
　　6.1 新的DOCTYPE 和 字符集

　　　　<!DOCTYPE html>

　　　　<meta charset="utf-8">

　　　　使用html5的doctype会触发浏览器以标准兼容模式显示页面。

　　　　众所周知，web页面有多重显示模式，比如怪异模式、近标准模式以及标准模式。其中标准模式也被成为非怪异模式。浏览器会根据东侧type识别该使用哪种模式，以及使用什么规则来验证页面。在怪异模式下，浏览器会尽量不中断页面显示，即使没有完全通过验证也会将其显示出来。html5引入新的标记元素和其他机制，因此如果坚持使用已废弃的元素，那么页面将无法通过验证。

　　6.2 新元素和旧元素

　　　　html5的内容类型

　　　　内嵌 ： 向文档中添加其他类型的内容，例如audio、video和iframe等

　　　　流   ： 在文档和应用的body中使用的元素，例如form、h1和small等

　　　　标题 ： 段落标题，例如h1、h2和hgroup等

　　　　交互 ： 与用户交互的内容，例如音频和视频控件、button、textarea等

　　　　元数据 ： 通常出现在页面的head中，设置页面其他部分的表现和行为，例如script、style、title等

　　　　短语 ： 文本和文本标记元素， 例如mark、kbd、sub和sup等

　　　　片段 ： 用户定义文档中片段的元素，例如article、aside、title等

　　　　上述所有类型的元素都可以通过css来设定样式。

　　　　不过需要注意的是，html5中移除了很多在行内设样式的标记元素，如big、center、font和basefont等，以鼓励开发人员使用css

　　6.3 语意化标记

　　　　header ： 标记头部区域的内容（用于整个页面或者页面中的一块区域）

　　　　footer ： 标记脚部区域的内容（用于整个页面或者页面中的一块区域）

　　　　section ： Web页面中的一块区域

　　　　article ： 独立的文章内容

　　　　aside ： 相关内容或者引文

　　　　nav ： 导航类辅助内容

　　　　上面所有的元素都能用css设定样式（推崇表现和内容的分离理念）,所以在html5的实际变成中，开发人员必须使用css来定义样式。

　　6.4 使用 Selectors API 简化选取操作

　　　　getElementById() ： 根据指定的id特性值查找并返回元素， <div id="foo">    getElementById("foo");

　　　　getElementsByName() ： 返回所有name特性为指定值的元素， <input type="text" name="foo">    getElementsByName("foo");

　　　　getElementsByTagName() ： 返回所有标签名称与指定值相匹配的元素， <input type="text">    getElementsByTagName("input");

　　　　Selectors API与现在css中使用的选择规则一样，通过它可以查找页面中的一个或多个元素。

　　　　querySelector() ： 根据制定的选择规则，返回在页面中找到的第一个匹配的元素， querySelector("input.error")， 返回第一个css类名为"error"的文本输入框

　　　　querySelectorAll() ： 根据制定规则返回页面中所有相匹配的元素，querySelectorAll("#results td")， 返回id值为results的元素下所有的单元格

　　　　可以为 Selectors API函数同时指定多个选择规则，例如

　　　　Var x = document.querySelector(".highClass", ".lowClass"); //选择文档中类名为highClass或lowClass的第一个元素

　　　　提示：Selectors API 不仅仅只是方便，在遍历DOM的时候，通常会比以前的子节点搜索API更快。

　　6.5 javascript 日志和调试

　　　　很多调试工具支持设置断点来暂停代码执行、分析程序状态以及查看变量的当前值。console.log API 已经成为javascript开发人员记录日志的事实标准。为了便于开发人员查看记录到控制台的信息，很多浏览器提供了分栏窗格的视图。console.log API 要比 alert()好用很多，因为不会阻塞脚本的执行

　　6.6 window.JSON

　　　　JSON 是一种相对来说比较新并且正在日益流行的数据交换格式。作为javascript语法的一个子集，他将数据表示为对象字面量。由于其语法简单和在javascript编程中与生俱来的兼容性，JSON变成了HTML5应用内部数据交换的事实标准。典型的JSON API包含两个函数， parse()和stringify()，分别用来将字符串序列化为DOM对象和将DOM对象转换为字符串。

　　6.7 DOM Level 3

　　　　在所有支持HTML5的浏览器中，我们终于可以使用相同的代码来实现DOM操作和事件处理了，包括非常重要的addEventListener()和dispatchEvent()方法。

HTML5 程序设计笔记（一）的更多相关文章

  1. HTML5 程序设计笔记（二）

    Canvas API 1.HTML5 Canvas 概述 1.1 历史 Canvas的概念最初是由苹果公司提出的,用于在Mac OS X WebKit中创建控制板部件(dashboard widget ...

  2. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  3. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  4. js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定

    js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定 addEventListener()与removeEventListener( ...

  5. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. HTML5基础——笔记

    HTML5基础——笔记 近几年来,互联网+.大数据.云计算‘物联网‘虚拟现实‘人工智能.机器学习.移动互联网等IT相关新名词.新概念层出不穷,相关产业发展如火如荼.互联网+移动互联网已经深入到人民日常 ...

  7. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  8. Java Web程序设计笔记 • 【目录】

    章节 内容 实践练习 Java Web程序设计作业目录(作业笔记) 第1章 Java Web程序设计笔记 • [第1章 Web应用程序] 第2章 Java Web程序设计笔记 • [第2章 JSP基础 ...

  9. Java高级程序设计笔记 • 【目录】

    持续更新中- 我的大学笔记>>> 章节 内容 实践练习 Java高级程序设计作业目录(作业笔记) 第1章 Java高级程序设计笔记 • [第1章 IO流] 第2章 Java高级程序设 ...

随机推荐

  1. Poj 2528-Mayor's posters 线段切割

      题目:http://poj.org/problem?id=2528 Mayor's posters Time Limit: 1000MS   Memory Limit: 65536K Total ...

  2. 5 weekend01、02、03、04、05、06、07的分布式集群的HA测试 + hdfs--动态增加节点和副本数量管理 + HA的java api访问要点

    weekend01.02.03.04.05.06.07的分布式集群的HA测试 1)  weekend01.02的hdfs的HA测试 2)  weekend03.04的yarn的HA测试 1)  wee ...

  3. Linux Foundation Secure Boot System Released

    As promised, here is the Linux Foundation UEFI secure boot system.  This was actually released to us ...

  4. oracle 语句优化

    1. 选用适合的ORACLE优化器         ORACLE的优化器共有3种: a. RULE (基于规则)   b. COST (基于成本) c. CHOOSE (选择性) 设置缺省的优化器,可 ...

  5. spfa + slf优化

    最近在练习费用流 , 不是要用spfa吗 ,我们教练说:ns学生写朴素的spfa说出去都让人笑 . QwQ,所以就去学了一下优化 . slf优化就是双向队列优化一下,本来想用lll优化,可是优化后我t ...

  6. Thoughtworks的技术雷达

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:Thoughtworks的技术雷达.

  7. SAP ABAP 日期相关函数

    获的两个日期之间的分钟数 data min TYPE i. CALL FUNCTION 'DELTA_TIME_DAY_HOUR' EXPORTING T1 = ' T2 = ' D1 = ' D2 ...

  8. Servlet配置文件

    <url-pattern>/servlet/demo</url-pattern> 1.以 / 开头, /代表工程路径:(必须要加 / ) 2.以 * 开头,必须加后缀名 /* ...

  9. CentOS更换python版本后，yum不可用的问题

    因为yum调用了python,他的启动程序/usr/bin/yum就是一个python脚本 yum是不兼容 Python 2.7的,所以yum不能正常工作,我们需要指定 yum 的Python版本 将 ...

  10. 【转】正确使用Block避免Cycle Retain和Crash

    原文地址:http://tanqisen.github.io/blog/2013/04/19/gcd-block-cycle-retain/ 使用指南:http://blog.csdn.net/nic ...