PHP 标签、表格的知识点与超链接的结合使用

一、标签

功能标签：有序列表、无序列表、定义列表、表格

1.有序列表
　　<ul>
　　　　<li>内容</li>
　　</ul>
2.有序列表
　　<ol>
　　　　<li>内容</li>
　　</ol>
3.定义列表
　　<dt>
　　　　<dt></dt>
　　　　<dd></dd>
　　</dt>
4.表格
<table bgcolor="white" width="100" height="1" cellpadding="0" cellspacing="0">
　　<tr>
　　　　<td></td>
　　　　<td></td>
　　</tr>
　　<tr>
　　　　<td></td>
　　　　<td></td>
　　</tr>
</table>

注意： tr代表行  td代表单元格  th代表表头 caption代表表格标题   table代表表格
1.表格默认宽度为内容宽度(width) 高度也为内容的高度（height）
2.表格默认边框为0
3.表格的宽度有两个值（数字【px】、百分比【父标签】）
4.cellpadding表示内边距（单元格内容与边框的距离）
5.cellspacing表示单元格的间距

知识点：
表格1像素的分割
1.把border（像素）设为0
2.把table背景设为边框的颜色
3.把cellspacing设为1(储存格框线宽度)
4.把td的背景颜色设为正常显示的颜色

表格单元格等宽：
利用表格横平竖直的特性，设置某个单元格宽高，他所在的行列都和他等高等宽

合并单元格：是td的属性 通过占位实现
colspan：横向合并（向右合并）
rowspan：垂直合并（向下合并）
这两个属性的属性值为数字，数字代表单元格的个数(包含自己)

 

表格简单举例：

代码如下

<table border="1" bgcolor="white" width="50%" height="1" cellpadding="0" cellspacing="0">
<caption>举例</caption>
　　<tr>
　　　　<td width="100" bgcolor="white">姓名</td>
　　　　<td width="100" bgcolor="white"></td>
　　　　<td width="100" bgcolor="white">性别</td>
　　　　<td width="100" bgcolor="white"></td>
　　　　<td colspan="2" rowspan="3" width="1" bgcolor="white"></td>
　　</tr>
　　<tr>
　　　　<td bgcolor="white">年龄</td>
　　　　<td bgcolor="white"> </td>
　　　　<td bgcolor="white">学历</td>
　　　　<td bgcolor="white"> </td>
　　</tr>
　　<tr>
　　　　<td bgcolor="white">地址</td>
　　　　<td colspan="3" bgcolor="white"> </td>
　　</tr>
</table>

效果图如下

无序列表与表格举例：

代码

<table border="0" bgcolor="white" width="25%" height="0" cellpadding="0" cellspacing="0">
　　<tr>
　　　　<td align="center" width="100">头条</td>
　　　　<td align="center" width="100">社会</td>
　　　　<td align="center" width="100">娱乐</td>
　　　　<td align="center" width="100">军情</td>
　　</tr>
　　<tr>
　　　　<td colspan="4">
　　　　　　<ul >
　　　　　　　　<li>敢吗？台军或击落大陆闯台军机</li>
　　　　　　　　<li>牛了，这国总理“排队见马云”</li>
　　　　　　　　<li>男生被杀女友拒出庭还玩失联！</li>
　　　　　　　　<li>“2亿现金藏民居”细节遭曝光</li>
　　　　　　　　<li>1分 2分 5分硬币 现价值74万！</li>
　　　　　　　　<li>韩男星自杀身亡：活着好辛苦</li>
　　　　　　　　<li>咋回事？38元麻辣烫却付5938元</li>
　　　　　　　　<li>情侣吵架报警 被发现身份惊人</li>　

　　　　　　</ul>
　　　　</td>
　　</tr>
</table >

效果图

二、超链接：

<a href="路径" target="打开方式">提供点击内容</a>
　　　打开方式：_blank 新开标签页
   　　　　　　　_self 替换自身(默认)
1.页面跳转 #代表跳转到本页(刷新)
2.锚链接（定位）
　　　　首先创建标记1.<a name="标记值">跳转到...</a>
   然后定位到标记：
　　　　 1.本页定位：<a href="#标记值">跳转到...</a>
　　　　 2.其他页定位：<a href="路径#标记值">跳转到..</a>

举例说明：

首先写好超链接路径，在标签之间写所打开的方式（文字、图标、链接等）

第一个网页

<a href="Untitled-5.html">返回</a>
<table border="1" width="100%" cellpadding="1" cellspacing="1">
　　<caption>英国大学</caption>
　　<th>16级学员</th>
　　　　<tr>
　　　　　　<td>学号</td>
　　　　　　<td>姓名</td>
　　　　　　<td>年龄</td>
　　　　　　<td>性别</td>
　　　　　　<td>班级</td>
　　　　　　<td>学历</td>
　　　　　　<td>操作</td>
　　　　</tr>
　　　　<tr>
　　　　　　<td>001</td>
　　　　　　<td>张三</td>
　　　　　　<td>20</td>
　　　　　　<td>男</td>
　　　　　　<td>10班</td>
　　　　　　<td>本科</td>
　　　　　　<td>
　　　　　　　　<a href="Untitled-5.html#eee">查看详情</a>
　　　　　　</td>
　　　　</tr>
　　　　<tr>
　　　　　　<td>002</td>
　　　　　　<td>李三</td>
　　　　　　<td>22</td>
　　　　　　<td>男</td>
　　　　　　<td>5班</td>
　　　　　　<td>本科</td>
　　　　　　<td>
　　　　　　　　　<a href="Untitled-5.html#www">查看详情</a>
　　　　　　</td>
　　　　</tr>
　　　　<tr>
　　　　　　<td>003</td>
　　　　　　<td>赵三</td>
　　　　　　<td>28</td>
　　　　　　<td>男</td>
　　　　　　<td>9班</td>
　　　　　　<td>本科</td>
　　　　　　<td>
　　　　　　　　<a href="Untitled-5.html#qqq">查看详情</a>
　　　　　　</td>
　　　　</tr>
　　　　<tr>
　　　　　　<td>004</td>
　　　　　　<td>王六</td>
　　　　　　<td>25</td>
　　　　　　<td>男</td>
　　　　　　<td>6班</td>
　　　　　　<td>大专</td>
　　　　　　<td>
　　　　　　　　<a href="Untitled-5.html#xxx">查看详情</a>
　　　　　　</td>
　　　　</tr>
　　　　<tr>
　　　　　　<td>005</td>
　　　　　　<td>郭三</td>
　　　　　　<td>26</td>
　　　　　　<td>男</td>
　　　　　　<td>8班</td>
　　　　　　<td>大专</td>
　　　　　　<td>
　　　　　　　　<a href="Untitled-5.html#yyy">查看详情</a>
　　　　　　</td>
　　　　</tr>
　</table>

第二个网页

<a href="Untitled-4.html" >返回列表内容</a>
<table border="1" height="1000" cellpadding="0" cellspacing="0" >
<a href="作业内容/张三.zip">下载</a>
　　<tr>
　　　　<td id="eee" width="100">姓名</td>
　　　　<td width="100">张三</td>
　　　　<td width="100">性别</td>
　　　　<td width="100">男</td>
　　　　<td colspan="2" rowspan="3" width="1">
　　　　<img src="微1.jpg" width="150">
　　　　</td>
　　</tr>
　　<tr>
　　　　<td>年龄</td>
　　　　<td>20</td>
　　　　<td>学历</td>
　　　　<td>本科</td>
　　</tr>
　　<tr>
　　　　<td >地址</td>
　　　　<td colspan="3">123123123123</td>
　　</tr>
　　<tr>
　　　　<td colspan="6" height="20" style="border-left: none">
　　　　<a href="作业内容/李三.zip">下载</a>
　　　　</td>
　　</tr>
　　<tr>
　　　　<td id="www" width="100">姓名</td>
　　　　<td width="100">李三</td>
　　　　<td width="100">性别</td>
　　　　<td width="100">男</td>
　　　　<td colspan="2" rowspan="3" width="1">
　　　　<img src="微2.jpg" width="150">
　　　　</td>
　　</tr>
　　<tr>
　　　　<td>年龄</td>
　　　　<td>22</td>
　　　　<td>学历</td>
　　　　<td>本科</td>
　　</tr>
　　<tr>
　　　　<td >地址</td>
　　　　<td colspan="3">456456456456</td>
　　</tr>
　　<tr>
　　　　<td colspan="6" height="20">
　　　　<a href="作业内容/赵三.zip">下载</a>
　　　　</td>
　　</tr>
　　<tr>
　　　　<td id="qqq" width="100">姓名</td>
　　　　<td width="100">赵三</td>
　　　　<td width="100">性别</td>

　　　　<td width="100">男</td>
　　　　<td colspan="2" rowspan="3" width="1">
　　　　<img src="微3.jpg" width="150">
　　　　</td>

　　</tr>
　　<tr>
　　　　<td>年龄</td>
　　　　<td>28</td>
　　　　<td>学历</td>
　　　　<td>本科</td>
　　</tr>
　　<tr>
　　　　<td >地址</td>
　　　　<td colspan="3">789789789</td>
　　</tr>
　　<tr>
　　　　<td colspan="6" height="20">
　　　　<a href="作业内容/王六.zip">下载</a>
　　　　</td>
　　</tr>
　　<tr>
　　　　<td id="xxx"width="100">姓名 </td>
　　　　<td width="100">王六</td>
　　　　<td width="100">性别</td>
　　　　<td width="100">男</td>
　　　　<td colspan="2" rowspan="3" width="1">
　　　　<img src="微4.jpg" width="150">
　　　　</td>
　　</tr>
　　<tr>
　　　　<td>年龄</td>
　　　　<td>25</td>
　　　　<td>学历</td>
　　　　<td>大专</td>
　　</tr>
　　<tr>
　　　　<td >地址</td>
　　　　<td colspan="3">45464554821645996</td>
　　</tr>
　　<tr>
　　　　<td colspan="6" height="20"><a href="作业内容/本性.zip">下载</a>
　　　　</td>
　　</tr>
　　<tr>
　　　　<td id="yyy" width="100">姓名</td>
　　　　<td width="100">郭三</td>
　　　　<td width="100">性别</td>
　　　　<td width="100">男</td>
　　　　<td colspan="2" rowspan="3" width="1">
　　　　<img src width="150">
　　　　</td>
　　</tr>
　　<tr>
　　　　<td>年龄</td>
　　　　<td>26</td>
　　　　<td>学历</td>
　　　　<td>大专</td>
　　</tr>
　　<tr>
　　　　<td >地址</td>
　　　　<td colspan="3">666655558522</td>
　　</tr>
</table>

效果图

两者之间点击文字 网页实现跳转

首先在第二网页中设置好id，然后根据编辑好的id可在第一网页中点击—查看详情—直接定位到内容处

转载于:https://www.cnblogs.com/1301694f/p/8067898.html