html前端学习一：图片列表表格_web表格图片实现-优快云博客

本文链接：https://blog.youkuaiyun.com/myt2000/article/details/103660318

本文详细介绍了HTML中常见元素的使用方法，包括图片、列表、链接和表格的标签及属性，特别聚焦于表格结构与样式的实现技巧，如hover效果、合并单元格等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片列表表格

图片的格式

BMP：
占用空间大色彩丰富，点阵图

JPEG：（JPG） 压缩方式通常是破坏数据性压缩，在压缩过程中图像的质量会遭受到可见的破坏

GIF：对透明色和多帧动画的支持。

PNG：无损压缩的位图格式，支持Alpha通道的透明/半透明特性

图片标签 img

<img src="https://i-blog.csdnimg.cn/blog_migrate/a3d48ff388d8dfeba256fadd661f8e64.png">

img的四大属性 src alt width height title

src如果保存在本地的话，同级目录直接填图片名，不同级目录可以用XXX\XXX.jpg 反斜杠，正斜杠都可以

alt主要用于给爬虫提供要素信息

没有找到图片的保存

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZI9H2J1M-1577065264042)(http://img0.ph.126.net/ZjJdUpzhd0UQiMt2GbADIA==/6632689545351233628.png)]

如何找到src原地址

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BMsILjRS-1577065264043)(http://img1.ph.126.net/3E_xP7qVND_KvETq4d-F1A==/3084402794815114597.png)]

无序列表

type：
disc 默认小黑原点
square 实心方块
circle 空心圆

<ul type="disc">
    	<li>1111</li>
    	<li>2222</li>
    	<li>3333</li>
    </ul>
    
<ul type="square">
    	<li>1111</li>
    	<li>2222</li>
    	<li>3333</li>
    </ul>
<ul type="circle">
    	<li>1111</li>
    	<li>2222</li>
    	<li>3333</li>
    </ul>

1111
2222
3333

1111
2222
3333

1111
2222
3333

有序列表

       type属性：           
1	|	数字列表排序
a	|	小写字母排序
A	|	大写字母排序
i	|	罗马小写字母排序
I	|	罗马大写字母排序

		<ol >
		<li>1111</li>
    	<li>2222</li>
    	<li>3333</li>
		</ol>

		<ol type="A">
		<li>1111</li>
    	<li>2222</li>
    	<li>3333</li>
		</ol>

		<ol type="a">
		<li>1111</li>
    	<li>2222</li>
    	<li>3333</li>
		</ol>

		<ol type="i">
		<li>1111</li>
    	<li>2222</li>
    	<li>3333</li>
		</ol>	
		
		<ol type="I">
		<li>1111</li>
    	<li>2222</li>
    	<li>3333</li>
		</ol>

1111
2222
3333

1111
2222
3333

1111
2222
3333

1111
2222
3333

1111
2222
3333

自定义列表

dl
dt
dd
类似于p标签


		<dl>
			<dt>想要完成的目标</dt>
			<dd>生活开心</dd>
			<dd>回到杭州</dd>
			<dd>生活富足</dd>
		</dl>

想要完成的目标

生活开心

回到杭州

生活富足

a标签小细节

换行中间有空格，不换行中间无空格

<a href="#">坦克</a><a href="">飞机</a>
		<br>
		<a href="#">坦克</a>
		<a href="">飞机</a>

坦克飞机

 坦克
 飞机

表格

表格结构

<table>      
	<tr>
		<td>1</td>
	</tr>
	<tr>
		<td>2</td>
	</tr>
</table>

table表格
tr代表行，包含一个或多个列    
th 表头
td 一行中的分列内容
colspan 跨列        
rowspan跨行  

caption 表格标题

    <table border="1">
    	<caption><b>明星出席情况</b></caption>
    	<tr>
    		<th>###</th>
    		<th>id</th>
    		<th>地点</th>
    		<th>人物</th>
    	</tr>
    	<tr>
    		<td>###</td>
    		<td>01</td>
    		<td rowspan="2">上海</td>
    		<td>许晴</td>
    	</tr>
    	<tr>
    		<td>###</td>
    		<td>02</td>
    		<td>土豆</td>
    	</tr>
       	<tr>
    		<td>###</td>
    		<td>03</td>
    		<td>广州</td>
    		<td>周杰伦</td>
    	</tr>
       	<tr>
    		<td>###</td>
    		<td>04</td>
    		<td colspan="2">台湾&nbsp;&nbsp;&nbsp;林青霞</td>
    		<!-- <td>林青霞</td> -->
    	</tr>

**明星出席情况**
###	id	地点	人物
###	01	上海	许晴
###	02	上海	土豆
###	03	广州	周杰伦
###	04	台湾林青霞

缩进调整和整块代码移动快捷键

crtl+[或者]
选定整块代码 crtl+shift+方向键

表格样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="keyword" content="" />
    <meta name="description" content="" />
    <title></title>
    <style>
    	table tr:hover{
    		background:red;
    		color:white;
    	}
    	tbody tr td:hover{
    		background: skyblue;
    		color:green;
    	}
    </style>
</head>



<body>
    <table border="1">
    	<thead>
    	<tr>
    	<th>id</th>
    	<th>name</th>
    	<th>gender</th>
    	<th>age</th>
		</tr>
    	</thead>
    
<tbody>
		<tr>
			<td>1</td>
			<td>小明</td>
			<td>男</td>
			<td>25</td>
		</tr>
		<tr>
			<td>2</td>
			<td>小章</td>
			<td>女</td>
			<td>36</td>
		</tr><tr>
			<td>3</td>
			<td>小王</td>
			<td>男</td>
			<td>55</td>
		</tr><tr>
			<td>4</td>
			<td>小赵</td>
			<td>男</td>
			<td>30</td>
		</tr>
</tbody>
    </table>
</body>
</html>