开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第26天，点击查看活动详情
一、HTML5 的 input 增加哪些 type
在 HTML5 中，为 input 元素新增了以下 bai 一些 dutype 属性值，用来丰富文本框的类型。
color：用于指定颜色的控件 dao。
date：用于输入日期的控件（年，月，日，不包括时间）。
datetime：基于 UTC 时区的日期时间输入控件（时，分，秒及几分之一秒）。
datetime-local：用于输入日期时间控件，不包含时区。
email：用于编辑 e-mail 的字段。
month：用于输入年月的控件，不带时区。
number: 用于输入浮点数的控件。
range：用于输入不精确值控件。
search：用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
tel：用于输入电话号码的控件。
time：用于输入不含时区的时间控件。
url：用于编辑 URL 的字段。
week：用于输入一个由星期-年组成的日期，日期不包括时区。
二、雪碧图（精灵图）
是把网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的 HTTP 请求数量，该图片使用 css background 和 background-position 属性渲染，这也就意味着你的标签变得更复杂了，图片是在 css 中定义，并非在标签中
优点：
1.减少网页的 http 请求，从而加快了网页加载速度，提高用户体验。
2.减少图片的体积，因为每个图片都有一个头部信息，把多个图片放到一个图片里，就会共用同一个头信息，从而减少了字节数。
3.解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名。
4.更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。
缺点：
1.在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂。
2.CSS Sprites 在开发的时候，要通过 photoshop 或其他工具测量计算每一个背景单元的精确位置。
3.在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片。
4.精灵图不能随意改变大小和颜色。改变大小会失真模糊，降低用户体验，Css3 新属性可以改变精灵图颜色，但是比较麻烦，并且新属性有兼容问题，现在一般用字体图标代替精灵图。
