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. hdu 单调队列

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4122 代码: #include<cstdio> #include<iostream& ...

  2. Linux达人养成计划1（第2章 Linux系统安装）

    2.3 系统分区之分区与格式化 1. 分区类型 主分区:最多只能有四个. 扩展分区: 最多只能有1个. 主分区加扩展分区最多有4个. 不能写入数据,只能包含逻辑分区. 逻辑分区: 2. 格式化(高级格 ...

  3. div border-radius画圆

    不要指定border-width属性: <html> <style type="text/css"> div{ border-style: solid; b ...

  4. MySQL 优化Limit分页

    很多时候.我们需要选择出从指定位置开始的指定行数.此时.limit笑了     对于limit的定义是:     limit x,y     表示从第x行开始选择y条记录          在业务需要 ...

  5. Javascript数据类型——undefined和null的异同

    Javascript的基本数据类型中有undefined和null两种只有一个值得特殊数据类型.其中undefined表示未被初始化,不是为声明.而null表示一个空对象指针,而这也是使用typeof ...

  6. 修复南尼U盘

    通常拿到手的U盘,用数码之家的ChipGenius一般检测不出主控型号,所以需要用到U盘量产工具来测. 量产工具注意版本 一般靠后的版本才能识别使用, . 如果识别不了==> 自动换成手动,U盘 ...

  7. [置顶] 第二届微软CRM交流年会

    第二届微软CRM交流会将在12月14日举行,亲们要是感兴趣可以查看下面的活动详情.Jeff也是第一次参加这类活动,作为本次活动的嘉宾我为大家带来一个挺有意思的分享主题<Dynamics CRM ...

  8. JS时间处理，获取天时分秒

    //获取时间的天,小时,分钟,秒 function ToTime(second) { second = second / ; var result ; ) % ; ) % ; * )); ) { re ...

  9. 指纹增强程序Hong_enhancement

    本算法是基于Lin Hong et al 的论文“Fingerprint ImageEnhancement: Algorithm and Performance Evaluation”编写而成.其中一 ...

  10. android开发之gridlayout使用入门

    这个东东以前没怎么用过,今天研究了一下,不难,感觉只是在某些方面很好用. 记录下,做个计算器. <GridLayout xmlns:android="http://schemas.an ...