html5中a在指定div显示_HTML5里常用且好用的新特性 - 毛哥

以下介绍我开发过程中，发现的一些常用且好用的HTML5新特性，能给开发带来更多便利。

---

1. 新的 Input 类型

input标签type属性迎来了新的成员：color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week。

注意：并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。

不多赘述，代码放上，大家看着比较就了解了。

颜色：<input type="color"> <br>
日期：<input type="date"> <br>
日期和时间：<input type="datetime"> <br>
日期和时间（无时区）：<input type="datetime-local"> <br>
E-mail：<input type="email"> <br>
年份和月份：<input type="month"> <br>
数字：<input type="number"> <br>
滑块：<input type="range"> <br>
搜索域：<input type="search"> <br>
电话号码：<input type="tel"> <br>
时间：<input type="time"> <br>
网址：<input type="url"> <br>
周：<input type="week"> <br>

---

2. Web 存储

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

// 写入localStorage
window.localStorage.setItem("a", 1);

// 读取localStorage
window.localStorage.getItem("a"); // 1

// 删除localStorage
window.localStorage.removeItem("a");

// 清空localStorage
window.localStorage.clear();

---

3. contenteditable属性

contenteditable属性可以把一个div变成可输入状态。有什么用呢？

曾经我就一直在想，怎样才能实现竖向的输入框，用input，然后再加旋转90效果？感觉一般般，而且元素位置会错位。

直到后来，发现原来可以这么做：

<style>
	div {
		width: 40px;
		height: 100px;
		border: 1px solid black;
		-webkit-writing-mode: vertical-lr;
	}
</style>
<div contenteditable="true">123456</div>

效果图：

---

4. 地理定位

请参见W3C教程：

HTML5 地理定位​www.w3school.com.cn

---