如何像人类一样写HTML之图像标签,超链接标签与多媒体标签

文章目录

  • 前言
  • 一、图像标签
    • 1.1 什么是图像标签?
    • 2.2 如何使用图像标签?
  • 二、超链接标签
    • 2.1 什么是超链接标签?
    • 2.2 如何使用超链接标签?
  • 三、多媒体标签
    • 3.1 什么是多媒体标签?
    • 3.2 如何使用多媒体audio标签?
    • 3.3 示例代码(audio)
    • 3.4 <video>标签是什么
    • 3.5 基本用法
    • 3.6 示例代码
  • 总结


前言

HTML(Hypertext Markup Language)是构建互联网上所有网页的基础。它使用标签来定义网页上的不同元素和内容。在本文中,我们将学习如何像人类一样编写HTML标签,包括图像标签、超链接标签与多媒体标签,以丰富您的网页内容。


一、图像标签

1.1 什么是图像标签?

图像标签()用于在网页上嵌入图像。它允许您在网页上显示图片,图像可以是您的本地文件或从远程服务器加载。

2.2 如何使用图像标签?

使用图像标签需要指定图像的源文件路径(src属性)以及可选的替代文本(alt属性),替代文本用于在图像无法加载时提供描述。

<img src="image.jpg" alt="描述图像的文本">

在这里插入图片描述

img标签他是一个单标签!

二、超链接标签

2.1 什么是超链接标签?

超链接标签()用于创建网页内部或外部的链接,使用户可以点击链接跳转到其他页面或资源。

2.2 如何使用超链接标签?

使用超链接标签需要指定链接的目标URL(href属性)。您还可以使用可选的target属性来指定链接如何在浏览器中打开。

<a href="https://www.example.com" target="_blank">访问示例网站</a>

在这里插入图片描述

其中,target有一下的属性

_blank: 在新窗口或新标签页中打开链接。
_self: 在当前窗口或标签页中打开链接(默认行为)。
_parent: 在父级框架中打开链接,如果没有父级框架则与 _self 相同。
_top: 在最顶层的框架中打开链接,如果没有框架则与 _self 相同。
自定义框架名称:如果您在网页中使用了框架,您可以将链接的 target 设置为框架的名称,以在特定框架中打开链接。

三、多媒体标签

3.1 什么是多媒体标签?

多媒体标签,如音频标签(<audio>)和视频标签(<video>),允许您在网页上嵌入音频和视频内容。

3.2 如何使用多媒体audio标签?

使用多媒体标签需要指定媒体文件的源文件路径(src属性),并可以设置其他属性,如播放控件、自动播放、循环播放等。

<audio src="audio.mp3" controls autoplay loop>您的浏览器不支持音频播放。
</audio>

在这里插入图片描述

他具有下面这些属性:

src:指定音频文件的URL。可以是本地文件或远程文件的路径。controls:添加控制按钮,如播放、暂停、音量控制等。选项是布尔值,可以设置为 controls 来启用控制按钮,或者省略此属性来禁用它们。autoplay:自动播放音频。如果设置为 autoplay,音频将在页面加载后立即播放。loop:设置音频循环播放。如果设置为 loop,音频将一直循环播放。preload:指定在页面加载时是否加载音频文件。选项包括:none:不预加载音频。
metadata:仅加载音频的元数据(如时长和尺寸)。
auto:在页面加载时加载整个音频文件。
muted:静音音频。设置为 muted 会将音频静音。volume:设置音频的默认音量级别。值为 0(静音)到 1(最大音量)之间的数字。poster:指定音频的封面图像,以在音频未播放时显示。preload:定义浏览器是否应该在页面加载时预加载音频。可选值包括:none:不预加载音频。
metadata:仅加载音频的元数据(如时长和尺寸)。
auto:在页面加载时加载整个音频文件。
controlsList:指定控制按钮的显示方式。可选值包括:nodownload:禁用下载按钮。
nofullscreen:禁用全屏按钮。
noremoteplayback:禁用远程播放按钮。
crossorigin:指定音频文件的CORS(跨域资源共享)设置。可以是 anonymous、use-credentials 或省略。

3.3 示例代码(audio)

以下是一个包含图像、超链接和音频的HTML示例:

<!DOCTYPE html>
<html>
<head><title>多媒体示例</title>
</head>
<body><h1>欢迎来到示例网站</h1><img src="image.jpg" alt="示例图像"><p>访问我们的<a href="https://www.example.com" target="_blank">网站</a>以获取更多信息。</p><h2>欣赏音乐</h2><audio src="music.mp3" controls>您的浏览器不支持音频播放。</audio>
</body>
</html>

在这里插入图片描述

3.4 标签是什么

标签是HTML5中用于在网页上嵌入视频的元素。它允许您将视频文件嵌入到网页中,以便用户可以在浏览器中观看视频内容。

以下是 标签的基本用法和示例代码:

3.5 基本用法

<video src="video.mp4" controls width="480" height="270">您的浏览器不支持视频播放。
</video>

在这里插入图片描述

src 属性:指定视频文件的URL。
controls 属性:添加视频控制按钮,如播放、暂停、音量控制等。
width 和 height 属性:设置视频播放区域的宽度和高度。
在 标签之间的文本:为不支持视频播放的浏览器提供备用文本。

以下是video的所有属性:

src:指定视频文件的URL。controls:添加控制按钮,如播放、暂停、音量控制等。选项是布尔值,可以设置为 controls 来启用控制按钮,或者省略此属性来禁用它们。autoplay:自动播放视频。如果设置为 autoplay,视频将在页面加载后立即播放。loop:设置视频循环播放。如果设置为 loop,视频将一直循环播放。preload:指定在页面加载时是否加载视频文件。选项包括:none:不预加载视频。
metadata:仅加载视频的元数据(如时长和尺寸)。
auto:在页面加载时加载整个视频文件。
muted:静音视频。设置为 muted 会将视频静音。volume:设置视频的默认音量级别。值为 0(静音)到 1(最大音量)之间的数字。width 和 height:设置视频播放区域的宽度和高度。poster:指定视频的封面图像,以在视频未播放时显示。playsinline:允许在iOS设备上内联播放视频,而不是全屏播放。controlsList:指定控制按钮的显示方式。可选值包括:nodownload:禁用下载按钮。
nofullscreen:禁用全屏按钮。
noremoteplayback:禁用远程播放按钮。
crossorigin:指定视频文件的CORS(跨域资源共享)设置。可以是 anonymous、use-credentials 或省略。

3.6 示例代码

以下是一个包含 标签的示例代码,用于嵌入并播放名为 “example.mp4” 的视频文件:

<!DOCTYPE html>
<html>
<head><title>视频示例</title>
</head>
<body><h1>欢迎观看示例视频</h1><video src="example.mp4" controls width="640" height="360">您的浏览器不支持视频播放。</video><p>点击播放按钮开始观看视频。</p>
</body>
</html>

在这里插入图片描述

在上述示例中,我们指定了视频文件的路径、添加了控制按钮、设置了播放区域的尺寸,并提供了替代文本以应对不支持视频播放的情况。用户可以通过控制按钮来播放和暂停视频,以及控制音量等。


总结

在本文中,我们学习了如何像人类一样编写HTML标签,包括图像标签、超链接标签和多媒体标签。这些标签允许您在网页上嵌入图像、创建链接以及播放音频和视频等多媒体内容,丰富了网页的交互性和吸引力。开始使用这些标签,将更多多媒体元素添加到您的网页中,提升用户体验和网页内容的丰富度。

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

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

相关文章

Python入门教程 | Python 常用标准库概览

Python3 标准库概览 Python 标准库非常庞大&#xff0c;所提供的组件涉及范围十分广泛&#xff0c;使用标准库我们可以让您轻松地完成各种任务。 以下是一些 Python3 标准库中的模块&#xff1a; os 模块&#xff1a;os 模块提供了许多与操作系统交互的函数&#xff0c;例如创…

【小沐学前端】Node.js实现基于Protobuf协议的UDP通信(UDP/TCP)

文章目录 1、简介1.1 node1.2 Protobuf 2、下载和安装2.1 node2.2 Protobuf2.2.1 安装2.2.2 工具 3、node 代码示例3.1 HTTP3.2 UDP单播3.4 UDP广播 4、Protobuf 代码示例4.1 例子: awesome.proto4.1.1 加载.proto文件方式4.1.2 加载.json文件方式4.1.3 加载.js文件方式 4.2 例…

多线程 - 单例模式

单例模式 ~~ 单例模式是常见的设计模式之一 什么是设计模式 你知道象棋,五子棋,围棋吗?如果,你想下好围棋,你就不得不了解一个东西,”棋谱”,设计模式好比围棋中的 “棋谱”. 在棋谱里面,大佬们,把一些常见的对局场景,都给推演出来了,照着棋谱来下棋,基本上棋力就不会差到哪…

TAADpapers的工具包用到的lru是lru-dict

TAADpapers的工具包用到的lru是lru-dict 运行时提示&#xff1a;no model named lru 安装lru时报错详情&#xff1a; (textattack-master) G:\xxx\TextAttack-master>pip install lru Collecting lruUsing cached lru-0.1.tar.gz (1.1 kB)Preparing metadata (setup.py) ..…

docker-compose一键启动neo4j

下载镜像 docker pull neo4j:3.5.22-community 编写配置文件 参考文档 编写docker-compose.yml文件 version: "3"services:neo4j:image: neo4j:3.5.22-communitycontainer_name: neo4j restart: alwaysports:- 7474:7474- 7687:7687environment:- NEO4J_AUTH:ne…

Scala第十五章节

Scala第十五章节 1. 递归 2. 案例一: 求阶乘 3. 案例二: 斐波那契数列 4. 案例三: 打印目录文件 scala总目录 文档资料下载

机器学习必修课 - 如何处理缺失数据

运行环境&#xff1a;Google Colab 处理缺失数据可简单分为两种方法&#xff1a;1. 删除具有缺失值的列 2. 填充 !git clone https://github.com/JeffereyWu/Housing-prices-data.git下载数据集 import pandas as pd from sklearn.model_selection import train_test_split导…

竞赛 机器视觉 opencv 深度学习 驾驶人脸疲劳检测系统 -python

文章目录 0 前言1 课题背景2 Dlib人脸识别2.1 简介2.2 Dlib优点2.3 相关代码2.4 人脸数据库2.5 人脸录入加识别效果 3 疲劳检测算法3.1 眼睛检测算法3.2 打哈欠检测算法3.3 点头检测算法 4 PyQt54.1 简介4.2相关界面代码 5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#x…

C语言实例_调用SQLITE数据库完成数据增删改查

一、SQLite介绍 SQLite是一种轻量级的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;它是一个开源的、零配置的、服务器端的、自包含的、零管理的、事务性的SQL数据库引擎。它被广泛应用于嵌入式设备、移动设备和桌面应用程序等领域。 SQLite的特点包括&…

SpringBoot快速入门

搭建SpringBoot工程&#xff0c;定义hello方法&#xff0c;返回“Hello SpringBoot” ②导入springboot工程需要继承的父工程&#xff1b;以及web开发的起步依赖。 ③编写Controller ④引导类就是SpringBoot项目的一个入口。 写注解写main方法调用run方法 快速构建SpringBoo…

MySQL体系结构和四层架构介绍

MySQL体系结构图如下&#xff1a; 四层介绍 1. 连接层&#xff1a; 它的主要功能是处理客户端与MySQL服务器之间的连接(比如Java应用程序通过JDBC连接MySQL)。当客户端应用程序连接到MySQL服务器时&#xff0c;连接层对用户进行身份验证、建立安全连接并管理会话状态。它还处理…

python获取时间戳

使用 datetime 库获取时间。 获取当前时间&#xff1a; import datetime print(datetime.datetime.now()) . 后面的是微秒&#xff0c;也是一个时间单位&#xff0c;1秒1000000微秒。 转为时间戳&#xff1a; import datetimedate datetime.datetime.now() timestamp date…

小谈设计模式(14)—建造者模式

小谈设计模式&#xff08;14&#xff09;—建造者模式 专栏介绍专栏地址专栏介绍 建造者模式角色分类产品&#xff08;Product&#xff09;抽象建造者&#xff08;Builder&#xff09;具体建造者&#xff08;Concrete Builder&#xff09;指挥者&#xff08;Director&#xff0…

5G 技术、云原生开发和机器学习是推动物联网解决方案的重要助力

作者&#xff1a;Arm高级副总裁兼物联网事业部总经理 Paul Williamson 每次谈及物联网 (IoT)&#xff0c;行业就会明显出现两大阵营&#xff1a;乐观派和悲观派。后者将物联网认定为“尚属未来”的技术。而我个人是坚定的乐观派&#xff1a;对于物联网解决方案有望带来的变革性…

电脑通过串口助手和51单片机串口通讯

今天有时间把电脑和51单片机之间的串口通讯搞定了&#xff0c;电脑发送的串口数据&#xff0c;单片机能够正常接收并显示到oled屏幕上&#xff0c;特此记录一下&#xff0c;防止后面自己忘记了怎么搞得了。 先来两个图片看看结果吧&#xff01; 下面是串口3.c的文件全部内容&a…

SQL SELECT 子查询与正则表达式

在之前的文章中已经探讨了 SQL SELECT 语句的基础和进阶用法,以及如何通过高级技巧来进行更复杂的数据查询和分析。本文将介绍 SQL SELECT 语句中的子查询和正则表达式的使用。这些是 SQL 中非常强大的工具,能让您进行更复杂和精细的数据操作。 文章目录 子查询基础与应用子…

(二)详解观察者模式

一.使用场景 当我们需要一个类&#xff0c;在他的内部元素发生变化的时候可以主动通知其他类的时候&#xff0c;同时要保持良好的可拓展性&#xff0c;可以采用观察者模式。 二.核心 观察者模式出版者订阅者 我们拥有一个主题对象&#xff0c;和一些其他对象&#xff0c;包…

Spring Cloud Zuul 基本原理

Spring Cloud Zuul 底层是基于Servlet实现的&#xff0c;核心是通过一系列的ZuulFilter来完成请求的转发。 1、核心组件注册 1.1. EnableZuulProxy注解 启用Zuul作为微服务网关&#xff0c;需要在Application应用类加上EnableZuulProxy注解&#xff0c;而该注解核心是利用Im…

PS端GPIO配置和基本介绍

Xilinx PS GPIO 驱动程序。 该驱动程序支持 Xilinx PS GPIO 控制器。 GPIO 控制器支持以下功能&#xff1a; The GPIO Controller supports the following features: 4 banksMasked writes (There are no masked reads)屏蔽写入Bypass mode 旁路模式Configurable Interrupts…

RandomForestClassifier 与 GradientBoostingClassifier 的区别

RandomForestClassifier&#xff08;随机森林分类器&#xff09;和GradientBoostingClassifier&#xff08;梯度提升分类器&#xff09;是两种常用的集成学习方法&#xff0c;它们之间的区别分以下几点。 1、基础算法 RandomForestClassifier&#xff1a;随机森林分类器是基于…