html5的新特性口,html5 新特性

html5 新特性

html5 有哪些新特性、移除了那些元素?如何处理 HTML5 新标签的浏览器兼容问题?如何 区分 HTML 和 HTML5?

1、新特性:

语义特性,本地存储特性,设备兼容特性,连接特性,网页多媒体特性,三维、图形及特效特性,性能与集成特性

a.语义化更好的内容标签(header,nav,footer,aside,article,section)

b.表单控件,calendar、date、time、email、url、search

c.音频、视频 API(audio,video) 自定义播放器案例

d.地理定位(Geolocation) API 掌握获取、使用第三方 API 方法

e.拖拽释放(Drag and drop) API 给元素设置 draggable = "true" 属性使其可拖动,链接和图片默认可拖动

f. WEB 存储 API 只能存储字符串 localStorage 长期存储,浏览器关闭后数据不丢失;sessionStorage 临时存储,不共享,关闭页面数据丢失

g.画布(Canvas) API

h.新的技术 webworker, websocket, Geolocation(作为了解)

webworker:可以在浏览器后台运行 JavaScript, 而不占用浏览器自身线程.Web Worker 可以提高应用的总体性能,并且提升用户体验.受限于不能访问 DOM 节点、全局变量和函数、window 和 document,但可以使用定时器和XMLHttpRequest 实现 Ajax 通信. 可分为两种类型:专用线程 dedicated web worker(单页面),以及共享线程 shared web worker(多页面).

websocket:html5 中的新通讯协议,实现了浏览器与服务器全双工通信(full-duplex).一开始的握手需要借助 HTTP 请求完成.前期的网站实时通讯是通过轮询技术实现,定期发送请求,比较占带宽.IE10+实现了该协议.

Geolocation:地理定位,html5 提供了 api

2、移除的元素:

纯表现的元素:basefont,big,center,font,dir,strike, 对可用性产生负面影响的元素:frame,frameset,noframes;

3、HTML5 新标签兼容性处理:

a.IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签,但会把新标签解析成行内元素,还需要添加标签默认的样式 display:block

b.引入兼容性处理文件 html5shiv.min.js(bootstrap 框架中有使用)

4、区分 html 和 html5:

查看 DOCTYPE 声明:为 html5 标准

5、HTML5 和 CSS3 的新标签

HTML5:canvas , audio , video , datalist , keygen ,meter, header, footer, nav, section,

article, aside,

CSS3:RGBA, text-shadow, box-shadow, border-radius, border-image,border-color, transform,

transition, animation, linear-gradient, radial-gradient, flex

6、如何在 HTML5 页面中嵌入音频、视频?

HTML 5 包含嵌入音频文件的标准方式,支持的格式包括 MP3、Wav 和 Ogg:

方法 1:

方法 2:

//资源外部引入

Your browser does'nt support audio embedding feature.

HTML5 定义了嵌入视频的标准方法,支持的格式包括:MP4、WebM 和 Ogg:

用法同上,可以设置 width、height 属性

标签属性说明:

autoplay:自动播放; controls:显示控件; src:播放文件 URL; loop:循环播放; preload:预加载

7、HTML5 引入什么新的表单标签、属性、输入类型、事件?

标签:datalist 配合 input 的 list 属性指定、keygen 验证用户数据、output 展示内容不可修改 属性:placeholder 占位符、autofocus 获取焦点、multiple 文件上传多选、required 必填项、pattern 正则表达式、autocomplete 自动完成、form 指定表单项属于哪个表单、novalidate 关闭验证 输入类型:email、tel、url、number、search、range、color、time、datatime 事件:oninput 输入内容时触发,可用于移动端输入字数统计、onkeyup 按键弹起时触发、oninvalid 验证不通过时触发

8、 HTML5 Canvas 元素有什么用?

Canvas 元素用于在网页上绘制图形,属于 html5,ie9-不支持,自身只是一个标签,没有任何绘制方法,绘图是通过 js 实现,该对 象提供了各种绘图 api.常用 2d 库 konvajs.

9、语义化的理解?

1、利于 SEO,搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重, 页面是否对爬虫容易理解非常重要,因为爬虫 很大程度上会忽略用于表现的标记,而只注重语义标记 2、让页面的内容结构化,便于各种终端根据其自身的条件来合适地显示页面,虽然部分 HTML 标签存在默认样式,甚至浏览 器都各有默认样式,这种表现虽然不是语义化 HTML 结构的有点,但同样是为了更好的表达 HTML 语义 3、便于维护,方便阅读源码, 去掉或样式丢失的时候能让页面呈现清晰的结构 4、便于团队开发和维护,W3C 给我们定了一个很好的标准,在团队中大家都遵循这个标准,可以减少很多差异化的东西,方便 开发和维护,提高开发效率,甚至实现模块化开发 总之一句话,用正确的标签做正确的事情！

10 Web Storage 本地存储(Local Storage、SessionStorage)和 cookies(储存在用户本地终端上

的数据)之间的区别是什么?

Cookies: 服务器和客户端都可以访问;大小只有 4KB 左右;设定有效期(不设定则关闭浏览器删除),

过期后将会删除;cookie还需要指定作用域,不可以跨域调用;需要前端开发者自己封装 setCookie,getCookie;

作用是与服务器进行交互,作为 HTTP 规范的一部分而存在,不可或缺.

本地存储:只有本地浏览器端可访问数据,服务器不能访问本地存储,可通过POST或者GET的通讯发送到服务器;

每个域5MB;

localStorage: 用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的;

sessionStorage: 用于本地存储一个会话中的数据,这些数据只有在同一个会话中的页面才能访问并且当会

话结束后数据也随之销毁,是会话级别的存储.

Web Storage 拥有setItem,getItem,removeItem,clear 等方法,是为了在本地"存储"数据而生.

11 scrollIntoView(alignWithTop) 滚动浏览器窗口或容器元素，以便在当前视窗的可见范围看见当前元素。如果alignWithTop为true，或者省略它，窗口会尽可能滚动到自身顶部与元素顶部平齐。-------目前各浏览器均支持

确保当前元素可见

document.getElementById(“test”).scrollIntoView(); //

//true:对象的顶端与当前窗口的顶部对齐

//false:对象的底端与当前窗口的顶部对齐