HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签
- HTML5是超文本标记语言的第五次重大修改
-
新特性
- 语义特性
- 本地存储特性
- 设备兼容特性
- 连接特性
- 网页多媒体特性
- 性能与集成特性
- CSS3特性
新增标签:
section
,video
,progress
,nav
,meter
,time
,aside
,canvas
,command
,datalist
,details
,embed
,figcaption
,figure
,footer
,header
,hgroup
,keygen
,mark
,output
,rp
,rt
,ruby
,source
,summary
,wbr
HTML5标签兼容
使用HTML5 shiv
<head>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js">
</script>
<![endif]-->
</head>
input 有哪些新增类型?
- email类型:email类型的input元素是一种专门用于输入E-mail地址的文本输入框,在提交表单的时候,会自动验证email输入框的值
- url类型:url类型的input元素提供用于输入url地址这类特殊文本的文本框
- number类型:number类型的input元素提供用于输入数值的文本框
- range类型:range类型的input元素提供用于输入包含一定范围内数字值得文本框,在网页中显示为滚动条
- Date Picker类型:日期检出类型的应用
- search类型:search类型的input元素提供用于输入搜索关键词的文本框
- tel类型:tel类型的input元素提供专门用于输入电话号码的文本框
- color类型:color类型的input元素提供专门用于设置颜色的文本框
浏览器本地存储中 cookie 和 localStorage 有什么区别? localStorage 如何存储删除数据?
cookie
cookie的内容主要包括:名字,值,过期时间,路径和域。路径与域一起构成cookie的作用范围。若不设置过期时间,则表示这个cookie的生命期为浏览器会话期间,关闭浏览器窗口,cookie就消失。这种生命期为浏览器会话期的cookie被称为会话cookie。会话cookie一般不存储在硬盘上而是保存在内存里,当然这种行为并不是规范规定的。若设置了过期时间,浏览器就会把cookie保存到硬盘上,关闭后再次打开浏览器,这些cookie仍然有效直到超过设定的过期时间。存储在硬盘上的cookie可以在不同的浏览器进程间共享,比如两个IE窗口。而对于保存在内存里的cookie,不同的浏览器有不同的处理方式。-
cookie的特点:
- cookie的大小受限制,cookie大小被限制在4KB,不能接受像大文件或邮件那样的大数据。
- 只要有请求涉及cookie,cookie就要在服务器和浏览器之间来回传送(这解释为什么本地文件不能测试cookie)。而且cookie数据始终在同源的http请求中携带(即使不需要),这也是Cookie不能太大的重要原因。正统的cookie分发是通过扩展HTTP协议来实现的,服务器通过在HTTP的响应头中加上一行特殊的指示以提示浏览器按照指示生成相应的cookie。
用户每请求一次服务器数据,cookie则会随着这些请求发送到服务器,服务器脚本语言如PHP等能够处理cookie发送的数据,可以说是非常方便的。当然前端也是可以生成Cookie的,用js对cookie的操作相当的繁琐,浏览器只提供
document.cookie
这样一个对象,对cookie的赋值,获取都比较麻烦。而在PHP中,我们可以通过setcookie()
来设置cookie,通过$_COOKIE
这个超全局数组来获取cookie。localStorage
这是一种持久化的存储方式,也就是说如果不手动清除,数据就永远不会过期。
它也是采用Key - Value的方式存储数据,底层数据接口是sqlite,按域名将数据分别保存到对应数据库文件里。它能保存更大的数据(IE8上是10MB,Chrome是5MB),同时保存的数据不会再发送给服务器,避免带宽浪费。-
localStorage的缺点
- localStorage大小限制在500万字符左右,各个浏览器不一致
- localStorage在隐私模式下不可读取
- localStorage本质是在读写文件,数据多的话会比较卡
- localStorage不能被爬虫爬取,不要用它完全取代URL传参
- localStorage.removeItem(key):清除键值为key的数据
- localStorage.clear():清除所有数据
写出如下 CSS3效果的简单事例
- 圆角, 圆形
- div 阴影
- 2D 转换:放大、缩小、偏移、旋转
- 3D 转换:移动、旋转
- 背景色渐变
- 过渡效果
- 动画