语义化标签

1，a 标签功能及用途

跳转到其他页面

<a href="https://www.baidu.com" target="_blank">百度</a>

当’href’属性是个 url 时跳转到其他页面

打电话

<a href="tel:110">报警电话</a>

属性 href=”tel:xxx”

下载

<a href="demo1.html" download="demo1.html">下载</a>

加上 download 的属性既可以下载，不过下载外部资源会受到对应外部资源的一些权限的限制，有些站点外部资源是不让下载的（现在的互联网很多网站的图片资源都在云上，你下载一次，网站就要付一部分钱。所以为了降低成本，一般不允许外站盗链、下载）还有跟浏览器也有关系，有的浏览器这个属性没用

发邮件

<a href="mailto:8888@qq.com">发邮件</a>

属性 href=”mailto:xxx@xx.com”

锚点

锚点的功能及用途

单页跳转到指定位置，实践中一般是用来跳转到网页顶部或者底部
```
<div id="top">顶部</div>
<a href="#top">回到顶部</a>
```

跳转到其他页面，在路径后面加上对应属性名称，即可跳转到其他页面的指定位置

demo1.html

<!DOCTYPE html>
<html lang="en">
  <head> </head>
  <body>
    <a href="http://127.0.0.1:5500/0929/demo2.html#bottom"
      >跳转到 demo2.html 底部</a
    >
  </body>
</html>

demo2.html

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>
    <div id="top">顶部</div>
    <div id="bottom" style="margin-top: 1000px">底部</div>
  </body>
</html>

2，表格

表格是最重要的数据格式化展示重要工具, 使用频率非常高
表格的数据,存储在由行与列组成的一系列单元格
数据必须存储在单元格元素中
与列表类似, 表格也是由一系列标签来描述

表格行列合并涉及的属性

属性	描述
colspan	colspan 属性规定单元格可横跨的列数
rowspan	rowspan 属性规定单元格可横跨的行数

行列合并实例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table border="1" cellspacing="0" cellpadding="10" align="center">
      <!--表格标题-->
      <caption style="font-size: 1.5rem; margin-bottom: 10px">
        玩家信息表
      </caption>
      <!-- 自定义列样式 -->
      <colgroup>
        <!-- col标签能使用的属性极其有限,应该只使用span属性,其它的全部用css控制 -->
        <!-- 第1列样式, 使用style属性设置列样式 -->
        <col style="background-color: rgb(161, 230, 249)" />
        <!-- 第2列样式, 使用style属性设置列样式 -->
        <col style="background-color: rgb(172, 247, 172)" />
        <!-- 从第3列开始进行合并操作,直到最后一列,使用style属性设置列样式 -->
        <col span="5" style="background-color: lightyellow" />
      </colgroup>
      <!--表头-->
      <thead>
        <tr>
          <th>国籍</th>
          <th>序号</th>
          <th>姓名</th>
          <th>游戏ID</th>
          <th>战队</th>
          <th>昵称</th>
          <th>电话</th>
          <th>地址</th>
          <th>游戏币</th>
        </tr>
      </thead>
      <!--表格主体1-->
      <tbody>
        <tr>
          <td rowspan="2">日本</td>
          <td>1</td>
          <td>李赣</td>
          <td>1001</td>
          <td rowspan="2" colspan="2">天皇护卫队</td>
          <!-- <td>猪头</td> -->
          <td>120</td>
          <td>成都</td>
          <td>200</td>
        </tr>
        <tr>
          <!-- <td>日本</td> -->
          <td>2</td>
          <td>孙笑川</td>
          <td>1002</td>
          <!-- <td>天皇护卫队</td> -->
          <!-- <td>带带大师兄</td> -->
          <td>6324</td>
          <td>横滨</td>
          <td>200</td>
        </tr>
        <tr>
          <td rowspan="3">中国</td>
          <td>3</td>
          <td>李元浩</td>
          <td>1003</td>
          <td rowspan="3">RNG</td>
          <td>xiaohu</td>
          <td>119</td>
          <td>郑州</td>
          <td>260</td>
        </tr>
        <tr>
          <!-- <td>中国</td> -->
          <td>4</td>
          <td>史森明</td>
          <td>1004</td>
          <!-- <td>RNG</td> -->
          <td>ming</td>
          <td>12315</td>
          <td>北京</td>
          <td>400</td>
        </tr>
        <tr>
          <!-- <td>中国</td> -->
          <td>5</td>
          <td>简自豪</td>
          <td>1005</td>
          <!-- <td>RNG</td> -->
          <td>uzi</td>
          <td>110</td>
          <td>武汉</td>
          <td>500</td>
        </tr>
      </tbody>
      <!--表格主体2-->
      <!--可以有多个主体-->
      <tbody>
        <tr>
          <td rowspan="3">韩国</td>
          <td>6</td>
          <td>李相赫</td>
          <td>2001</td>
          <td>SKT</td>
          <td>faker</td>
          <td>6666</td>
          <td>首尔</td>
          <td>500</td>
        </tr>
        <tr>
          <!-- <td>韩国</td> -->
          <td>7</td>
          <td>宋义进</td>
          <td>2002</td>
          <td rowspan="2">IG</td>
          <td>rokie</td>
          <td>77777</td>
          <td>釜山</td>
          <td>500</td>
        </tr>
        <tr>
          <!-- <td>韩国</td> -->
          <td>8</td>
          <td>姜承禄</td>
          <td>2003</td>
          <!-- <td>IG</td> -->
          <td>theShy</td>
          <td>999</td>
          <td>济州岛</td>
          <td>1000</td>
        </tr>
      </tbody>
      <!--脚注-->
      <tfoot>
        <tr>
          <td>统计</td>
          <td colspan="8">以上是玩家信息！</td>
          <!-- <td>名单统计</td>
          <td>名单统计</td>
          <td>名单统计</td>
          <td>名单统计</td>
          <td>名单统计</td>
          <td>名单统计</td>
          <td>名单统计</td> -->
        </tr>
      </tfoot>
    </table>
  </body>
</html>

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

Markdown 语法练习

2020-09-29 11:40:36