img标签、多媒体标签和表格布局

原创已于 2023-07-28 16:29:47 修改 · 1.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #html5

于 2021-12-16 14:54:58 首次发布

前端专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了HTML img、audio、video标签的使用，表格的创建、样式调整（包括宽高、对齐、背景和间距）以及嵌套和合并技巧。还展示了如何在电影模板中运用表格和图片。

1.img标签定义

img 元素向网页中嵌入一幅图像；<img> 标签有两个必需的属性：src属性和alt属性。

一些常用的图片格式：JPG PNG GIF BMP SVG等

基本代码格式：

<img src=" ">

alt ---如果图片是因为浏览器或者路径的问题加载不出来的时候，会显示图片的名字，alt的值

width 、height ------- 设置图片的宽度和高度单位是像素px 或百分比（X%）一定要遵循图片原本的高度和宽度的比例

border ------- 边框默认的取值是0 >=1整数边框越来越粗

align --------- top bottom middle left right ----- 图片于文字的位置默认的是bottom

title ------- 图片标题，鼠标悬停在图片上会出现属性的取值

位图：

usemap属性

<map>和<erea>连用

shape-----鼠标点击的形状 rect----矩形 circle----圆形

coords----被点击大小的取值

2.多媒体标签

<audio> ------ 引入的是音频

<video> --------- 引入视频

controls ------ 表示的是视频或者音频播放器的组件如果是音频（背景音乐不写这个属性）autoplay -------- 自动播放

3.表格

<table> 标签定义 HTML 表格

表头	thead
行	tr
列	td
表格主体（正文）	tbody
表格的页脚（脚注或表注）	tfoot
边框 >=0 默认是0 没有边框	border

代码

<html>
<body>

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

</body>
</html>

代码运行结果

3.1表格的宽和高

表格的宽	width
表格的高	height

3.2表格的对齐方式

align属性---center(居中) left(居左) right(居右) 默认的是居左（left）

3.3表格的背景

背景颜色	bgcolor
背景图片	background

3.4表格的间距和边距

间距：单元格和单元格之间的距离单位--像素（px）

边距：单元格内像素距离单元格的距离单位--像素（px）

间距	cellspacing
边距	cellpadding

<table border="1" width="300" height="200" align="center" 
cellpadding="10" cellspacing="10" bgcolor="pink" background="#(照片路径)">

补充：

如果table和tr同时设置了不同的高度，tr的优先级高

如果tr和td同时设置了不同高度，哪个高就取哪个（哪个值大取哪个）

代码：

<table  width="300" border="1">
    <tr height="50" bgcolor="#cccccc">
        <td height="10">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr height="30" bgcolor="#999">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr height="80" bgcolor="#666">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

呈现的效果

3.5表格的嵌套:在表格内嵌套一个表格

<table border="1" width="300px">
    <tr>
        <td>&nbsp;</td>
        <td>
            <table border="1" width="1000px"  align="center">
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

上代码呈现的效果

3.6表格的合并

rowspan	列	垂直方向跨行
colspan	行	水平方向夸列

合并前的代码和效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="1" width="300px"  align="center">
                <tr>
                    <td >&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td >&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td >&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
            </table>
</body>
</html>

效果

合并行后的代码和效果

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="1" width="300px"  align="center">
                <tr>
                    <td rowspan="3">&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
            </table>
</body>
</html>

效果：

合并列后的代码和效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="1" width="300px"  align="center">
                <tr>
                    <td colspan="3">&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
            </table>
</body>
</html>

效果：

练习：电影模板

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>热门电影</title>
</head>
<body>
	<h1>热门电影板块</h1><hr>
	<table width="1000" height="10">
		<tr>
			<td>最近热门电影</td>
			<td>热门</td>
			<td>最新</td>
			<td>豆瓣高分</td>
			<td>冷门佳</td>
			<td>华语</td>
			<td>欧美</td>
			<td>日本</td>
			<td><a href="https://v.qq.com/">更多>></a></td>
		</tr>
	</table>
	<hr>
	<table width="500" height="500">
		<tr>
			<td>&nbsp;<img src="C:\Users\王\Desktop\照片\1.png"></td>
			<td>&nbsp;<img src="C:\Users\王\Desktop\照片\2.png"></td>
			<td>&nbsp;<img src="C:\Users\王\Desktop\照片\1.png"></td>
		</tr>
			<tr>
			    <td>&nbsp;<img src="C:\Users\王\Desktop\照片\2.png"></td>
			    <td>&nbsp;<img src="C:\Users\王\Desktop\照片\1.png"></td>
			    <td>&nbsp;<img src="C:\Users\王\Desktop\照片\2.png"></td>
			</tr>
			    <tr>
			    	<td>&nbsp;<img src="C:\Users\王\Desktop\照片\1.png"></td>
			    	<td>&nbsp;<img src="C:\Users\王\Desktop\照片\2.png"></td>
			    	<td>&nbsp;<img src="C:\Users\王\Desktop\照片\1.png"></td>
				</tr>
	</table>
</body>
</html>

效果：