语义化标签
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>