您的位置：首页 > Web前端 > HTML5

html5 新特性

2017-10-10 00:00 99 查看

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 框架中有使用)
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

4、区分 html 和 html5:

查看 DOCTYPE 声明:<!DOCTYPE html>为 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:<audio src="../mp3/See.mp3" controls autoplay></audio>
方法 2:<audio controls>
<source src="jamshed.mp3" type="audio/mpeg"> //资源外部引入
Your browser does'nt support audio embedding feature.
</audio>
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 等方法,是为了在本地"存储"数据而生.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html H5新特性

相关文章推荐

新的分享

章节导航