HTML5、CSS3

2017-04-07  本文已影响0人  clark124

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

HTML5:
是对 HTML 标准的第五次修订,目前仍未完工。其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入。HTML5 的语法是向后兼容的。

新特性:

新增标签:
<header>、<main>,<footer>,<figure>,<nav>,<aside>,<svg>,<section>,<article>,<canvas>。都是块级元素,主要体现了标签的语义化。

让低版本的 IE 支持
方法一:
引入html5.js

<!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
<![endif]-->

方法二:
自己添加一段js代码
缺点:部分css无效

1. 
<!--[if lt IE 9]>
        <script>
            (function(){
                var html5 = ["header", "footer", "nav", "section", "article", "aside", "canvas", "audio", "video", "source", "embed", "track", "datalist", "keygen", "output", "bdi", "command", "details", "dialog", "summary", "figure", "figcaption", "mark", "meter", "progress", "ruby", "rt", "rp", "time", "wbr"];
                for(var i = 0; i < html5.length; i++){
                    document.createElement(html5[i]);
                }
            })()
        </script>
<![endif]-->
2. 
<!--[if lt IE 9]>
        <script>
            createHtml5("header", "footer", "nav", "section", "article", "aside", "canvas", "audio", "video", "source", "embed", "track", "datalist", "keygen", "output", "bdi", "command", "details", "dialog", "summary", "figure", "figcaption", "mark", "meter", "progress", "ruby", "rt", "rp", "time", "wbr");
            function createHtml5(){
                var args = Array.prototype.slice.call(arguments, 0);
                for(var i = 0; i < args.length; i++){
                    document.createElement(args[i]);   
                }
            };
        </script>
<![endif]-->

2.input 有哪些新增类型?

1.email
2.url
3.number
4.range
5.Date Picker

3.浏览器本地存储中 cookie 和 localStorage 有什么区别? localStorage 如何存储删除数据。

cookie是网站为了表示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。cookie数据始终在同源的http请求中携带(即使不需要),即会在浏览器和服务器间来回传递。localStorage不会自动把数据发给服务器,仅在本地保存。

存储大小:
cookie数据大小不能超过4k。
localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大(跟浏览器相关)。

有效时间:
cookie 设置的cookie在过期时间之前一直有效,即使窗口或浏览器关闭。
localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据。

浏览器支持:
浏览器都支持cookie
IE9以上才支持localStorage

localStorage 如何存储删除数据:
存储:localStorage.setItem("key", "value")
删除:localStorage.removeItem("key")
读取:localStorage.getItem("key")
清除:localStorage.clear()

4.写出如下 CSS3效果的简单事例

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

代码链接1

代码链接2

代码链接3

上一篇下一篇

猜你喜欢

热点阅读