Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 链接元素和表格的基础知识
Blogger Information
Blog 8
fans 0
comment 0
visits 5784
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
478 people have browsed it

链接元素

  1. <style>
  2.     p {
  3.         margin-top: 500px;
  4.     }
  5. </style>
  6. <body>
  7.     <!-- 锚点跳转 -->
  8.     <a href="#anchor">到底部</a>
  9.     <p id="anchor">到了</p>
  10.     <!-- 指向链接页面的地址 -->
  11.   <a href="https://www.baidu.com/">百度1</a> 
  12.     <!-- 当前页面打开  -->
  13.   <a href="https://www.baidu.com/" target="_self">百度2</a>
  14.     <!-- 新页面打开链接 -->
  15.   <a href="https://www.baidu.com/" target="_blank">百度3</a>
  16.     <!-- 下载文件 -->
  17.     <a href="/0928/php/demo1.html" download="文件">下载</a>
  18.     <!-- 客户电话 -->
  19.     <a href="tel:180111*****">客户电话</a>
  20.     <!-- 发送邮件 -->
  21.     <a href="mailto:147258@qq.com">发送邮件</a>
  22. </body>

表格元素

清单

代码如下:

  1. <style>
  2.     table {
  3.         width: 500px;
  4.         height: 200px;
  5.     }
  6.     thead {
  7.         background-color:darkgray;
  8.     }
  9.     caption {
  10.         font-size: 1.5rem;
  11.         margin-bottom: 10px;
  12.     }
  13.     tbody {
  14.         background-color:gainsboro;
  15.     }
  16.     .name {
  17.         background-color:honeydew;
  18.     }
  19. </style>
  20. <body>
  21.     <!-- 定义表格 -->
  22.     <table border="1" cellspacing="0" cellpadding="8">
  23.         <caption>商品清单</caption>
  24.         <!-- 定义表头 -->
  25.        <thead>
  26.         <tr>
  27.             <th>名字</th>
  28.             <th>单价</th>
  29.             <th>单位</th>
  30.             <th>数量</th>
  31.             <th>金额</th>
  32.         </tr>
  33.        </thead>
  34.        <!-- 定义主体 -->
  35.        <tbody>
  36.         <tr>
  37.             <td>手机1</td>
  38.             <td>2000</td>
  39.             <td>部</td>
  40.             <td>2</td>
  41.             <td>4000</td>
  42.         </tr>
  43.         <tr>
  44.             <td>手机2</td>
  45.             <td>3000</td>
  46.             <td>部</td>
  47.             <td>1</td>
  48.             <td>3000</td>
  49.         </tr>
  50.         <tr>
  51.             <td>手机3</td>
  52.             <td>4000</td>
  53.             <td>部</td>
  54.             <td>2</td>
  55.             <td>8000</td>
  56.         </tr>
  57.         <tr class="name">
  58.             <td rowspan="2">接收人</td>
  59.             <td colspan="2" rowspan="2"></td>
  60.             <td>数量:</td>
  61.             <td>合计:</td>
  62.         </tr>
  63.         <tr class="name">
  64.             <td colspan="2">日期:</td>
  65.         </tr>
  66.         </tbody>
  67.     </table>
  68. </body>
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