Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 链接元素的功能和表格应用的知识点
Blogger Information
Blog 9
fans 0
comment 1
visits 7867
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
链接元素的功能和表格应用的知识点
东东
Original
608 people have browsed it

链接元素

外部链接

  • href 打开链接的URL
    • href=”url” 跳转目标地址
      例如：
      <a href="https://www.baidu.com">百度一下，你就知道</a>
    • href=”tel:130000…” 点击后询问拨打电话
      例如：
      <a href="tel:12345678900">联系电话</a>
    • href=”mailto:222352@qq.com” 打开邮箱，发送邮件
      例如：
      <a href="mailto:334455226@qq.com">E-mail</a>
  • download 下载链接
    自定义下载文件名
    例如：
    <a href="demo.html" download="链接元素">测试下载</a>

锚点链接

  • target 锚点链接
    • target=”_self” 当前窗口打开链接
    • target=”_blank”新窗口打开链接
    • target=”_parent”父窗口打开链接
    • target=”_top”顶层窗口打开链接
    • target=”name”指定名称的窗口，与<iframe>元素配合
    • target=”#amchor”跳到设置了的锚点的元素所在位置
      实例:
      <a target="#amchor">点击查看精彩片段</a> <h3 id=amchor>精彩片段从这里开始<h3>

表格元素

表格常用标签

  • <table> 定义表格
  • <tbody> 定义表格主体
  • <tr> 定义表格中的行
  • <th> 定义表格头部中的单元格，默认加精居中
  • <td> 定义表格主体与底部的单元格
  • <caption> 定义表格标题
  • <thead> 定义表格头格，只需定义一次
  • <col> 为一个/多个列设置属性
  • <colgroup> 将多个<col>元素分组管理

表格合并属性

  • colspan="x"
  • rowspan="x"
    无论是行合并，还是列合并，colspan/rowspan都必须要写到单元格中

实战案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>表格实战</title>
  7. </head>
  8. <body>
  9.     <table border="">
  10.     <caption style=""> 
  11.         产品统计表
  12.     </caption>
  13.       <thead>
  14.         <tr>
  15.             <th>下单时间</th>
  16.             <th>id</th>
  17.             <th>品名</th>
  18.             <th>型号</th>
  19.             <th>规格</th>
  20.             <th>单价</th>
  21.             <th>数量</th>
  22.             <th>金额</th>
  23.         </tr>
  24.       </thead>
  25.       <tbody>
  26.         <tr>
  27.             <td rowspan="3">上午</td>
  28.             <td rowspan="3">A001</td>
  29.             <td rowspan="3">腊肉</td>
  30.             <td>S00901</td>
  31.             <td>500g</td>
  32.             <td>35</td>
  33.             <td>550</td>
  34.             <td>6300</td>
  35.         </tr>
  36.         <tr>
  37.             <td>S00901</td>
  38.             <td>500g</td>
  39.             <td>35</td>
  40.             <td>260</td>
  41.             <td>6800</td>
  42.         </tr>
  43.         <tr>
  44.             <td>S00901</td>
  45.             <td>500g</td>
  46.             <td>35</td>
  47.             <td>360</td>
  48.             <td>69630</td>
  49.         </tr>
  50.         <tr>
  51.             <!-- 行合并 -->
  52.             <td colspan="8" align="center">中午休息</td>
  53.         </tr>
  54.         <tr>
  55.             <!-- 列合并 -->
  56.             <td rowspan="2">下午</td>
  57.             <td rowspan="2">A001</td>
  58.             <td rowspan="2">腊肉</td>
  59.             <td>S00901</td>
  60.             <td>500g</td>
  61.             <td>35</td>
  62.             <td>230</td>
  63.             <td>4500</td>
  64.         </tr>
  65.         <tr>
  66.             <td>S00901</td>
  67.             <td>500g</td>
  68.             <td>35</td>
  69.             <td>640</td>
  70.             <td>16300</td>
  71.         </tr>
  72.         <tr>
  73.             <td colspan="7" align="center">合计</td>
  74.             <td>100000</td>
  75.       </tbody>
  76.     </table>
  77. </body>
  78. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：配张图就完美了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post