20180201 超链接与表格

<img src="当前图片的路径"title="鼠标放在图片上时出现的文字"
alt="当你的图片显示不出来的时候显示的文字">
路径:1.绝对路径(根据你要插入的图片而定的,定死的,引入图片地址)尽量不要用
2.相对路径(相对当前html文件的路径)
/(window 盘符 代表当前文件夹的根目录)
../(代表当前文件的上一级目录)
./ (当前文件目录 可以省略)

超链接标签;
<a href="超链接路径" target=打开方式>超链接的内容</a>
打开方式掌握两种:
1._blank 在新窗口打开
2._self 在当前窗口打开
提供下载功能:当href属性中的路径文件打不开时,或者是个压缩文件,浏览器就会给你提供下载功能
锚点链接:
首先创建一个标记:
<a name="标记值">这是top</a>
然后定位
定位到本页的标记处:<a href="路径#标记值”>top置顶</a>
定位到其他页的标记处:<a href="路径#标记值”>top置顶</a>
-->
<!--
作业:
绝对路径:
1本地
2网上
相对路径:
1<同路径下>
2<上一级目录的文件夹里的图片>
3<同路径文件夹下的图片>
<img src="logo.jpg>
<img src="../img/logo.jpg>
<img src="img/log.jpg>

<!--<table border="1px" width="600px" height="600px">单位px
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
表格特性:如果改变某一个单元格,就会影响和它挨着的行和列的单元格。所以只能说比较规整d的布局,等宽等高
cellspacing:设置单元格与单元格之间的距离
cellpadding:设置单元格中内容与单元格之间的距离

练习1

超链接:

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>第二天</title>
 6 <link rel="shortcut icon" href="logo.ico">
 7 </head>
 8 
 9 <body>
10 <a name="top">这是top</a>
11 
12 <img src="D:作业imglogo3.jpg"> 
13 <img src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg"> 
14 <img src="logo3.jpg"> 
15 <img src="../img/logo4.jpg"> 
16 <img src="img/logo2.jpg"><!--同路径文件夹下-->
17 <img src="logo3.jpg" title="这是百度相关logo" > 
18 <img src="logo3.jpg" alt="啥玩意">
19 <a href="https://www.taobao.com/" target="_blank">淘宝网1</a>
20 <a href="https://www.taobao.com/" target="_self">淘宝网2</a>
21 <a href="../20180131.html" target="_blank">跳转到第一天</a>
22 <!--练习:
23 1.做一个跳转到百度的链接,并用新窗口页打开方式
24 2.做一个跳转到本地html的链接,并用在当前页打开的打开方式
25 -->
26 <br>
27 <br>
28 <br>
29 <br>
30 <br>
31 <br>
32 <br>
33 <br>
34 <br>
35 <br>
36 <br>
37 <br>
38 <br>
39 <br>
40 <br>
41 <br>
42 <br>
43 <br>
44 <br>
45 <br>
46 <br>
47 <br>
48 <br>
49 <br>
50 <br>
51 <br>
52 <br>
53 <br>
54 <br>
55 <br>
56 <br>
57 <br>
58 <a href="#top">top置顶</a>
59 <!--<a href="路径#标记值">top置顶</a>-->
60 <a href="../20180131.html#demo">跳转到post方法</a>    
61 </body>
62 </html>

在过去Web1.0时代,表格更多的用在网页布局定位上。但是Web2.0时代,表格已经被摒弃了,现在使用的是“DIV+CSS”模式。

语法:

<table>


<tr>


<td>单元格1</td>


<td>单元格2</td>


</tr>


<tr>


<td>单元格4</td>


<td>单元格5</td>


</tr>


</table>

表格:

 1 <table border="0px" wedth="490px" height="700px">
 2 <tr>
 3 <td colspan="2">剁手党云集d的网站</td>
 4 <td></td>
 5 <td><a href="#">展开</a></td>
 6 </tr>
 7 <tr>
 8 <td align="center"><img src="../20180201练习/表格练习/1.png" alt=""></td>
 9 <td align="center"><img src="../20180201练习/表格练习/2.png" alt=""></td>
10 <td align="center"><img src="../20180201练习/表格练习/3.png" alt=""></td>
11 <td align="center"><img src="../20180201练习/表格练习/4.png" alt=""></td>
12 </tr>
13 <tr>
14 <td align="center"><a href="#">天猫</a></td>
15 <td align="center"><a href="#">京东</a></td>
16 <td align="center"><a href="#">1号店</a></td>
17 <td align="center"><a href="#">亚马逊</a></td>
18 </tr>
19 <tr>
20 <td align="center"><small>综合性购物网站</small></td>
21 <td align="center"><small>3C网购专业平台</small></td>
22 <td align="center"><small>电子商务型网站</small></td>
23 <td align="center"><small>网络电子商务公司</small></td>
24 </tr>
25 <tr>
26 <td colspan="2">购物省钱好帮手</td>
27 <td></td>
28 <td><a href="#">展开</a></td>
29 </tr>
30 <tr>
31 <td align="center"><img src="../20180201练习/表格练习/5.png" alt=""></td>
32 <td align="center"><img src="../20180201练习/表格练习/6.png" alt=""></td>
33 <td align="center"><img src="../20180201练习/表格练习/7.png" alt=""></td>
34 <td align="center"><img src="../20180201练习/表格练习/8.png" alt=""></td>
35 </tr>
36 <tr>
37 <td align="center"><a href="#">糯米网</a></td>
38 <td align="center"><a href="#">折800</a></td>
39 <td align="center"><a href="#">蘑菇街</a></td>
40 <td align="center"><a href="#">聚划算</a></td>
41 </tr>
42 <tr>
43 <td align="center"><small>省钱更省心的团购服务</small></td>
44 <td align="center"><small>商品限时特卖网站</small></td>
45 <td align="center"><small>女性分享导购社区</small></td>
46 <td align="center"><small>阿里集团旗下团购网站</small></td>
47 </tr>
48 <tr>
49 <td colspan="2">购物与反购物攻略</td>
50 <td></td>
51 <td><a href="#">展开</a></td>
52 </tr>
53 <tr>
54 <td align="center"><img src="../20180201练习/表格练习/9.png" alt=""></td>
55 <td align="center"><img src="../20180201练习/表格练习/10.png" alt=""></td>
56 <td align="center"><img src="../20180201练习/表格练习/11.png" alt=""></td>
57 <td align="center"><img src="../20180201练习/表格练习/12.png" alt=""></td>
58 </tr>
59 <tr>
60 <td align="center"><a href="#">提前列好购物单</a></td>
61 <td align="center"><a href="#">请假防媳妇败家</a></td>
62 <td align="center"><a href="#">领优惠卷享折上折</a></td>
63 <td align="center"><a href="#">报废媳妇支付宝</a></td>
64 </tr>
65 
66 </table>

练习2

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>青岛航空</title>
 6 </head>
 7 
 8 <body>
 9 <table border="1px" width="550px" height="580px" >
10 <tr>
11 <td colspan="4">
12 <table>
13 <tr>
14 <td><img src="../课堂练习素材/20180201表格练习/13.png" alt=""></td>
15 <td align="center"><b>航班不正常证明<br>Certificate of irregular flight</b></td>
16 </tr>
17 </table>
18 </td>
19 </tr>
20 <tr>
21 <td align="center">旅客姓名<br>name</td>
22 <td align="center"><b>姜晓康</b></td>
23 <td align="center">票号<br>TICKET NUMBER</td>
24 <td align="center"><b>17854296657</b></td>
25 </tr>
26 <tr>
27 <td align="center">航班号<br>flight number</td>
28 <td align="center"><b>qw9877</b></td>
29 <td align="center">航班日期<br>FLIGHT DATE</td>
30 <td align="center"><b>2018-01-31</b></td>
31 </tr>
32 <tr>
33 <td align="center">始发地<br>from</td>
34 <td align="center"><b>海拉尔</b><br>HAILAR</td>
35 <td align="center">到达地<br>TO</td>
36 <td align="center"><b>呼和浩特</b><br>hohhot</td>
37 </tr>
38 <tr>
39 <td align="center">航班状态</td>
40 <td align="center" colspan="3">延误<b>delayed</b><br>reason</td>
41 </tr>
42 <tr>
43 <td align="center">不正常原因<br>reason</td>
44 <td align="center" colspan="3">军事活动<b>MILITARY ACTIVITY</b></td>
45 
46 </tr>
47 <tr>
48 <td colspan="4" height="100px">感谢您选择青岛航空公司的航机!我们深表歉意r</td>
49 
50 </tr>
51 <tr>
52 <td>编号NO.</td>
53 <td>20170033446787856</td>
54 <td colspan="2" rowspan="2"><b>盖章stamp</b></td>
55 
56 </tr>
57 <tr>
58 <td>填开机构 office</td>
59 <td align="center">TAO102</td>
60 
61 </tr>
62 
63 
64 </table>
65 </body>
66 </html>
原文地址:https://www.cnblogs.com/wangnatian/p/8399154.html