从零开始学web开发之html5-h5概述

前言

为了掌握多一门技术,于是开始了学习前端技术的脚步。虽然安卓还是没有深入地学习一些比较高端的知识，比如view绘制原理,事件分发机制,属性动画的绘制。没有深入地研究一些流行框架，最遗憾的是没有将rxjava应用到自己的工作中，更加没有学习kotlin,还有好多好多安卓技术没有吃透。

但现在学习前端技术是比较紧急的事情，一是webapp的发展趋势越来越好，势必影响到移动端的开发;二是感觉跨平台会越来越普及，而html5及javascript是跨平台的最好解决方案;三是安卓开发也有许多是通用网页的混合开发,会前端开发能带来不少的优势。

综上所述，现阶段紧急的事情是学会前端开发，而后再实用在安卓上，最后再将安卓技术提升到高级开发人员的水平上。学海无涯,回头是黯!

学习路线

HTML->CSS->JavaScript->jQuery->CSS3->HTML5_>ASP.NET(或PHP)->Ajax
修改一下:
现在的Web服务器比较流行的解决方案是node.js了，所以这里的PHP要更改为node.js.
HTML->CSS->JavaScript->jQuery->CSS3->HTML5_>node.js->Ajax
总结起来就是
HTML-CSS-JavaScript-node.js-Ajax

概述

H5历史时间线

• 93年首次发布草案
• 94年互联网之父Tim Berners-Lee创建w3c.
• 95年,HTML2.0
• 96年,HTML3.2
• 97年,HTML4.0,W3C推荐标准
• 99年4.01版本,W3C(万维网联盟)掌控
• 2000年,XHTML1.0
• 2001年,XHTML1.1
• 2009年,W3C终止XHTML2的工作
• 08年w3c发布h5工作草案
• 2014年10月发布正式推荐标准
• 22年发布计划推荐版

H5规范开发组织

• WHATWG

  由来自Apple,Mozilla,Google,Opera等浏览器厂商的人组成,成立于2004年。开发HTML和web应用API,并身其它组织提供开放式合作。

• W3C

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

• IETF

  Internet Engineering Task Force,因特网工程任务组。负责Http等Internet协议,定义新Api(WebSocket API)

HTML、CSS和JavaScript的区别

• Html 网页的结构
• CSS 网页的外观
• JavaScript 页面的行为
• 通俗说明:将网页比作一间房子,Html是房子的地基、骨架等外壳结构;CSS是房子的装修，比如装的什么类型的灯，用的什么颜色的窗帘;而Javascript就是在房间里使用一些电器，电器会作出相应的反应,如开电视，开灯(这个过程就好像点击网页中的按钮)

设计理念

1.兼容性

• 核心理念:保持一切新特性平滑过渡。
• 研究通用行为,如将DIVid=”header”来标记页眉区域这种多人使用的行为，直接添加一个标签。
• Html5旨在进化而非革命,存在即合理

2.实用性

• 基于用户优先准则编写，宗旨是”用户即上帝”.
• 规范顺序:用户->页面作者->实现者(浏览器)->规范制定者(W3C/WHATWG)->理论纯粹性
• 安全机制的设计,引入新的基于来源的安全模型。
• 表现和内容分离，如不分离则会：可访问性差,不必要的复杂度,文件变大，页面载入变慢。

3.互通性

• h5口号:简单至上，尽可能简化- 化繁为简。
• 以浏览器原生能力复杂的JS代码
• 新的简化的DOCTYPE
• 新的简化的字符集声明
• 简而强大的H5 API.

4.通用访问性

• 可访问性:H5与WAI和ARIA做到了紧密结合，以屏幕阅读器为基础的元素已被添加到HTML中
• 媒体中立:H5功能在所有不同的设备和平台上应该都能正常运行。
• 支持所有语种:

5.无插件范式

插件的坏处
1. 插件安装可能失败
2. 插件可以被禁用或屏蔽
3. 插件自身会成为被攻击的对象
4. 插件不容易与HTML文档的其它部分集成(因为插件边界、剪裁和透明度问题)

Html5方案：
直接用CSS和JavaScript的方式控制页面布局，canvas元素可实现强大的绘画功能。

H5包含内容

• Canvas(2D,3D)
• Channel消息传送
• Cross-document消息传送
• Geoloaction
• MathML
• Microdata
• Server-Sent Events
• Scalable Vector Graphics(SVG)
• WebSocket API及协议
• Web Origin Concept
• Web Storage
• Web SQL database
• Web Workers
• XMLHttpRequest Level 2

新元素类型

• 内嵌
  向文档中添加其它类型的内容，例如audio,video,canvas和frame

• 流
  在文档和应用的body中使用的元素,例如form,h1和small等

• 标题
  段落标题，例如h1,h2和group等

• 交互
  与用户交互的内容，例如音频和视频的控件,button,extarea等

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

• 短语
  文本和文本标记元素,例如mark,kbd,sub,sup等

• 片段
  用于定义页面片段的元素，例如article,aside和title等

新增语义化标记

• header：标记头部区域的内容(用于整个页面或页面中的一块区域)
• footer: 标记脚部区域的内容(用于整个页面或页面中的一块区域)
• section:Web页面中的一块区域
• article:独立的文章内容
• aside:相关内容或者引文
• rav:导航类辅助内容

新的Selectors API

querySelector()

• 描述：根据指定的选择规则，返回在页面中找到的第一个匹配元素。
• 示例：querySelector{“input error”};
• 结果：返回第一个css类名为”error”的文本输入框

querySelectorAll()

• 描述：根据指定规则返回页面中所有相匹配的元素
• 示例:querySelectorAll{“#results td”};
• 结果:返回Id值 为results的元素下所有的单元 格

旧API

1. getElementById()
   根据指定 的id特性值查找并返回元素，ex:

<div id="foo"> getElementByid("foo");

1. getElementsByname
   返回所有name特性为指定值的元素,

type="text" name="foo">
getElementsByName("foo");

1. getElementsByTagName()
   返回所有标签名称与指定值相匹配的元素

type="text>    
getElementsByTagName("input");

JavaScripts日志和调试

• 各大浏览器的开发者工具
• console.log()输出日志,比alter()好用，并且不会阻塞代码执行。

Window.JSON

• ES5标准,数据交换格式
• parse()函数,字符串序列化成DOM对象
• stringify()函数,将DOM对象转换成字符串

各浏览器的JS引擎

浏览器	js引擎
Apple Safari 5	Nitro
Google Chrome 5	V8
MS IE 9	Chakra
Mozilla Firefox4	JagerMonkey
Opera 10.6	Carakan