• 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>
  • 相关阅读:
    Windows Phone 一步一步从入门到精通
    备忘录模式(Memento)
    开放封闭原则(OCP)
    建造者模式(Bulider)
    原型模式(Prototype)
    Windows Workflow Foundation(WF) 一步一步从入门到精通
    模板方法模式
    代理模式(Proxy)
    装饰模式(Decorator)
    迪米特法则(LoD)最少知识原则
  • 原文地址:https://www.cnblogs.com/wangnatian/p/8399154.html
Copyright © 2020-2023  润新知