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="搜索熱門內(nèi)容" />
        </header>

主體

<!--章節(jié)(類似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>
                <!-- 獨(dú)立的媒體內(nèi)容 播放器  裝圖片 -->
                <figure>
                    <figcaption>獨(dú)立的媒體內(nèi)容的標(biāo)題 在figure 標(biāo)簽之內(nèi)是唯一的</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 側(cè)邊欄 與主題內(nèi)容沒有關(guān)系的代碼(例如三級菜單) -->
            <aside></aside>
        </section>

符合W3C標(biāo)準(zhǔn)的表格

        <table summary="財務(wù)表格" border="1px solid #000" width="500px">
            <caption>財務(wù)表格</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">
            數(shù)量：<input type="text">
            運(yùn)費(fèi)：<input type="number"> -->

            <!-- <output>  output 只能放在表單元素之內(nèi)
                總價 ： 100
            </output> -->
            
            <p>姓名：<input autofocus pattern="[a-z]" id="userName" type="text" maxlength="2" placeholder="請輸入姓名"> </p>
            <!-- required  必填項(xiàng) disabled 禁用項(xiàng) -->
            <p>年齡：<input type="number" max="8" min="2" step="2" > </p>
            <p>電話號碼：<input type="tel" /> <!-- 在移動端會調(diào)用9宮格的數(shù)字鍵盤 --></p>
            <!-- 只能輸入數(shù)字類型 在移動端會調(diào)用9宮格的數(shù)字鍵盤 -->
            <p>網(wǎng)址：<input type="url"> <!-- 校驗(yàn)網(wǎng)址 --></p>
            <p>Email: <input type="email"><!-- 校驗(yàn)郵箱 --></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>