【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签

文章目录:

  • 1.HTML图片标签

    • 1.1 图像标签-基本使用
    • 1.2 图像标签-属性
    • 1.3 路径
      • 1.3.1 相对路径
      • 1.3.2 绝对路径
  • 2.超链接标签

  • 3.音频标签

  • 4.视频标签


1.HTML图片标签

1.1 图像标签-基本使用

作用:在网页中插入图片。

<img src="图片的URL">

src用于指定图像的位置和名称,是的必须属性。

本地图片的使用
图片拖拽到文件夹里

<img src="./+自动出的窗口选择图片">
vs code有提示功能

1.2 图像标签-属性

在这里插入图片描述
前两个属性是重点,后两个不是重点,后期可以通过css来设置

<img src="./图片.jpg" width='600'>
浏览器默认等比例缩放
<img src="./dog.jpg" title="这是一只狗">
<img src="./cat1.jpg" alt="这是一只猫">

在这里插入图片描述

  • 属性名=“属性值”
  • 属性写在尖括号里面,标签名后面,标签名和属性之间用空格隔开,不区分先后顺序

1.3 路径

路径指的是查找文件时,从起点到终点经历的路线。

路径分类:

  • 相对路径:从当前文件位置出发查找目标文件
  • 绝对路径:从盘符出发查找目标文件
    Windows电脑从盘符出发
    Mac电脑从根目录出发

1.3.1 相对路径

. 代表当前文件所在的文件夹
.. 当前文件上一级文件夹
/ 进入某个文件夹里面

1.3.2 绝对路径

绝对路径-从盘符出发查找目标文件

  • Windows 电脑从盘符出发
  • Mac 电脑从根目录(/)出发
<img src="C:\images\mao.jpg">
  • Windows默认是\,其他系统是/,建议统一写为/

2.超链接标签

作用:点击跳转到其他页面。

<a href="https://www.baidu.com">跳转到百度</a>

href 属性值是跳转地址,是超链接的必须属性

举例说明:

<a href="https://www.baidu.com/">跳转到百度</a>本地文件跳转,相对路径查找:
<a href="./01-标签的写法.htm1">跳转到01-标签的写法</a>链接跳转成为一个新的页面,加入target属性
<a href="./01-标签的写法.html" target="_blank">跳转到01-标签的写法</a>开发初期,不知道超链接的跳转地址,href属性值写#,表示空链接,不会跳转
<a href="#">空链接</a>

3.音频标签

在这里插入图片描述

<audio src=" ./media/music.mp3"></audio>在HTML5 里面,如果属性名和属性值完全一样,可以简写为一个单词
<audio src=" ./media/music.mp3" controls></ audio>

4.视频标签

<video src="视频的URL"></video>举例:
<video src="./3956.MP4" controls></video>

在这里插入图片描述

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

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

相关文章

《Python 简易速速上手小册》第8章:Python 网络编程与 Web 开发(基于最新版 Python3.12 编写)

注意&#xff1a;本《Python 简易速速上手小册》 核心目的在于让零基础新手「快速构建 Python 知识体系」 文章目录 <mark >注意&#xff1a;本《Python 简易速速上手小册》<mark >核心目的在于让零基础新手「快速构建 Python 知识体系」 8.1 Python 中的网络通信…

HCS 华为云Stack产品组件

HCS 华为云Stack产品组件 Cloud Provisioning Service(CPS) 负责laas的云平台层的部署和升级是laas层中真正面向硬件设备&#xff0c;并将其池化软件化的部件。 Service OM 资源池(计算/存储/网络)以及基础云服务(ECS/EVS/PC)的管理工具。 ManageOne ManageOne包括服务中心…

数据结构(1)--> 顺序表

定义&#xff1a; 顺序表存储定义&#xff1a; 把逻辑上相邻的数据元素存储在物理上相邻的存储单元中的存储结构&#xff0c;顺序表功能的实现借助于数组&#xff0c;通过对数组进行封装&#xff0c;从而实现增删查改的功能&#xff0c;严格意义上来说&#xff08;数组无法实现…

如何发布自己的npm包,详细流程

发布自己的npm包需要遵循以下具体流程&#xff1a; 创建npm账号&#xff1a;打开浏览器&#xff0c;访问npm官网&#xff0c;注册一个npm账号。 创建项目文件夹并进入&#xff1a;在本地创建一个项目文件夹&#xff0c;并使用终端进入该文件夹。 初始化包信息管理文件&#x…

第六课:Prompt

文章目录 第六课&#xff1a;Prompt1、学习总结&#xff1a;Prompt介绍预训练和微调模型回顾挑战 Pre-train, Prompt, PredictPrompting是什么?prompting流程prompt设计 课程ppt及代码地址 2、学习心得&#xff1a;3、经验分享&#xff1a;4、课程反馈&#xff1a;5、使用Mind…

由两个有限项的等差数列B, C, 求有多少个有限项的等差数列A,满足C是A, B的所有公共项,若有无穷个A满足条件,输出-1

题目 思路&#xff1a; #include <bits/stdc.h> using namespace std; #define int long long #define pb push_back const int maxn 1e6 5, inf 1e9 5, maxm 4e4 5, mod 1e9 7, N 1e6; // int a[maxn], b[maxn]; int n, m; string s;int qpow(int a, int b){i…

Unity中创建Ultraleap 3Di交互项目

首先&#xff0c;创建新的场景 1、创建一个空物体&#xff0c;重命名为【XP Leap Provider Manager】&#xff0c;并在这个空物体上添加【XR Leap Provider Manager】 在物体XP Leap Provider Manager下&#xff0c;创建两个子物体Service Provider(XR)和Service Provider(…

C语言与操作符相关的经典例题

目录 一道变态的面试题&#xff1a;不能创建临时变量&#xff08;第三个变量&#xff09;&#xff0c;实现两个数的交换。 编写代码实现&#xff1a;求一个整数存储在内存中的二进制中1的个数。 二进制位置0或者置1 如果以下的知识点不是很清楚的可以去看这篇文章&#xff1…

Deepin基本环境查看 - 目录/大纲

第一次整理本文材料才发现 原来写博客和写代码一样的 多章节的内容&#xff0c;必须将目录单独取出来 这样才方便作者&#xff0c;也方便读者 奇怪的知识又增加了 ^^ Deepin基本环境查看 - 目录Deepin基本环境查看&#xff08;一&#xff09;【基本信息】Deepin基本环境查看&am…

阿里云部署配置幻兽帕鲁Palworld联机服务器详细教程

阿里云作为国内领先的云计算服务提供商&#xff0c;为企业和个人提供了丰富的云服务。本文将为大家详细介绍如何在阿里云上配置幻兽帕鲁Palworld联机服务器&#xff0c;以便与更多玩家共同体验游戏的乐趣。 第一步&#xff1a;登录服务器创建页 1、进入幻兽帕鲁联机服务快速部…

数据结构——顺序队列(循环)

采用顺序表的方式实现循环队列。其中关键在于如何判断队列已满。通常情况下&#xff0c;当对头和队尾指向同一个节点时&#xff0c;可以判断为队空。但是&#xff0c;倘若队尾不断增加&#xff0c;最后队尾也会指向对头&#xff0c;此时队满和队空的判断条件一致。以下有三种对…

剖析线程池ForkJoinPool

文章目录 一、引言二、ForkJoinPool概述三、工作原理四、案例及分析案例背景案例分析实现 五、注意事项六、总结 一、引言 在并发编程中&#xff0c;线程池是一个常见的工具&#xff0c;用于管理和复用线程&#xff0c;以避免频繁地创建和销毁线程带来的开销。ForkJoinPool是J…

11. 双目视觉之立体视觉基础

目录 1. 深度恢复1.1 单目相机缺少深度信息1.2 如何恢复场景深度&#xff1f;1.3 深度恢复的思路 2. 对极几何约束2.1 直观感受2.2 数学上的描述 1. 深度恢复 1.1 单目相机缺少深度信息 之前学习过相机模型&#xff0c;最经典的就是小孔成像模型。我们知道相机通过小孔成像模…

力扣LCR 180. 文件组合(双指针)

Problem: LCR 180. 文件组合 文章目录 题目描述思路及解法复杂度Code 题目描述 思路及解法 本题目可以利用滑动窗口的技巧&#xff08;滑动窗口就是双指针的运用&#xff09;解决&#xff0c;具体实现如下 1.逻辑上生成窗口&#xff1a;让两个指针i&#xff0c;j分别初始化为1…

Java基本数据类型-字符型,布尔型

目录 字符型转义字符实例运行结果 ASCII码实例运行结果 布尔型实例运行结果 字符型 Java中使用单引号来表示字符常量&#xff0c;字符型在内存中占2个字节。char 类型用来表示在Unicode编码表中的字符。Unicode编码被设计用来处理各种语言的文字&#xff0c;它占2个字节&#…

3DGS 其二:Street Gaussians for Modeling Dynamic Urban Scenes

3DGS 其二&#xff1a;Street Gaussians for Modeling Dynamic Urban Scenes 1. 背景介绍1.1 静态场景建模1.2 动态场景建模 2. 算法2.1 背景模型2.2 目标模型 3. 训练3.1 跟踪优化 4. 下游任务 Reference&#xff1a; Street Gaussians for Modeling Dynamic Urban Scenes 1.…

【Docker】Docker学习⑧ - Docker仓库之分布式Harbor

【Docker】Docker学习⑧ - Docker仓库之分布式Harbor 一、Docker简介二、Docker安装及基础命令介绍三、Docker镜像管理四、Docker镜像与制作五、Docker数据管理六、网络部分七、Docker仓库之单机Dokcer Registry八、 Docker仓库之分布式Harbor1 Harbor功能官方介绍2 安装Harbor…

OpenCV 1 - 加载 显示 修改 保存图像

1 加载图像(cv::imread) imread功能是加载图像文件成为一个Mat对象 第一个参数,表示图像文件名称第二个参数,表示加载的图像是什么类型&#xff0c;支持常见的三个参数值 参数注释IMREAD_UNCHANGED表示加载原图,不做任何改变IMREAD_GRAYSCALE表示把原图作为灰度图像加载进来IM…

Linux——常用命令

1、命令的基本格式 对服务器来讲&#xff0c;图形界面会占用更多的系统资源&#xff0c;而且会安装更多的服务、开放更多的端口&#xff0c;这对服务器的稳定性和安全性都有负面影响。其实&#xff0c;服务器是一个连显示器都没有的家伙&#xff0c;要图形界面干什么&#xff…

力扣hot100 字符串解码 栈 辅助栈

Problem: 394. 字符串解码 文章目录 思路&#x1f496; 辅助栈 思路 &#x1f468;‍&#x1f3eb; 路飞 &#x1f496; 辅助栈 ⏰ 时间复杂度: O ( n ) O(n) O(n) &#x1f30e; 空间复杂度: O ( n ) O(n) O(n) class Solution {public String decodeString(String s…