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

news2024/11/25 15:33:16

目录

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.coloradmin.cn/o/1600373.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

48---PCIE转串口和并口电路设计

视频链接 PCIE转串口和并口电路设计01_哔哩哔哩_bilibili PCIe转串口和并口电路设计 1、PCIe转串并口电路设计基本介绍 2、PCIe转串口和并口的方案(京东) 2.1、PCIe转串口 2.1.1、ASIX (亚信)MCS9922-PCIe转2路RS232扩展卡 2.1.2、ASIX (亚信)MCS9900-PCIe转4路RS232扩展卡…

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

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

【二分查找】Leetcode 74. 搜索二维矩阵【中等】

搜索二维矩阵 给你一个满足下述两条属性的 m x n 整数矩阵&#xff1a; 每行中的整数从左到右按非严格递增顺序排列。每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target &#xff0c;如果 target 在矩阵中&#xff0c;返回 true &#xff1b;否则&#xff0c…

电脑不能上网,宽带调制解调器出现问题如何处理

目录 一、问题说明 二、解决方案 一、问题说明 内网的设备能互联&#xff0c;内网的各个设备无法连外网。 电脑在检测网络时&#xff0c;出现以下提示&#xff1a; 二、解决方案 首先重启光猫&#xff08;我们是电信宽带&#xff09;。 如果还是有问题&#xff0c;再重启…

【大语言模型】如何让ChatGPT等LLM拥有记忆

我们现在在跟ChatGPT等生成式人工智能聊天时&#xff0c;都需要我们给定一个上下文&#xff0c;生成式AI才会根据我们问题结合上下文给出回答&#xff0c;他们并没有任何记忆。想象一下未来我们有一个AI机器人在我们的身边&#xff0c;每天它的记忆都会归零&#xff0c;你必须跟…

Django数据导出与导入问题

执行: python manage.py loaddata data.json 的常见错误: * 1. UnicodeDecodeError: utf-8 codec cant decode byte 0xff in position 0: invalid start byte* 2. raise JSONDecodeError("Unexpected UTF-8 BOM (decode using utf-8-sig)",...django.core.serializer…

OWASP发布10大开源软件风险清单

3月20日&#xff0c;xz-utils 项目被爆植入后门震惊了整个开源社区&#xff0c;2021 年 Apache Log4j 漏洞事件依旧历历在目。倘若该后门未被及时发现&#xff0c;那么将很有可能成为影响最大的软件供应链漏洞之一。近几年爆发的一系列供应链漏洞和风险&#xff0c;使得“加强开…

Web3与社会契约:去中心化治理的新模式

在数字化时代&#xff0c;技术不断为我们提供新的可能性&#xff0c;而Web3技术作为一种基于区块链的创新&#xff0c;正在引领着互联网的下一波变革。它不仅改变了我们的经济模式和商业逻辑&#xff0c;还对社会契约和权力结构提出了全新的挑战和思考。本文将深入探讨Web3的基…

Spring、SpringMVC、SpringBoot核心知识点(持续更新中)

Spring、SpringMVC、SpringBoot核心知识点&#xff08;持续更新中&#xff09; Spring Bean 的生命周期Spring 的 IOC 与 AOPSpring Bean 循环依赖Spring MVC 处理请求的过程Spring Boot 自动装配原理Spring Boot 启动流程 Spring Bean 的生命周期 参考文章&#xff1a;一文读…

vagrant 安装虚拟机,docker, k8s

第一步&#xff1a;安装虚拟机 1、安装 vagrant 本机是 mac, 但是这一步不影响&#xff0c;找对应操作系统的安装方式就行了。 vagrant 下载地址 brew install vagrant 2、下载 VirtualBox 虚拟机 VirtualBox 下载地址 找到对应系统下载&#xff0c;安装就可以。 尽量把…

CSS基础:最详细 padding的 4 种用法解析

你好&#xff0c;我是云桃桃。 一个希望帮助更多朋友快速入门 WEB 前端的程序媛。 云桃桃&#xff0c;大专生&#xff0c;一枚程序媛&#xff0c;感谢关注。回复 “前端基础题”&#xff0c;可免费获得前端基础 100 题汇总&#xff0c;回复 “前端工具”&#xff0c;可获取 We…

java通过maven导入本地jar包的三种方式

一、引入lib下加载&#xff08;加载过后打包&#xff0c;以后再次使用不用再次导入&#xff09; 首先创建一个用于创建jar包的项目&#xff0c;并测试能否成功运行 讲项目打包 在需要引入的项目中创建lib目录 并把刚才打包的jar复制进去 通过dependency引入jar包 groupId、art…

Hive-Sql复杂面试题

参考链接&#xff1a;hive sql面试题及答案 - 知乎 1、编写sql实现每个用户截止到每月为止的最大单月访问次数和累计到该月的总访问次数 数据&#xff1a; userid,month,visits A,2015-01,5 A,2015-01,15 B,2015-01,5 A,2015-01,8 B,2015-01,25 A,2015-01,5 A,2015-02,4 A,20…

使用 code-server 搭建在线的 VS Code 编辑器

文章目录 前言安装体验后记 前言 VS Code 是一个非常流行的代码编辑器&#xff0c;安装各种拓展下也可以当作全功能的IDE使用。VS Code本身是基于Web方案构建的&#xff0c;完全可以搭建服务器&#xff0c;然后通过浏览器访问。事实上官方就是这么设计的。现在打开任何一个Git…

010Node.js自定义模块通过exports的使用,两种暴露的方法及区别(二)

module/request.js var obj{get:function(){console.log(从服务器获取数据);},post:function(){console.log(提交数据);} }exports.xxxxobj;//方法一 { xxxx: { get: [Function: get], post: [Function: post] } }//module.exportsobj;//方法二 //{ get: [Function: g…

2.3 iHRM人力资源 - 路由、左侧菜单栏、处理token失效、退出登录、修改密码

iHRM人力资源 - 处理token失效、退出登录、修改密码 文章目录 iHRM人力资源 - 处理token失效、退出登录、修改密码一、退出登录1.1 处理token失效1.2 调整下拉菜单1.3 退出登录 二、修改密码2.1 弹出层dialog2.2 表单结构2.3 表单校验2.4 表单提交 三、路由3.1 清理多余组件和路…

Flink CDC在阿里云DataWorks数据集成应用实践

摘要&#xff1a;本文整理自阿里云 DataWorks 数据集成团队的高级技术专家 王明亚&#xff08;云时&#xff09;老师在 Flink Forward Asia 2023 中数据集成专场的分享。内容主要为以下四部分&#xff1a; 阿里云 DataWorks 数据集成介绍基于 Flink CDC 数据集成新版引擎架构和…

为硬刚小米SU7,华为智界S7整出了「梅开二度」操作

如今国产中大型新能源轿车市场&#xff0c;在小米 SU7 加入后&#xff0c;可算彻底活了过来。 过去几年&#xff0c;咱们自主新能源品牌在 20-30 万元级轿车上发力明显不足&#xff0c;老牌车厂比亚迪汉几乎以一己之力扛起销量担当。 随着新能源汽车消费升级、竞争加剧&#x…

盲人安全导航技巧:科技赋能让出行更自如

作为一名资深记者&#xff0c;长期关注并报道无障碍领域的发展动态。今日&#xff0c;我将聚焦盲人安全导航技巧&#xff0c;探讨这一主题下科技如何赋能视障人士实现更为安全、独立的出行。一款融合了实时避障、拍照识别物体及场景功能的盲人出行辅助应用叫做蝙蝠避障&#xf…

4月16号总结

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