HTML5表格布局，音频和视频，框架

红的花绿的叶

已于 2024-07-16 10:12:08 修改

阅读量87

点赞数

分类专栏：前端基础文章标签： html5 html 前端

于 2022-12-19 15:57:16 首次发布

本文链接：https://blog.csdn.net/qq_64227183/article/details/128373676

版权

前端基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

该博客介绍了HTML中的表格布局，用于创建网页的简单结构。示例包括一个800px宽的表格，展示热门电影分类。此外，还提到了音频和视频元素的使用，但没有提供具体的音频或视频内容。最后，讨论了HTML框架，虽然在HTML5中已不推荐使用，但提供了相关代码示例。

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

表格布局：

简单的说就是利用 table 标签的特性，对网站进行一个布局

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h1>热门电影板块</h1>
	<hr>
	<table width="800px">
	<tr>
		<td>最近热门电影</td>
		<td>热门</td>
		<td>最新</td>
		<td>豆瓣评分</td>
		<td>冷门佳片</td>
		<td>华语</td>
		<td>欧美</td>
		<td>日本</td>
		<td><a href="https://www.baidu.com/">更多&gt;&gt;</a></td>
	</tr>
	</table>
	<hr>
	<table width="800px">
	  <tr>
	  	<td><img src="./image/2.png"></td>
	  	<td><img src="./image/3.png"></td>
	  	<td><img src="./image/2.png"></td>
	  	<td><img src="./image/3.png"></td>
	  </tr>
	  <tr align="center">
	  	<td>致命ID</td>
	  	<td>恐怖游轮</td>
	  	<td>禁闭岛</td>
	  	<td>万能钥匙</td>
	  </tr>
		
	</table>
	<table width="800px">
	  <tr>
	  	<td><img src="./image/2.png"></td>
	  	<td><img src="./image/3.png"></td>
	  	<td><img src="./image/2.png"></td>
	  	<td><img src="./image/3.png"></td>
	  </tr>
	  <tr align="center">
	  	<td>致命ID</td>
	  	<td>恐怖游轮</td>
	  	<td>禁闭岛</td>
	  	<td>万能钥匙</td>
	  </tr>
		
	</table>

</body>
</html>

音频：

<audio></audio>

视频：

<video></video>

框架：

在HTML4.0中，<frameset>,但是在HTML5中已经被淘汰，不能够和 body标签同时使用

rows 行

clos 列 -----column

<frame> 联合使用

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<frameset rows="15%,*,15%">
	<frame src="Chapter08.html"></frame>
	 <frameset cols="20%,*">
	 	<frame src="Chapter8.html"></frame>
	 	<frame src="Chapter08.html"></frame>
	 </frameset>
	<frame src="Chapter8.html"></frame>
</frameset>
</html>

运行结果：