学习-HTML5
@@ 学习HTML5发现对我们开发工作者来说要方便很多,它现在还在发展阶段,在未来肯定会是主流。
我们知道HTML5目的是取代HTML4.01和XHTML1.0标准,他希望能够减少互联网富应用(RIA)对Flash等依赖,并且提供更多能够有效增强Web应用的API.
@@广义上:新一代开发Web富客户端应用程序整体解决方案

通过上表可以预计以后就是我们来编写HTML5
那么我们来看看HTML5的新特性:一、语义化标签
二、多媒体
三、智能表单
四、三维、图形与特效
五、设备通用
六、离线存储
七、连接
八、CSS3
常见的 DOCTYPE 声明
HTML 5
HTML 4.01 Strict
这个 DTD 包含所有 HTML 元素和属性,但不包括表象或过时的元素(如 font )。框架集是不允许的。
HTML 4.01 Transitional
这个 DTD 包含所有 HTML 元素和属性,包括表象或过时的元素(如 font )。框架集是不允许的。
HTML 4.01 Frameset
这个 DTD 与 HTML 4.01 Transitional 相同,但是允许使用框架集内容。
XHTML 1.0 Strict
这个 DTD 包含所有 HTML 元素和属性,但不包括表象或过时的元素(如 font )。框架集是不允许的。结构必须按标准格式的 XML 进行书写。
XHTML 1.0 Transitional
这个 DTD 包含所有 HTML 元素和属性,包括表象或过时的元素(如 font )。框架集是不允许的。结构必须按标准格式的 XML 进行书写。
XHTML 1.0 Frameset
这个 DTD 与 XHTML 1.0 Transitional 相同,但是允许使用框架集内容。
XHTML 1.1
这个 DTD 与 XHTML 1.0 Strict 相同,但是允许您添加模块(例如为东亚语言提供 ruby 支持)。
常用的语义标签列表
被弃用的标签:、
、
Html5shiv
Google的解决方案https://github.com/aFarkas/html5shiv/tree/master/dist
Bootstrap的解决方案
http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js
音视频的发展史
早期:
问题:不是所有浏览器都支持,而且embed不是标准。
现状:Realplay、window media、Quick Time 、Flash
问题:每个厂商每个标准,网站编码和格式也都不相同,flash的出现解决了面的问题,但是apple在07年决定任何设备将不再支持flash。
HTML5认为浏览器应该原生支持音视频!
HTML5支持的格式
HTML5能在完全脱离插件的情况下播放音视频
但是不是所有格式都支持。
HTML5支持的视频格式:
Ogg =带有Theora视频编码+Vorbis音频编码的Ogg文件
支持的浏览器:F、C、O
MEPG4=带有H.264视频编码+AAC音频编码的MPEG4文件
支持的浏览器: S、C
WebM=带有VP8视频编码+Vorbis音频编码的WebM格式 支持的浏览器: I、F、C、O
1)
2)< video src="文件地址" controls="controls">
您的浏览器暂不支持audio标签。播放视频
3)
Video的常见HTML属性
| 属性 | 值 | 描述 |
| Autoplay | Autoplay | 视频就绪自动播放 |
| controls | controls | 向用户显示播放控件 |
| Width | Pixels(像素) | 设置播放器宽度 |
| Height | Pixels(像素) | 设置播放器高度 |
| Loop | Loop | 播放完是否继续播放该视频,循环播放 |
| Preload | Proload | 是否等加载完再播放 |
| Src | url | 视频url地址 |
| Poster | Imgurl | 加载等待的画面图片 |
| Autobuffer | Autobuffer | 设置为浏览器缓冲方式,不设置autoply才有效 |
Video的API
| 方法 | 属性 | 事件 |
| play() | currentSrc | play |
| pause() | currentTime 当前播放时间 | pause |
| load() | videoWidth | progress |
| videoHeight | Error | |
| Volume音量 | ||
| playbackRate 播放倍数 | ||
| Paused 是否暂停 | ||
| Muted 是否静音 |
HTML5支持的音频格式
HTML5在不使用插件的情况下也可以原生的支持音频格式文件的播放,当然支持格式是有限的
HTML5支持的音频格式:
Ogg 免费 支持的浏览器:C、F、O
MP3 收费 支持的浏览器: I、C、S
Wav 收费 支持的浏览器: F、O、S
audio的常见HTML属性
| 属性 | 值 | 描述 |
| autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放。 |
| controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
| loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
| preload | preload | 如果出现该属性,则音频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
| src | url | 要播放的音频的 URL。 |
新增表单元素
| Input type | IE | Firefox | Opera | Chrome | Safari |
| datalist | No | No | 9.5 | No | No |
| keygen | No | No | 10.5 | 3.0 | No |
| output | No | No | 9.5 | No | No |
新增表单类型
| Input type | IE | Firefox | Opera | Chrome | Safari |
| | No | 4.0 | 9.0 | 10.0 | No |
| url | No | 4.0 | 9.0 | 10.0 | No |
| number | No | No | 9.0 | 7.0 | No |
| range | No | No | 9.0 | 4.0 | 4.0 |
| Date pickers | No | No | 9.0 | 10.0 | No |
| search | No | 4.0 | 11.0 | 10.0 | No |
| color | No | No | 11.0 | No | No |
新增表单属性
| Input type | IE | Firefox | Opera | Chrome | Safari |
| autocomplete | 8.0 | 3.5 | 9.5 | 3.0 | 4.0 |
| autofocus | No | No | 10.0 | 3.0 | 4.0 |
| form | No | No | 9.5 | No | No |
| form overrides | No | No | 10.5 | No | No |
| height and width | 8.0 | 3.5 | 9.5 | 3.0 | 4.0 |
| list | No | No | 9.5 | No | No |
| min, max and step | No | No | 9.5 | 3.0 | No |
| multiple | No | 3.5 | No | 3.0 | 4.0 |
| novalidate | No | No | No | No | No |
| pattern | No | No | 9.5 | 3.0 | No |
| placeholder | No | No | No | 3.0 | 3.0 |
| required | No | No | 9.5 | 3.0 | No |
Datalist标签
Datalist标签配合option标签实现的自动填充表单功能
Date类型
HTML5 拥有多个可供选取日期和时间的新输入类型:
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间(小时和分钟)
datetime - 选取时间、日、月、年(UTC 时间)
datetime-local - 选取时间、日、月、年(本地时间)
便于排版的From表单
XHTML或者HTML4.01中from和其中的表单标签(input、textarea、select、button)必须嵌套使用
HTML5中为了方便排版,可以使from中的表单标签脱离from的嵌套。方法:from指定ID,所有表单标签均添加from=id属性。
新增找对象方法
document.querySelector(“选择器”);
document.querySelectorAll(“选择器”);
DOM.classList;//返回一个DOM对象的类名集合
DOM.classList.add(“class”);//添加类名
DOM.classList.remove(“class”);//删除类名
DOM.classList.toggle(“class”);//切换类名
HTML5自定义属性(data-*)
在HTML5中添加了data-*的方式来自定义属性,使用这样的结构可以进行数据存放,解决了早期自定义属性混乱无管理的现状。
一 、设置自定义属性
Click Here
DOM.dataset.age = 24;
自定义属性时注意:
我们在添加或读取属性的时候需要去掉前缀data-*,如果属性名称中还包含连字符(-),需要转成驼峰命名方式,但如果在CSS中使用选择器,我们需要使用连字符格式
二、获取自定属性值
通过dataset对象,来获取属性,同样需要去掉data-前缀,连字符需要转化为驼峰命名.
应用程序缓存
Application Cache
1 正常编写代码
2 在html标签里面添加manifest属性指向一个文件
3 编写要缓存的文件
CACHE MANIFEST
# version 1.0.0
CACHE:
../demo.html
../style.css
../main.js
NETWORK:
*
本地文件API
获取文件 input#file.files/e.dataTransfer.files/files.slice()
文件对象 FileReader()
文件事件
Loadstart()
Loadend()
load() 文件读取完执行
progress() 文件读取中(loaded/total)
文件读取
readAsDataURL()
readAsText()
readAsBinaryString()
this.result
Web存储
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
setItem(key,value) getItem(key)
removeItem(key)
Web SQL
openDatabase:这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
transaction:这个方法让我们能够控制一个事务,以及基于这种情况执行提交或者回滚。
executeSql:这个方法用于执行实际的SQL查询
SVG
可缩放矢量图形(Scalable Vector Graphics)
Object:HTML4的标准标签,被所有较新的浏览器支持。但不允许使用脚本。
Embed:所有主流的浏览器支持,并允许使用脚本,但是属于非标准
AJAX请求SVG文件!!!
优点:质量高\体积小\支持事件处理器
缺点:被渲染速度低\不适合开发游戏
应用场景:图片展示\谷歌地图
Canvas
画布:可被用来通过脚本JavaScript绘制图形
优点:被渲染速度快
缺点:依赖屏幕分辨率\不支持事件处理器
应用场景:游戏开发\图表展示数据
转载于:https://www.cnblogs.com/liaohongwei/p/7651791.html
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!
