html5的標簽很多,這里不一一列舉。下面只將常用的一些html5的行標簽和列標簽進行了分類總結,方便大家學習借鑒。注意:一些標簽可在css樣式中進行行標簽與列標簽的互相轉換,這里所列舉的標簽沒有進行任何樣式的設置,所有列標簽和行標簽經本人親測有效。
塊標簽:
<h1>一級標題
<h2>二級標題
<h3>三級標題
<h4>四級標題
<h5>五級標題
<h6>六級標題
<ul>無序列表
<ol>有序列表
<dl> 自定義列表
<dt>
<dd>
<p>段落
<pre>格式化文本
<blockquote>塊引用
<div>常用塊
<figure>
<figcaption>
<video>視頻
<nav>
<address>地址
<option>選擇
<fieldset>自定義字段
<legend>說明
<form>表單
<table>表格
行標簽:
<strong>加粗
<em>傾斜
<i>傾斜
<b>加粗
<a>超鏈接
<small>小字體文本
<sub>下標
<sup>上標
<iframe>內聯框架
<img>圖片
<abbr>縮寫
<bdo>文字順序
<time>時間
<tr>
<td>
<th>
<caption>標題
<colgroup>表格列合集
<button>按鈕
<input>輸入框
<select>選擇框
<textarea>文本內容
<mark>標記
<audio>音頻
<u>下划線
<label>表格標簽
<span>定義文本內區塊
<var>定義變量
塊標簽
H標簽
<h1>我是字體最大的標簽</h1>
<h2>我是字體第二大的標簽</h2>
無序列表
<ul>
<li>無序列表第一段</li>
<li>無序列表第二段</li>
<li>無序列表第三段</li>
</ul>
有序列表
<ol>
<li>我是有序列表</li>
<li>有序列表第二段</li>
<li>有序列表第三段</li>
</ol>
自定義列表
<dl>
<dt>我是自定義列表類似於段落</dt>
<dd>自定義列表</dd>
</dl>
P標簽
<p>段落標簽我是一個段落標簽 <span class="color:red">a</span></p>
Pre標簽
<pre>定義編排文本 保留文件原有格式例如 空格和列標簽</pre>
Blockquote標簽
<blockquote>定義引用文本,首行會空兩格</blockquote>
Div標簽
<div>
<a href="">asdf </a>
</div>
Figure標簽
<figure>
<figcaption>這是一個logo</figcaption>
<img src="QQ截圖20160405205734.png" width="200" height="100"/>
</figure>
Video標簽 視頻
<video width="200" height="100" controls autoplay loop muted>
<source src="視頻.MP4" type="video/MP4" >
</video>
Nav標簽 一般是頁碼
<nav>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</nav>
Address標簽
<address>這是一個地址標簽,傾斜顯示</address>
Datalist標簽與optioon標簽 放在表單內
<input type="text" list="ilist">
<datalist id="ilist">
<option value="男裝" label="男裝" >男裝</option>
<option value="男褲" label="男褲">男褲</option>
<option value="女裝" label="女裝">女裝</option>
<option value="女鞋" label="女鞋">女鞋</option>
</datalist>
Fieldset標簽 放在表單內
<fieldset>
<legend>F26名單</legend>
班長:<input type="checkbox"/>
學委:<input type="checkbox"/>
</fieldset>
Form表單
<form action="外部鏈接路徑" method="get" name="myForm">
<input type="text" value="username"/>
請輸入您的用戶名稱: <input type="text" placeholder="username" maxlength="10"/>
請輸入您的密碼:<input type="password" /><br/>
<input type="button" value="按鈕" /><br/>
<input type="submit" value="提交"/><br/>
<input type="reset" value="重置"/><br/>
<input type="file" value="請選擇你的文件"/><br/>
<p>請選擇你想要的水果</p> //復選框
蘋果 <input type="checkbox"/>
香蕉<input type="checkbox"/>
梨子 <input type="checkbox"/>
<p>請選擇你的性別</p> //單選框
男 <input type="radio" name="sex"/>
女 <input type="radio" name="sex"/>
<br/>
</form>
Table標簽
<table border="1" style="border-collapse: collapse" cellpadding="5">
<caption>這是一個表格</caption>
<tr>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
<th>第四列</th>
</tr>
<tr>
<td colspan="2">1-1</td>//橫向合並單元格
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<td rowspan="2">2-1</td>//縱向合並單元格
<td>2-2</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
行標簽
Strong標簽
<strong>我是strong標簽,起強調作用。顯示加粗效果。</strong>
Em標簽
<em>我是em標簽,起強調作用。顯示傾斜效果</em>
I標簽
<i>我是i標簽,起強調作用,顯示傾斜效果。</i>
B標簽
<b>我是b標簽,顯示加粗效果</b>
A標簽
<a href="http://www.baidu.com" target="_blank">我是a標簽,是一個鏈接標簽。</a>
Small標簽
<small>版權歸作者所有©</small>
Sub下標和上標標 sup
我是<sup>上標</sup>
我是<sub>下標</sub>
Iframe標簽
<iframe scrolling="auto" src="http://www.baidu.com" frameborder="0" name="iframe"></iframe>
Img標簽
<img src="QQ截圖20160405205734.png" alt="這是一個圖片"/>
Abbr標簽
The <abbr title="People`s Republic of China" >PRC</abbr> was founded in 1949.
Bdo標簽
<bdo dir="rtl">123456789</bdo>
Time標簽
<time>11:37</time>
Caption標簽 一般用作表格標頭
<caption>這是一個標題</caption>
Colgroup標簽
<table border="1" style="border-collapse:collapse" >
<colgroup>
<col style="background: red">//縱向設置單元格顏色
<col style="background: blue">
<col style="background: yellow">
<col style="background: red">
<col style="background: red">
</colgroup>
<tr>
<th>1-1</th>
<th>1-1</th>
<th>1-1</th>
<th>1-1</th>
<th>1-1</th>
</tr>
</table>
Button標簽
<button>按鈕</button>
Input標簽
<input type="text" value=""/>
Select標簽 放在表單內
<input type="range" min=0 max=100 step=10 />
<select name="option" id="chance">
<option value="蘋果">蘋果</option>
<option value="梨子">梨子</option>
<option value="香蕉">香蕉</option>
</select>
Textarea標簽 放在表單之外
<textarea name="mingzi" id="text" cols="30" rows="10">多行文本</textarea>
Mark標簽
早上記得<mark>吃早餐</mark>
Audio標簽 音頻
<audio controls autoplay>
<source src="181漂亮男孩 m2m.wmv" type="audio/wmv"/>
</audio
Label標簽
<label for="nan">男</label>
<input type="checkbox" id="nan"/>
<label for="nv">女</label>
<input type="checkbox" id="nv"/>
Span標簽
<b>我是一個 <span style="color:red">span</span> 標簽</b>
