html续

最新推荐文章于 2024-09-27 23:15:00 发布

xiaozhu（拜hengda）

最新推荐文章于 2024-09-27 23:15:00 发布

阅读量201

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/xiaozhuqiaozhi10/article/details/109251704

版权

HTML概述续

超链接锚点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body align="center">
        <!-- 定义锚点<a name="锚点name">产品1<a/> -->
		<a name="top"></a>
		<a href="#p1">产品1</a>
		<a href="#p2">产品2</a>
		<a href="#p3">产品3</a>
		<a href="#p4">产品4</a>
		<a href="#p5">产品5</a>
		<hr />
		<h3>产品1</h3><a name="p1"></a><img src="img/nike/1.png" >
		<hr />
		<h3>产品2</h3><a name="p2"></a><img src="img/nike/2.png" >
		<hr />
		<h3>产品3</h3><a name="p3"></a><img src="img/nike/3.png" >
		<hr />
		<h3>产品4</h3><a name="p4"></a><img src="img/nike/4.png" >
		<hr />
		<h3>产品5</h3><a name="p5"></a><img src="img/nike/5.png" >
		
		<hr />
        <!-- 超链接跳转到指定的锚点<a href="#+锚点name">返回顶部<a/> -->
		<a href="#top">返回顶部</a>
		
		
	</body>
</html>

表格标签

表格的基本结构

<table>定义表格
<tr>定义表行
	<th>定义表头</th>
</tr>
<tr>
<td>定义单元格</td>
</tr>
</table>

表格的基本构成标签
table标签：表格标签
tr标签：表格中的行
th标签:表格的表头
td标签：表格单元格

表格属性

Border为边框属性:border=“number”

background为背景图像属性:background=“图片位置”

bgcolor背景颜色 :bgcolor=“颜色” background=""表格背景图片

width,height为宽高属性:width=“300” height=“200”

cellpadding为填充属性 cellpadding=“值” 为表格内容到边框的距离

cellspacing间距属性 cellspacing=“值” 值=0是边框合并为一条线.

align:表格的位置由table元素的aglin属性决定

align=“center” 为居中 align="left"为居左,居左为默认 align="right"为居右

valign:表格内文字的位置是由td的align和valign决定的,valign可选值包括top(居上),middle(居中),bottom(居下)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="20" width="300" height="200" background="img/qq_logo.png">
			<tr>
				<th>姓名</th>
				<th>语文</th>
				<th>数学</th>
				<th>英语</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>100</td>
				<td>100</td>
				<td>100</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>100</td>
				<td>100</td>
				<td>100</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>100</td>
				<td>100</td>
				<td>100</td>
			</tr>
		</table>
	</body>
</html>

表格合并

colspan属性,跨列合并单元格,即将两个同行的单元格合并为一个单元格.

rowspan属性,跨行合并单元格,即两两个同列的单元格合并为一个单元格.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p align="center">课程表</p>
		<table align="center" width="600" height="100" border="1" >
			<tr>
				<td>项目</td>
				<td colspan="5">上课</td>
				
				<td colspan="2">休息</td>
				
			</tr>
			<tr>
				<td>星期</td>
				<td>星期一</td>
				<td>星期二</td>
				<td>星期三</td>
				<td>星期四</td>
				<td>星期五</td>
				<td>星期六</td>
				<td>星期日</td>
			</tr>
			<tr>
				<td rowspan="4">上午</td>
				<td>语文</td>
				<td>数学</td>
				<td>英语</td>
				<td>英语</td>
				<td>物理</td>
				<td>计算机</td>
				<td rowspan="4">休息</td>
				
			</tr>
			<tr>
				<td>数学</td>
				<td>数学</td>
				<td>地理</td>
				<td>化学</td>
				<td>历史</td>
				
				<td>计算机</td>
				
			</tr>
			<tr>
				<td>语文</td>
				<td>数学</td>
				<td>历史</td>
				<td>计算机</td>
				<td>物理</td>
				
				<td>化学</td>
				
			</tr>
			<tr>
				<td>数学</td>
				<td>数学</td>
				<td>地理</td>
				<td>化学</td>
				<td>历史</td>
				
				<td>计算机</td>
				
			</tr>
			<tr>
				<td rowspan="2">下午</td>
				<td>数学</td>
				<td>数学</td>
				<td>地理</td>
				<td>化学</td>
				<td>历史</td>
				<td>计算机</td>
				<td rowspan="2">休息</td>
			</tr>
			<tr>
				<td>数学</td>
				<td>数学</td>
				<td>地理</td>
				<td>化学</td>
				<td>历史</td>
				<td>计算机</td>
			</tr>
		</table>
		
	</body>
</html>