题目1： HTML5是什么？有哪些新特性？有哪些新增标签？如何让低版本的 IE 支持 HTML5新标签
- HTML5 是对 HTML 标准的第五次修订，目前仍未完工。其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。HTML5 的语法是向后兼容的。
- 增加了语义化的标签、新的属性、支持视频音频的嵌入、全面支持CSS3、可以使用<canvas>来进行绘图等
- 新增标签
- 章节
<article>定义一个文章区域
<header>定义一个文档头部部分 - <footer>定义一个文档底部
- <section>定义了文档的某个区域
- <aside>定义其所处内容之外的内容。（侧边栏）
- <details>定义了用户可见的或者隐藏的需求的补充细节。
- <dialog>定义一个对话框或者窗口
- <summary>定义一个可见的标题。 当用户点击标题时会显示出详细信息。
多媒体 - <audio>定义音频内容
- <video>定义视频
- <source>定义多媒体资源<video> 和 <audio>
- <embed>定义嵌入的内容，比如插件
- <track>为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。（字母什么的）
- <datalist> 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
- <keygen> 规定用于表单的密钥对生成器字段。
- <output> 定义不同类型的输出，比如脚本的输出。
- <canvas>
标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API！ - 对于低版本的IE，加入
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
就可以支持HTML5的新标签。
题目2： input 有哪些新增类型？
-
<input type="color" name="favcolor">可以调出浏览器的调色板选择喜欢的颜色 -
<input type="date" name="bday">出现一个日期选择器选择一个日期 -
<input type="datetime" name="bdaytime">datetime 类型允许你选择一个日期（UTC 时间） -
<input type="datetime-local" name="bdaytime">datetime-local 类型允许你选择一个日期和时间 (无时区) -
<input type="email" name="email">提交的时候会自动验证email输入正不正确，相当于自动帮我们做了个正则 -
<input type="month" name="bdaymonth">month 类型允许你选择一个月份 -
<input type="number" name="quantity" min="1" max="5">提供一个列表选择数字，可以设定对所接受的数字的限定 -
<input type="range" name="points" min="1" max="10">range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。 -
<input type="search" name="googlesearch">search 类型用于搜索域，比如站点搜索或 Google 搜索 -
<input type="tel" name="usrtel">定义输入电话号码字段 -
<input type="time" name="usr_time">定义可输入时间控制器（无时区） -
<input type="url" name="homepage">url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。 -
<input type="week" name="week_year">week 类型允许你选择周和年。
题目3： 浏览器本地存储中 cookie 和 localStorage 有什么区别？ localStorage 如何存储删除数据。
- cookie
- 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效
- 存放数据大小只有4KB左右
- 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
- localStorage
- 除非自己手动清除，否则永久保存
- 存放数据大小5MB左右
- 数据仅在客户端（即浏览器）中保存，不参与和服务器的通信
localStorage.setItem('name', 'Tom');//存储一个叫name的键，值为Tom
localStorage.getItem("name"); //获取存储的数据
localStorage.removeItem("name");//删除存储的数据
网友评论