search

博客列表 >HTML中链接元素和表格要点

HTML中链接元素和表格要点

ccc9112020
ccc9112020原创
2020年10月01日 16:43:07864浏览

链接元素

链接元素常用属性

  • href
    指向目标URL，譬如 href="https://baidu.com"
  • target
    打开URL的方式,包括以下四种
    • _self
    • _blank
    • _top
    • _parent
  • download
    可以指定下载文件并且指定文件名，但是在很多情况下会遇到防盗链设置而失效. 譬如：<a href="" download="php入门到精通">下载文件</a>。目前还没有成功的网络地址。不过本地是可以。如果有成功的网络例子，可以告诉我。
  • type
    设置链接文件的MIME类型。譬如type=image/jepg。

href属性值

  • href="URL"
    跳转URL指定的地址。譬如href="www.baidu.com"
  • href="mailto:xxx@xxx.com"
    打开邮箱客户端，发送邮件
  • href="tel:xxxxxxxxxxxxx"
    本地支持的情况下可以打电话
  • href="文件名"
    浏览器不能够解析文件的 情况下可以直接下载文件。

target属性值

  • target="_self"
    当前窗口打开链接。
  • target="_blank"
    新窗口打开链接。
  • taget="_parent"
    父窗口打开链接。
  • target="_top"
    顶层窗口打开链接。
  • target="_name"
    指定名称的窗口，与 iframe 元素配合，譬如用于管理后台。
  • target="_#anchor"
    跳转到设置了锚点的元素所在位置。锚点适合用于一个长页面里面的不同位置的精确定位。譬如我们在制作一份长文档的时候，利用锚点可以快速定位。另外vue里面的跳转也用到了锚点。这个后续课程有。
    锚点的使用,href写入#锚点名称，目标元素的id就是锚点名称：
    1.   <a href="#anchorname1">跳转到锚点1位置</a>
    2.   <a href="#anchorname2">跳转到锚点2位置</a>
    3.   -----------
    4.   -----------
    5.   <h2 id="anchorname1">锚点1位置
    6.   <div id="anchorname2">锚点2位置</div>
    我们可以从很多实际网页中看到锚点的用途。譬如：
    医学百科：罗红霉素

表格合并

  • 表格行列合并主要涉及两个属性，rowspan和colspan。
    同一个列的不同行合并到一起，用rowspan=”n”，n是合并行数。同时原来位置的行的td必须删除或者注释掉。
    同一个行的不同列合并到一起，用colspan=”n”.其余同上。
    另外在td和table标签内可以设置合并后的效果，这些都属于表格基础知识。可以自行查询。包括align=”left/right/center”,cellspacing=”0/1/2”(表格线宽),cellpadding=”1/2/3/4/5”(表格的padding)。诸如此类。

  • 实际案例

  1.     <table border="1" cellspacing="0" cellpadding="10">
  2.       <caption style="font-size: 1.5rem; margin-bottom: 10px">
  3.         2020年9月华强手机专卖店手机销售表
  4.       </caption>
  5.       <thead bgcolor="#eee" style="letter-spacing: 2px">
  6.         <tr>
  7.           <th>厂家编号</th>
  8.           <th>厂商</th>
  9.           <th>品牌</th>
  10.           <th>型号</th>
  11.           <th>价格(元)</th>
  12.           <th>销售数量(台)</th>
  13.           <th>销售金额(元)</th>
  14.         </tr>
  15.       </thead>
  16.       <tbody>
  17.         <tr>
  18.           <td rowspan="3">1</td>
  19.           <td rowspan="3">苹果</td>
  20.           <td rowspan="3">iPhone</td>
  21.           <td>iPhone 11</td>
  22.           <td>4500</td>
  23.           <td>10</td>
  24.           <td>45000</td>
  25.         </tr>
  26.         <tr>
  27.           <!-- <td>1</td> -->
  28.           <!-- <td>苹果</td> -->
  29.           <!-- <td>iPhone</td> -->
  30.           <td>iPhone 11 Pro Max</td>
  31.           <td>8500</td>
  32.           <td>4</td>
  33.           <td>34000</td>
  34.         </tr>
  35.         <tr>
  36.           <!-- <td>1</td> -->
  37.           <!-- <td>苹果</td> -->
  38.           <td colspan="2" align="center">累计：</td>
  39.           <td>14</td>
  40.           <td>79000</td>
  41.           <!-- <td></td>
  42.           <td></td> -->
  43.         </tr>
  44.       </tbody>
  45.       <tbody>
  46.         <tr>
  47.           <td rowspan="7">2</td>
  48.           <td rowspan="7">华为</td>
  49.           <td rowspan="3">华为</td>
  50.           <td>Nova6</td>
  51.           <td>2500</td>
  52.           <td>4</td>
  53.           <td>10000</td>
  54.         </tr>
  55.         <tr>
  56.           <!-- <td>2</td> -->
  57.           <!-- <td>华为</td> -->
  58.           <!-- <td>华为</td> -->
  59.           <td>Mate30</td>
  60.           <td>4000</td>
  61.           <td>2</td>
  62.           <td>8000</td>
  63.         </tr>
  64.         <tr>
  65.           <!-- <td></td> -->
  66.           <!-- <td></td> -->
  67.           <!-- <td></td> -->
  68.           <td colspan="2" align="center">累计：</td>
  69.           <!-- <td></td> -->
  70.           <td>6</td>
  71.           <td>18000</td>
  72.         </tr>
  73.         <tr>
  74.           <!-- <td>2</td> -->
  75.           <!-- <td>华为</td> -->
  76.           <td rowspan="3">荣耀</td>
  77.           <td>荣耀20</td>
  78.           <td>2000</td>
  79.           <td>10</td>
  80.           <td>20000</td>
  81.         </tr>
  82.         <tr>
  83.           <!-- <td>2</td> -->
  84.           <!-- <td>华为</td> -->
  85.           <!-- <td>荣耀</td> -->
  86.           <td>荣耀9X</td>
  87.           <td>1000</td>
  88.           <td>20</td>
  89.           <td>20000</td>
  90.         </tr>
  91.         <tr>
  92.           <!-- <td></td> -->
  93.           <!-- <td></td> -->
  94.           <!-- <td></td> -->
  95.           <td colspan="2" align="center">累计：</td>
  96.           <!-- <td></td> -->
  97.           <td>30</td>
  98.           <td>40000</td>
  99.         </tr>
  100.         <tr>
  101.           <!-- <td></td> -->
  102.           <!-- <td></td> -->
  103.           <td colspan="3" align="center">累计：</td>
  104.           <!-- <td></td> -->
  105.           <!-- <td></td> -->
  106.           <td>36</td>
  107.           <td>56000</td>
  108.         </tr>
  109.       </tbody>
  110.       <tbody>
  111.         <tr>
  112.           <td rowspan="7">3</td>
  113.           <td rowspan="7">小米</td>
  114.           <td rowspan="3">小米</td>
  115.           <td>小米K30</td>
  116.           <td>2000</td>
  117.           <td>10</td>
  118.           <td>20000</td>
  119.         </tr>
  120.         <tr>
  121.           <!-- <td>3</td> -->
  122.           <!-- <td>小米</td> -->
  123.           <!-- <td>小米</td> -->
  124.           <td>小米10至尊版</td>
  125.           <td>5000</td>
  126.           <td>2</td>
  127.           <td>10000</td>
  128.         </tr>
  129.         <tr>
  130.           <!-- <td></td> -->
  131.           <!-- <td></td> -->
  132.           <!-- <td></td> -->
  133.           <td colspan="2" align="center">累计：</td>
  134.           <!-- <td></td> -->
  135.           <td>12</td>
  136.           <td>30000</td>
  137.         </tr>
  138.         <tr>
  139.           <!-- <td>3</td> -->
  140.           <!-- <td>小米</td> -->
  141.           <td rowspan="3">红米</td>
  142.           <td>红米note8Pro</td>
  143.           <td>1500</td>
  144.           <td>20</td>
  145.           <td>30000</td>
  146.         </tr>
  147.         <tr>
  148.           <!-- <td>3</td> -->
  149.           <!-- <td>小米</td> -->
  150.           <!-- <td>红米</td> -->
  151.           <td>红米note8</td>
  152.           <td>1000</td>
  153.           <td>20</td>
  154.           <td>20000</td>
  155.         </tr>
  156.         <tr>
  157.           <!-- <td></td> -->
  158.           <!-- <td></td> -->
  159.           <!-- <td></td> -->
  160.           <td colspan="2" align="center">累计：</td>
  161.           <!-- <td></td> -->
  162.           <td>40</td>
  163.           <td>50000</td>
  164.         </tr>
  165.         <tr>
  166.           <!-- <td></td> -->
  167.           <!-- <td></td> -->
  168.           <td colspan="3" align="center">累计：</td>
  169.           <!-- <td></td> -->
  170.           <!-- <td></td> -->
  171.           <td>52</td>
  172.           <td>80000</td>
  173.         </tr>
  174.       </tbody>
  175.     </table>

效果图：
手机销售表单

上一条：掌握注册表单中常用控件元素和属性下一条：经典会员注册表单设计,控件元素与常用属性大全
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议