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>