HTML5新增标签（二）

table新增

table新增如下标签

<table summary="财务表格" border="1"><!--summary让浏览器识别-->

    <caption>财务表格</caption>

    <colgroup>

        <col width="*"><!--*自动平均分配-->

        <col width="*">

        <col width="*">

        <col width="*">

    </colgroup>

    <tr>

        <th>1</th>

        <th>2</th>

        <th>3</th>

        <th>4</th>

    </tr>

    <tr>

        <td>01</td>

        <td>02</td>

        <td>03</td>

        <td>04</td>

    </tr>

</table>

表单新增

表单新增如下标签

姓名：<input autofocus pattern="[a-z]" id="userName" type="text" maxlength="6" placeholder="请输入姓名">

<!-- required必填项   disabled禁用项    pattern正则验证  maxlength最大长度 -->

年龄：<input type="number" max="18" min="12" step="2" >

阙值：<input type="range" id="range"  max="200" min="100" step="10" >

<!--max为最大年龄    min为最小年龄  step表示以step值进行递增-->

电话号码：<input type="tel" /> <!-- 在移动端会调用9宫格的数字键盘 -->

<!-- 只能输入数字类型 在移动端会调用9宫格的数字键盘 -->

网址：<input type="url"> <!-- 校验网址 -->

Email: <input type="email"><!-- 校验邮箱 -->

颜色：<input type="color" > <!-- 拾色器 -->    

日历1：<input type="date">    

月历1：<input type="month">    

周历1：<input type="week">    

小时历1：<input type="time">    

日历2：<input type="datetime-local"> <!-- UTC时间 -->    

<progress value="50" max="100"></progress>

<button type="submit"> 提交 </button>

 

带输入功能的下拉

<input type="text" list="name" /><!--list名须与 datalist id名一致-->

<datalist id="name">

    <option value="程序猿" />

    <option value="产品狗" />

</datalist>