一、标签
功能标签:有序列表、无序列表、定义列表、表格
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可在第一网页中点击—查看详情—直接定位到内容处