高级任务7 HTML 5 CSS3

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

HTML5是超文本标记语言的第五次重大修改,2014年10月29日标准规范制定完成

新增标签

元素 描述
canvas 标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API
audio 定义音频内容
video 定义视频(video 或者 movie)
source 定义多媒体资源 <video> 和<audio>
embed 定义嵌入的内容,比如插件
track 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道
datalist 定义选项列表。与 input 元素配合使用该元素,来定义 input 可能的值
keygen 规定用于表单的密钥对生成器字段
output 定义不同类型的输出,比如脚本的输出
article 定义页面正文内容
aside 定义页面内容之外的内容
bdi 设置一段文本,使其脱离其父元素的文本方向设置
command 定义命令按钮,比如单选按钮、复选框或按钮
details 用于描述文档或文档某个部分的细节
dialog 定义对话框,比如提示框
summary 标签包含 details 元素的标题
figure 规定独立的流内容(图像、图表、照片、代码等等)
figcaption 定义 <figure> 元素的标题
footer 定义 section 或 document 的页脚
header 定义了文档的头部区域
mark 定义带有记号的文本
meter 定义度量衡。仅用于已知最大和最小值的度量
nav 导航
progress 定义任何类型的任务的进度
ruby 定义 ruby 注释(中文注音或字符)
rt 定义字符(中文注音或字符)的解释或发音
rp 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容
section 定义文档中的节(section、区段)
time 定义日期或时间
wbr 规定在文本中的何处适合添加换行符

HTML5提供了很多新的标签,但是在低版本的IE是不生效的, 为了使其生效,最简单的方法就是创建元素,添加CSS属性:

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

新标签有了,不过这样添加之后标签默认是内联元素,对这些元素进行布局我们需要利用CSS把它们转为块状元素方便布局。
所以还需要将样式定义为display:block;
还有一种就是使用html5shiv

<!--[if lt IE 9]> 
    <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

题目2: input 有哪些新增类型?

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

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

cookie:
数据的生命期:一般由服务器生成,可设置失效时间。如果在浏览器端生成Cookie,默认是关闭浏览器后失效
存放数据大小:4K左右
与服务器端通信:每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题
易用性: 需要程序员自己封装,源生的Cookie接口不友好

localStorage:
数据的生命期:除非被清除,否则永久保存
存放数据大小:一般为5MB
与服务器端通信:仅在客户端(即浏览器)中保存,不参与和服务器的通信
易用性: 源生接口可以接受,亦可再次封装来对Object和Array有更好的支持

localStorage.setItem(item,value);
localStorage.xx=1;//直接赋值也可以
localStorage.getItem(xxx);//得到数据
localStorage.removeItem(xxx);//删除数据
localStorage.clear();//清空所有数据

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

demo

题目5demo
题目6demo

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容