
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>