-
Notifications
You must be signed in to change notification settings - Fork 0
Description
1: HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签
######HTML5是什么?
HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。
HTML5的设计目的是为了在移动设备上支持多媒体。
######HTML5 中的一些有趣的新特性:
-
用于绘画的 canvas 元素
-
用于媒介回放的 video 和 audio 元素
-
对本地离线存储的更好的支持
-
新的特殊内容元素,比如 article、footer、header、nav、section
-
新的表单控件,比如 calendar、date、time、email、url、search
######新增标签 - 标签定义一个独立完整的内容,比如一篇文章
- 标签定义独立于主内容的区块,比如一个组件
- 标签定义 section 或页面的尾部内容
-
标签定义文档中的一个章节,比如产品介绍部分 - 标签定义导航部分
- 标签定义 section 或页面的头部
- 标签一般包括一个H加一个P标签
- 与一般包括一张img及图片介绍
-
标签定义声音
-
标签定义图形,可以绘制矢量图形
-
标签定义命令按钮,比如单选按钮、复选框或按钮
-
标签定义可选数据的列表。与 input 元素配合使用。但一般多使用ajax与后端交互实现
-
标签定义嵌入的内容,比如插件
-
标签主要用来在视觉上向用户呈现那些需要突出的文字,一般用于高亮显示结果
-
标签为媒介元素(比如 -
标签定义日期或时间,或者两者
有实例的学习网站
######Internet Explorer 8 及更早 IE 版本的浏览器不支持HTML5。
我们可以使用 Sjoerd Visscher 创建的 "HTML5 Enabling JavaScript", " shiv" 来解决该问题:
将以下代码放在<head>中
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
2: input 有哪些新增类型?
- color:用于指定颜色的控件。
- date:用于输入日期的控件(年,月,日,不包括时间)。
- datetime:基于 UTC 时区的日期时间输入控件(时,分,秒及几分之一秒)。
- datetime-local:用于输入日期时间控件,不包含时区。
- email:用于编辑 e-mail 的字段。 合适的时候可以使用:valid和 :invalid CSS 伪类。
- month:用于输入年月的控件,不带时区。
- number: 用于输入浮点数的控件。
- search:用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
详细实例介绍
3: 浏览器本地存储中 cookie 和 localStorage 有什么区别? localStorage 如何存储删除数据。
cookie 和 localStorage的存储目的不同。cookie主要是读取服务端,localStorage只能被浏览器这样的客户端读取。
两者在技术上的差异主要为:
cookie的每个cookie只有 4096 bytes ,而localStorage的每个域可以达到5MB
localStorage Storage接口的实现,它没有到期时间,可以通过JavaScript来清除,或者通过清除浏览器缓存(Browser Cache )/本地存储数据(Locally Stored Data)来清除。
localStorage.setItem()设置数据项
localStorage.getItem()获取数据项
localStorage.setItem('age', '99');//写入
localStorage.getItem('age');//读取
sessionStorage 、localStorage 和 cookie 之间的区别
共同点:都是保存在浏览器端,且同源的。
区别:cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递;cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。
而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。
参考文章
参考文章
4: 写出如下 CSS3效果的简单事例
1. 圆角, 圆形 2. div 阴影 3. 2D 转换:放大、缩小、偏移、旋转 4. 3D 转换:移动、旋转 5. 背景色渐变 6. 过渡效果 7. 动画