前端笔记3:表格标签+列表标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		
		<table><!-- 用于定义表格的标签 -->
			<tr><!---->
				<!-- td定义表格中的单元格 -->
			<td>姓名</td><td>性别 </td><td>年龄</td>
			</tr>
			<tr><!---->
				<!-- td定义表格中的单元格 -->
			<td>刘德华</td><td></td><td>55	</td>
			
			</tr>
			<tr><!---->
				<!-- td定义表格中的单元格 -->
			<td>张学友</td><td></td><td>45	</td>
			</tr>
		</table>
		
		
		
		
		<!-- <!-- 表头单元格 -->第一行加粗 -->
		<table><!-- 用于定义表格的标签 -->
			<tr><!---->
				<!-- td定义表格中的单元格 -->
			<th>姓名</th><th>性别 </th><th>年龄</th>
			</tr>
			<tr><!---->
				<!-- td定义表格中的单元格 -->
			<td>刘德华</td><td></td><td>55	</td>
			
			</tr>
			<tr><!---->
				<!-- td定义表格中的单元格 -->
			<td>张学友</td><td></td><td>45	</td>
			</tr>
		</table>
		
		
		<!-- 表格属性 -->
		<table     align="center" border='1' cellpadding="20" cellspacing="0"width="50">
			<!-- align表格对齐方式  border边框  
			cellpadding是单元格和文字之间的距离 cellspacing是单元格和单元格之间的距离 width表格的宽度 -->
			<tr>
			<th>姓名</th><th>性别 </th><th>年龄</th>
			</tr>
			<tr>
			<td>刘德华</td><td></td><td>55	</td>
			
			</tr>
			<tr>
			<td>张学友</td><td></td><td>45	</td>
			</tr>
		</table>
		
		
		<table align="center" border="1" cellspacing="0"width="500"height="249">
		<tr><th>排名</th><th>关键词</th><th>趋势</th><th>今日搜索</th><th>最近七日</th><th>相关链接</th></tr>	
		<tr><td>1</td><td>鬼吹灯</td><td><img src="img/12.jpg" ></td><td>345</td><td>123</td><td><a href="#">贴吧</a></td></tr>	
		<tr><td>1</td><td>鬼吹灯</td><td><img src="img/12.jpg" ></td><td>345</td><td>123</td><td><a href="#">贴吧</a></td></tr>	
		<tr><td>1</td><td>鬼吹灯</td><td><img src="img/12.jpg" ></td><td>345</td><td>123</td><td><a href="#">贴吧</a></td></tr>
		<tr><td>1</td><td>鬼吹灯</td><td><img src="img/12.jpg" ></td><td>345</td><td>123</td><td><a href="#">贴吧</a></td></tr>
		<tr><td>1</td><td>鬼吹灯</td><td><img src="img/12.jpg" ></td><td>345</td><td>123</td><td><a href="#">贴吧</a></td></tr>
		<tr><td>1</td><td>鬼吹灯</td><td><img src="img/12.jpg" ></td><td>345</td><td>123</td><td><a href="#">贴吧</a></td></tr>
		<tr><td>1</td><td>鬼吹灯</td><td><img src="img/12.jpg" ></td><td>345</td><td>123</td><td><a href="#">贴吧</a></td></tr>
		</table>
		
		
		<!-- 表格结构标签 -->
		<!-- <thead></thead>表格头部区域(第一行 ) <tbody></tbody>表格主体部分 -->
		<table align="center" border="1" cellspacing="0"width="500"height="249">
		<thead>
			<tr><th>排名</th><th>关键词</th><th>趋势</th><th>今日搜索</th><th>最近七日</th><th>相关链接</th></tr>
		</thead>         	
		<tbody>
		<tr><td>1</td><td>鬼吹灯</td><td><img src="img/12.jpg" ></td><td>345</td><td>123</td><td><a href="#">贴吧</a></td></tr>	
		<tr><td>1</td><td>鬼吹灯</td><td><img src="img/12.jpg" ></td><td>345</td><td>123</td><td><a href="#">贴吧</a></td></tr>	
		<tr><td>1</td><td>鬼吹灯</td><td><img src="img/12.jpg" ></td><td>345</td><td>123</td><td><a href="#">贴吧</a></td></tr>
		<tr><td>1</td><td>鬼吹灯</td><td><img src="img/12.jpg" ></td><td>345</td><td>123</td><td><a href="#">贴吧</a></td></tr>
		<tr><td>1</td><td>鬼吹灯</td><td><img src="img/12.jpg" ></td><td>345</td><td>123</td><td><a href="#">贴吧</a></td></tr>
		<tr><td>1</td><td>鬼吹灯</td><td><img src="img/12.jpg" ></td><td>345</td><td>123</td><td><a href="#">贴吧</a></td></tr>
		<tr><td>1</td><td>鬼吹灯</td><td><img src="img/12.jpg" ></td><td>345</td><td>123</td><td><a href="#">贴吧</a></td></tr>
		</tbody>
		</table>
		
		<!-- 表格标签-合并单元格 -->
		<!-- 方式:1.跨行合并rowspan 2.跨列合并colspan		 -->
		<!--合并单元格三部曲: 
		1.先确定跨行还是跨列
		2.找到目标单元格,写上合并方式=合并的单元格数量
		3.删除多余的单元格 -->
		<table cellspacing="0" width="500" height="400" align="center" border="1">
			<tr>
				<td></td>
				<td colspan="2"></td>
				
			</tr>
			<tr>
				
				<td rowspan="2"></td>
				<td></td>
				<td></td>

			</tr>
			<tr>
				
				<td></td>
				<td></td>
			</tr>
		</table>
		 
		
	总结:
	1.表格的相关标签    table tr td th thead tbody
	2.表格的相关属性    align border cellpadding cellspacing width
	3.合并单元格
		
		
		
		
		
		
		
		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表标签</title>
	</head>
	<body>
		<!--
		 表格是显示数据的,列表是用来布局的   整洁 有序
		1.无序列表(重点)
		2.有序列表(理解)
		3.自定义列表 (重点)
		-->
		
		<!-- 1.无序列表 -->
		<h4>您喜欢的食物是什么</h4>
		<ul><!-- 里面只能放li,无顺序,li里面可以放任何标签 -->
			<li>西瓜</li>
			<li>香蕉</li>
			<li></li>
			<li><!-- li里面可以放任何标签 -->
				<p>123</p>
			</li>
		</ul>
		
		
		<!-- 2.有序列表(理解) -->
		<h4>粉丝排行榜</h4>
		<ol><!-- 里面只能放li,有顺序,li里面可以放任何标签 -->
			<li>刘德华 1000</li>
			<li>杨幂  999</li>
			<li>唐嫣 888</li>
			
		</ol>
		
		<!-- 3.自定义列表 (重点)(一个大哥领着一群小弟)-->
		
		<dl><!-- 里面只能放dt,dd,dt和dd里面可以放任何标签 -->
			<dt>关注我们</dt><!-- 大哥 -->
			<dd>新浪微博</dd>
			<dd>官方微信</dd>
			<dd>联系我们</dd>
		</dl>
		
		
		
		
	</body>
</html>

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值