html 的超链接跳转页面、跳转文件、跳转锚点、唤起指定应用、列表及注意事项、表格的整体结构、常用属性、跨行与跨列等：

Ⅰ、超链接的跳转页面：

其一、代码为：


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>超链接_跳转页面</title>
</head>
<body>
    <a href="https://miaosha.jd.com/" target="_self">去秒杀</a>
    <a href="https://www.baidu.com/" target="_blank">去百度</a>
    <a href="./10_HTML排版标签.html">去排版标签</a>

    <a href="./10_HTML排版标签.html">
        <img width="50" src="./奥特曼.jpg" alt="奥特曼">
    </a>
</body>
</html>

其二、结果为：

// 一进入页面后的页面：
在这里插入图片描述
// 点击去秒杀会跳转到京东的页面：

在这里插入图片描述

// 点击去百度会跳转到百度的页面：

在这里插入图片描述

// 点击去排版标签或图片会跳转到排版标签的页面：

在这里插入图片描述

其三、图片信息为：

在这里插入图片描述

Ⅱ、超链接的跳转文件：

其一、代码为：


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>超链接_跳转文件</title>
</head>
<body>
    <!-- 都是浏览器可以直接打开的文件 -->
    <a href="./resource/我的自拍.jpg">看自拍</a>
    <a href="./resource/小电影.mp4">看小电影</a>
    <a href="./resource/小姐姐.gif">看小姐姐</a>
    <a href="./resource/如何一夜暴富.pdf">如何一夜暴富</a>

    <!-- 浏览器不可以直接打开的文件 -->
    <a href="./resource/内部资源.zip">内部资源</a>

    <!-- 浏览器可以打开，但要强制触发下载 -->
    <a href="./resource/小电影.mp4" download="好看">下载小电影</a>

    <a href="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">点我看百度logo</a>
</body>
</html>

其二、结果为：

// 一进入页面后的页面：
在这里插入图片描述
// 点击看自拍会跳转到图片信息：

在这里插入图片描述

// 点击看小电影会跳转到视频信息：

在这里插入图片描述

// 点击看小姐姐会跳转到动图信息：

在这里插入图片描述

// 点击如何一夜暴富会跳转到 .pdf 信息：

在这里插入图片描述

// 点击内部资源会自动下载 .zip 信息：

在这里插入图片描述

// 点击下载小电影会自动下载视频信息：

在这里插入图片描述

// 点击点我看百度logo会跳转到百度 logo 图片信息：

在这里插入图片描述

其三、图片信息为：

在这里插入图片描述

在这里插入图片描述

Ⅲ、超链接的跳转锚点：

其一、代码为：


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>超链接_跳转锚点</title>
</head>
<body>
    <a href="#htl">看灰太狼</a>
    <a href="#atm">看奥特曼</a>

    <p>我是一只羊，一只很肥美的羊</p>
    <img src="./path_test/a/喜羊羊.jpg" alt="喜羊羊">

    <a name="htl"></a>
    <p>我是一只狼，一只很邪恶的狼</p>
    <img src="./path_test/a/b/灰太狼.jpg" alt="灰太狼">

    <p id="atm">我是一只奥特曼，一只很能打的奥特曼</p>
    <img src="./奥特曼.jpg" alt="奥特曼">

    <p>我是一只怪兽，一只很丑的怪兽</p>
    <img src="./path_test/怪兽.jpg" alt="怪兽">

    <p>整体的介绍完毕了</p>
    <a href="#">回到顶部</a>
    <a href="">刷新页面</a><!-- 与 href="#" 效果一致，但会抖动，不建议使用-->
    <a href="javascript:;">点我弹窗</a>
</body>
</html>

其二、结果为：

// 一进入页面后的页面：

在这里插入图片描述

// 点击看灰太狼会跳到的锚点：

在这里插入图片描述

// 点击看奥特曼会跳到的锚点：

在这里插入图片描述

// 点击回到顶部会跳到的锚点：

在这里插入图片描述

// 点击刷新页面会跳到的锚点：

在这里插入图片描述

// 点击点我弹窗会跳到的锚点：

在这里插入图片描述

其三、图片信息为：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

Ⅳ、超链接的唤醒指定应用：

其一、代码为：


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>超链接_唤起指定应用</title>
</head>
<body>
    <a href="tel:10010">电话联系</a>
    <a href="mailto:1234567@qq.com">邮件联系</a>
    <a href="sms:10086">短信联系</a>
</body>
</html>

其二、结果为：

// 一进入页面后的页面：

在这里插入图片描述

// 点击电话联系唤醒的应用：

在这里插入图片描述

// 点击邮件联系唤醒的应用：

在这里插入图片描述

// 点击短信联系唤醒的应用：

在这里插入图片描述

Ⅴ、列表：

其一、代码为：


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
    <h2>要把大象放冰箱拢共分几步？</h2>
    <ol>
        <li>把冰箱门打开</li>
        <li>把大象放进去</li>
        <li>把冰箱门关上</li>
    </ol>

    <h2>我想去的几个城市</h2>
    <ul>
        <li>成都</li>
        <li>上海</li>
        <li>西安</li>
        <li>武汉</li>
    </ul>

    <h2>如何更好的学习</h2>
    <dl>
        <dt>做好笔记</dt>
        <dd>笔记是我们以后复习的一个抓手</dd>
        <dt>多加练习</dt>
        <dd>只有敲出来的代码，才是自己的</dd>
        <dt>别怕出错</dt>
        <dd>错很正常的，改正后并记住，就是经验</dd>
    </dl>

</body>
</html>

其二、结果为：

// 一进入页面后的页面：

在这里插入图片描述

Ⅵ、列表的注意事项：

其一、代码为：


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>列表_注意事项</title>
</head>
<body>
    <h2>要把大象放冰箱拢共分几步？</h2>
    <ol>
        <li>把冰箱门打开</li>
        <li>把大象放进去</li>
        <li>把冰箱门关上</li>
        <li>
            <a href="https://www.baidu.com">去百度</a>
        </li>
    </ol>

    <h2>我想去的几个城市</h2>
    <ul>
        <li>成都</li>
        <li>
            <span>上海</span>
            <ul>
                <li>外滩</li>
                <li>东方明珠</li>
                <li>迪士尼乐园</li>
                <li>杜莎夫人蜡像馆</li>
            </ul>
        </li>
        <li>西安</li>
        <li>武汉</li>
    </ul>

    <h2>如何更好的学习</h2>
    <dl>
        <dt>做好笔记</dt>
        <dd>笔记是我们以后复习的一个抓手</dd>
        <dd>笔记可以是电子版，也可以是纸质版</dd>
        <dt>多加练习</dt>
        <dd>只有敲出来的代码，才是自己的</dd>
        <dt>别怕出错</dt>
        <dd>错很正常的，改正后并记住，就是经验</dd>
    </dl>

</body>
</html>

其二、结果为：

// 一进入页面后的页面：

在这里插入图片描述

Ⅶ、表格的整体结构：

其一、代码为：


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表格_整体结构</title>
</head>
<body>
    <table border="1">
        <!-- 表格标题 -->
        <caption>学生信息</caption>
        <!-- 表格头部 -->
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>民族</th>
                <th>政治面貌</th>
            </tr>
        </thead>
        <!-- 表格主体 -->
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>18</td>
                <td>汉族</td>
                <td>团员</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>20</td>
                <td>满族</td>
                <td>群众</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>男</td>
                <td>19</td>
                <td>回族</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>赵六</td>
                <td>女</td>
                <td>21</td>
                <td>壮族</td>
                <td>团员</td>
            </tr>
        </tbody>
        <!-- 表格脚注 -->
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>共计：4人</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

其二、结果为：

// 一进入页面后的页面：

在这里插入图片描述

Ⅷ、表格的常用属性：

其一、代码为：


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表格_常用属性</title>
</head>
<body>
    <table border="1" width="500" height="500" cellspacing="0">
        <!-- 表格标题 -->
        <caption>学生信息</caption>
        <!-- 表格头部 -->
        <thead height="50" align="center" valign="middle">
            <tr>
                <th width="50" height="50" align="right" valign="bottom">姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>民族</th>
                <th>政治面貌</th>
            </tr>
        </thead>
        <!-- 表格主体 -->
        <tbody height="520" align="center" valign="middle">
            <tr height="50" align="center" valign="middle">
                <td>张三</td>
                <td>男</td>
                <td>18</td>
                <td>汉族</td>
                <td>团员</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>20</td>
                <td>满族</td>
                <td>群众</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>男</td>
                <td>19</td>
                <td>回族</td>
                <td>党员</td>
            </tr>
            <tr>
                <td align="right" valign="top">赵六</td>
                <td>女</td>
                <td>21</td>
                <td>壮族</td>
                <td>团员</td>
            </tr>
        </tbody>
        <!-- 表格脚注 -->
        <tfoot height="50" align="center" valign="middle">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>共计：4人</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

其二、结果为：

// 一进入页面后的页面：

在这里插入图片描述

Ⅸ、表格的跨行与跨列：

其一、代码为：


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表格_跨行与跨列</title>
</head>
<body>
    <table border="1" cellspacing="0">
        <caption>课程表</caption>
        <thead>
            <tr>
                <th>项目</th>
                <th colspan="5">上课</th>
                <th colspan="2">活动与休息</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>星期</td>
                <td>星期一</td>
                <td>星期二</td>
                <td>星期三</td>
                <td>星期四</td>
                <td>星期五</td>
                <td>星期六</td>
                <td>星期日</td>
            </tr>
            <tr>
                <td rowspan="4">上午</td>
                <td>3-2</td>
                <td>3-3</td>
                <td>3-4</td>
                <td>3-5</td>
                <td>3-6</td>
                <td>3-7</td>
                <td rowspan="4">休息</td>
            </tr>
            <tr>
                <td>4-2</td>
                <td>4-3</td>
                <td>4-4</td>
                <td>4-5</td>
                <td>4-6</td>
                <td>4-7</td>
            </tr>
            <tr>
                <td>5-2</td>
                <td>5-3</td>
                <td>5-4</td>
                <td>5-5</td>
                <td>5-6</td>
                <td>5-7</td>
            </tr>
            <tr>
                <td>6-2</td>
                <td>6-3</td>
                <td>6-4</td>
                <td>6-5</td>
                <td>6-6</td>
                <td>6-7</td>
            </tr>
            <tr>
                <td rowspan="2">下午</td>
                <td>7-2</td>
                <td>7-3</td>
                <td>7-4</td>
                <td>7-5</td>
                <td>7-6</td>
                <td>7-7</td>
                <td rowspan="2">休息</td>
            </tr>
            <tr>
                <td>8-2</td>
                <td>8-3</td>
                <td>8-4</td>
                <td>8-5</td>
                <td>8-6</td>
                <td>8-7</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

其二、结果为：

// 一进入页面后的页面：

在这里插入图片描述

Ⅹ、补充常用标签：

其一、代码为：


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>补充几个常用的标签</title>
</head>
<body>
    <!-- 换行标签 -->
    <a href="https://www.baidu.com">去百度</a>
    <br>
    <a href="https://www.jd.com">去京东</a>
    <!-- 分割线 -->
    <div>第一章</div>
    <p>xxxxxx，就这样最后王子和公主就在一起了！</p>
    <hr>
    <div>第二章</div>
    <p>一个月黑风高的晚上，xxxxxxxxxxxxxx</p>
    <!-- 按原文显示 -->
    <pre>
        I      Love      You
           I   Love   You
               Love
    </pre>
</body>
</html>

其二、结果为：

// 一进入页面后的页面：

在这里插入图片描述

Ⅺ、小结：

其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
其二、若有转发或引用本文章内容，请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易，且行且珍惜！
其三、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482
其四、再有兴趣的话，也可以多多关注这个专栏(Java)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_12654744.html?spm=1001.2014.3001.5482

# html # 前端 # 经验分享
Logo
乐奇 Rokid 开放社区

更多推荐

CKEditor 4 isFileTransfer() 详解：精准区分文件粘贴与文本粘贴

isFileTransfer() 是 CKEditor 4.17.0 在 clipboard 插件中新增的 DataTransfer 判定 API，用于判断一次粘贴或拖放操作携带的剪贴板数据是否为"纯文件"传输。本文以 [isfiletransfer 手动测试文档](https://link.gitcode.com/i/cc596b3ec040cc787cce3ddc235485e9) 为骨架，结

avatar 乐奇 Rokid 开放社区

CRMEB 商城在 Mac M 系列芯片上的 Docker Compose 快速部署指南：环境搭建、容器配置与定时任务/长连接/队列启动全解析

本文基于 CRMEB 仓库中 [docker-compose/MacArm/README.md](https://link.gitcode.com/i/a408652ab19aa3522df87c6879d496a3) 编写，完整讲解如何在 Apple 芯片（M1/M2/M3 等 ARM 架构）Mac 上，利用 Docker Compose 一键拉起 CRMEB 商城所需的 MySQL、Redis

avatar 乐奇 Rokid 开放社区
cover

会拍你的番茄钟：我在 Rokid Glasses 上写了一个会「盯」着你的 AIUI 智能体

avatar 乐奇 Rokid 开放社区