HTML5新增知识点总结
HTML5几大知识点
1、 video
2、 audio
3、 canvas
4、 svg
5、 Geolocation (地理定位)
6、 LocalStorate和sessionStorage (存储)
7、 Cache manifest (应用缓存):除了IE其他浏览器都支持
8、 Web Worker
9、 服务器发送事件(Server-Sent)
10、 HTML5标签、属性、事件
11、 web socket
Video
Video标签中含有src、poster、preload、autoplay、loop、controls、width、height等几个属性,还有一个内部使用标签
1) src属性用来执行播放视频的位置. Poster属性用于指定一张图片,在当前视频数据无效时显示预览图
2) preload属性用于定义视频是否预加载。属性有三个可选值:none、metadata(部分加载)、auto。默认值是auto。
3) autoplay属性用于设置视频是否自动播放,是一个布尔值属性,当出现该属性时表示自动播放。
4) loop属性,用于指定视频是否循环播放,同样是布尔值属性
5) controls属性用于向浏览器指明页面制作者没有使用脚本生成播放器,需要浏览器启用自身的播放控制栏。控制栏必须包括播放暂停控制,播放进度控制,音量控制等。
6) source标签用于给媒体指定多个可选择的文件地址,且只能在媒体标签没有使用src属性时使用
浏览器按source标签的顺序检测指定的视频是否能够播放,如果不能则换下一个,此方法多用于兼容不同的浏览器。Source标签包含src、type、media三个属性
注意,audio,canvas,svg,等几个标签属性可以参考
https://jontylu.github.io/jonty_blog/2017/04/06/HTML5新增标签/#more(转载)
HTML5 Geolocation(地理定位):
IE9,Firefox,chrome,Safari, Opera支持
HTML5 Geolocation API用于获取用户的地理位置。
getCurrentPosition() 方法来获得用户的位置
LocalStorate和sessionStorage (存储)
Html5提供了两种在客户端的存储数据的新方法:
LocalStorage: 没有时间限制的数据存储
SessionStorage: 针对一个session 的 数据存储
在此之前,这些都是由cookie完成的,但是cookie不适合大量数据的存储,因为他们由每个对服务器的请求来传递,速度慢效率低。
应用缓存
应用程序提供了离线下载的使用功能,让应用程序可以huoqu 本地的网站内容,例如HTML,Css,图片以及javascript.这个特性可以提高网站性能,它的实现借助于manifest文件如下
<html manifest=”…”>
与浏览器缓存相比,它不强制用户访问的网站内容被缓存。
应用缓存为应用带来三个优势
离线浏览:用户可在应用离线时使用他们
速度:已缓存资源加载得更快
减少服务器负载:浏览器将只从服务器下载更新过或更改过的资源。
Web worker (除了IE,其他浏览器都支持web worker)
什么是web worker:
在HTML页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。
Web work是运行在后台的javascript,独立于其他脚本,不会影响其他页面的性能。
注意:由于web worker 位于外部文件中,他无法访问window,document,parent对象。
HTML5服务器发送事件
Server-Sent事件—单向信息传递
Server-Sent事件指的是网页自动获取来自服务器的更新。(除了IE,其他主流浏览器均支持服务器发送事件。)
接收Server-Sent事件通知
EventSource对象用于接收服务器发送事件通知
var source=newEventSource("demo_sse.php");
source.onmessage=function(event){
document.getElementById("result").innerHTML+=event.data+ "<br/>";
};
- HTML 5 服务器发送事件 创建一个新的 EventSource 对象,然后规定发送更新的页面的 URL(本例中是 “demo_sse.php”)
每接收到一次更新,就会发生 onmessage 事件
当 onmessage 事件发生时,把已接收的数据推入 id 为 “result” 的元素中
关于html5的一些面试题
1、 html5有哪些新特性、移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题
a、新特性、新增元素(需要了解下)
内容元素:article、footer、header、nav、section
表单元素:calendar、date、time、email、url、search
控件元素:webworker、websockt、Geolcation
b、移除元素
显现层元素:basefont , big, center, font , s , strike, tt, u
性能较差元素:frame, frameset,noframes
c、处理兼容性的两种方法(需要了解下)
1)IE6/7/8 支持通过dicument 方法产生的标签,利用这一特性让这些浏览器支持HTML5新标签
2)使用html5shim框架
另外,DOCTYPE声明的方式是区别HTML和HTML5标志的一个重要因素,此外,还可以根据新增的结构,功能元素加以区分
2、 如何区分HTML和HTML5
1) 在类型申明上,
2) 结构语义上不同
HTML:没有体现结构语言话的标签,通常都是这样来命名的<div id=”header”></div>
,这样表示网站的头部
HTML5:在语义上有很大的优势,提供了一些新的标签,比如:<header><article><footer><nav><aside><section>
3、10个重要的表单元素
Color、Date、Datetime-local、Email、Time、Url、Range、Telephone、Number、Search
4、 HTML5中的canvas
Canvas是HTML中你可以绘制图形的区域
如何使用canvas(具体参考链接中的内容)
首先定义canvas区域
<canvas id=”mycanvas” width=”600” height=”500”style=””></canvas>
其次获取访问canvas上下文区域的关联
Var c=document.getElementById(“mycanvas”)
Var ctx=c.getContext(“2d”)
最后绘制图形
5、Html5和html的区别
1、 在文档类型申明
2、 在结构语义上
3、 Html5有强大的新增功能(需要了解)
6、Canvas和SVG的区别
Canvas | SVG |
---|---|
依赖分辨率 | 不依赖分辨率 |
弱的文本渲染能力 | 适合带有大型渲染区域的应用程序 |
一旦绘制完成,你不能访问像素和操作它 | 使用svg的形状能被记忆和操作,浏览器可以再次显示 |
没有记住以后事情的意向,所以更快 | 为了之后的操作,需要记录坐标,操作比较缓慢 |
不适合游戏应用 | |
不支持事件处理器 | 支持事件处理器 |
7、HTML5提供了哪些新的API
Html5提供的应用程序API主要有
Media API
Text track API
Application Cache API
User interaction
Data Transfer API
Command API
Constraint Validation API
History API
8、HTML5应用程序缓存和浏览器缓存有什么区别
应用程序提供了离线下载的使用功能,让应用程序可以huoqu 本地的网站内容,例如HTML,Css,图片以及javascript.这个特性可以提高网站性能,它的实现借助于manifest文件如下
<html manifest=”…”>
与浏览器缓存相比,它不强制用户访问的网站内容被缓存。
参考链接:https://wenku.baidu.com/view/308939f3e2bd960591c67746.html