1. HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签
-
HTML5
是超⽂本标记语⾔的第五次重⼤修改,2014年10⽉29⽇标准规范制定完成。HTML5的设计目的是为了在移动设备上支持多媒体。 -
新特征
① 语义特性
HTML5赋予网页更好的意义和结构。比如HTML5增加了新的内容标签,这些标签带有一定的语义,使搜索引擎爬取你的网站信息更高效。比如:article、footer、header、nav、section。
②网页多媒体特性
支持网页端的Audio、Video等多媒体功能, 与网站自带的APPS,摄像头,影音功能相得益彰。
三维、图形及特效特性。
比如:新增 video、audio、Canvas 、SVG。
③离线 & 存储特性
能够让网页在客户端本地存储数据以及更高效地离线运行(localStorage Indexed DB)
④连接特性
更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。
比如:HTML5拥有更有效的服务器推送技术,Server-Sent Event和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。
⑤设备兼容特性
HTML5提供了更多的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连,例如视频影音可直接与microphones及摄像头相联。
⑥性能与集成特性
HTML5会通过XMLHttpRequest2等技术,解决以前的跨域等问题,帮助Web应用和网站在多样化的环境中更快速的工作。
⑦CSS3特性
在不牺牲性能和语义结构的前提下,CSS3中提供了更多的风格和更强的效果。 -
新增标签
页面结构标签
<article>定义页面正文内容
<header>定义了文档的头部区域
<footer>定义一个文档底部
<section>定义了文档的某个区域
<aside>定义页面内容之外的内容,比如:侧边栏
<nav>导航
<details>用于描述文档或文档某个部分的细节
<dialog>定义对话框,比如提示框
<summary>定义一个可见的标题。 当用户点击标题时会显示出详细信息,包含 details 元素的标题
多媒体
<canvas>定义图形标签,比如图表和其他图像。该标签基于JavaScript的绘图API
<audio>定义音频
<video>定义视频
<source>定义多媒体资源<video> 和 <audio>
<embed>定义嵌入的内容,比如插件
<track>为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。
表单控件标签
<calendar>、<date>、<time>、<email>、<url>、<search>,<range>,<DatePickers>
新增的其它标签
<mark>,<progress>,<datalist>,<keygen>,<output>,<wbr>,<menu>等
如何让低版本的 IE 支持 HTML5新标签
<head>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
</head>
这样就可以支持HTML5的新标签
2.input 有哪些新增类型?
input 新增type主要有:
email 类型用于应该包含 e-mail 地址的输入域。
url 类型用于应该包含 URL 地址的输入域。
number 类型用于应该包含数值的输入域。
range 类型显示为滑动条。
Date Pickers日期选择器
3.浏览器本地存储中 cookie 和 localStorage 有什么区别? localStorage 如何存储删除数据。
①储存方式不同:loaclStorage不会自动把数据发送给服务器,数据仅在客户端(即浏览器)中保存;cookie数据始终在同源的http请求中携带,即cookie在浏览器和服务器间来回传递,但如果使用cookie保存过多数据会带来性能问题。
②数据大小限制不同:存储大小限制也不同,cookie数据不能超过4k,localStorage 虽然也有存储大小的限制;但比cookie大得多,可以达到5M或更大
③数据有效期不同:一般由服务器生成,可设置失效时间。如果在浏览器端生成Cookie,默认是关闭浏览器后失效。cookie只在设置的cookie过期时间之前一直有效;而loaclStorage则是始终生效,除非清除缓存。
Localstorage如何操作数据:
- 设置值:
localStorage.a=123;
localStorage["a"]=123;
localStorage.setItem("a",123)
- 获取值
localStorage.a;
localStorage["a"];
localStorage.getItem("a")
- 删除值
清空全部数据:localStorage.clear()
删除数据:localStorage.removeItem('a')
4.写出如下 CSS3效果的简单事例
1. 圆角, 圆形
2. div 阴影
3. 2D 转换:放大、缩小、偏移、旋转
4. 3D 转换:移动、旋转
5. 背景色渐变
6. 过渡效果
7. 动画