web前端学习34（表格标签小说排行榜案例）

最新推荐文章于 2023-05-24 10:39:43 发布

香甜的甲基橙

最新推荐文章于 2023-05-24 10:39:43 发布

阅读量417

点赞数 2

分类专栏： web前端基础学习笔记文章标签：前端 html5

本文链接：https://blog.csdn.net/weixin_51249285/article/details/121151390

版权

web前端基础学习笔记专栏收录该内容

68 篇文章 13 订阅

订阅专栏

本文展示了如何使用HTML表格创建一个小说排行榜，包括排名、关键词、趋势等信息，并提供了外部链接，如贴吧、图片和百科。案例中涉及的书籍有鬼吹灯、盗墓笔记、西游记等，链接可以直接跳转到相关资源页面，便于用户进一步了解。

摘要由CSDN通过智能技术生成

1 表格标签

案例：小说排行榜

根据前面所学表格标签可以做出下面网页中的小说排行榜案例

04-小说排行榜案例.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="200">
        <tr><th>排名</th><th>关键词</th><th>趋势</th><th>今日搜索</th><th>最近七天</th><th>相关链接</th></tr>
        
        <tr><td>1</td><td>鬼吹灯</td><td>↓</td><td>345</td><td>123</td><td>
            <a href="http://jump2.bdimg.com/f?kw=%E9%AC%BC%E5%90%B9%E7%81%AF&ie=utf-8&tab=good" target="_black">贴吧</a> 
            <a href="https://cn.bing.com/images/search?q=%e9%ac%bc%e5%90%b9%e7%81%af%e5%9b%be%e7%89%87&qpvt=%e9%ac%bc%e5%90%b9%e7%81%af%e5%9b%be%e7%89%87&form=IGRE&first=1&tsc=ImageBasicHover" target="_black">图片</a> 
            <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790" target="_black">百科</a></td></tr>
        
        <tr><td>2</td><td>盗墓笔记</td><td>↓</td><td>124</td><td>65432</td><td>
            <a href="https://jump2.bdimg.com/f?kw=%E7%9B%97%E5%A2%93%E7%AC%94%E8%AE%B0&ie=utf-8&tab=good" target="_black">贴吧</a> 
            <a href="https://cn.bing.com/images/search?q=%e7%9b%97%e5%a2%93%e7%ac%94%e8%ae%b0%e5%9b%be%e7%89%87&qpvt=%e7%9b%97%e5%a2%93%e7%ac%94%e8%ae%b0%e5%9b%be%e7%89%87&form=IGRE&first=1&tsc=ImageBasicHover" target="_black">图片</a> 
            <a href="https://baike.baidu.com/item/%E7%9B%97%E5%A2%93%E7%AC%94%E8%AE%B0/21859" target="_black">百科</a></td></tr>
    
        <tr><td>3</td><td>西游记</td><td>↑</td><td>212</td><td>7654</td><td>
            <a href="http://jump2.bdimg.com/f?ie=utf-8&kw=%E8%A5%BF%E6%B8%B8%E8%AE%B0&fr=search" target="_black">贴吧</a> 
            <a href="https://cn.bing.com/images/search?q=%e8%a5%bf%e6%b8%b8%e8%ae%b0%e5%9b%be%e7%89%87&qpvt=%e8%a5%bf%e6%b8%b8%e8%ae%b0%e5%9b%be%e7%89%87&form=IGRE&first=1&tsc=ImageBasicHover" target="_black">图片</a> 
            <a href="https://baike.baidu.com/item/%E8%A5%BF%E6%B8%B8%E8%AE%B0/5723" target="_black">百科</a></td></tr>
    
        <tr><td>4</td><td>东游记</td><td>↑</td><td>23</td><td>75645</td><td>
            <a href="http://jump2.bdimg.com/f?ie=utf-8&kw=%E4%B8%9C%E6%B8%B8%E8%AE%B0&fr=search" target="_black">贴吧</a> 
            <a href="https://cn.bing.com/images/search?q=%E4%B8%9C%E6%B8%B8%E8%AE%B0%E5%9B%BE%E7%89%87&qs=n&form=QBIR&sp=-1&pq=dong%E6%B8%B8%E8%AE%B0%E5%9B%BE%E7%89%87&sc=0-8&cvid=AFC63EA04447491D8F4A5EFCDF6F5EC6&first=1&tsc=ImageBasicHover" target="_black">图片</a> 
            <a href="https://baike.baidu.com/item/%E4%B8%9C%E6%B8%B8%E8%AE%B0/15083" target="_black">百科</a></td></tr>
    
        <tr><td>5</td><td>甄嬛传</td><td>↓</td><td>121</td><td>7676</td><td>
            <a href="http://jump2.bdimg.com/f?ie=utf-8&kw=%E7%94%84%E5%AC%9B%E4%BC%A0&fr=search" target="_black">贴吧</a> 
            <a href="https://cn.bing.com/images/search?q=%E7%94%84%E5%AC%9B%E4%BC%A0%E5%9B%BE%E7%89%87&qs=n&form=QBIR&sp=-1&pq=zhen%27huan%27z%E5%9B%BE%E7%89%87&sc=0-13&cvid=4744640D05B248AB93F60B23D252EDFB&first=1&tsc=ImageBasicHover" target="_black">图片</a> 
            <a href="https://baike.baidu.com/item/%E7%94%84%E5%AC%9B%E4%BC%A0/4701562" target="_black">百科</a></td></tr>
    
        <tr><td>6</td><td>水浒传</td><td>↑</td><td>576576</td><td>1231412</td><td>
            <a href="http://jump2.bdimg.com/f?ie=utf-8&kw=%E6%B0%B4%E6%B5%92%E4%BC%A0&fr=search" target="_black">贴吧</a> 
            <a href="https://cn.bing.com/images/search?q=%E6%B0%B4%E6%B5%92%E4%BC%A0%E5%9B%BE%E7%89%87&qs=n&form=QBIR&sp=-1&pq=%E6%B0%B4%E6%B5%92%E4%BC%A0%E5%9B%BE%E7%89%87&sc=8-5&cvid=B72EF8478EDE4C4D98D710CB0CB2CE8D&first=1&tsc=ImageBasicHover" target="_black">图片</a> 
            <a href="https://baike.baidu.com/item/%E6%B0%B4%E6%B5%92%E4%BC%A0/348" target="_black">百科</a></td></tr>
    
        <tr><td>7</td><td>三国演义</td><td>↑</td><td>234</td><td>7686</td><td>
            <a href="http://jump2.bdimg.com/f?ie=utf-8&kw=%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89&fr=search" target="_black">贴吧</a> 
            <a href="https://cn.bing.com/images/search?q=%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89%E5%9B%BE%E7%89%87&qs=n&form=QBIR&sp=-1&pq=san%27guo%27yan%27yi%E5%9B%BE%E7%89%87&sc=0-16&cvid=CD66661AEFBE4232932DB9884BA01DF2&first=1&tsc=ImageBasicHover" target="_black">图片</a> 
            <a href="https://baike.baidu.com/item/%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89/5782" target="_black">百科</a></td></tr>
    
    </table>
</body>
</html>

上述链接可使用外部链接

eg:< a href="http:// w ww.baidu.com ">百度< /a >

或者空链接

eg:< a href="#">首页< /a >

网页显示：

在这里插入图片描述

点击链接跳转：

在这里插入图片描述

本文链接：https://blog.csdn.net/weixin_51249285/article/details/121151390

香甜的甲基橙

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
web前端学习34（表格标签小说排行榜案例）

文章目录1 表格标签案例：小说排行榜1 表格标签案例：小说排行榜04-小说排行榜案例.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device
复制链接

扫一扫