题目1: HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签
HTML5是超文本标记语言的第五次重大修改,2014年10月29日标准规范制定完成
- 新的解析规则增强了灵活性
- 新属性
- 淘汰过时的或冗余的属性
- 一个HTML5文档到另一个文档间的拖放功能
- 离线编辑
- 信息传递的增强
- 详细的解析规则
- 多用途互联网邮件扩展(MIME)和协议处理程序注册
- 在SQL数据库中存储数据的通用标准(Web SQL)
header nav footer article section aside dialog audio vedio
-
``
在页面中调用时必须添加在页面的head元素内,因为IE浏览器必须在元素解析前知道这个元素,所以这个js文件不能在页面底部调用.
-
可以以下面这种方式把代码直接添加到网页中。(推荐)
<!--[if lt IE 9]> <script> (function(){if(!/*@cc_on!@*/0)return;var e = “abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video”.split(’,'),i=e.length;while(i–){document.createElement(e[i])}})() </script> <![endif]-->
-
题目2: input 有哪些新增类型?
- email :类似使用正则,区分不是email的类型的字符串
- url :同上区分网址
- number :同上区分数字
- range :可以在部分浏览器显示类似音乐滚动条的type
- Date Picker :以下是类似日历组件的type
- Date
- month
- week
- time
- datatime
题目3: 浏览器本地存储中 cookie 和 localStorage 有什么区别? localStorage 如何存储删除数据。
cookie:
cookie 是服务器保存在浏览器的一小段文本信息
cookie的组成:
- cookie的名称
- cookie的值
- cookie的过期时间
- cookie所属的域名(默认为当前域名)
- cookie生效的路径(默认为当前网址)
cookie累计长度限制为4KB,超过的将被忽略IE7和之后的版本最后可以有50个cookieFirefox最多50个cookiechrome和Safari没有做硬性限制IE 和 Opera 会清理近期最少使用的 cookie , Firefox 会随机清理 cookie 。要实现读取写入移除检测等功能操作cookie,要自己实现。cookie只在当前会话有效,浏览器一关闭,会话结束,cookie就会被删除。每次你请求一个新的页面的时候 cookie 都会被发送过去,这样无形中浪费了带宽 。
同源策略:
cookie 还需要指定作用域,不可以跨域调用,只有域命相同和端口相同的网址才可共享cookie设置http-only可禁止javascript读取cookie,用来防止cookie被窃取
localStorage:
localStorage是Web Storage的一种,让网页在浏览器端保存数据,
存储容量比cookie更大localStorage长期保存数据,下一次访问该网站的时候,可以读取到之前保存的数据。不同浏览器对每个域名的存储上限不同,Chrome是2.5MB,Firefox和Opera是5MB,IE是10MB。其中,Firefox的存储空间由一级域名决定,而其他浏览器没有这个限制。也就是说,在Firefox中,a.example.com和b.example.com共享5MB的存储空间。
同源策略
只有同域的网页才能读取localStorage自带的API存入数据用setItemlocalStorage.setItem("key", "value")读取数据用getItemlocalStorage.getItem("key")清楚某个键名的数据用removeItemlocalStorage.removeItem("key")清楚所保存的数据用clearlocalStorage.clear()但是 cookie 也是不可以或缺的: cookie 的作用是与服务器进行交互,作为 HTTP 规范的一部分而存在 ,而 localStorage 仅仅是为了在本地“存储”数据而生
题目4: 写出如下 CSS3效果的简单事例
1. 圆角, 圆形
2. div 阴影
3. 2D 转换:放大、缩小、偏移、旋转
4. 3D 转换:移动、旋转
5. 背景色渐变
6. 过渡效果
7. 动画
题目5: 实现如下全屏图加过渡色的效果(具体效果随意)DEMO13