图文列表学习与实践
1.图片、列表、链接标签：
- html中图片标签：
其中src和alt被称为预制属性<img src="" alt=""/>
- html中链接标签：
a标签为双标签，href为其预制属性<a href=""></a>
- html中列表标签:
列表效果：<!-- 无序列表 --><ul><li>x</li><li>x</li><li>x</li><li>x</li><li>x</li></ul><!-- 有序列表 --><ol><li>y</li><li>y</li><li>y</li><li>y</li><li>y</li></ol><!-- 自定义列表 --><dl><dt>xy</dt><dd>xz</dd></dl>
2.图文序列实践:
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图文序列</title></head><body><ul class="nav" style="display: flex; list-style: none"><li><a href="http://www.baidu.com"><img src="/0317/static/images/bear.jpg" alt=""></a></li> <!-- 为空格，如果不用 ；浏览器会将输入的多空格默认认为只有一个空格 --><li><a href="http://www.baidu.com"><img src="/0317/static/images/dog.jpg" alt=""></a></li> <li><a href="http://www.baidu.com"><img src="/0317/static/images/duck.jpg" alt=""></a></li> <li><a href="http://www.baidu.com"><img src="/0317/static/images/bear.jpg" alt=""></a></li></ul></body></html>
代码实现：
3.表格标签的学习总结：
3.1 表格的标签：
定义表格：
<table></table>定义表格的标题：
<caption></caption>定义表格的表头：：
<th></th>定义表格单元：
<td></td>- 表格单中的属性：
<td colspan="x"></td>
colspan为跨列合并，x为合并列数<td rowspan="x"></td>
rowspan为跨行合并，x为合并行数
- 表格单中的属性：
定义表格页眉：
<thead></thsead>定义表格主体：
<tbody></tbody>定义表格的页脚：
<tfoot></tfoot
注意：表格的定义先行后列
3.2 课程表的实现：
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>课程表</title></head><body><table border="6" width="750px" align="center" frame="void" height="100px" cellspacing="0px" cellpadding="10px"><!-- 表格标题 --><caption font-size="280px">江苏大学电子信息工程19级课程表</caption><!-- 表头 --><thead><tr height="50px" align="center"><th colspan="2" width="110px">时间</th><!-- <th></th> --><th width="110px">星期一</th><th width="110px">星期二</th><th width="110px">星期三</th><th width="110px">星期四</th><th width="110px">星期五</th></tr></thead><!-- 表体 --><tbody><tr><td colspan="2">早晨</td><!-- <td></td> --><td></td><td></td><td></td><td></td><td></td></tr><tr><td rowspan="4">上午</td><td>第1节</td><td></td><td></td><td rowspan="2">DSP原理及应用</td><td rowspan="2">Windows应用程序设计</td><td rowspan="2">网络系统集成及应用</td></tr><tr><!-- <td>x</td> --><td>第2节</td><td></td><td></td><!-- <td>x</td> --><!-- <td>x</td> --><!-- <td></td> --></tr><tr><!-- <td>x</td> --><td>第3节</td><td></td><td rowspan="2">Windows应用程序设计</td><td></td><td></td><td rowspan="2">数字图像处理</td></tr><tr><!-- <td>x</td> --><td>第4节</td><td></td><!-- <td>x</td> --><td></td><td></td><!-- <td></td> --></tr><tr><td rowspan="4">下午</td><td>第5节</td><td rowspan="2">人工智能技术</td><td rowspan="2">计算机网络技术</td><td></td><td rowspan="2">计算机网络技术</td><td></td></tr><tr><!-- <td>x</td> --><td>第6节</td><!-- <td>x</td> --><!-- <td>x</td> --><td></td><!-- <td>x</td> --><td></td></tr><tr><!-- <td>x</td> --><td>第7节</td><td rowspan="2">物联网技术及应用</td><td></td><td></td><td rowspan="2">人工智能技术</td><td></td></tr><tr><!-- <td>x</td> --><td>第8节</td><!-- <td>x</td> --><td></td><td></td><!-- <td>x</td> --><td></td></tr><tr><td rowspan="3">晚上</td><td>第9节</td><td></td><td></td><td></td><td></td><td></td></tr><tr><!-- <td>x</td> --><td>第10节</td><td></td><td></td><td></td><td></td><td></td></tr><tr><!-- <td>x</td> --><td>第11节</td><td></td><td></td><td></td><td></td><td></td></tr><tr><td colspan="7" align="center">熄灯</td><!-- <td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td></td> --></tr><!-- <tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td></td></tr> --></tbody></table></body></html>
效果展示：
