HTML_列表、表格与媒体元素

一.列表
信息资源的一种展示形式

二.列表的分类
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.定义列表
<!--dh标签同样代表 列表项的开始类似于dt标签-->
<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>
<li>第四</li>
<li>第五</li>
<li>第六</li>
</ol>
<hr/>
<h2>定义列表</h2>
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
<dt>蔬菜</dt>
<dd>白菜</dd>
<dd>香菇</dd>
</dl>
</ul>
<h2>列表</h2>
<table border="2">
<tr>
<th colspan="2" >姓名</th>
<th rowspan="2">性别</th>
<th>年龄</th>
</tr>
<tr>
<td>熊大</td>
<td>雄性</td>
<td>5岁</td>
</tr>
<tr>
<td>熊二</td>
<td>雄性</td>
<td>4岁</td>
</tr>
<hr/>
<h2>视频video元素</h2>
<video controls="controls">
<source src="../素材/video.webm"/>
<source src="../素材/video.tmp"/>
</video>
<hr/>
<h2>音频audio元素</h2>
<audio controls autoplay>
<source src="../素材/music.mp3"/>
<source src="../素材/music.ogg"/>
</audio>
<h2>iframe内联框架</h2>
<iframe name="Chop02" src="Chop02.html"width="200px"height="200px">
<hr/>
<a href="Chop02.html"target="ifrmae">第一个页面</a>
<a href="Chop03.html"target="ifrmae">第二个页面</a>
<a href="Chop04.html"target="ifrmae">第三个页面</a>
<iframe name="ifrmae" width="200px"height="200px"></iframe>
</table>
</body>
</html>

原文地址:https://www.cnblogs.com/tinghao/p/9856780.html