一.列表
信息资源的一种展示形式
二.列表的分类
1.有序列表
<ol>
<li>列表项1</li>
<li>列表项2</li>
</ol>
特性:
1.有顺序,每一个li独占一行
2.默认每一个li前有顺序标识
2.无序列表
<ul>
<li>列表项1</li>
<li>列表项2</li>
<ul>
特性:
1.没有顺序,每一个li独占一行(块元素)
2.默认每一个li前有一个实心小圆点
3.定义列表
<dl>
<dt>列表项1</dt>
<dd>列表项1值1</dd>
<dd>列表项1值2</dd>
<dt>列表项2</dt>
<dd>列表项2值1</dd>
<dd>列表项2值2</dd>
</dl>
特性:
1.没有顺序,每一个dt和dd标签独占一行
2.默认没有标记
三.表格
<table>
<tr>
<th>第一行第一个单元格</th>
<th>第一行第二个单元格</th>
</tr>
<tr>
<td>第二行第一个单元格</td>
<td>第二行第二个单元格</td>
</tr>
</table>
跨行(rowspan)和跨列(colspan):横向跨列,纵向跨行
四.音频和视频元素
※使用时注意浏览器兼容问题
<video controls="controls">
<source src="../video/video.webm"/>
<source src="../video/video.mp4"/>
</video>
<audio controls autoplay>
<source src="../music/music.mp3"/>
<source src="../music/music.ogg"/>
</audio>
controls:播放插件 autoplay:自动播放
五.iframe内联框架
<iframe src="嵌套的页面地址" name="内联框架名称" width="200px" height="200px"></iframe>
点击链接跳转到指定地址:
<a href="fristHtml.html" target="ifrmae">内联框架第一个页面</a>
<a href="secondHtml.html" target="ifrmae">内联框架第二个页面</a>
<a href="thridHtml.html" target="ifrmae">内联框架第三个页面</a>
<iframe src="fristHtml.html" name="ifrmae" width="200px" height="200px"></iframe>
<!DOCTYPE html> <html> <head> <title>列表</title> </head> <body> <h2>无序列表</h2> <ul> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ul> <hr/> <h2>有序列表</h2> <ol> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ol> <hr/> <h2>定义列表</h2> <dl> <dt>水果</dt> <dd>苹果</dd> <dd>橘子</dd> <dt>蔬菜</dt> <dd>土豆</dd> <dd>西红柿</dd> </dl> <hr/> <h2>表格·</h2> <table border="5px"> <tr > <td rowspan="2">第一个单元格内容</td> <td colspan="2">第二个单元格内容</td> <td>第三个单元格内容</td> </tr> <tr> <td>第一个单元格内容</td> <td>第二个单元格内容</td> <td>第三个单元格内容</td> </tr> </table> <hr/> <h2>视频</h2> <video autoplay="" controls=""> <source src="video/video.webm"/> <source src="video/video.mp4"> </video> <hr/> <h2>音频</h2> <audio autoplay="" controls=""> <source src="audio/music.ogg"/> <source src="audio/music.mp3"/> </audio> <hr/> <h2>内联框架</h2> <a href="firsthtml.html" target="if">第一个页面</a> <a href="secondhtml.html" target="if">第二个页面</a> <a href="thirdhtml.html" target="if">第三个页面</a> <iframe name="if" width="200px" height="200px"></iframe> </body> </html>