html5 新特性

1、内容可编辑

<ul contenteditable="true">
    <li>悼念遇难香港同胞 </li>
    <li>深圳特区30周年</li>
    <li>伊春空难</li>
</ul>

2、email邮箱：
<form action="" method="get">
    <label for="email">邮箱:</label><input id="email" name="email" type="email" /> 
    <button type="submit">确定</button>
</form>
3、<label for="email">邮箱:</label> <input id="email" type="email" placeholder="please send up your email" size="26" />
4/

<form action="" method="get">
    <label for="name">姓名:</label>
    <input id="name" name="name" type="text" placeholder="zhangxinxu" required="required" /> 
    <button type="submit">提交</button>
</form>

　　

<form action="" method="get">
    <label for="username">姓名:</label>
    <input id="username" name="username" type="text" placeholder="4-10个英文字母" pattern="[A-Za-z]{4,10}"
 required="required" autofocus /> 
    <button type="submit">提交</button>
</form>

 

CSS代码：

.data_custom { display:inline-block; position: relative; }
.data_custom:hover { color: transparent; }
.data_custom:hover:after {
    content: attr(data-hover-response);
    color: black;
    position: absolute;
    left: 0;
}

HTML代码：

<a class="data_custom" data-hover-response="我说过不要碰我！" href="#">不要碰我，雅蠛蝶~~</a>

data属性(The Data Attribute)

我们现在可以很正式地让所有的HTML元素支持自定义属性。然而，以前，我们可能会这样：

<h1 id=someId customAttribute=value> 小样，胆儿挺肥的呢 </h1>

…校验器会小题大做！但是现在，只要我们以”data”为前缀定义我们的自定义属性，盗版属性立马变成正牌的了。如果你发现你曾经把一个重要的数据附加在诸如class的属性上，可能为了JavaScript之用，那么，本属性将大有帮助啊。

HTML片段

<div id="myDiv" data-custom-attr="My Value"> 巴拉巴拉，lady 嘎嘎 </div>

检索自定义属性的价值

var theDiv = document.getElementById('myDiv');
var attr = theDiv.getAttribute('data-custom-attr');
alert(attr); // My Value

此属性还可以用在CSS中，例如下面这个有些傻里傻气的CSS文字改变的例子：

CSS代码：
.data_custom { display:inline-block; position: relative; }
.data_custom:hover { color: transparent; }
.data_custom:hover:after {
    content: attr(data-hover-response);
    color: black;
    position: absolute;
    left: 0;
}

HTML代码：
<a class="data_custom" data-hover-response="我说过不要碰我！" href="#">不要碰我，雅蠛蝶~~</a>