常⽤的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>html ul标签
<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" 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="www.baidu" target="_blank">我是a标签，是⼀个链接标签。</a>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。