html多媒体标签，元素的使用，标签大全

最新推荐文章于 2024-02-02 00:00:00 发布
最新推荐文章于 2024-02-02 00:00:00 发布
阅读量502 收藏 2
点赞数 1
分类专栏： Http 文章标签： html html5 前端
原创文章未经本人允许，禁止转载和引入！
本文链接：https://blog.csdn.net/m0_48462648/article/details/123079463
版权

这里写目录标题

图片标签img

<body>
		<!--
			img 图片
			src 图片的路径
				可以是本地图片,也可以是网络图片
			width 宽度
			height 高度
			title 当鼠标悬停时 显示的文字
			alt   图片加载失败时显示的文字
			
		路径问题
			/ 代表一层目录
			../ 代表上一层目录
			
		-->
		<img src="img/camera.jpg" width="300px" height="300px" title="bjsxt" alt="图片加载失败"/>
		<img src="http://img.yzt-tools.com/20200327/549203c6260af66500df4e8465717091.jpg" 
			width="300px" 
			height="300px" alt="图片加载失败"/>
	</body>

音频标签audio

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>音频</title>
</head>
<body>
<!--
audio：播放音频
controls:显示控制面板
loop:进入单曲循环
autoplay：自动播放  google浏览器 禁止了此功能
muted:默认静音
-->

<audio src="img/纸短情长.mp3" controls="controls" loop autoplay muted>

    您的浏览器不支持播放音频文件

</audio>

</body>
</html>

视频标签video

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>视频</title>
</head>
<body>
<!--
    video 播放视频文件
    src:视频的地址
    width:视频播放窗口的宽度
    height:视频播放窗口的高度
    loop：循环播放视频
    muted: 静音播放
    autoplay:自动播放
    poster:视频播放前 加载的图片
-->
<video controls src="img/dy.mp4" width="400px" height="600px" loop muted poster="img/兵马俑.jpg" autoplay>
    您的浏览器不支持播放视频
</video>
</body>
</html>

列表标签

有序列表

<ol type="I">
    <li>java</li>
    <li>大数据</li>
    <li>人工智能</li>
    <li>WEB前端</li>
</ol>

有序列表 :
              ol
              type:可以指定 排序的列表名称
                  1 阿拉伯数字
                  a 小写字母
                  i 小写罗马数字
                  I 大写罗马数字
                  A 大写字母
            -->

无序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--
  无序列表 ul
               type:
              circle 空心圆
              disc 实心圆 （默认的样式） 
              square: 实心的正方形
              -->
<p>您的爱好都有什么？</p>
<ul type="square">
    <li>读书</li>
    <li>看报</li>
    <li>打篮球</li>
    <li>踢足球</li>
</ul>
</body>
</html>

列表嵌套

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--
    你的爱好是什么？
    唱歌
         1.清嗓子
         2.看有没有人抢话筒
         3.青藏高原 压压嗓子
         4.纸短情长
         5.结束
    跑步
    看书
-->
<ul>
    <li>唱歌
        <ol>
            <li>清嗓子</li>
            <li>看有没有人抢话筒</li>
            <li>青藏高原 压压厂子</li>
            <li>纸短情长</li>
            <li>结束</li>
        </ol>
    </li>
    <li>跑步</li>
    <li>看书</li>
</ul>
<hr />
</body>
</html>

在这里插入图片描述

定义列表

Defination list 一般用于图文混排

!--
			defination list
			
			dl 
				dt
				dd
			一般用于图文混排
			dt 一般放图片
			dd 一般用于放文字
		-->
		
		<dl>
			<dt>
				<a href="https://item.jd.com/70314139281.html" target="_blank"> 
					<img src="img/cloth.jpg" />
				</a>
			</dt>
			<dd>
				<p><font color="#E4393C">&yen;<big>129.00</big></font></p>
				<p>
					<font color="grey"  size="2">
						沐秋polo衫男士短袖t恤<br />
						男宽松纯棉半袖男生大码<br />
						体恤衫翻领休闲潮牌胖子<br />
						带领有领
					</font>
				</p>
			</dd>
		</dl>

表格标签

表格在数据展示方面非常简单，并且表现优秀，通过与CSS的结合，可以让数据变得更加美观和整齐

在这里插入图片描述

<body>
		<table align="center" width="50%" border="1px" cellspacing="0px" cellpadding="0px">
				<tr>
					<td>姓名</td>
					<td>年龄</td>
					<td>班级</td>
					<td>分数</td>
				</tr>
				<tr>
					<td>张三丰</td>
					<td>100</td>
					<td>武当001</td>
					<td>100</td>
				</tr>
				<tr>
					<td>张翠山</td>
					<td>30</td>
					<td>武当002</td>
					<td>30</td>
				</tr>
				<tr>
					<td>name1</td>
					<td>10</td>
					<td>一班</td>
					<td>20</td>
				</tr>
				<tr>
					<td>name1</td>
					<td>10</td>
					<td>一班</td>
					<td>20</td>
				</tr>
				<tr>
					<td>name1</td>
					<td>10</td>
					<td>一班</td>
					<td>20</td>
				</tr>
		</table>
</body>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body >
		<!--整个表格
			thead
			tbody
			tfoot
			本身没有任何 的展示内容和展示效果,仅仅是帮助我们将表格划分为多个不同的部分
			
			thead tfoot 如果不写,浏览器在解析代码时,不会自动添加
			tbody 如果不写,浏览器在解析时,会自动添加 ,自动将所有tr放入tbody中
			
			th一般用于替换 td th自带加粗和居中效果 一般用户表格的列名
			
		-->
		<table border="1px" cellspacing="0px"  cellpadding="0px" align="center" width="40%" >
			<!--一行-->
			<thead bgcolor="bisque">
				<tr >
					<th>学号</th>
					<th>姓名</th>
					<th>班级</th>
					<th>分数</th>
					
				</tr>
			</thead>
			<tbody bgcolor="aqua">
				<tr >
					<td>1</td>
					<td>乔峰</td>
					<td>乞讨1班</td>
					<td>100</td>
				</tr>
				<tr >
					<td>2</td>
					<td>虚竹</td>
					<td>少林破戒1班</td>
					<td>98</td>
				</tr>
				<tr >
					<td>3</td>
					<td>段誉</td>
					<td>大理渣男1班</td>
					<td>69</td>
				</tr>
			</tbody>
			<tfoot bgcolor="chocolate">
				<tr>
					<td>总人数</td>
					<td>3</td>
					<td>平均分</td>
					<td>89</td>
				</tr>
				<tr >
					<td>班级排名</td>
					<td>3</td>
					<td>班级总数</td>
					<td>8</td>
				</tr>
			</tfoot>
			
		</table>
		 
		 
		 <table border="1px" cellspacing="0px"  cellpadding="0px" align="center" width="40%" >
			<!--一行-->
			
				<tr >
					<td>学号</td>
					<td>姓名</td>
					<td>班级</td>
					<td>分数</td>
					
				</tr>
			
			
				<tr >
					<td>1</td>
					<td>乔峰</td>
					<td>乞讨1班</td>
					<td>100</td>
				</tr>
				<tr >
					<td>2</td>
					<td>虚竹</td>
					<td>少林破戒1班</td>
					<td>98</td>
				</tr>
				<tr >
					<td>3</td>
					<td>段誉</td>
					<td>大理渣男1班</td>
					<td>69</td>
				</tr>
			
			
				<tr>
					<td>总人数</td>
					<td>3</td>
					<td>平均分</td>
					<td>89</td>
				</tr>
				<tr >
					<td>班级排名</td>
					<td>3</td>
					<td>班级总数</td>
					<td>8</td>
				</tr>
			
			
		</table>
	</body>
</html>

在这里插入图片描述

表格的跨行和跨列

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表格的合并</title>
</head>
<body>
<!--
    th:自带 加粗 居中的效果
    rowspan:行合并
    colspan:列合并
-->
<table align="center" width="50%" border="1" cellpadding="0px" cellspacing="0px">
    <tr>
        <th colspan="3">学生成绩单</th>
    </tr>
    <tr>
        <td>姓名</td>
        <td>学科</td>
        <td>分数</td>
    </tr>
    <tr>
        <td rowspan="2">张三</td>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>89</td>
    </tr>
    <tr>
        <td rowspan="2">李四</td>
        <td>数学</td>
        <td>88</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>99</td>
    </tr>
</table>
</body>
</html>

表格的嵌套

在这里插入图片描述

	<table border="1px" width="500px" cellspacing="0px">
		<tr>
			<th colspan="3">学生成绩单</th>
		</tr>
		<tr>
			<td>姓名</td>
			<td>学科</td>
			<td>分数</td>
		</tr>
		<tr>
			<td>张三</td>
			<td colspan="2" rowspan="2">
				<table border="1px" cellspacing="0px" width="100%">
					<tr>
						<td>数学</td>
						<td>99</td>
					</tr>
					<tr>
						<td>语文</td>
						<td>100</td>
					</tr>
					<tr>
						<td>数学</td>
						<td>100</td>
					</tr>
					<tr>
						<td>语文</td>
						<td>99</td>
					</tr>
				</table>
				
			</td>
		</tr>
		<tr>
			<td>李四</td>
		</tr>
	</table>
</body>

内嵌框架 iframe

内嵌框架是用于在网页中嵌入另一个网页并让它在当前网页中显示.
添加内嵌框架的语法:

<iframe src=" URL "></iframe>

URL 指定独立网页的路径.
我们可以通过案例来感受内嵌框架：
iframe结合超链接标签实现页面内容动态变化:

在这里插入图片描述

<body>
		<a href="http://www.jd.com" target="aaa">京东</a><br />
		<a href="http://www.tmall.com" target="aaa">天猫</a><br />
		<a href="https://www.sina.com.cn/" target="aaa">新浪</a><br />
		<iframe name="aaa" src="http://www.bjsxt.com" width="100%" height="500px"></iframe>
	</body>
DNCS高级工程师
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML5基础知识-HTML5多媒体标签.pptx
05-06
单元一 HTML5基础知识端基础前WebHTML5多媒体标签1常用多媒体格式2播放音频audio播放视频video34其他多媒体标签1常用多媒体格式音频格式1、WAV 微软和IBM共同开发的PC标准声音格式，文件后缀名.wav。2、MP3 MP3是一种音频压缩技术。文件后缀名.MP3，它被设计用来大幅度地降低音频数据量。3、OGG（Ogg Vorbis） Ogg全称应该是OGG Vobis(ogg Vorbis) 是一种较新的音频压缩格式，文件后缀名.ogg 。1常用多媒体格式视频格式1、MP4 MP4是一套用于音频、视频信息的压缩编码标准，文件扩展名.MP4。2、SWF swf(shock wave flash)是Macromedia（现已被ADOBE公司收购）公司的动画设计软件Flash的专用格式，扩展名为.swf。swf 可以用Adobe Flash Player打开，浏览器必须安装Adobe Flash Player插件。3、WebM WebM由Google提出，是一个开放、免费的媒体文件格式。扩展名为.webm。2使用音频HTML5 规定了一种通过 audio 元素来包含音频
HTML中多媒体标签
weixin_64311421的博客
01-18 239
不能不知道HTML中的多媒体标签
HTML 常用的多媒体标签
LAin的博客
11-23 2381
1.<video> 标签 1）<video> 标签：块级标签，用于放置视频。 2）src 属性——视频文件网址。 width、height 属性——播放器宽、高，单位像素。 poster 属性——封面图片URL。 preload 属性——规定是否在页面加载后载入视频。如果设置了 autoplay 属性，则忽略该属性。（auto - 当页面加载后载入整个视频、meta - 当页面加载后只载入元数据、none - 当页...
【HTML--多媒体标签、表格标签、超链接】
jsj18700625723的博客
06-12 950
多媒体标签，表格标签，超链接
【HTML5】HTML5 多媒体标签 ① ( audio 音频标签 | 音频标签常见属性值设置 | 音频标签默认代码设置 | 音频标签设置多种类型音频文件 )
热门推荐
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-19 1万+
一、HTML5 多媒体标签 二、音频标签 三、音频标签代码示例 ( 默认操作 ) 四、音频标签代码示例 ( 插入 mp3 / ogg 两种格式的音频 )
三天学会HTML5——多媒体元素的使用
02-26
使用Google地图获取位置信息多媒体是互联网中的最重要的一部分，无论访问的是哪种类型的网页，视频或音频触手可及，在之前实现这些功能对开发人员来说可能非常痛苦，必须依赖Object标签，调用第三方软件来加载，如...
html标签之Object和EMBED标签详解
01-19
请使用此元素向您的 XHTML 页面添加多媒体。此元素允许您规定插入 HTML 文档中的对象的数据和参数，以及可用来显示和操作数据的代码。 <object> 标签用于包含对象，比如图像、音频、视频、Java applets、...
HTML5所有标签汇总及标签意义解释
12-14
结构标签：(块状元素) 有意义的div  标记定义一篇文章 标记定义一个页面或一个区域的头部 标记定义导航链接 标记定义一个区域 标记定义页面内容部分的侧边栏 标记定义文件中一个区块的相关信息...多媒体交互标签
HTML5 通过Vedio标签实现视频循环播放的示例代码
11-20
标签的作用是在 HTML页面中嵌入多媒体元素 <embed src="1.swf"width="400"> <object> 标签的作用是在 HTML页面中嵌入多媒体元素 <object data="1.swf"width="400"></object> 存在的问题： ...
【HTML 基础】多媒体标签
最新发布
好久不见的流星
02-02 646
以上是一些基本的 HTML 多媒体标签，通过它们，你可以在网页中嵌入音频、视频、其他网页，甚至实现动态图形的绘制。这些标签提供了极大的灵活性，使得开发者能够创建更为生动和交互的用户体验。在实际应用中，结合 CSS 和 JavaScript，你可以进一步掌握多媒体标签的强大功能，为用户提供更出色的网页体验。
H5多媒体标签
ayhg1的博客
06-04 370
H5多媒体标签 在 HTML5 之前，如果想在网页上播放音频和视频，则需要安装第三方插件，常用的是 Flash 。使用插件有以下几方面缺点：第一，比较繁琐；第二，容易出现安全性问题；第三，大部分情况下只能在计算机上使用。传统的HTML在播放 HTML5 DOM 为 和 元素提供了方法、属性和事件。这些方法、属性和事件允许使用 JavaScript 来操作 和 元素。下面对这两个标签分别讲解。 audio标签（音频播放） 本标签主要在页面中加载音频，进行播放，但是播放格式是有限制的。如下表：
HTML5中的多媒体标签的使用
YANGMENGZHENG的博客
10-27 1104
目录 一、什么是多媒体 二、视频标签 1、视频文件的格式 2、视频标签的用法 （1)video标签 三、音频标签 1、音频文件的格式 2、音频标签的用法 （1)audio标签 四、滚动标签 (1)、文字的滚动 (2)、图片的滚动 (3)、示例 ​ 一、什么是多媒体 多媒体来自多种不同的格式。它可以是您听到或看到的任何内容，文字、图片、音乐、音效、录音、电影、动画等等。 在因特网上，您会经常发现嵌入网页中的多媒体元素，现代浏览器已支持多种多媒体格式。 浏览器支持...
HTML-多媒体标签
小石头
02-19 4211
HTML-多媒体标签
html多媒体标签
十三阿哥的博客
05-24 69
【代码】html多媒体标签。
HTML超链接、多媒体和列表
nangongwenxuan的博客
07-12 285
本文介绍了HTML中的超链接、多媒体和列表三个常用的元素。超链接用于创建网页间的链接，使用户能够点击跳转到其他页面或位置。多媒体元素允许在网页中插入图像、音频和视频，丰富网页的内容展示。列表元素用于创建有序或无序的列表，提供清晰的内容结构和组织。通过学习和合理应用这些元素，我们可以为网页增添交互性和丰富的内容效果，提升用户体验和吸引力。
HTML——媒体标签
m0_62379761的博客
04-15 265
HTML——媒体标签，包括图片，音频，视频
【自学HTML笔记第3篇】HTML中的媒体标签
m0_64231944的博客
10-22 266
1,图片标签：2.超连接标签：3.音频标签：4.视频标签：
【HTML 教程】多媒体标签
web前端开发
10-11 545
作者 | 阮一峰除了图像，网页还可以放置视频和音频。1、<video><video>标签是一个块级元素，用于放置视频。如果浏览器支持加载的视频格式...
9、HTML基础——多媒体元素
lvh98的博客
10-12 375
多媒体元素 video元素 audio元素 controls、autoplay、muted、loop属性 以及兼容性问题的解决方案
html object标签
07-27
为了保证兼容性，通常我们会同时使用这两个元素，浏览器会自动忽略不支持的标签。同时使用这两个元素时，应将<embed>标签放在<object>标签的内部。\[3\] #### 引用[.reference_title] - *1* *2* [html中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DNCS高级工程师

你的创作是我打赏的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值