TML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。
本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;sessionStorage 的数据在浏览器关闭后自动删除;新的技术webworker, websocket, Geolocation.
新增标签
1、<article> 标记定义一篇文章
2、<header> 标记定义一个页面或一个区域的头部
3、<nav> 标记定义导航链接
4、<section> 标记定义一个区域
5、<aside> 标记定义页面内容部分的侧边栏
6、<hgroup> 标记定义文件中一个区块的相关信息
7、<figure> 标记定义一组媒体内容以及它们的标题
8、<figcaption> 标签定义 figure 元素的标题。
9、<footer> 标记定义一个页面或一个区域的底部
10、<dialog> 标记定义一个对话框(会话框)类似微信
11、<video> 标记定义一个视频
12、<audio> 标记定义音频内容
13、<source> 标记定义媒体资源
14、<canvas> 标记定义画布
15、<menu> 右键菜单
16、<meter> 范围条
17、<progress> 进度条
18、<datalist> 为input标记定义一个下拉列表,配合option
表单类型:
1、email 邮箱地址
2、url URL地址
3、date,time,month,week,datetime,datetime-local 日期类型
4、number 数字(max min step)
5、range 范围滑块(max min step)
6、search 搜索输入框
7、tel 电话号码输入框
8、color 颜色拾取器
表单属性
1、placeholder 输入框默认内容
2、required 必填内容(必须加name)
3、pattern 正则验证(必须加name)
4、autofocus 自动聚焦
5、autocomplete 自动完成(autocomplete="on/off")
6、novalidate 不验证此表单(form属性)
7、multiple 多个值上传
移除的元素:
纯表现的元素:basefont,big,center,font, s,strike,tt,u;
对可用性产生负面影响的元素:frame,frameset,noframes;
支持HTML5新标签:
IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,浏览器支持新标签后,还需要添加标签默认的样式。
当然也可以直接使用成熟的框架、比如html5shiv,地址:https://cdn.bootcss.com/html5shiv/r29/html5.min.js。
HTML4.0、XHTML到HTML5,从某种意义上讲,这是HTML描述性标记语言的一种更加规范的过程。因此,HTML5并没有给开发者带来多大的冲击。但HTML5增加了很多非常实用的新功能和新特性,下面具体介绍HTML5的一些优势。
1、 解决了跨浏览器问题
在HTML5之前,各大浏览器厂商为了争夺市场占有率,会在各自的浏览器中增加各种各样的功能,并且不具有统一的标准。使用不同的浏览器,常常看到不同的页面效果。在HTML5中,纳入了所有合理的扩展功能,具备良好的跨平台性能。针对不支持新标签的老式IE浏览器,只需简单地添加JavaScript代码就可以使用新的元素。推荐了解黑马程序员web前端课程。
2、新增了多个新特性
HTML语言从1.0到5.0经历了巨大的变化,从单一的文本显示功能到图文并茂的多媒体显示功能,许多特性经过多年的完善,已经发展成为一种非常重要的标记语言。HTML5新增的特性如下。
● 新的特殊内容元素,比如header、nav、section、article、footer。
● 新的表单控件,比如calendar、date、time、email、url、search。
● 用于绘画的canvas元素。
● 用于媒介回放的video和audio元素。
● 对本地离线存储的更好支持。
● 地理位置、拖曳、摄像头等API。
HTML5标准的制定是以用户优先为原则的,一旦遇到无法解决的冲突时,规范会把用户放在第一位。另外,为了增强HTML5的使用体验,还加强了以下两方面的设计。
● 安全机制的设计
为确保HTML5的安全,在设计HTML5时做了很多针对安全的设计。HTML5引入了一种新的基于开源的安全模型,该模型不仅易用,而且对不同的API(Application Programming Interface,应用程序编程接口)都通用。使用这个安全模型,不需要借助于任何不安全的hack就能跨域进行安全对话。
● 表现和内容分离
表现和内容分离是HTML5设计中的另一个重要内容。实际上,表现和内容的分离早在HTML4.0中就有设计,但是分离的并不彻底。为了避免可访问性差、代码高复杂度、文件过大等问题,HTML5规范中更细致、清晰地分离了表现和内容。但是考虑到HTML5的兼容性问题,一些陈旧的表现和内容的代码还是可以兼容使用的。
4. 化繁为简的优势
作为当下流行的通用标记语言,HTML5尽可能地简化,严格遵循了“简单至上”的原则,主要体现在这几个方面:
● 新的简化的字符集声明;
● 新的简化的DOCTYPE;
● 简单而强大的HTML5 API;
● 以浏览器原生能力替代复杂的JavaScript代码。 为了实现这些简化操作,HTML5规范需要比以前更加细致、精确。为了避免造成误解,HTML5对每一个细节都有着非常明确的规范说明,不允许有任何的歧义和模糊出现。
喜欢记得关注一下哦。
特性
1.语意特性,添加<header><header/><nav><nav>
等标签
2.多媒体, 用于媒介回放的 video 和 audio 元素
3.图像效果,用于绘画的 canvas 元素,svg元素等
4.离线 & 存储,对本地离线存储的更好的支持,local Store,Cookies等
5.设备兼容特性 ,HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连,
6.连接特性,更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术,Server-Sent Event和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能
7.性能与集成特性,HTML5会通过XMLHttpRequest2等技术,帮助您的Web应用和网站在多样化的环境中更快速的工作
新增标签
1.多媒体:<audio></audio>, <video><video>,<source></source>, <embed></embed>, <track></track>
2.新表单元素:<datalist> ,<output> , <keygen>
3.新文档节段和纲要:<header>页面头部、<section>章节、<aside>边栏、<article>文档内容、<footer>页面底部、<section>章节、<aside>边栏、<article>文档内容、<footer>页面底部
等
使用html5shiv可以解决ie低版本不兼容的问题,只需要在head中加上,当版本低于IE9时,浏览器会加载html5.js脚本,使得支持html5的新功能,也可以将脚本文件下载到本地
<head> <!--[if lt IE 9]> <script src='http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js'> </script> <![endif]--></head>
localStorage.setItem(key,value)
如果key存在时,更新valuelocalStorage.getItem(key)
如果key不存在返回nulllocalStorage.removeItem(key)
一旦删除,key对应的数据将会全部删除localStorage.clear()
使用removeItem逐个删除太麻烦,可以使用clear,执行的后果是会清除所有localStorage对象保存的数据*请认真填写需求信息,我们会在24小时内与您取得联系。