HTML-练习2
目录
一、表格
<!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>
<!-- 无序列表 -->
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<!-- 定义类表 -->
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>桃子</dd>
<dd>香蕉</dd>
</dl>
<hr />
<!-- 表格 -->
<table>
<table align="center" border="1" cellpadding="0" cellspacing="0" width="200" height="200">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>11</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>王小美</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td colspan="3" align="center">跨列</td>
</tr>
<tr>
<td rowspan="2" align="center">跨行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td > </td>
<td> </td>
</tr>
<video src="视频路径" controls></video>
<audio src="音频路径" controls></audio >
</table>
</body>
</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>流量调查表</title>
</head>
<body>
<h1>流量调查表</h1>
<table border="1">
<tr>
<td>总页面流量</td>
<td>共计来访</td>
<td>会员</td>
<td>游客</td>
</tr>
<tr>
<td>9756488</td>
<td>97656</td>
<td>7538087</td>
<td>43364677</td>
</tr>
<tr>
<td>1234124123</td>
<td>123123</td>
<td>123</td>
<td>123123</td>
</tr>
<tr>
<td>12312</td>
<td>12312312</td>
<td>124123</td>
<td>12312</td>
</tr>
<tr>
<td>平均每人浏览</td>
<td colspan="3">1.58</td>
</tr>
</table>
</body>
</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>热门活动</title>
</head>
<body>
<h1>热门活动</h1>
<ul>
<li>
<img src="/TP02/01 上机练习素材/练习1：热门活动/image/img1.png" />
<br />
推荐活动 | 原创音乐现金榜T榜
</li>
<li>
<img src="/TP02/01 上机练习素材/练习1：热门活动/image/img2.png" />
<br />推荐节目|《TAImusic》爆笑来袭
</li>
<li>
<img src="/TP02/01 上机练习素材/练习1：热门活动/image/img3.png" />
<br />推荐歌单 | 继续宠爱张国荣
</li>
<li>
<img src="/TP02/01 上机练习素材/练习1：热门活动/image/img4.png" />
<br />推荐活动| 330金属音乐巡演 成都小酒馆音乐空间
</li>
</ul>
</body>
</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>音乐排行榜</title>
</head>
<body>
<h1>音乐排行榜</h1>
<ol>
<li>
<a href="#">潇洒走一回</a>
<img src="/TP02/01 上机练习素材/练习2：音乐排行榜/image/pic1.png" />
</li>
<li>
<a href="#">偏偏喜欢你</a
><img src="/TP02/01 上机练习素材/练习2：音乐排行榜/image/pic1.png" />
</li>
<li>
<a href="#">酒干倘卖否</a>
<img src="/TP02/01 上机练习素材/练习2：音乐排行榜/image/pic1.png" />
</li>
<li>
<a href="#">不说再见</a>
<img src="/TP02/01 上机练习素材/练习2：音乐排行榜/image/pic1.png" />
</li>
<li>
<a href="#">舍不得你</a>
<img src="/TP02/01 上机练习素材/练习2：音乐排行榜/image/pic1.png" />
</li>
<li>
<a href="#">请跟我来</a>
<img src="/TP02/01 上机练习素材/练习2：音乐排行榜/image/pic1.png" />
</li>
</ol>
</body>
</html>
四、iframe内联框架
<!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>iframe内联框架</title>
</head>
<body>
<h1>使用iframe嵌套网页</h1>
<a href="https://m.baidu.com/" target="baidu">点击打开百度</a><br />
<hr />
<h2>网页主体部分</h2>
<iframe src="" name="baidu" style="width: 100%; height: 600px"></iframe>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！