H5

//-------------------------------------------------
 <style>
        .text{
            position: relative;
            display: inline-block;
            font-size: 80px;
            color: deepskyblue;
            overflow: hidden;
            white-space: pre;
        }
        .text:before{
            display: block;
            z-index: 1;
            position: absolute;
            top: 0;
            left: 0;
            width: 50%;
            /*对伪元素才能使用，attr方法实现读取数据*/
            content: attr(data-content);
            overflow: hidden;
            color: lightcoral;
        }
    </style>

//-----------------------------------------------
<span class="text" data-content="厚">厚</span>
<span class="text" data-content="德">德</span>
<span class="text" data-content="载">载</span>
<span class="text" data-content="物">物</span>

//------------------------------------------------------
eg:
<fieldset class="chengji">
    <legend class="title">学生档案</legend>
    <label>姓名:<input type="text" required/></label>
    <label>手机号码:<input type="tel" required/></label>
    <label>邮箱地址:<input type="email" required/></label>
    <label>所属学院:<input type="text" value="Android" list="school" /></label>
    <datalist id="school">
        <option value="java">java</option>
        <option value="web">web</option>
        <option value="UI">UI</option>
    </datalist>
    <label>入学成绩:<input type="text" list="chengji" /></label>
    <datalist id="chengji">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </datalist>
    <label>
        基础水平：<meter value="20" max="100" min="0"></meter>
    </label>
    <label>
        <!--date设置value时格式 XXXX-XX-XX-->
        入学时间：<input type="date" value="2016-01-01"/>
    </label>
    <label>
        <!--type=month不包括日，只有年月-->
        毕业时间：<input type="month" value="2016-05-01" />
    </label>
    <label>
        url:<input type="url" name="url" />
    </label>
    <label>
        课程精度<progress value="20" min="0" max="100"></progress>
    </label>
    <label>
        range:<input type="range" name="range" value="0" min="0" max="300" step="20" />
    </label>
    <label>
        color:<input type="color" name="color" />
    </label>
    <label><input type="submit" value="保存"/></label>
</fieldset>

表单事件
//-------------------------------------------------------
    <script type="text/javascript">
        var txt = document.getElementById('txt');
        var tt = document.getElementById("tt");
        var num = 0;
        txt.oninput=function(){/*value值发生改变触发的事件*/
            num++
            tt.value = num;
        }
        txt.oninvalid=function(){/*当input框验证失败执行的事件*/
            this.setCustomValidity('我是框框');/*验证格式出错时的提示框内容*/
        }
    </script>

表单属性
//--------------------------------------------
HTML5 新的表单属性
HTML5 的 <form> 和 <input>标签添加了几个新属性.
A)<form>新属性：

1.autocomplete
提示: autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。
注意: autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。
----------------------------------
eg:
<form action="demo-form.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>
----------------------------------
2.novalidate
eg:
novalidate 属性是一个 boolean(布尔) 属性.novalidate 属性规定在提交表单时不应该验证 form 或 input 域
eg:
<form action="demo-form.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

-------------------------------------------
B)<input>新属性：

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height 与 width
list
min 与 max
multiple
pattern (regexp)
placeholder
required
step

//---------------------------------------
eg:
<audio controls autoplay loop>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>


//----------------------------------------
eg:
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>