html前端学习一:图片 列表 表格

图片 列表 表格

图片的格式

BMP:
占用空间大色彩丰富,点阵图

JPEG:(JPG) 压缩方式通常是破坏数据性压缩,在压缩过程中图像的质量会遭受到可见的破坏

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

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

图片标签 img

<img src="http://pic-bucket.nosdn.127.net/photo/0003/2018-01-09/D7MNJE4I00AJ0003NOS.jpg">

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>

  1. 1111
  2. 2222
  3. 3333
  1. 1111
  2. 2222
  3. 3333
  1. 1111
  2. 2222
  3. 3333
  1. 1111
  2. 2222
  3. 3333
  1. 1111
  2. 2222
  3. 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>
  • 效果

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

rgba

用法:
color :rgba(255,0,0,1) 红色
red green blue alpha

#FFFFFF 黑色
第一个 FF 十六进制的红色

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值