超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件编辑器,一个音频或视频文件,甚至是一个应用程序。
设置一个超链接,至少需要两个基本要素:
链源:引起跳转的原因
链宿:要跳转的目标
热字超链接,链源由对应的文本构成,外部超链接的链宿为目标文件的路径
<a href="https://www.baidu.com">点一下试试</a> < --!>属性href用于设置链宿的路径, < --!>超链接开始标签<a>和结束标签</a>之间的内容是链源。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>创建超链接</title> </head> <body> <!-- ********* Begin ******* --> <h2><a href="https://www.kuwo.cn/">听音乐找酷我</a></h2> <!-- ********* End ********* --> </body> </html>
图像超链接采用图像作为超链接的链源,该链源可使用img标签来嵌入图像,该标签常用的属性有:src、alt、border、title、width、height等
<a href="http://www.baidu.com" target="_blank" title="单击图像实现超链接"> <img src="https://www.educoder.net/api/attachments/1184937" /> </a>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>创建超链接</title> </head> <body> <h2><a href="https://www.kuwo.cn/">听音乐找酷我</a></h2> <!-- ********* Begin ******* --> <a href="https://www.kuwo.cn/" title="单击进入" target="_blank"><img src="https://www.educoder.net/api/attachments/2357951" align="bottom"/></a> <!-- ********* End ********* --> 好音质用酷我 </body> </html>
外部超链接不仅可以打开网页,还可以打开图像、音乐和视频等文件,浏览器可以自动识别文件的后缀,从而确定打开的目标文件类型。不管何种类型设置超链接链源和链宿的方法都相同,这里不再赘述
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>创建超链接</title> </head> <body> <h2><a href="http://www.kuwo.cn/">听音乐找酷我</a></h2> <a href="http://www.kuwo.cn/"><img src=https://www.educoder.net/api/attachments/2357951 align=bottom /></a> 好音质用酷我<br/> <!-- ********* Begin ******* --> 推荐下载: <a href="https://www.educoder.net/api/attachments/2364090" title="下载班得瑞钢琴曲-安妮的仙境">安妮的仙境</a> <!-- ********* End ********* --> <p><h2>在线播放:</h2><audio src="https://www.educoder.net/api/attachments/2364090" controls="controls"></audio> </p> </body> </html>
页内链接的设置有两个步骤:
<a name="name1"></a>
<a href="#name1">跳转至name1</a>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>创建超链接</title> </head> <body> <h2><a href="http://www.kuwo.cn/">听音乐找酷我</a></h2> <a href="http://www.kuwo.cn/"><img src=https://www.educoder.net/api/attachments/2357951 align=bottom /></a> 好音质用酷我<br/> <!-- ********* Begin1 ******* --> <h2><a href="#Q">查看第7个音频</a></h2> <!-- ********* End1 ********* --> 推荐下载: <a href="https://www.educoder.net/api/attachments/2364090" title="下载班得瑞钢琴曲-安妮的仙境">安妮的仙境</a> <p><h2>在线播放:</h2><audio src="https://www.educoder.net/api/attachments/2364090" controls="controls"></audio> </p> <h2>这是第1个音频</h2> <h2>这是第2个音频</h2> <h2>这是第3个音频</h2> <h2>这是第4个音频</h2> <h2>这是第5个音频</h2> <h2>这是第6个音频</h2> <h2> <!-- ********* Begin2 ******* --> <a name="Q">这是第7个音频</a> <!-- ********* End2 ********* --> </h2> <h2>这是第8个音频</h2> </body> </html>
在基本表格结构中,表格标题、项目表头和数据资料构成了表格基本结构三个要素
<table></table>
中<table></table>
中<tr></tr>
中<tr></tr>
中tr标签用于定义表格的一个行。可由以下属性设置一行单元格的样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>创建表格</title> </head> <body> <!-- ********* Begin ******* --> <table background="https://www.educoder.net/api/attachments/1208912" border="4px" width="200" > <caption>成绩表</caption> <tr> <th width="100">姓名</th> <th width="100">成绩</th> </tr> <tr> <td>张三</td> <td>90</td> </tr> </table> <!-- ********* End ********* --> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>表格行样式的设置</title> </head> <body> <table border="4px" background="https://www.educoder.net/api/attachments/1208912" width="200"> <caption>成绩表</caption> <!-- ********* Begin ********* --> <tr height="40" align="center" valign="middle" bgcolor="00ffff"> <!-- ********* End ********* --> <th width="100">姓名</td> <th width="100">成绩</td> </tr> <tr> <td>张三</td> <td>90</td> </tr> </table> </body> </html>
表格中单元格的样式:
单元格的整体样式主要涉及单元格之间的距离和单元格中内容的内边距。可以在table标签内通过cellspacing和cellpadding属性来来设置。
cellspacing属性用于设置单元格之间的间隙,取值为某一数值。
cellpadding属性用于设置单元格中的文本与单元格边框之间的间隙,也称为内边距,取值为某一数值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>表格单元格样式的设置</title> </head> <body> <!-- ********* Begin1 ********* --> <table border="4px" cellspacing="0" cellpadding="8" width="200"> <!-- ********* End1 ********* --> <caption>成绩表</caption> <tr height=40 align=center valign=middle bgcolor=00ffff> <th>姓名</th> <th>成绩</th> </tr> <tr bgcolor=00ff00> <!-- ********* Begin2 ********* --> <td width="120">张三</td> <td align="center">90</td> <!-- ********* End 2********* --> </tr> </table> </body> </html>
<tr> <th>姓名</th> <th colspan="4">签到</th> <th>备注</th> </tr>
<tr> <td rowspan="2">领导讲话 </td> <td>大会主题报告</td> <td>分会专题报告</td> <td rowspan="2">总结报告</td> </tr> <tr> <td>专家报告</td> <td>分组讨论</td> </tr>
<html> <head> <meta charset="utf-8"/> <title>设置表格外边框属性</title> </head> <body> <!-- ********* Begin ******* --> <table width="100" height="80" border="4" frame="hsides"> <!-- ********* End ********* --> <caption>简易信息表</caption> <tr align=center valign=middle> <th>姓名</th> <th>年龄</th> </tr> <tr align=center valign=middle> <td>张三</td> <td>20</td> </tr> </table> </body> </html>
<html> <head> <meta charset="utf-8"/> <title>设置表格内边框属性</title> </head> <body> <!-- ********* Begin ******* --> <table width="100" height="80" border="4" frame="hsides" rules="rows"> <!-- ********* End ********* --> <caption>简易信息表</caption> <tr align=center valign=middle> <th>姓名</th> <th>年龄</th> </tr> <tr align=center valign=middle> <td>张三</td> <td>20</td> </tr> </table> </body> </html>
分析:
该表格三行四列,所以有三个tr标签
四列:第三行无合并,第四个tr标签里有四个td标签
前两行:第一行有三列——三个th标签
第二行有两列(除去已经算在第一行里的列)——两个th标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>签到表</title> <style type="text/css"> th{background-color:#00ff33;} td{background-color:#00ffff;} </style> </head> <body> <table border="2" width="400" bordercolor="#00ff00" cellpadding="6"> <caption>签到表</caption> <!-- ********* Begin ********* --> <tr> <th rowspan=2>姓名</th> <th colspan=2>签到</th> <th rowspan=2>备注</th> </tr> <tr> <th>第1次</th> <th>第2次</th> </tr> <tr> <td>张三</td> <td></td> <td></td> <td></td> </tr> <!-- ********* End ********* --> </table> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格综合</title> <style type="text/css"> th{background-color:#00ff33;} td{background-color:#00ffff;text-align:center} caption{font-family:黑体;font-size:30px;color:blue} </style> </head> <!-- ********* Begin ********* --> <body background="https://www.educoder.net/api/attachments/1217848"> <table border="2" width="600" bordercolor="#00ff00" cellpadding="6" align="center"> <caption>家庭账单</caption> <tr> <th rowspan="2" colspan="2">本周项目</th> <th colspan="2">费用明细</th> <th rowspan="2">备注</th> </tr> <tr> <th>收入</th> <th>支出</th> </tr> <tr> <th rowspan="3">收入</th> <th>工资</th> <td>10000</td> <td>0</td> <td></td> </tr> <tr> <th>兼职</th> <td>2000</td> <td>0</td> <td></td> </tr> <tr> <th>收入合计</th> <td>12000</td> <td>0</td> <td></td> </tr> <tr> <th rowspan="3">支出</th> <th>生活用品</th> <td>0</td> <td>4000</td> <td></td> </tr> <tr> <th>学杂费</th> <td>0</td> <td>3000</td> <td></td> </tr> <tr> <th>支出合计</th> <td>0</td> <td>7000</td> <td></td> </tr> </table> </body> <!-- ********* End ********* --> </html>