Q1: HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签
HTML5是指2014年HTML 的第五次重大修改,设计目的是为了在移动设备上支持多媒体。HTML5不仅指最新版本的HTML,也泛指依赖现代浏览器支持HTML5、CSS3、ES5/ES6而制作出一些具有很多新特性网页的技术。
语义
更加丰富的标签赋予网页更好的意义和结构,如新增的
通信
HTML5拥有更有效的服务器推送技术,Server-Sent Event和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。
离线&存储
Indexed DB(html5本地存储最重要的技术之一)和离线资源规范
多媒体
图像&视觉
Canvas
WebGL
SVG矢量图
性能&集成
XMLHttpRequest Level2
全屏API
新增标签
标签 | 描述 |
---|---|
canvas | 用于图形的绘制,通过脚本 (通常是JavaScript)来完成 |
audio | 音频 |
video | 视频 |
source | 多媒体资源 |
embed | 嵌入的内容,比如插件 |
track | 为诸如 |
datalist | 选项列表,与 input 元素配合使用该元素,来定义 input 可能的值 |
keygen | 用于表单的密钥对生成器字段 |
output | 定义不同类型的输出,比如脚本的输出 |
article | 定义页面正文内容 |
aside | 定义页面内容之外的内容 |
bdi | 设置一段文本,使其脱离其父元素的文本方向设置 |
command | 定义命令按钮,比如单选按钮、复选框或按钮 |
details | 用于描述文档或文档某个部分的细节 |
dialog | 定义对话框,比如提示框 |
summary | 标签包含 details 元素的标题 |
figure | 规定独立的流内容(图像、图表、照片、代码等等) |
figcaption | 定义 |
footer | 定义 section 或 document 的页脚 |
header | 定义了文档的头部区域 |
mark | 定义带有记号的文本 |
meter | 定义度量衡。仅用于已知最大和最小值的度量 |
nav | 导航 |
progress | 定义任何类型的任务的进度 |
ruby | 定义 ruby 注释(中文注音或字符) |
rt | 定义字符(中文注音或字符)的解释或发音 |
rp | 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容 |
section | 定义文档中的节(section、区段) |
time | 定义日期或时间 |
wbr | 规定在文本中的何处适合添加换行符 |
如何让低版本的 IE 支持 HTML5新标签?
使用html5shiv.js。html头部引入它
再在css中设置下块状元素
/*html5*/article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
Q2: input 有哪些新增类型?
input 标签的新类型:
email: 输入的邮箱要满足邮箱地址的规范 @...
url: 输入的连接要满足连接的规范 http://...
number :入的是数字才有效,输入其他无效
range :变成一个百分比条
datepicker: 直接生成了一个日历
Q3: 浏览器本地存储中 cookie 和 localStorage 有什么区别? localStorage 如何存储删除数据。
答:localStorage带来的好处:
减少网络流量:一旦数据保存在本地后,就可以避免再向服务器请求数据,因此减少不必要的数据请求,减少数据在浏览器和服务器间不必要地来回传递。
快速显示数据:性能好,从本地读数据比通过网络从服务器获得数据快得多,本地数据可以即时获得。再加上网页本身也可以有缓存,因此整个页面和数据都在本地的话,可以立即显示。
临时存储:很多时候数据只需要在用户浏览一组页面期间使用,关闭窗口后数据就可以丢弃了,这种情况使用sessionStorage非常方便。
共同点:都是保存在浏览器端,且同源的。
区别:
cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。cookie也是在所有同源窗口中都是共享的。
而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。
localStorage.clear() 删除 localStorage 存储的数据localStorage.removeItem("a") 删除某个键值
Q4: 写出如下 CSS3效果的简单事例
1. 圆角, 圆形
2. div 阴影
3. 2D 转换:放大、缩小、偏移、旋转
4. 3D 转换:移动、旋转
5. 背景色渐变
6. 过渡效果
7. 动画
效果连接:http://js.jirengu.com/miwerevavu
Q5:实现如下全屏图加过渡色的效果(具体效果随意)DEMO
http://js.jirengu.com/negazuhido/1
Q6:写出如下 loading 动画效果 DEMO1215 DEMO2202
http://js.jirengu.com/hasefepoyu