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

embedded/2024/10/18 12:25:50/
htmledit_views">

目录

div/span标签

音频标签

视频标签

特殊字符


div/span标签

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

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

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

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

html"><!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

html"><!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属性:用于控制视频的高和宽,与图片类似
html"><!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;

📌

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

示例代码:

html"><!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.ppmy.cn/embedded/4005.html

相关文章

c++中什么叫做窄式转换(narrowing conversions)以及窄式转换解决方案

c中什么叫做窄式转换(narrowing conversions)以及窄式转换解决方案 什么叫做窄式转换(narrowing conversions) 窄化转换&#xff08;narrowing conversion&#xff09;是指将一个值转换为另一种类型&#xff0c;但转换过程中丢失了信息或超出了目标类型的表示范围的情况。在C…

2024-14.python前端+Django

第四篇 web前端 第1章 、Web的基本概念 前端基础总共分为三部分&#xff1a;html、css和js。 1.3、HTTP协议 1.3.1 、http协议简介 HTTP协议是Hyper Text Transfer Protocol&#xff08;超文本传输协议&#xff09;的缩写,是用于万维网&#xff08;WWW:World Wide Web &am…

Jenkins用maven风格build报错解决过程记录

1、Jenkins2.453新建项目&#xff0c;构建风格选的maven 2、自由风格构建部署没有任何问题&#xff0c;但是maven风格build一直失败&#xff0c;报错如下图 3、解决方案&#xff1a;在系统管理–系统配置–Maven项目配置&#xff0c;删除全局MAVEN_OPT的路径信息&#xff0c;…

设计模式-代理模式(Proxy)

1. 概念 代理模式&#xff08;Proxy Pattern&#xff09;是程序设计中的一种结构型设计模式。它为一个对象提供一个代理对象&#xff0c;并由代理对象控制对该对象的访问。 2. 原理结构图 抽象角色&#xff08;Subject&#xff09;&#xff1a;这是一个接口或抽象类&#xff0…

软件需求开发和管理过程性指导文件

1. 目的 2. 适用范围 3. 参考文件 4. 术语和缩写 5. 需求获取的方式 5.1. 与用户交谈向用户提问题 5.1.1. 访谈重点注意事项 5.1.2. 访谈指南 5.2. 参观用户的工作流程 5.3. 向用户群体发调查问卷 5.4. 已有软件系统调研 5.5. 资料收集 5.6. 原型系统调研 5.6.1. …

多个路由器连接的PC端进行ping通信需要做的事

实验环境&#xff1a; 三台PC三台路由器&#xff0c;并且配置好IP 拓扑图&#xff1a; 需求描述&#xff1a; 在PC0进行与PC2的ping通信&#xff1a; 需求步骤&#xff1a; 1.1首先配置ip&#xff08;略过&#xff09; 1.2我们首先查看在只配置了IP的情况下&#xff0c;P…

C语言 | 自定义类型:struct结构体(详解)

目录&#xff1a; --前言 1. 结构体类型的定义与基础结构 2. 结构体的使用 3. typedef相关 4. 结构体的自引用 5. 结构体内存对齐 6. 结构体传参 7. 结构体实现位段 --前言&#xff1a; c语言中内置类型&#xff0c;也有自定义的类型。 例如&#xff1a;内置类型 in…

LLMs——扩展数据受限的语言模型解决方案

概述 在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;大型语言模型的发展一直是研究的热点。这些模型通过增加参数数量和训练数据量来提升性能&#xff0c;但这种增长趋势是否会有一个极限&#xff1f;实际上&#xff0c;研究者们已经注意到&#xff0c;为了有效地…