高级任务7(HTML5_CSS3)

2017-03-06 本文已影响28人饥人谷_小敏

题目1： HTML5是什么？有哪些新特性？有哪些新增标签？如何让低版本的 IE 支持 HTML5新标签

HTML5是超⽂本标记语⾔的第五次重⼤修改，2014年10⽉29⽇标准规范制定完成。HTML5的设计目的是为了在移动设备上支持多媒体。

HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持Localstorage
新的语义化特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

新增的结构元素：
article元素 : 代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容，与上下文不相关的独立内容
section元素 :表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分 - 不要为没有标题的内容区块使用section元素
nav元素 :表示页面中导航链接的部分，例如：传统导航条，侧边栏导航，页内导航，翻页等
aside元素 : 表示article元素的内容之外的、与article元素的内容相关的辅助信息，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分
header元素 :表示页面中一个内容区块或整个页面的标题
footer元素 : 表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期以及创作者联系信息
figure元素 :表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题，这个标签经常是在主文中引用图片，插图，表格，代码段等等

元素的调整：
具有boolean值的属性:

<!-- 只写属性不写属性值代表属性为true -->
<input type="checkbox" checked>
<!-- 不写属性代表属性为false -->
<input type="checkbox">
<!-- 属性值=属性名,代表属性为true -->
<input type="checkbox" checked="checked">
<!-- 属性值=空字符串，代表属性为true -->
<input type="checkbox" checked="">

低版本的IE支持HTML5：

第一种方式：引用google的html5.js文件。

<!--[if IE]><script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script> <![endif]-->

上面这段代码仅会在IE浏览器下运行，还有一点需要注意，在页面中调用html5.js文件必须添加在页面的head元素内，因为IE浏览器必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。

第二种方式：自己创建这些元素：

(function() { 
    // 页面头部 
    var a = ['section', 'article', 'nav', 'header', 'footer' /* 其他HTML5元素 */]; 
    for (var i = 0, j = a.length; i < j; i++) {
        document.createElement(a[i]); 
    }    
})();

css 添加属性：

section,article,nav,header,footer{display:block;}

题目2： input 有哪些新增类型？

email
url
number
range
color
Date Picker
Date
month
week
time
datatime

题目3：浏览器本地存储中 cookie 、 localStorage、sessionStorage 有什么区别？ localStorage 如何存储删除数据。

cookie：

Cook是小甜饼的意思。顾名思义，Cookie是存储在客户端的小型文本文件，可以包含若干键值对，每个键值对可以设置过期时间（默认过期时间为关闭浏览器时）。 Cookie会在每次发送HTTP请求时附加到Cookie头字段，服务器以此得知用户所处的状态。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在Cookie 中存入一段辨别用户身份的数据来实现的。

localStorage

localStorage是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代，就有一个叫userData的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。而如今，localStorage被大多数浏览器所支持，如果你的网站需要支持 IE6+，那以userData 作为你的 polyfill 的方案是种不错的选择

sessionStorage

sessionStorage与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同。做过后端开发的同学应该知道 Session这个词的意思，直译过来是“会话”。而 sessionStorage 是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。

三者异同：

使用场景：

因为考虑到每个 HTTP 请求都会带着Cookie的信息，所以Cookie 当然是能精简就精简啦，比较常用的一个应用场景就是判断用户是否登录。针对登录过的用户，服务器端会在他登录时往Cookie 中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录啦。曾经还使用 Cookie来保存用户在电商网站的购物车信息，如今有了localStorage，似乎在这个方面也可以给Cookie放个假了~

而另一方面localStorage接替了 Cookie管理购物车的工作，同时也能胜任其他一些工作。比如HTML5游戏通常会产生一些本地数据，localStorage也是非常适用的。如果遇到一些内容特别多的表单，为了优化用户体验，我们可能要把表单页面拆分成多个子页面，然后按步骤引导用户填写。这时候sessionStorage 的作用就发挥出来了。

Localstorage如何操作数据：

设置值：

localStorage.a=123;
localStorage["a"]=123;
localStorage.setItem("a",123)

获取值：

localStorage.a;
localStorage["a"];
localStorage.getItem("a")

删除值：

localStorage.removeItem("a")

参考：详说 Cookie, LocalStorage 与 SessionStorage
题目4：写出如下 CSS3效果的简单事例

1. 圆角， 圆形
2. div 阴影
3. 2D 转换：放大、缩小、偏移、旋转
4. 3D 转换：移动、旋转
5. 背景色渐变
6. 过渡效果
7. 动画

效果
 源码
题目5：实现如下全屏图加过渡色的效果（具体效果随意）
效果
 源码
题目6：写出如下 loading 动画效果
效果1
源码1
效果2
源码2

高级任务7(HTML5_CSS3)

题目1： HTML5是什么？有哪些新特性？有哪些新增标签？如何让低版本的 IE 支持 HTML5新标签

题目2： input 有哪些新增类型？

题目3：浏览器本地存储中 cookie 、 localStorage、sessionStorage 有什么区别？ localStorage 如何存储删除数据。

猜你喜欢

热点阅读

高级任务7(HTML5_CSS3)

题目1： HTML5是什么？有哪些新特性？有哪些新增标签？如何让低版本的 IE 支持 HTML5新标签

题目2： input 有哪些新增类型？

题目3： 浏览器本地存储中 cookie 、 localStorage、sessionStorage 有什么区别？ localStorage 如何存储删除数据。

猜你喜欢

热点阅读

题目3：浏览器本地存储中 cookie 、 localStorage、sessionStorage 有什么区别？ localStorage 如何存储删除数据。