Blogger Information

Blog 9

fans 0

comment 6

visits 9539

Special Recommendation

More>

Related recommendations

语义化标签

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>

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

Markdown 语法练习

2020-09-29 11:40:36