H5新增标签和属性

Paste_Image.png

头部

<!--头-->
<header>
            <h1>
                <a href="index.html">logo</a>
            </h1>
            <nav>
                <ul>
                    <li><a href="">1</a></li>
                    <li><a href="">2</a></li>
                    <li><a href="">3</a></li>
                    <li><a href="">4</a></li>
                    <li><a href="">5</a></li>
                    <li><a href="">6</a></li>
                    <li><a href="">7</a></li>
                    <li><a href="">8</a></li>
                    <li><a href="">9</a></li>
                    <li><a href="">10</a></li>
                </ul>
            </nav>
            <input type="search" name="" id="" value="搜索热门内容" />
        </header>

主体

<!--章节(类似content)-->
        <section>
          <!--datalist 带输入功能的下拉菜单 搭配input使用-->
            <input type="text" list="name" />
            <datalist id="name">
                <option value="a" />
                <option value="b" />
                <option value="c" />
                <option value="d" />
                <option value="e" />
            </datalist>
            <!-- article : 文章 -->
            <article>
                <!-- 独立的媒体内容 播放器  装图片 -->
                <figure>
                    <figcaption>独立的媒体内容的标题 在figure 标签之内是唯一的</figcaption>
                    <summary>文章的摘要</summary>
                    <img src=""/>
                    <audio src="" controls autoplay loop></audio>
                    <video src="" controls autoplay loop></video>
                    <mark>pikapikaqiu</mark>
                    <time>2016-10-08</time>
                    <bdi>专门用来装名字</bdi>
                </figure>
                <!-- 画布 PS 帆布油画 -->
                <canvas></canvas>
            </article>
            <!-- aside 侧边栏 与主题内容没有关系的代码(例如三级菜单) -->
            <aside></aside>
        </section>

符合W3C标准的表格

        <table summary="财务表格" border="1px solid #000" width="500px">
            <caption>财务表格</caption>
            <colgroup>
                <!--*表示平分宽度-->
                <col width="*" />
                <col width="*" />
                <col width="*" />
                <col width="*" />
            </colgroup>
            <thead>
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
            </thead>
            <tbody>
                <tr>
                    <td>01</td>
                    <td>02</td>
                    <td>03</td>
                    <td>04</td>
                </tr>
            </tbody>
        </table>

表单

<form action="">
        <fieldset>
            <!-- 价格：<input type="text">
            数量：<input type="text">
            运费：<input type="number"> -->

            <!-- <output>  output 只能放在表单元素之内
                总价 ： 100
            </output> -->
            
            <p>姓名：<input autofocus pattern="[a-z]" id="userName" type="text" maxlength="2" placeholder="请输入姓名"> </p>
            <!-- required  必填项 disabled 禁用项 -->
            <p>年龄：<input type="number" max="8" min="2" step="2" > </p>
            <p>电话号码：<input type="tel" /> <!-- 在移动端会调用9宫格的数字键盘 --></p>
            <!-- 只能输入数字类型 在移动端会调用9宫格的数字键盘 -->
            <p>网址：<input type="url"> <!-- 校验网址 --></p>
            <p>Email: <input type="email"><!-- 校验邮箱 --></p>
            <p>
            阙值：<input type="range" id="range"  max="200" min="100" step="10" > <!-- dark ranger 黑暗游侠 -->
            </p>
            <p class="img_box">
                <img src="timg.jpg" id="img" alt="">
            </p>
            <p>
            颜色：<input type="color" > <!-- 拾色器 -->           
            </p>
            
            <p>
                日历1：
                <input type="date"> 
            </p>
            <p>
                月历1：
                <input type="month">    
            </p>
            <p>
                周历1：
                <input type="week"> 
            </p>
            <p>
                小时历1：
                <input type="time"> 
            </p>
            <p>
                日历2：
                <input type="datetime-local"> <!-- UTC时间 -->    
            </p>
            <progress value="50" max="100"></progress>
            <button type="submit"> 提交 </button>
        </fieldset>
    </form>

尾部

<!--尾-->
        <footer></footer>