HTML5新增标签

html5相对以前的基础上增加了许多标签

Paste_Image.png

头尾部新增

头部新增header 、 nav 、input[ type=search ]等；
尾部新增footer 等

<header>
    <h1>logo</h1>
    <nav>
        <a href="">导航1</a>
        <a href="">导航2</a>
        <a href="">导航3</a>
        <a href="">导航4</a>
        <a href="">导航5</a>
        <a href="">导航6</a>
    </nav>
    <input type="search" name="search" id="search" placeholder="请输入搜索内容" />
</header>

主体部分新增

主体部分新增以下标签

<section><!--片段 -->
    <figure> <!--这是一个独立的媒体内容 播放器  装图片-->
        <figcaption>figure唯一标题</figcaption>
        <mark>高亮显示</mark>
    </figure>
    
    <article><!--这是文章标签-->
        <summary>文章摘要</summary>
    </article>
                
    <!--controls : 控制条  ; autoplay : 自动播放 ; loop : 循环播放 ;-->
    <audio controls="controls" autoplay="autoplay" loop="loop" src=""></audio>
    <video controls="controls" autoplay="autoplay" loop="loop"  src=""></video>
            
    <aside>aside 侧边栏 与主题内容没有关系的代码</aside>
    <bdi>专门用来装人名</bdi>
    <canvas id="" width="" height="">画布</canvas>
    <time>2016-10-08</time>
</section>

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>