HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签
HTML5是最新的HTML标准,2014年10月29日标准规范制定完成。
新特性:
语义特性
HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的,微数据与微格式等方面的支持,构建对程序、对用户都更有价值的数据驱动的Web。本地存储特性
基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5 APP Cache,以及本地存储功能。Indexed DB(html5本地存储最重要的技术之一)和API说明文档。设备兼容特性
从Geolocation功能的API文档公开以来,HTML5为网页应用开发者们提供了更多功能上的优化选择,带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连,例如视频影音可直接与microphones及摄像头相联。连接特性
更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术,Server-Sent Event和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。网页多媒体特性
支持网页端的Audio、Video等多媒体功能, 与网站自带的APPS,摄像头,影音功能相得益彰。
三维、图形及特效特性(Class: 3D, Graphics & Effects)
基于SVG、Canvas、WebGL及CSS3的3D功能,用户会惊叹于在浏览器中,所呈现的惊人视觉效果。性能与集成特性
没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术,解决以前的跨域等问题,帮助您的Web应用和网站在多样化的环境中更快速的工作。CSS3特性
在不牺牲性能和语义结构的前提下,CSS3中提供了更多的风格和更强的效果。此外,较之以前的Web排版,Web的开放字体格式(WOFF)也提供了更高的灵活性和控制性。
新增的标签:
- <article></article>
标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本。亦或是来自其他外部源内容。 - <aside></aside>
标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关 - <audio></audio>
标签定义声音,比如音乐或其他音频流 - <canvas></canvas>
标签定义图形,比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。 - <command>
标签定义命令按钮,比如单选按钮、复选框或按钮。 - <datalist> </datalist>
标签定义可选数据的列表。与 input 元素配合使用,就可以制作出输入值的下拉列表。 - <details></details>
标签定义元素的细节,用户可进行查看,或通过点击进行隐藏。与 <legend> 一起使用,来制作 detail 的标题。该标题对用户是可见的,当在其上点击时可打开或关闭 detail。
- <figcaption></figcaption>
<figcaption> 是与其相关联的图片的说明/标题,用�于描述其父节点 元素里的其他数据, figcaption 元素应该被置于 figure元素的第一个或最后一个子元素的位置。。同时 figcaption 元素是可选的;如果没有该元素,这个父节点的图片只是会没有说明/标题。 - <figure></figure>
标签用于对元素进行组合。使用 <figcaption> 元素为元素组添加标题。 - <footer></footer>
标签定义 section 或 document 的页脚。典型地,它会包含创作者的姓名、文档的创作日期以及/或者联系信息。 - <header></header>
标签定义 section 或 document 的页眉。 - <nav></nav>
标签定义导航链接的部分。 - <progress></progress>
标签运行中的进程。可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进程。
让低版本的 IE 支持 HTML5新标签:
HTML5 Shiv是JavaScript的一种备选方案,该方案在IE9版本中优先启用HTML5元素样式,但不允许使用没有由JavaScript定义过的元素样式。html5shiv.js用于在IE9以下的浏览器模拟html5的标签。
当使用IE9以下版本的浏览器时,加载html5shiv.js文件,其它的不加载。
<!--[if lt IE 9 ]><script src="js/html5shiv.js"></script><![endif]-->
input 有哪些新增类型?
- email
类型用于验证email的格式,当提交表单时会自动验证email域的值 - url
类型用于验证 URL 地址的格式,当提交表单时会自动验证url域的值 - number
类型会根据你的设置提供选择数字的功能,min属性设置最小值、max属性设置最大值,value属性设置当前值,step属性设定每次增长的值,某些浏览器还不支持 - range
类型用于应该包含一定范围内数字值的输入域,其会以一个滑块的形式展现,min属性设置最小值、max属性设置最大值,value属性设置当前值,如果没有设置,则其默认值的范围是1-100
日期和时间类型:HTML5 拥有多个可供选取日期和时间的新输入类型: - date
选取日、月、年 - month
选取月、年 - week
选取周和年 - time
选取时间(小时和分钟) - datetime
选取时间、日、月、年(UTC 时间) - datetime-local
选取时间、日、月、年(本地时间) - search
类型用于搜索域,比如站点搜索或 Google 搜索,为其加上results="s"属性,则会在搜索框前面加上一个搜索图标 - tel
类型用于验证输入的是否是电话格式的内容,此元素现在还没有浏览器支持 - color
类型会提供一个颜色拾取器,供用户选择颜色,并将用户选择的颜色填充到此元素中
浏览器本地存储中 cookie 和 localStorage 有什么区别? localStorage 如何存储删除数据。
cookie
cookie是指浏览器存储的少量数据,同时它是与具体的web页面或者站点相关的。cookie的数据会自动在web浏览器和web服务器之间传输的,因此服务端的脚本就可以读、写存储在客户端的cookie的值。在javascript中,cookie用于保存状态以及能够为web浏览器提供一种身份识别机制,因此它们是不安全的。
localStorage
实现了web存储草案标准的浏览器在window对象上定义了两个属性:localStorage 和sectionStorage,这两个属性都代表同一个对象Storage,
都是一个持久化关联的数组,数组使用字符串来索引,存储的值也都是字符串形式的。Storage对象设置它的属性为字符串值,浏览器会将该值存储起来。localStorage保存的数据长期存在,下一次访问该网站的时候,网页可以直接读取以前保存的数据。除了保存期限的长短不同,这两个对象的属性和方法完全一样。
cookie 和 localStorage 的区别:
localStorage拥有setItem getItem RemoveItem clear等方法,其容量有10M,用于持久化的存储。cookie一般由服务器生成,可设置失效时间。如果在浏览器端生成Cookie,默认是关闭浏览器后失效,每个 Cookie 的大小一般不能超过4KB。
localStorage 存储删除数据
localStorage保存的数据,以“键值对”的形式存在,每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存。存入数据使用setItem方法。它接受两个参数,第一个是键名,第二个是保存的数据。
存储数据:
localStorage.setItem("x",1);//以x的名字存储一个变量1
或者
localStorage.x= 1;//设置x为"1"
删除数据:
localStorage.removeItem("x");//删除x项
localStorage.clear();//全部删除
写出如下 CSS3效果的简单事例
1. 圆角, 圆形
2. div 阴影
3. 2D 转换:放大、缩小、偏移、旋转
4. 3D 转换:移动、旋转
5. 背景色渐变
6. 过渡效果
7. 动画