Skip to content

HTML5&&CSS3 #46

@Leon68

Description

@Leon68

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

######HTML5是什么?
HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。
HTML5的设计目的是为了在移动设备上支持多媒体。
######HTML5 中的一些有趣的新特性:

  • 用于绘画的 canvas 元素

  • 用于媒介回放的 video 和 audio 元素

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

  • 新的特殊内容元素,比如 article、footer、header、nav、section

  • 新的表单控件,比如 calendar、date、time、email、url、search
    ######新增标签

  • 标签定义一个独立完整的内容,比如一篇文章
  • 标签定义独立于主内容的区块,比如一个组件
  • 标签定义 section 或页面的尾部内容
  • 标签定义文档中的一个章节,比如产品介绍部分
  • 标签定义导航部分
  • 标签定义 section 或页面的头部
  • 标签一般包括一个H加一个P标签

  • 与一般包括一张img及图片介绍
  • 标签定义声音

  • 标签定义图形,可以绘制矢量图形

  • 标签定义命令按钮,比如单选按钮、复选框或按钮

  • 标签定义可选数据的列表。与 input 元素配合使用。但一般多使用ajax与后端交互实现

  • 标签定义嵌入的内容,比如插件

  • 标签主要用来在视觉上向用户呈现那些需要突出的文字,一般用于高亮显示结果

  • 标签为媒介元素(比如
  • 标签定义日期或时间,或者两者
    有实例的学习网站

######Internet Explorer 8 及更早 IE 版本的浏览器不支持HTML5。
我们可以使用 Sjoerd Visscher 创建的 "HTML5 Enabling JavaScript", " shiv" 来解决该问题:
将以下代码放在<head>

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

2: input 有哪些新增类型?

  • color:用于指定颜色的控件。
  • date:用于输入日期的控件(年,月,日,不包括时间)。
  • datetime:基于 UTC 时区的日期时间输入控件(时,分,秒及几分之一秒)。
  • datetime-local:用于输入日期时间控件,不包含时区。
  • email:用于编辑 e-mail 的字段。 合适的时候可以使用:valid和 :invalid CSS 伪类。
  • month:用于输入年月的控件,不带时区。
  • number: 用于输入浮点数的控件。
  • search:用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
    详细实例介绍

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

cookie 和 localStorage的存储目的不同。cookie主要是读取服务端,localStorage只能被浏览器这样的客户端读取。
两者在技术上的差异主要为:

cookie的每个cookie只有 4096 bytes ,而localStorage的每个域可以达到5MB
localStorage Storage接口的实现,它没有到期时间,可以通过JavaScript来清除,或者通过清除浏览器缓存(Browser Cache )/本地存储数据(Locally Stored Data)来清除。
localStorage.setItem()设置数据项
localStorage.getItem()获取数据项

localStorage.setItem('age', '99');//写入
localStorage.getItem('age');//读取

sessionStorage 、localStorage 和 cookie 之间的区别
共同点:都是保存在浏览器端,且同源的。
区别:cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递;cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。
而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。
参考文章
参考文章

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

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

代码

5: 实现如下全屏图加过渡色的效果

DEMO187
代码

6: 写出如下 loading 动画效果 

DEMO1196 
DEMO2182
代码

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions