HTML5、CSS3

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

  • HTML5是超文本标记语言的第五次重新修订,2014年10月29日标准规范制定完成。HTML5的设计目的是为了在移动设备上支持多媒体。

  • HTML5的新特性:

  • 用于绘画:canvas元素

  • 用于媒体回访:video和audio元素

  • 对本地离线存储的更好支持:localstorage

  • 新的语义化标签:article、footer、header、nav、section、figure

  • 新的表单控件:calendar、date、time、email、url、search

  • 低版本的 IE 支持 HTML5新标签

     //  第一种方法使用html5shiv库
     <!--[if IE]>
       <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
     <![endif]-->
     //  在页面中调用时必须添加在页面的head元素内,因为IE浏览器必须在元素解析前知道这个元素,所以这个js文件不能在页面底部调用.
    
     //  第二种方法通过js动态创建元素
      <!--[if IE]>
       <script>
         (function(){
           var a = ['section', 'article', 'nav', 'header', 'footer' /* 其他HTML5元素 */]
           for(var i = 0; i < a.length; i++){
             document.createElement(a[i]);
           }
         })()
       </script>
     <![endif]-->
    
     //  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 有什么区别? localStorage 如何存储删除数据。

  • cookie:

  • cookie 是服务器保存在浏览器的一小段文本信息

  • cookie的组成:

  • cookie的名称

  • cookie的值

  • cookie的过期时间

  • cookie所属的域名(默认为当前域名)

  • cookie生效的路径(默认为当前网址)

  • cookie累计长度限制为4KB,超过的将被忽略IE7和之后的版本最后可以有50个cookie,Firefox最多50个cookie,chrome和Safari没有做硬性限制,IE 和 Opera 会清理近期最少使用的 cookie , Firefox 会随机清理 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存入数据

  • 用localStorage.setItem("key", "value") 设置数据

  • 用localStorage.getItem("key") 获取某个键名的数据

  • 用localStorage.removeItem("key") 删除所保存的数据

  • 用localStorage.clear() 清空所有数据

  • 但是 cookie 也是不可以或缺的: cookie 的作用是与服务器进行交互,作为 HTTP 规范的一部分而存在 ,而 localStorage 仅仅是为了在本地“存储”数据而生
    详说 Cookie, LocalStorage 与 SessionStorage

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

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

演示

5.实现如下全屏图加过渡色的效果(具体效果随意)

演示

6.写出如下 loading 动画效果

演示一
演示二

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容

  • 题目1: HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签 HTML5...
    GaoYangTongXue丶阅读 689评论 0 0
  • 1. HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签 HTML5是超...
    _李祺阅读 424评论 0 0
  • HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签? HTML5是HTM...
    LeeoZz阅读 380评论 0 0
  • 题目1: HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签 HTML5...
    萧雪圣阅读 299评论 0 0
  • 170915 #梦想早读会第五天 今天是《付费》的最后一天,讲的内容比较少,所以采用文字的形式来分享。今天讨论的是...
    peejay阅读 205评论 0 0