【前端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/646142.shtml

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

相关文章

Python + Selenium —— 网页元素定位之Xpath定位!

前面讲的定位方式&#xff0c;都能够很方便的定位到网页元素。但是这些属性并非所有的网页元素都具备&#xff0c;可以这么说&#xff0c;绝大部分情况下都很难保证元素具备这些属性。 也就是很多时候需要使用其他的方式来定位&#xff0c;在 WebDriver 中提供了 Xpath 和 Css…

二叉树堆的应用实例分析:堆排序 | TOP-K问题

&#x1f4f7; 江池俊&#xff1a; 个人主页 &#x1f525;个人专栏&#xff1a; ✅数据结构冒险记 ✅C语言进阶之路 &#x1f305; 有航道的人&#xff0c;再渺小也不会迷途。 文章目录 前言一、堆排序1.1 排序思想1.2 堆排序过程&#xff08;图解&#xff09;1.3 堆排序代…

Linux CentOS安装Subversion(SVN)(svn常用命令)

1、确保您具有root权限或具有sudo特权 2、打开终端并运行以下命令以更新系统软件包&#xff1a; sudo yum update 3、使用以下命令安装Subversion软件包&#xff1a; sudo yum install subversion 安装过程中&#xff0c;系统会提示您确认安装&#xff0c;按下"y&quo…

linux下手动下载安装Docker Compose

没想到docker装好之后&#xff0c;还得额外安装docker compose才能通过脚本启动docker镜像。 那就装吧&#xff0c;按照各种百度的&#xff0c;先运行以下语句 curl -L https://github.com/docker/compose/releases/download/1.22.0/docker-compose-uname -s-uname -m -o /usr…

IP数据云:实战网络安全的得力利器

在当今数字化时代&#xff0c;企业和个人面临着日益复杂和频繁的网络安全威胁。为了应对这些挑战&#xff0c;IP数据云作为一项全面的网络安全解决方案&#xff0c;已经在多个实际案例中展现了其卓越的能力。 1、识别并隔离异常行为 挑战&#xff1a;一家大型金融机构发现其内…

【服务器】服务器的管理口和网口

服务器通常会有两种不同类型的网络接口&#xff0c;即管理口&#xff08;Management Port&#xff09;和网口&#xff08;Ethernet Port&#xff09;&#xff0c;它们的作用和用途不同。 一、管理口 管理口通常是用于服务器管理的网络接口&#xff0c;也被称为外带网卡或带外接…

NumPy必知必会50例 | 13. 更复杂的数组操作:成为 NumPy 数组的魔法师

文章目录 13. 更复杂的数组操作&#xff1a;成为 NumPy 数组的魔法师数组排序&#xff1a;给混乱的数据一个顺序示例&#xff1a;简单排序 数组搜索&#xff1a;寻找隐藏的宝藏查找最大值和最小值的位置 NumPy 数组操作&#xff1a;无限可能 13. 更复杂的数组操作&#xff1a;成…

Github 不能访问,提示:port 22: Connection timed out

问题描述 github clone 代码出现错误&#xff1a; $ git clone gitgithub.com:Atlan4/Fnirsi1013D.git Cloning into Fnirsi1013D... ssh: connect to host github.com port 22: Connection timed out fatal: Could not read from remote repository.Please make sure you ha…

Unity 外观模式(实例详解)

文章目录 示例1&#xff1a;初始化游戏场景中的多个子系统示例2&#xff1a;管理音频播放示例3&#xff1a;场景加载流程示例4&#xff1a;UI管理器示例5&#xff1a;网络服务通信 在Unity中使用外观模式&#xff08;Facade&#xff09;时&#xff0c;主要目的是为了简化复杂子…

Webpack5 基本使用 - 1

Webpack 是什么 webpack 的核心目的是打包&#xff0c;即把源代码一个一个的 js 文件&#xff0c;打包汇总为一个总文件 bundle.js。 基本配置包括mode指定打包模式&#xff0c;entry指定打包入口&#xff0c;output指定打包输出目录。 另外&#xff0c;由于 webpack默认只能打…

6轴机器人运动正解-逆解控制【1】——三种控制位姿的方式

概览&#xff1a; 通过运动学正解控制机器人运动通过运动学逆解控制机器人运动一个简单的物体搬运&#xff08;沿轨迹运动&#xff09; 后续会陆续更新&#xff08;本例仅供学习交流用&#xff09; 一、6轴机器人 二、运动正解控制 通过修改各个轴的角度&#xff0c;实现末…

宠物互联网医院系统:数字化呵护你爱宠的新时代

宠物互联网医院系统正在为宠物主人提供一种前所未有的数字化健康护理体验。通过结合创新技术&#xff0c;这一系统旨在让宠物医疗变得更加便捷、智能和个性化。让我们深入探讨宠物互联网医院系统的技术核心&#xff0c;以及如何应用代码为你的爱宠提供最佳关怀。 1. 远程医疗…

linux clickhouse 安装

1、官网下载clickhouse安装包 下载地址&#xff0c; clickhouse分lts和stable版本&#xff0c;lts是长期版本&#xff0c;一般选择安装lts版本。 其中clickhouse-server是clickhouse服务&#xff0c;就是用来访问数据存储数据&#xff0c;clickhouse-client是用来通过命令访问数…

Java中的HTTPS通信

在Java中实现HTTPS通信&#xff0c;主要涉及到SSL/TLS协议的使用&#xff0c;用于提供数据传输的安全性。下面我们将深入探讨如何使用Java进行HTTPS通信。 一、基本概念 HTTPS&#xff0c;全称为Hypertext Transfer Protocol Secure&#xff0c;是HTTP的安全版本。它使用SSL/…

CSS之高度塌陷和外边距塌陷

目录 1.高度塌陷&#xff08;原因&#xff0c;如何解决&#xff09; 【概念介绍】 【解决办法】 【概念介绍-BFC】 【拓展-BFC的触发条件】 2.外边距塌陷 &#xff08;原因&#xff0c;如何解决&#xff09; 【概念介绍】 【两种情况】 1.相邻块元素 2.嵌套块元素 【…

码龙乘风 - AI助你不断升级的编程体验

这几年,人工智能(AI)技术飞速发展,现已深入到编程工具之中,助力程序员不断提高工作效率。下面我就谈谈 AI 给编程带来的一些实用功能,以及如何利用好这些功能,让编码变得更轻松、高效。 一、AI辅助编写代码 现在已有不少编程工具加入了AI助手,可以在编码时自动补全代码、提示…

中移(苏州)软件技术有限公司面试问题与解答(4)—— virtio所创建的设备1

接前一篇文章&#xff1a;中移&#xff08;苏州&#xff09;软件技术有限公司面试问题与解答&#xff08;0&#xff09;—— 面试感悟与问题记录 本文参考以下文章&#xff1a; VirtIO实现原理——PCI基础 VirtIO实现原理——virtblk设备初始化 特此致谢&#xff01; 本文对…

网络安全产品之认识漏洞扫描设备

文章目录 一、什么是漏洞扫描设备二、漏洞扫描设备的主要功能三、漏洞扫描设备的主要技术四、漏洞扫描设备的主要类型五、漏洞扫描设备的使用方式六、漏洞扫描设备如何与其他安全设备联动七、漏洞扫描设备的应用场景 漏洞是指在硬件、软件、协议的具体实现或系统安全策略上存在…

eNSP学习——VLAN基础配置及Access接口

目录 原理概述 实验内容&#xff1a; 实验目的&#xff1a; 实验步骤&#xff1a; 实验拓扑 配置过程 实验编址 基本配置 创建vlan 配置Access接口 原理概述 早期的局域网技术是基于总线型结构的。总线型拓扑结构是由一根单电缆连接所有主机&#xff0c;就导致所…

微认证 openEuler社区开源贡献实践

文章目录 1. 开源与开源社区2. openEuler 社区概述3.参与openEuler社区贡献4.openEuler软件包开发Linux软件管理——源码编译 1. 开源与开源社区 Richard Matthew Stallman&#xff0c;1983年9月推出GNU项目&#xff0c;并发起自由软件运动(free software movement或free/open…