HTML中div/span标签、音频标签、视频标签与特殊字符

目录

div/span标签

音频标签

视频标签

特殊字符


div/span标签

在HTML中,<div></div><span></span>是没有语义的,可以将两个标签当做两个盒子,里面可以容纳内容

两个标签有以下两个特点:

1. <div> 标签用来布局,但是现在一行只能放一个<div>。( 大盒子)

2. <span> 标签用来布局,一行上可以多个 <span>。(小盒子)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>div/span标签</title>
</head>
<body><div>这里是div标签内容</div>这里不和上面内容同行<br /><span>这里是span标签内容</span>这里和前面内容同行<span>这里和前面内容同行</span>
</body>
</html>

效果如下:

音频标签

在HTML中,可以使用<audio></audio>标签为网页添加音频元素

在HTML中,音频标签有下面的三个属性

  1. src属性:音频所在的路径,与图片路径类似
  2. controls属性:用于控制音频是否显示播放控件
  3. autoplay属性:用于控制音频是否自动播放(大部分浏览器并不支持)
  4. loop属性:用于控制音频是否循环播放

📌

在HTML中,目前支持三种音乐文件格式:.mp3/.wav/.ogg

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>音频链接属性测试</title>
</head>
<body><h1>下面是音频标签测试</h1><!-- 不加controls属性时不显示音频 --><img src="images/f3d3572c11dfa9ec8a1365456888e003918fa0ec6b13.webp" alt="错误显示图片将显示此文字"><audio src="audio/音频.mp3" controls autoplay loop></audio><!-- autoplay属性用于测试是否会自动播放,loop属性用于测试是否会循环播放,但大部分浏览器不支持 -->
</body>
</html>

视频标签

在HTML中,可以使用<video></video>标签为网页添加视频元素

在HTML中,视频标签有以下六个属性:

  1. src属性:视频的路径,与图片类似
  2. controls属性:用于控制是否显示视频控件
  3. autoplay属性:用于控制视频是否自动播放(大部分浏览器不支持)
  4. loop属性:用于控制视频是否循环播放
  5. widthheight属性:用于控制视频的高和宽,与图片类似
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>视频标签测试</title>
</head>
<body><h1>下面是视频标签测试</h1><!-- 不加controls属性将显式视频封面 --><video src="video/视频.mp4" controls autoplay loop width="1920px" height="1080px"></video>
</body>
</html>

📌

在HTML中,目前支持三种视频格式:.mp4/.webM/.ogg

特殊字符

在 HTML 页面中,一些特殊的符号很难或者不方便直接使用,此时我们就可以使用下面的字符来替代

特殊字符

描述

字符代码

空格

&nbsp;

<

小于号

&lt;

>

大于号

&gt;

&

和符

&amp;

人民币

&yen;

©

版权

&copy;

®

注册商标

&reg;

°

&deg;

±

正负号

&plusmn;

×

乘号

&times;

÷

除号

&divide;

²

平方

&sup2;

³

立方

&sup3;

📌

注意每一个字符代码末尾都需要分号;

示例代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>特殊字符代码</title>
</head>
<body>这里是度符号:&deg; &deg;
</body>
</html>

效果如下:

📌

其余字符代码使用类似

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/624844.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Pytorch手撸Attention

Pytorch手撸Attention 注释写的很详细了&#xff0c;对照着公式比较下更好理解&#xff0c;可以参考一下知乎的文章 注意力机制 import torch import torch.nn as nn import torch.nn.functional as Fclass SelfAttention(nn.Module):def __init__(self, embed_size):super(S…

一个开源的全自动视频生成软件MoneyPrinterTurbo

只需提供一个视频 主题 或 关键词 &#xff0c;就可以全自动生成视频文案、视频素材、视频字幕、视频背景音乐&#xff0c;然后合成一个高清的短视频。 一&#xff1a;功能特性 完整的 MVC架构&#xff0c;代码 结构清晰&#xff0c;易于维护&#xff0c;支持 API 和 Web界面…

python生成二维码

要在Python中生成二维码&#xff0c;可以使用第三方库qrcode。首先&#xff0c;确保已经安装了qrcode库&#xff1a; pip install qrcode然后&#xff0c;使用以下代码生成二维码&#xff1a; import qrcodedata "https://mp.csdn.net/mp_blog/creation/editor?spm100…

Adobe Premiere Pro将加入AI生成式功能,以提高视频编辑的效率;OpenAI宣布在东京设立亚洲首个办事处

&#x1f989; AI新闻 &#x1f680; Adobe Premiere Pro将加入AI生成式功能&#xff0c;以提高视频编辑的效率 摘要&#xff1a;Adobe宣布&#xff0c;将为Premiere Pro引入由生成式AI驱动的新功能&#xff0c;以提高视频编辑的效率。这些功能包括“生成扩展”&#xff0c;能…

人类连接的桥梁:探索Facebook如何连接世界

随着技术的发展和全球化的进程&#xff0c;我们的世界正在变得越来越紧密相连。在这个过程中&#xff0c;社交媒体平台扮演了一个至关重要的角色&#xff0c;为人们提供了一个跨越国界、文化和语言的交流平台。其中&#xff0c;Facebook作为全球最大的社交媒体平台&#xff0c;…

Redis从入门到精通(十八)多级缓存(三)OpenResty请求参数处理、Lua脚本查询Redis和Tomcat

文章目录 前言6.5 实现多级缓存6.5.3 请求参数处理6.5.3.1 获取参数API6.5.3.2 获取参数并返回 6.5.4 查询Tomcat6.5.4.1 发送HTTP请求的API6.5.4.2 封装HTTP工具6.5.4.3 实现商品查询6.5.4.4 使用CJSON工具类6.5.4.5 基于商品ID实现负载均衡 6.5.5 查询Redis6.5.5.1 Redis缓存…

盲盒商城小程序(有米就出)

一款前端采用uniapp&#xff0c;后端采用Django框架开发的小程序&#xff0c;包含后台管理&#xff0c;如有人需要可联系演示功能&#xff08;个人开发&#xff0c;可商用/学习&#xff09;。 部分截图如下&#xff1a;

记录一下易语言post get使用WinHttp的操作

最近在学易语言&#xff0c;在进行通讯的时候&#xff0c;出现一些问题&#xff0c;现在记录下来&#xff0c;避免以后继续忘记&#xff0c; 先声明文本型变量jsonPostData jsonPostData &#xff1d; “{hostname:” &#xff0b; hostnameTxt &#xff0b; “,hardcode:” &…

游戏前摇后摇Q闪E闪QE闪QA等操作

备注&#xff1a;未经博主允许禁止转载 个人笔记&#xff08;整理不易&#xff0c;有帮助&#xff0c;收藏点赞评论&#xff0c;爱你们&#xff01;&#xff01;&#xff01;你的支持是我写作的动力&#xff09; 笔记目录&#xff1a;学习笔记目录_pytest和unittest、airtest_w…

AR、VR、MR 和 XR——它们的含义以及它们将如何改变生活

我们的工作、娱乐和社交方式正在发生巨大变化。远程工作的人比以往任何时候都多,屏幕已成为学习和游戏的领先平台。这种演变为元宇宙铺平了道路——如今,像 Meta Quest 2 这样的流行设备将您无缝地带入一个身临其境的世界,您可以在其中购物、创作和玩游戏、与同事协作、探索…

RAKsmart:硅谷裸机云多IP服务器性能评测

在云计算领域&#xff0c;裸机云作为一种结合了传统物理服务器与云计算优势的服务模式&#xff0c;近年来备受关注。硅谷裸机云作为业界佼佼者&#xff0c;以其出色的性能和稳定性赢得了众多用户的青睐。今天&#xff0c;我们就来评测一下硅谷裸机云的多IP服务器性能。 首先&am…

vscode i18n Ally插件配置项

.vscode文件&#xff1a; {"i18n-ally.localesPaths": ["src/lang"], //显示语言&#xff0c; 这里也可以设置显示英文为en,// 如下须要手动配置"i18n-ally.keystyle": "nested", // 翻译路径格式 (翻译后变量格式 nested&#xff1a…