（03）2020-12-03（02标签介绍、表格）

最新推荐文章于 2024-04-15 16:04:18 发布

weixin_53125613

最新推荐文章于 2024-04-15 16:04:18 发布

阅读量83

点赞数

本文链接：https://blog.csdn.net/weixin_53125613/article/details/110534510

版权

02标签介绍、表格

标签介绍

标签介绍

1. a标签（超链接）

anchor 锚
双标签
作用：控制页面之间的跳转，用于从一个页面跳转到另一个页面。
格式：

    <a href="跳转的目标地址">需要展示给用户看的内容</a>

常用属性：
1、 href:
（1）规定链接跳转到指定页面的URL
（2） url可以是外部链接 eg：https://www.pay.qq.com
注意：域名前需要添加http或https。
（3） url还可以是一个内部的文件路径。
（4）当文件的后缀为压缩文件或者exe，会下载。
2、 target:
（1） _self 默认值从当前标签页跳转。
（2）_blank 打开一个新的页面，在新的页面中进行跳转。
a标签不仅可以给文字添加超链接，也可以给图片，音频，视频，表格等添加超链接。

1. a标签（锚点）

锚：生活中，锚是用来把船固定到某一个位置上。

作用：快速定位到页面中的某一个位置。
使用步骤：

1.先在目标位置的标签中添加ID属性
2.创建一个a标签
3.在a标签中的href属性中，使用 #+ID（目标位置标签的ID）

除了当前页面的锚点外，还可以跳转到别的网页中的锚点，包括网络地址。

    <a href="#znjl">早年经历</a>
    <a href="#yyjl">演艺经历</a>
    <a href="#grsh">个人生活</a>
    <a href="#zyzp">主要作品</a>
    <a href="#shhd">社会活动</a>
    <a href="https://baike.baidu.com/item/奥黛丽·赫本#8">获奖记录</a>（目标位置是一个网络地址）
    

 目标位置
  <h2 id="znjl">早年经历</h2>
  <h2 id="yyjl">演艺经历</h2>
  <h2 id="grsh">个人生活</h2>
  <h2 id="zyzp">主要作品</h2>
  <h2 id="shhd">社会活动</h2>

3. a标签（空链接）

空链接使用场景
在企业开发前期，其他界面还没有开发完成，我们不知道要跳转到什么地方。这个时候就可以使用空链接。等到项目后期，其他界面开发完成后，再将空链接替换成真实的跳转路径。
格式

  格式：
       1.<a href="#">小米手机</a>
       2.<a href="javascript:">小米手机</a>

区别：
#会自动回到网页的顶部，a链接会有点击效果。
JavaScript：不会有任何点击效果。

4. 转义字符

转义字符：
以&开头，以;结尾

   &nbsp; 空格
  &lt; 小于号
  &gt; 大于号
  &copy; 版权符号
  &yen;人民币符号
  &times;乘号
  这是一个html标签&lt;p&gt;(这是一个html标签<p>)

5. 表格

（1）基本介绍

作用
1.展示数据。
2.布局。很早之前的用法，现在已经废弃，改为使用div+css。
表格标签的嵌套关系
table>tr>td
table 定义一个表格
tr 定义表格中的一行
td 定义表格中一行中的一个单元格
th 定义表头中的单元格

td、 th 是一个容器级标签。
基本格式

基本格式：
   <table>
       <tr>
           <td></td>
       </tr>
   </table>

（2）常用属性

（1） table中
border 边框
width 宽， height 高
align 表格水平对齐方式
cellpadding 设置单元格内的空间
cellspacing 单元格之间的空间
（2） tr中
1、 align 内容水平对齐方式
left 左对齐
center 居中对齐
right 右对齐
2、 valign 内容垂直对齐方式
top 顶部对齐
middle 中间对齐
bottom 底部对齐

内容水平垂直对齐方式失效：
1.宽高没有设置
2.cellpadding 设置过大。

（3）表格的分区

标题 caption
表头 thead
主体 tbody（表体）
尾部 tfoot （表尾）
都是语义化标签。只需要关注语义即可，不需要关注样式。

（4）表格的单元格合并

单元格标签：td、th（th是特殊的单元格）。

有两个属性用来合并单元格。
（1） rowspan 跨行合并单元格垂直
（2） colspan 跨列合并单元格水平
rowspan 合并时保留上面的单元格，删除下面的单元格
colspan 合并时，保留任一一个即可。

   <table border="1" width="600px" height="400px" align="center" >
       <caption>英雄介绍</caption>
       <thead>
           <tr align="center">
               <th>英雄名称</th>
               <th>定位</th>
               <th>位置</th>
               <th>大招</th>
               <th>金额</th>
           </tr>
       </thead>
      <tbody>
       <tr align="center">
           <td>
               <img src="img/lb.jpg" alt="" width="300px">
           </td>
           <td>射手</td>
           <td>下路</td>
           <td>空中支援</td>
           <td>4800</td>
       </tr>
       <tr align="center">
           <td>
               <img src="img/mc.jpg" alt="" width="300px">
           </td>
           <td rowspan="2">战士</td>
           <td>上路</td>
           <td>插秧</td>
           <td>4800</td>
       </tr>
       <tr align="center">
           <td>
               <img src="img/gbwz.jpg" alt="" width="300px">
           </td>
           <td>打野</td>
           <td>乌鸦坐飞机</td>
           <td>6300</td>
       </tr>
      </tbody>
       <tfoot>
           <tr align="center">
               <td colspan="4">总计：</td>
               <td>15900</td>
           </tr>
       </tfoot>
   </table>