🐚作者简介：苏凉（专注于网络爬虫，数据分析）
🐳博客主页：苏凉.py的博客 🌐系列专栏：web前端基础教程 👑名言警句：海阔凭鱼跃，天高任鸟飞。
📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！
👉关注✨点赞👍收藏📂
文章目录
- （一）🍁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>
效果：
稻妻-雷电将军
岩神
璃月-钟离
风神
蒙德-温迪
小结
今天咱们就到这，有什么需要改正或者补充的地方，欢迎大家提出和讨论，一起加油！咱们下期再见！！
