【前端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.hqwc.cn/news/427697.html

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

相关文章

山体滑坡监测预警系统-gnss位移监测站

GNSS山体滑坡位移监测站是一种利用全球导航卫星系统&#xff08;GNSS&#xff09;进行山体滑坡位移监测的设备。它通过接收和处理GNSS卫星信号&#xff0c;能够实时监测山体的位移变化&#xff0c;并将数据传输到后端系统进行分析和处理。 GNSS山体滑坡位移监测站具有高精度、…

Maven项目install时,报java版本错误

maven项目执行了很多次&#xff0c;突然就install失败了&#xff0c;抛出异常信息&#xff1a; org/springframework/boot/maven/repackagemojo has been compiled by a more recent version of the java Runtime&#xff08;class file version 61.0&#xff09;,this of the…

阿尔泰科技——有效解决大桥建筑健康状态监测难题!

背景介绍&#xff1a; 在现代社会&#xff0c;大桥作为连接城市的重要交通枢纽&#xff0c;承载着巨大的交通流量和重要的社会功能。然而&#xff0c;由于长期使用和环境因素的影响&#xff0c;大桥的结构健康状态监测成为了一项重要的任务。阿尔泰科技凭借其多年的技术积累和…

数论问题(算法村第十三关黄金挑战)

辗转相除法 8 和 12 的最大公因数是 4&#xff0c;记作 gcd(8,12)4。辗转相除法最重要的规则是&#xff1a; 若 mod 是 a b 的余数, 则gcd(a, b) gcd(b, mod)&#xff0c;直到a % b 0时&#xff0c;返回 b的值 gcd(546, 429) gcd(429, 117) gcd(117, 78) gcd(78, 39) …

Scapy编程指南(基础概念)

Scapy编程指南&#xff08;基础概念&#xff09; Scapy是什么 Scapy是Python中一个非常强大的库&#xff0c;它专门用于处理、发送和捕获网络协议中的数据包&#xff0c;它允许开发人员通过Python代码构建、解析和发送自定义网络协议的数据包。Scapy提供了一种直观、灵活的方…

免费SSL申请和自动更新

当前是在mac下操作 安装certbot # mac下brew安装即可 brew install certbotcentos 安装 centos安装文档 申请泛解析证书 sudo certbot certonly --manual --preferred-challengesdns -d *.yourdomain.com## 输出 Saving debug log to /var/log/letsencrypt/letsencrypt.lo…

四、Flask学习之JavaScript

四、Flask学习之JavaScript JavaScript&#xff0c;作为一种前端脚本语言&#xff0c;赋予网页生动的交互性和动态性。通过它&#xff0c;开发者能够操作DOM&#xff08;文档对象模型&#xff09;实现页面元素的动态改变、响应用户事件&#xff0c;并借助AJAX技术实现异步数据…

云计算项目五:部署数据库服务mysql |部署共享存储服务NFS | 配置网站服务

部署数据库服务mysql |部署共享存储服务NFS | 配置网站服务 案例1:配置逻辑卷步骤一:创建LV步骤二:格式化案例2:配置数据库服务器步骤一:安装软件MySQL服务软件(2台数据库服务器都要安装)步骤二:挂载lv设备步骤三:启动服务步骤四:管理员登录案例3:配置主从同步步骤一…

网工内推 | 国企、合资公司IT专员,13薪,NA以上即可

01 上海新徐汇&#xff08;集团&#xff09;有限公司 招聘岗位&#xff1a;IT运维 职责描述&#xff1a; 1.负责制定网络体系搭建、IP地址分配、网络拓扑图、无线网络等&#xff1b; 2.负责桌面运维技术支持&#xff0c;确保各类系统和终端设备正常工作&#xff1b; 3.负责弱电…

【并发编程】活锁

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;并发编程 ⛺️稳重求进&#xff0c;晒太阳 活锁 定义&#xff1a;活锁出现在两个线程互相改变对象的结束条件&#xff0c;最后谁也无法结束 代码示例 public class TestLiveLock {stati…

微机原理常考填空以及注意事项第(三)弹~

前面已经总结了200个常考题注意事项&#xff0c;可以翻阅查看。 以下仅个人总结的易错以及注意事项&#xff1a; 1&#xff0c;汇编语言源程序的基本格式&#xff1a; DATA SEGMENT;存放数据项的数据段 DATA ENDS EXTRA SEGMENT;存放数据项的附加段 EXTRA ENDS STACK1 SEGM…

React实现字符串首字母大写、翻转字符串、获取用户选定的文本

目录 React实现字符串首字母大写React实现翻转字符串React获取用户选定的文本 React实现字符串首字母大写 import React, { useState } from reactfunction App() {const [inputText, setInputText] useState()const [outputText, setOutputText] useState()const handleInpu…