• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
非常靠谱 Html 5
 

非常靠谱 Html 5

on

  • 1,211 views

 

Statistics

Views

Total Views
1,211
Views on SlideShare
1,211
Embed Views
0

Actions

Likes
1
Downloads
7
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    非常靠谱 Html 5 非常靠谱 Html 5 Presentation Transcript

    • 《非常靠谱 - Html 5》 闲聊
    • Html 和 Html 5
    • 什么是Html? 此处。。。。。。省略一万字http://www.oupeng.com
    • 八年的漫长等待 。。。。。。。。Html 5 • HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 • HTML 的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。 • HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。http://www.oupeng.com
    • Html 5 的支持者(浏览器)
    • 五大主流浏览器 • CHROME • SAFARI • OPERA • FIREFOX • IEhttp://www.oupeng.com
    • Html 5 的新鲜货
    • Semantic(语义)
    • 干净整洁的代码 清晰的页面结构 简单的代码实现 强大的媒体功能http://www.oupeng.com
    • 结构 section:这可以是书中的一章或一节 header :页面上显示的页眉;与 head 元素不一样 footer :页脚;可以显示电子邮件中的签名 nav :指向其他页面的一组链接 article:blog、杂志、文章汇编等中的一篇文章 交互 details :描述文档或文档某个部分的细节 datagrid :网格控件,可以用它显示树、列表和表格http://www.oupeng.com
    • 块元素 aside :说明、提示、边栏、引用、附加注释等,也就是叙述主线之外的内容 figure :标签规定独立的流内容(图像、图表、照片、代码等等) dialog :对话框 内联元素 mark:标签定义带有记号的文本。请在需要突出显示文本时使用 time:表示时间值 meter:表示数字值 progress:表示过程状态http://www.oupeng.com
    • Graphics(图形 & 动画)
    • Canvas JavaScript Context 2D Context API Canvas 3D WebGLhttp://www.oupeng.com
    • SVG 易读取和修改 尺寸小、压缩性强 高质量、可伸缩 文字索引、图像搜索 动态生成图形 纯粹的XML 基于SMIL标准http://www.oupeng.com
    • CSS 3 (丰富多彩的样式)
    • Selector DOM API document.getElementsByClassName(“section”); Selector API document.querySelector(“ul li:nth-child(odd)”);http://www.oupeng.com
    • 样式 透明度 圆角 文字阴影 多栏布局 多栏布局 多栏布局 多栏布局 多栏布局 多栏布局 边框 多栏布局 多栏布局 多栏布局 多栏布局 多背景图 Web Fontshttp://www.oupeng.com
    • Storage (存储)
    • 我们想要的是什么 更大的存储空间 在客户端上的 不受页面刷新的影响 不需要提交到服务器http://www.oupeng.com
    • Local Storage 用于持久化的本地存储,数据是永远不会过期的 Session Storage 用于存储一个会话(session)中的数据,这些数据只有 在同一个会话中的页面才能访问,并且当会话结束后数 据也随之销毁。http://www.oupeng.com
    • 程序例http://www.oupeng.com
    • 相比Cookie的优势 空间更大 没有时间期限 存储内容不会发送至服务器端 易用的接口 独立的存储空间http://www.oupeng.com
    • Web SQL DataBase SQLLite文件型数据库 SQL语句 特点 减少服务器请求次数 存储复杂的数据结构 避免存储安全性数据http://www.oupeng.com
    • 程序例http://www.oupeng.com
    • Form (表单)
    • 新增属性 placeholder autocomplete autofocus list/datalist max/min/step requiredhttp://www.oupeng.com
    • 新增Input类型 email date url time range datetime search week tel month color numberhttp://www.oupeng.com
    • Audio/Video (音频/视频)
    • audio src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 <audio id="media" src="http://www.abc.com/test.mp3" controls></audio>http://www.oupeng.com
    • video src:视频的URL poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 width:视频宽度 height:视频高度 <video id="media" src="http://www.abc.com/test.mp4" controls width="400px"heigt="400px"></video>http://www.oupeng.com
    • Geolocation (地理位置)
    • 它是一个什么东西呢? 浏览器定位功能 常见位置信息源 全球定位系统(GPS) 网络信号(IP地址、RFID、WiFi及蓝牙MAC地址) 运营商(GSM/CDMA的cell ID)http://www.oupeng.com
    • 浏览器是如何定位的? 定位过程及原理 在访问位置感知的站点时,询问是否要共享你的位置 如果同意,搜集附近的无线访问点、IP地址等信息 发送信息到服务供应商(Google Location Services) 将位置信息返回给当前页面或站点 ※ 如果不同意的话,浏览器就什么都不会做http://www.oupeng.com
    • Google 是怎么计算的? 因为Google是一家很大型的公司,每天会很工 作人员会开一辆车在城市的满大街乱跑,然后将所 有的无线热点信息搜集起来,把那些固定、持久的 无线热点信 息保存到Google的位置数据库中。当浏 览器请求解析时,它会去对比搜索对应的无线热点 信息,然后将最近那个无线热点的坐标位置返回。 但这样有一个限制条件,那就是,用户电脑并 须支持WIFI无线上网功能,否则无法搜索WIFI热点。http://www.oupeng.com
    • navigator对象 Geolocation API(访问位置信息) getCurrentPosition watchPosition clearWatchhttp://www.oupeng.com
    • Position 对象 coords属性( coordinator 坐标检测器): accuracy:准确度 latitude:纬度 longitude:经度 altitude:海拔高度 altitudeAcuracy:海拔高度的精确度 heading:行进方向 speed:地面的速度http://www.oupeng.com
    • Web Worker (后台异步化)
    • 什么 Multi-Thread (多线程解决方案) 意义 提高速度体验,保持操作流畅,不冻结用户界面http://www.oupeng.com
    • 原理 在当前javascript的主线程中,加载一个javascript文件来开 辟一个新的线程,线程间互相不阻塞,并可以进行数据交互。 接口 postMessage onMessagehttp://www.oupeng.com
    • WebSockets (双向通信)
    • 什么 服务器端向客户端浏览器PUSH内容 意义 实时数据的及时推送,将最新的信息发送至需要接收的客户 端,而不需要手动建立端口连接http://www.oupeng.com
    • 原理http://www.oupeng.com
    • 客户端事件 onopen: 接口打开 onsend:发送消息 onmessage: 接收消息 onclose : 接口关闭 服务端 非常简单,只管往socket写数据http://www.oupeng.com
    • Html 5 新原则
    • • 新特性应该基于 HTML、CSS、DOM 以及 JavaScript • 减少对外部插件的需求(比如 Flash) • 更优秀的错误处理 • 更多取代脚本的标记 • HTML5 应该独立于设备 • 开发进程应对公众透明http://www.oupeng.com
    • 视频聊天 ? ! CS
    • www.oupeng.com