【HTML--多媒体标签、表格标签、超链接】

bear&song

已于 2023-06-14 15:03:44 修改

阅读量1k

点赞数

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

于 2023-06-12 17:05:21 首次发布

本文链接：https://blog.csdn.net/jsj18700625723/article/details/131167094

版权

Web前端基础专栏收录该内容

3 篇文章 1 订阅

订阅专栏

文章目录

前言
一、多媒体标签
二、表格标签
三、超链接

提示：以下是本篇文章正文内容，下面案例可供参考

前言

本文用到可用路径的知识，以下介绍了三种路径
网络路径：一般由http或者https开头的存在于网络上的图片地址
绝对路径：从根目录开始一层一层向下递进，直到找到目标文件所在位置
相对路径：即从当前文件所在路径出发，去寻找资源文件。

一、多媒体标签

1.图片标签

<img></img>  img标签就是用来将图片显示在页面上的标签

图片格式

1、gif：是动图，他一般只支持256色,所以占据空间小，表现效果差。
2、jpg：有损压缩的格式图像，所以占据空间小，它支持256256256色，但是表现效果略微有一丢丢差，并且它不支持透明通道。
3、png：无损压缩的格式，占据空间中低，他因为有透明通道的关系所以他最可以是32位真彩色
4、bmp：无损格式，文件中保存的是关于图像的像素信息，支持透明，占据空间大

标签参数

src是source即资源路径的缩写，开发者需要将图像的路径填在src中才能让图片正常显示
width可用来控制标签的宽度，可以填具体的像素值也可以写百分比
height 可用来控制标签高度，可以填写具体的像素值也可以填写百分比
当填写宽高的时候如果使用百分比，务必要确认他的父容器有一个确定值
alt属性中的内容，当图像无法正常显示时，会出现在屏幕上
title属性主要任务是，当鼠标选停在图像上时，可以显示出图像的标题，当alt不存在时，可以代替alt

代码演示

<html>
    <head>
         <meta charset="UTF-8">
         <title>WEB前端第二天</title>
     </head>
     <body>
               <img src="./dy1.jgp" atl=""  title="抖音"> 相对路径</img><br>
               <img src="D:/douyin/微信图片_20230612143030.jpg" atl="douyin" width="100",height="100" >绝对路径</img><br>
               <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.i-0fVFDPO-VXsQDDLUAxZgHaHa?w=186&h=186&c=7&r=0&o=5&dpr=2.7&pid=1.7" >网络路径 </img> <br>

    </body>
</html>

在这里插入图片描述

2.音频标签

音频标签 <audio></audio>
controls是布尔型的属性，用于显示当前标签的控制界面，当你写出它的那一刻就表示启用，如果你不想用它，删掉即可 
autoplay自动播放
loop 循环 
muted 静音

3.视频标签

视频标签 <videao></videao>
视频标签的参数和音频标签的参数相同
视频标签不允许再有音量的情况自动播放，如果需要自动播放那么请加上muted属性
需要注意的是controls和autoplay属性，在HTML中以后会有大量这种键和值一致的属性，这种属性在h5的标准下都可以直接写名称即可，如上面代码。
controls 表示显示播放器的组件，一般视频肯定要显示的，音频根据情况，如果是背景音乐的话，就不用显示。
autoplay 表示自动播放，只要支持h5标准的浏览器都支持这个属性

二、表格标签

表格在网页制作中主要的作用是用来描述具有二维结构的数据。包括的标签有table、thead、tbody、tfoot、tr、td。
① table标签用于定义一个表格。一个表格必须包含至少一个横行组，每一个横行组被分成三个部分：头、主干、尾。头和尾是可选的。thead元素定义头，tfoot元素定义尾，tbody元素则定义主干。
② thead标签元素定义头。
③ tr>标签用于定义一行。
④ td>标签用于定义一列。td 也叫做单元格，必须放在tr中。
⑤ tbody元素则定义主干。
⑥ tfoot元素定义尾。

表格标签的参数和属性

border=“n”，n 是一个数字，单位是像素，当 n = 0 时表示表格没有边框，当 n >0 时表示表格有边框，边框的宽度是 n 像素，注意n必须为整数！！
width 属性表示表格的宽度，height 属性表示表格的高度。width=n 或 m% height=n 或 m%，n 代表一个数值，单位为像素（px）,m 代表 0-100 的数，即 0%-100%，这个百分比是相对于表格所在的容器的百分比。运行结果如图3-14所示，表格的宽度是 200px ，高度是 100px
align属性表示表格的对齐方式，主要用left、center、right这些值，表示左对齐、居中对齐、右对齐等.
gcolor 属性表示表格的背景颜色，Background 属性表示表格的背景图像。
Background 的背景图像会平铺整个表格，类似于 Body 的背景图像效果，背景图像的路径建议使用相对路径。
cellpadding 表示表格的边距，cellspacing 表示表格的间距。边距是指单元格内的元素距离单元格边缘的距离，间距是指单元格与单元格之间的距离。cellpadding=“10” 表示边距为 10 px，cellspacing="10"表示间距为 10 px，如果不设置 cellpadding 和 cellspacing ，它们的默认值是 2px

表格标签的嵌套

表格的嵌套是指将一个表格放在另外一个表格的单元格中。可以用来布局

<html>
<head>
	<meta charset='UTF-8'>
	<title>这是表格嵌套</title>
</head>
<body>
	<table width='300' border="1">
		<tr>
		  <td>第一行第一列</td>
		  <td>第二行第二列</td>
		</tr>
		<tr>
		  <td>第二行第一列</td>
		  <td>
		   <table width="200" border='1'>
		     <td>嵌套列1</td>
		     <td>嵌套列2</td>
		   </table>
		   </td>
		</tr>
</body>
</html>

在这里插入图片描述

表格标签的合并

跨行合并–rowspan

代码演示

<htlm>
<head>
	<meta charset=UTF-8>
	<title>这是跨行合并</title>
<body>
	<table width="500" border="2">
		<tr>
	    	<td rowspan="2" >
	    	 10001平均成绩
	    	</td>
	    	<td>笔试</td>
	    	<td>68</td>
		</tr>
		<tr>
			<td>机试</td>
			<td>72</td>
		</tr>
	</table>
</head>
</htlm>

在这里插入图片描述

跨列合并-- colspan

<html>
<head>
	<meat charset="UTF-8">
	<title>这是跨行合并</title>
</head>
<body>
	<table width="300" heigth="300" border="1">
	<tr>
		<td colspan="2" align="center" >
			1001班平均成绩
	    </td>
	</tr>
	<tr>
		<td>笔试</td>
		<td>机试</td>
	</tr>
	<tr>
		<td>68</td>
		<td>72</td>
	</tr>
	</table>
</body>
</html>

在这里插入图片描述

三、超链接

文字超链接

HTML 文件最重要的应用之一就是超链接，通过网页上提供的超链接功能，用户可以链接到网络上的其他网页。如果没有超链接，就只能在浏览器地址栏中输入各个网页的网址，这是一件很麻烦的事。实现超链接的标签是a。<a></a>

<!DOCTYPE html>
<html >
    <head>
        <meta charset="utf-8" />
        <title>超链接</title>
    </head>
    <body>
        这是第一个文件，
        点击<a href="second.html" target="_blank">这里</a>转到第二个文件。
    </body>
</html>

a标签实现了超链接，href 属性用来明确链接的目标文件，target 属性用来明确目标文件的打开方式，**target="_blank"**时表示在新窗口中打开目标文件，省略时表示在原窗口中打开目标文件。运行后显示如图 3-21 所示的效果，当用鼠标点击“这里”时网页转到了目标文件 second.html 运行，实现了超链接

注意：target属性，默认target默认值为self，表示当前选项卡打开页面，如果修改为_blank，表示使用新的窗口打开页面
在这里插入图片描述
##锚链接

在制作网页时可能会遇到网页内容过长的情况，这样用户浏览起来就不太方便。要解决这个问题可以在网页的上部创建一个导航，利用导航直接链接到下面定义好的锚点。和淘宝这些网络的楼层效果类似，就是让页面定位到需要的地方，注意在链接的href属性上加“#id”，之后在需要停止的位置的标签上设置对应的id即可。

图片超链接

为图片添加超链接只要将图片源码写在超链接标签a中，当鼠标点击图片时会打开“rose.html”文件。

<!DOCTYPE html>
<html >
    <head>
        <meta charset="utf-8" />
        <title>超链接</title>
    </head>
    <body>
        <a href="rose.html">
            <img src="images/rose.jpg" width="200" height="150" border="0">
        </a>
    </body>
</html>

热区超链接

有些时候希望一个图片能添加多个链接，这时要将图片分割出多个链接区域，每一个区域叫一个热区，每一个热区都可以实现一个链接。热区的制作主要靠的是map标签和area标签。map标签用于在图片上划定区域，把这个区域称作地图，map的 name 属性是地图的名称。area标签可以理解为一个具体的区域，它被包含在map中。图片通过map的名称引用area的区域，并为每一个area设置超链接。

注意：热区的形状有三种，rect(矩形)、circle(圆形)、poly (多边形)。