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>

效果如下:

📌

其余字符代码使用类似

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

微软正式发布Copilot for Security

微软公司近日宣布&#xff0c;其备受期待的安全自动化解决方案——Copilot for Security现已全面上市&#xff0c;面向全球用户开放。这一创新工具的推出标志着微软在提升企业安全防护能力方面迈出了重要一步&#xff0c;同时也为安全专业人士提供了强大的支持。 Copilot for …

MapReduce 机理

1.hadoop 平台进程 Namenode进程: 管理者文件系统的Namespace。它维护着文件系统树(filesystem tree)以及文件树中所有的文件和文件夹的元数据(metadata)。管理这些信息的文件有两个&#xff0c;分别是Namespace 镜像文件(Namespace image)和操作日志文件(edit log)&#xff…

mp3转m4a怎么转?4种方法无损转换音频~

M4A文件格式&#xff0c;或称MPEG-4 Audio&#xff0c;崭露头角于音频时代。其诞生旨在提供更高保真度和更高效的音频压缩&#xff0c;为多媒体应用和苹果设备赋能。 M4A格式与MP3格式的优缺点对比 M4A与MP4格式密不可分&#xff0c;均属于MPEG-4标准。相较MP3&#xff0c;M4A…

C++入门之类和对象

C入门之类和对象 文章目录 C入门之类和对象1. 类的6个默认对象2. 构造函数2.1 概念2.2 特性2.3 补丁 3. 析构函数3.1 概念3.2 特性3.3 总结 4. 拷贝构造函数4.1 概念4.2 特性4.3 总结 1. 类的6个默认对象 如果一个类中什么都没有&#xff0c;那么这个类就是一个空类。但是&…

ubuntu23.10.1 php8.2安装

1、更新镜像源 apt update2、安装php 如果在这里不知道自己Linux能安装什么版本的php,可以使用apt install php,会给你提示&#xff0c;根据提示自己选择版本安装 apt install php我这里是php8.2-cli apt install php8.2-cli其他扩展包&#xff0c;在后面加个-可以查看&…

4月16号总结

java学习 网络编程 1.网络分层 网络分层是将网络通信划分为不同的逻辑层次&#xff0c;每一层负责特定的功能&#xff0c;从而实现网络通信的模块化和标准化。常用的网络分层模型包括OSI&#xff08;开放系统互联&#xff09;模型和TCP/IP模型。 特点和作用&#xff1a; 分…

潮玩宇宙小程序定制大逃杀游戏APP开发H5游戏

游戏名称&#xff1a;潮玩宇宙大逃杀 游戏类型&#xff1a;休闲竞技类小游戏 游戏目标&#xff1a;玩家通过选择房间躲避杀手&#xff0c;生存下来并瓜分被杀房间的元宝。 核心功能 房间选择&#xff1a;玩家进入游戏后&#xff0c;可以选择一间房间躲避杀手。杀手行动&…

IP组播简介

定义 作为IP传输三种方式之一&#xff0c;IP组播通信指的是IP报文从一个源发出&#xff0c;被转发到一组特定的接收者。相较于传统的单播和广播&#xff0c;IP组播可以有效地节约网络带宽、降低网络负载&#xff0c;避免广播堵塞带来的诸如摄像头花屏&#xff0c;视频马赛克等…

【Index to Lectures or Courses】

文章目录 1 Speech / Course2 Material3 Basic knowledge and tools4 职位缩写你知道几个? 1 Speech / Course 《中国文化文概论》&#xff08;武汉大学&#xff09;【Paper material】【阅读笔记】【Reading Notes】&#xff08;1&#xff09;【Reading Notes】&#xff08;…

PotPlayer 图像截取

PotPlayer 图像截取 1. PotPlayer2. PotPlayer 下载2.1. PotPlayer 240305 3. 图像截取References 1. PotPlayer http://www.potplayercn.com/ PotPlayer 是 KMPlayer 原作者姜勇囍进入新公司 Daum 之后推出的&#xff0c;继承了 KMPlayer 所有的优点&#xff0c;拥有异常强大…

一、 蓝牙的发展史

一、 蓝牙的发展史 遇见蓝牙 第一次遇见蓝牙是2006年&#xff0c;室友拿着一款摩托罗拉的翻盖手机向我炫耀它的蓝牙功能&#xff0c;那时候我不记得有没有蓝牙耳机问世&#xff0c;因为当时我嫉妒的一再追问他&#xff0c;有这蓝牙有什么用&#xff1f; 他给我说用来传输照片…

机器学习-11-基于多模态特征融合的图像文本检索

总结 本系列是机器学习课程的系列课程&#xff0c;主要介绍机器学习中图像文本检索技术。此技术把自然语言处理和图像处理进行了融合。 参考 2024年&#xff08;第12届&#xff09;“泰迪杯”数据挖掘挑战赛 图像特征提取&#xff08;VGG和Resnet特征提取卷积过程详解&…

【编程Tool】DevC++的安装配置及使用保姆级教程

目录 前言&#xff1a;软件介绍 1.软件下载及安装 1.1. 双击可执行文件进行安装 2.软件配置 2.1.选择语言 2.2 同意相关协议 2.3.组件保持默认并点击Next 2.4. 修改安装路径 2.5. 等待安装 2.6. 点击Finish&#xff0c;完成安装 2.7 选择语言 2.8.个性化设置 2.9. 点击OK&…

C++奇迹之旅:隐含的this指针

文章目录 &#x1f4dd;this指针&#x1f320; this指针的引出&#x1f309; this指针的特性&#x1f309;this指针存在哪里 &#x1f320;思考&#x1f320;C语言和C实现Stack的对比&#x1f309; C语言实现&#x1f309; C实现 &#x1f6a9;总结 &#x1f4dd;this指针 在C…

Vue(二)

文章目录 1.条件渲染1.关于js中的false的判定2.基本介绍3.v-if1.需求分析2.代码实例 4.v-show实现5.v-if与v-show比较6.课后练习 2.列表渲染1.代码实例2.课后练习 3.组件化编程1.基本介绍2.实现方式一_普通方式2.实现方式二_全局组件方式3.实现方式三_局部组件方式 4.生命周期和…

拥抱企业消费新纪元,胜意科技2024代理人大会圆满落幕

因信赖相聚&#xff0c;为共赢而来。近日&#xff0c;由胜意科技主办的“做好生意&#xff0c;拥抱胜意——2024代理人大会”在武汉成功召开&#xff0c;吸引了全国各地百余家TMC生态合作伙伴齐聚一堂&#xff0c;共同探讨数字化浪潮下的差旅管理实践&#xff0c;激发增长新智慧…

十大排序——9.桶排序

这篇文章我们来介绍一下桶排序 目录 1.介绍 2.代码实现 3.总结与思考 1.介绍 桶排序和计数排序一样&#xff0c;都不是基于比较进行排序的。 下面通过一个例子来理解一下桶排序吧。 首先&#xff0c;给你一个无序数组[ 20,18,28,66,25,31,67,30 ]&#xff0c;然后&#…

【GD32】_时钟架构及系统时钟频率配置

文章目录 一、有关时钟源二、系统时钟架构三、时钟树分析四、修改参数步骤1、设置外部晶振2、选择外部时钟源。3、 设置系统主频率大小4、修改PLL分频倍频系数 学习系统时钟架构和时钟树&#xff0c;验证及学习笔记如下&#xff0c;如有错误&#xff0c;欢迎指正。主要记录了总…

【电控笔记2.2】电流回路+延迟效应

延迟效应的来源以及影响 数字控制系统的delay: 5.4节有介绍T0=0.5TS 低通滤波器的时间常数? 滤波器的传递函数与性能参数

C语言入门第四天(数组)

一、C语言数组的基本语法 1.数组的定义 数组是 C 语言中的一种数据结构&#xff0c;用于存储一组具有相同数据类型的数据。数组中的每个元素可以通过一个索引&#xff08;下标&#xff09;来访问&#xff0c;索引从 0 开始&#xff0c;最大值为数组长度减 1。 2.定义语法格式 …