20180201 超链接与表格
2018-02-01 15:14 王那天 阅读(187) 评论(0) 编辑 收藏 举报<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:\作业\img\logo3.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>