文章目录
（一）🍁HTML图像
🔥1.图像标签img和源属性src
🔥2.替换文本属性（alt）
🔥3.在HTML页面中添加背景图
🔥4.排列图片
🔥5.设置图片链接
（二）🍁HTML表格
🔥1.带边框表格的创建
🔥2.设置单元格边距和间距
1. 设置单元格内边距-cellpadding
2. 修改单元格间距-cellspacing
🔥3.设置表格背景，以及单元格背景
🔥4.设置表头
🔥5.跨行或者跨列
（三）🍁HTML列表
🔥1.有序列表
🔥2.无序列表
🔥3.嵌套列表
🔥4.自定义列表
小结
（一）🍁HTML图像
通过使用html，可以在文档中显示图像。
🔥1.图像标签img和源属性src
在 HTML 中，图像由 < img >标签定义。src属性填图片的url地址或者本地路径。
插入图像：
<img src="D:\桌面\图片111\皮卡丘.gif" alt="皮卡丘" width="150px" height="150px">
🔥2.替换文本属性（alt）
当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。
🔥3.在HTML页面中添加背景图
<body background="D:\桌面\图片111\背景图.jpg"> <img src="D:\桌面\图片111\皮卡丘.gif" alt="皮卡丘" width="150px" height="150px"> <br/> <p></p> </body>
🔥4.排列图片
<body> <p>图片底部与文字对齐<img src="D:\桌面\图片111\皮卡丘.gif" alt="皮卡丘" width="150px" height="150px" align = bottom>(默认)</p> <p>图片中部与文字对齐<img src="D:\桌面\图片111\皮卡丘.gif" alt="皮卡丘" width="150px" height="150px" align = middle></p> <p>图片顶部与文字对齐<img src="D:\桌面\图片111\皮卡丘.gif" alt="皮卡丘" width="150px" height="150px" align = top></p> </body>
🔥5.设置图片链接
<body> <a href="https://www.baidu.com"><img src="D:\桌面\图片111\皮卡丘.gif" alt="皮卡丘" width="150px" height="150px" title="点击进入百度" align = middle>百度一下</a> </body>
（二）🍁HTML表格
使用html可以创建一个n行m列的表格。
表格由 < table > 标签来定义。每个表格均有若干行（由 < tr > 标签定义），每行被分割为若干单元格（由 < td > 标签定义）。
🔥1.带边框表格的创建
若直接创建表格，那么创建出来的表格是不带边框的，而大多数情况下，我们需要的往往是一个带有边框的表格，那么我们则需要在table标签中设置属性border。
<body> <table border="1"> <tr> <td>标签</td> <td>说明</td> </tr> <tr> <td>p</td> <td>段落</td> </tr> </table> </body>
🔥2.设置单元格边距和间距
1. 设置单元格内边距-cellpadding
单元格内容与其边框之间的空白。
<table border="1" cellpadding="20" > <tr> <td>用户名：</td> <td><input type="text" placeholder="输入用户名"></td> </tr> <tr> <td>密码：</td> <td><input type="password" placeholder="输入密码"></td> </tr> </table>
2. 修改单元格间距-cellspacing
增加单元格之间的距离
<table border="1" cellspacing="20" > <tr> <td>用户名：</td> <td><input type="text" placeholder="输入用户名"></td> </tr> <tr> <td>密码：</td> <td><input type="password" placeholder="输入密码"></td> </tr> </table>
🔥3.设置表格背景，以及单元格背景
<body> <table border="1" bgcolor = "red"> <tr bgcolor = "pink"> <td>标签</td> <td>说明</td> </tr> <tr> <td bgcolor ="yellow">p</td> <td>段落</td> </tr> </table> </body>
🔥4.设置表头
在table中用th标签来表示表头。
<body> <table border="1"> <tr> <th>姓名</th> <th>联系方式</th> </tr> <td>苏凉</td> <td>lxzy787991021</td> </table> </body>
🔥5.跨行或者跨列
<body> <p>跨列</p> <table border="1"> <tr> <th>姓名</th> <th colspan="2">联系方式</th> </tr> <td>苏凉</td> <td>lxzy787991021</td> <td>787991021</td> </table> <p>跨行</p> <table border="1"> <tr> <th>姓名</th> <td>苏凉</td> </tr> <tr> <th rowspan="2">联系方式</th> <td>lxzy787991021</td> </tr> <tr> <td>787991021</td> </tr> </table> </body>
（三）🍁HTML列表
| 标签 | 描述 |
| < ol> | 定义有序列表。 |
| < ul> | 定义无序列表。 |
| < li > | 定义列表项。 |
| < dl > | 定义定义列表。 |
| < dt > | 定义定义项目。 |
| < dd > | 定义定义的描述。 |
🔥1.有序列表
<body> <ol> <li>璃月</li> <li>稻妻</li> <li>蒙德</li> </ol> </body>
🔥2.无序列表
<body> <ul> <li>钟离</li> <li>雷电将军</li> <li>温迪</li> </ul> </body>
🔥3.嵌套列表
<body> <p>原神强度排行榜</p> <ul> <li>璃月</li> <ol> <li>钟离</li> <li>胡桃</li> <li>甘雨</li> <li>魈</li> <li>刻晴</li> </ol> <li>稻妻</li> <ol> <li>雷电将军</li> <li>风原万叶</li> <li>神里凌华</li> <li>霄宫</li> </ol> <li>蒙德</li> <ol> <li>温迪</li> <li>可丽</li> <li>尤拉</li> </ol> </ul> </body>
🔥4.自定义列表
<body> <dl> <dt>雷神</dt> <dd>稻妻-雷电将军</dd> <dt>岩神</dt> <dd>璃月-钟离</dd> <dt>风神</dt> <dd>蒙德-温迪</dd> </dl> </body>
效果：
雷神稻妻-雷电将军岩神璃月-钟离风神蒙德-温迪
小结
今天咱们就到这，有什么需要改正或者补充的地方，欢迎大家提出和讨论，一起加油！咱们下期再见！！
