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>

效果如下:

📌

其余字符代码使用类似

相关推荐

  1. HTML5音频标签

    2024-04-20 17:46:03       13 阅读
  2. HTML标签介绍

    2024-04-20 17:46:03       36 阅读
  3. html的div标签

    2024-04-20 17:46:03       16 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-20 17:46:03       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-20 17:46:03       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-20 17:46:03       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-20 17:46:03       18 阅读

热门阅读

  1. 【c/c++】编写头文件

    2024-04-20 17:46:03       13 阅读
  2. 【PyTorch Lightning】.ckpt 是什么?里面有什么?

    2024-04-20 17:46:03       14 阅读
  3. 蓝队面试经验总结

    2024-04-20 17:46:03       15 阅读
  4. Ansible-基础模块

    2024-04-20 17:46:03       16 阅读
  5. 智能AI一键消除原音PTN1118方案推荐

    2024-04-20 17:46:03       13 阅读
  6. http 3.0 QUIC 方案的原理解析

    2024-04-20 17:46:03       15 阅读