html中的列表
html中的图片属性
<img src="" alt=""/>html中的链接属性
<a src="">链接内容</a>html中的列表属性
代码：<!-- 无序列表 --><ul><li>a</li><li>b</li><li>c</li></ul><!-- 有序列表 --><ol><li>a</li><li>b</li><li>c</li></ol><!-- 解释说明列表 --><dl><dt>西红柿</dt><dd>一种可以吃的蔬菜</dd></dl>
效果：
图片、链接、列表制作图文列表
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width, initial-scale=1.0"><title>Document</title></head><body><ul class="nav" style="display: flex;list-style:none;"><li><a href="https://www.baidu.com"><img src="static/images/bear.jpg" alt="小熊" width="200" height="100"></a><a href="">小熊</a></li> <li><a href="https://www.php.cn"><img src="static/images/dog.jpg" alt="小狗" width="200" height="100"></a><a href="">小狗</a></li> <li><a href="https://www.php.net"><img src="static/images/duck.jpg" alt="小鸭" width="200" height="100"></a><a href="">小鸭</a></li> </ul></body></html>
效果：
使用表格写一个课程表
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width, initial-scale=1.0"><title>Document</title></head><body><table border="1" cellspacing="0" align="center" width="300" bgcolor="underint"><caption>学生课程休息表</caption><thead><tr><th>时间</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th></tr></thead><tbody><tr><td rowspan="2">上午</td><td>语文</td><td>体育</td><td>英语</td><td>数学</td><td>体育</td></tr><tr><td>英语</td><td>政治</td><td>生物</td><td>自然</td><td>语文</td></tr><tr><td align="center" colspan="6">中午吃饭</td></tr><tr><td rowspan="2">体育</td><td>数学</td><td>英语</td><td>化学</td><td>物理</td><td>化学</td></tr><tr><td>物理</td><td>体育</td><td>数学</td><td>化学</td><td>英语</td></tr></tbody><tfoot><td>注意</td><td colspan="5" align="center">晚上写作业</td></tfoot></table></body></html>
效果：