WEB学习笔记11.30 – 列表及表格运用

今天学的有几个列表，表格及表格合并，插入视频等。

无序列表：

有序列表：

定义列表：

插入视频：
表格：

表头：

头部标题

表格边框：

单元格(行)：
单元格(列)：

单元格(列)：

合并单元格(行)：colspan
合并单元格(列)：rowspan上午：<h1>无序列表展示 常玩英雄</h1>
<ul>
<li>鲁班</li>
<li>李白</li>
<li>后羿</li>
<li>瑶</li>
</ul>

<h1>有序列表展示 英雄胜率</h1>
<ol>
<li>孙悟空</li>
<li>亚瑟</li>
<li>庄周</li>
<li>安琪拉</li>
</ol>

<h1>定义列表展示 诗词</h1>
<dl>
<dt>春晓</dt>
<dd>春眠不觉晓，处处闻啼鸟</dd>
<dt>赠汪伦</dt>
<dd>李白乘舟将欲行，忽闻岸上踏歌声</dd>
</dl>

<h1>有序英雄图片展示</h1>
<ol>
<li><img src="img/a.jpg"width="80"height="80"></li>
<li><img src="img/b.jpg"width="80"height="80"></li>
<li><img src="img/c.jpg"width="80"height="80"></li>
<li><img src="img/d.jpg"width="80"height="80"></li>
</ol>

<h1>无序英雄图片展示</h1>
<ul>
<li><img src="img/a.jpg"width="80"height="80"></li>
<li><img src="img/b.jpg"width="80"height="80"></li>
<li><img src="img/c.jpg"width="80"height="80"></li>
<li><img src="img/d.jpg"width="80"height="80"></li>
</ul>

<h1>定义列表展示 英雄图片</h1>
<dl>
<dt>李白</dt>
<dd><img src="img/a.jpg"width="80"height="80"></dd>
<dt>司马懿</dt>
<dd><img src="img/b.jpg"width="80"height="80"></dd>
<dt>诸葛亮</dt>
<dd><img src="img/c.jpg"width="80"height="80"></dd>
<dt>妲己</dt>
<dd><img src="img/d.jpg"width="80"height="80"></dd>
</dl>

<h1>插入视频</h1>
<video controls>
<source src="img/mov_bbb.mp4"width="100"height="80">
</video>
下午：<h1>表格</h1>
<table border="1">
<caption>学生信息表</caption>
<tr>
<td>学生姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>女</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>19</td>
</tr>
</table>

<h1>表格中插入图片</h1>
<table border="1">

<caption>小说排行榜</caption>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>相关链接</th>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="img/xs.jpg" width="20" height="20"/></td>
<td>663</td>
<td><a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin">相关链接</a></td>
</tr>
<tr>
<td>2</td>
<td>盗墓笔记</td>
<td><img src="img/xs.webp" width="20" height="20"/></td>
<td>570</td>
<td><a href="https://baike.baidu.com/item/%E7%9B%97%E5%A2%93%E7%AC%94%E8%AE%B0/21859">相关链接</a></td>
</tr>
<tr>
<td>3</td>
<td>凡人修仙传</td>
<td><img src="img/xs.jpg" width="20" height="20"/></td>
<td>298</td>
<td><a href="https://baike.baidu.com/item/%E5%87%A1%E4%BA%BA%E4%BF%AE%E4%BB%99%E4%BC%A0/54139">相关链接</a></td>
</tr>
</table>

<h1>表格合并</h1>
<table border="1">
<caption>个人简历</caption>
<tr>
<td>刘德华</td>
<td>男</td>
<td>18</td>
<td rowspan="2"><img src="img/ldh.jpg" width="70" height="92"/></td>
</tr>
<tr>
<td>身高 180</td>
<td>汉族</td>
<td>已婚</td>
</tr>
<tr>
<td>个人作品</td>
<td colspan="3">无间道</td>
</tr>
<tr>
<td>个人简历</td>
<td colspan="9">四大天王</td>
</tr>
</table>