html5的行標簽與列標簽


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>版權歸作者所有&copy</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>
 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM