HTML常用的图片标签和超链接标签

目录

 一.常用的图片标签和超链接标签:

1.超链接标签:

前言:

 超链接的使用:

target属性:

1)鼠标样式:

2)颜色及下划线:

总结:

2.图片标签:

前言:

img的使用:

设置图片:

1.设置宽度和高度:

2.HTML5中的:

图片映射:

shape和coords属性:

总结:


 一.常用的图片标签和超链接标签:

1.超链接标签:

前言:

在HTML中,我们常常用<a>标签来表示超链接。所谓超链接(Hyperlink)简称(Link),是指用一个地址把一个网页和另外一个网页链接起来,这个东西可以是另外一个网页的地址,也可以当前网页中其他的位置,比如点击回到顶部,还可以是图片,文件,应用程序等,链接的两端分别称为源锚点(当前锚点)和目标锚点(其他的网页),通过点击源锚点就可以跳转到目标锚点。

HTML常用文本标签-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/lh11223326/article/details/137168202?spm=1001.2014.3001.5501HTML标签的语法和属性-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/lh11223326/article/details/137163794?spm=1001.2014.3001.5501

 超链接的使用:

<a>标签的语法格式如下:

<a href="url" target="opentype">里面的内容</a>

其中的href属性是用来指明要跳转的url(地址),target属性用来指明新页面的打开方式,可以重新创建也可以原地覆盖,<a>和</a>之间的内容可以是图片,文本,内容被<a>标签覆盖后只要点击就可以跳到<a>标签href填写的网址处。

如下示例代码:

<a href="https://www.bilibili.com/">点击跳转至bilibili</a>

<a>标签的href属性:

href属性是用来指定要链接的目标的,也就是要跳转的位置,href可以多种形式,如:

  • href可以指向一个网页(.html,.php,.jsp,.asp),这是最常见的,如href="https://www.bilibili.com/"
  • href还可以指向图片href="https://img95.699pic.com/photo/40188/6006.jpg_wh860.jpg,(.jpg,,gif,png等),音频(.mp4,.mkv格式)等媒体文件,例如href="/...../img/ahis.jpg";
  • href可以指向压缩文件(.zip,.rar等格式),可执行程序(.exe)等,一些下载网站的链接可以写成这种形式,如href="./..../data/ycakp.zip";
  • href还可以指向本机文件,只是很少这样做,如:"D:/.../img/ias.exe";

href本质上就是指向一个文件,这个文件可以随便格式,只要是浏览器支持此文件,那么他就可以在浏览器上显示,比如图片,音频,视频等,如果浏览器不支持这个格式,那么就提示用户下载。

另外,href可以是绝对路径,也可以是相对路径,绝对路径往往以域名为起点,如:https://www.bilibili.com/,相对路径往往以当前文件或者当前域名为起点,如/.../img/ag.jpg.

target属性:

target是可选属性,当我们点击一个链接是一般的如果没有设置target属性的话那么就是浏览器默认的打开方式,如果设置了的话那就是按照对应的方式打开。如下是属性的值:

属性值说明
_self默认,在点击链接的窗口处打开,原来的窗口被覆盖。
_blank新建一个窗口里面的内容就是点击链接的网页。
_parent在当前框架的上一层打开新的页面。
_top在顶层框架中打开新页面。

在一般情况下,target属性不会写,要门保持默认的_self,要么手动将他设置为_blank,在新窗口打开。如下代码:

<a href="https://www.bilibili.com/">覆盖现在的窗口换成bilibili</a>
<a href="https://www.bilibili.com/" target="_blank">在新窗口打开bilibili</a>

 <a>标签的默认样式:

浏览器会给<a>标签设置一些默认样式。

1)鼠标样式:

当鼠标移入链接区域时,会变成一只小手;当鼠标移出链接区域时,会变回箭头形状。

2)颜色及下划线:

超链接被点击之前为蓝色,超链接被点击之后为紫色。超链接默认带有下划线,下划线颜色和文本颜色保持一致。

浏览器根据历史记录来判断超链接是否被点击过,如果href属性和历史记录中的某条URL重合,那么说明该链接被点击了,清空浏览器的历史记录会让超链接的颜色再次变回蓝色。如下图所示:

总结:

超链接是网页中最常见的元素之一,可以这样说互联网是基于超链接建立的,他把网页与网页链接起来,使得网页之间不再是独立的,它就像一个看不见的线,把网页链接在一起,形成一个网一样的形状,正是因为这样互联网才能被称为"互联网",而这一切都是因为有超链接。 


2.图片标签:

前言:

一图胜千言,图片比文件字更具有表现力,可以让网页更加精美,一段内容如果用文字只是描述出来,而图片则是展示出来。

在HTML中常常用<img>来显示图片,img是image的简称,<img>是个自闭合标签,它只包含属性,没有结束的标签</img>.

img的使用:

img的语法如下:

<img src="url" alt="text">

说明:

  • src是必选属性,他是source的简称,用来指明图片的地址或者路径,src支持多种图片格式,比如jpg,png,gif等,src可以使用相对路径,也可以使用绝对路径。
  • alt是可选属性,用来定义图片的文字描述信息,当由于某些原因(如图片路径错误,网络连接失败)导致图片无法显示的时候就会显示alt属性中的信息。

设置图片:

1.设置宽度和高度:

如要为<img>标签设置宽度和高度的话需要使用width(宽度)和height(高度)属性来指定图片的宽度和高度,默认情况下这些属性都是以像素为单位。如下图:

 

<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.EpxMzbWHD39VZ-nmL0fs4AHaFj?w=195&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt="此图片加载成功了??" title="此图片加载成功了" width="150" height="150">

还可以使用style来指定图片的宽度和高度,如下代码:

<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.EpxMzbWHD39VZ-nmL0fs4AHaFj?w=195&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7"
        alt="此图片加载成功了??" title="此图片加载成功了" style="width: 150;height: 150;">

需要注意的一点是,width和height只是临时修改图片的尺寸,并不会改变图片原始文件的大小。

关于width和height属性的建议:

  • 一般建议为图片设置width和height属性,以便浏览器可以在加载图片之前为其分配足够了空间,否则图片加载过程可能会到最后网页布局失真或闪烁。
  • 如果页面使用了响应式布局(自适应布局),建议在上图图片之前裁剪好尺寸,不要设置width和height属性,,这样图片会跟着屏幕的宽度自动改变尺寸,从而不会变形,或者超出屏幕宽度。
2.HTML5中的<picture>:

有时候我们需要按照比例来放大或缩小图片的尺寸以适应不同的设备,避免图片过大超出屏幕的范围,HTML5中新增加的<picture>标签可以解决这个问题,该标签允许你针对不同的设备定义多个版本的图片。

在<picture>标签中可以包含<source>标签,通过<soucre>标签的media属性可以设定匹配条件,通过srcset属性可以定义图片的路径,另外,在<picture>标签的最后还需要定一个<img>标签,代码如下:

<picture>
    <source media="(min-width: 1000px)" srcset="logo-large.png">
    <source media="(max-width: 500px)" srcset="logo-small.png">
    <img src="logo-default.png" alt="C语言中文网默认Logo">
</picture>

浏览器将评估每个<source>标签,并选择最合适的<source>标签,如果没有找到匹配项,则使用<img>标签所定义的图片,另外<img>必须是<picture>标签的最后一个元素

图片映射:

图像映射允许在一个图片中定义超链接,其实就是在图像中划分一些区域,并在这些区域定义超链接。如下是代码示例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img src="./img/06EE610BCC0208A67AFC6C4FB2DF97A2.jpg" usemap="#objects" alt="bilibili">
    <map name="objects">
        <area shape="rect" coords="0,0,82,126" href="https://www.bilibili.com/" alt="首页">
        <area shape="circle" coords="90,58,3" href="https://www.bilibili.com/anime/?spm_id_from=333.1007.0.0" alt="动漫">
        <area shape="circle" coords="124,58,8" href="https://game.bilibili.com/platform/?spm_id_from=666.4.0.0" alt="游戏">
    </map>
</body>

</html>

<map>标签的name属性对应<img>标签的usemap属性,<area>标签用于定义图片可以点击的位置(区域),不仅如此还可以再一张图片中定义多个可点击区域。

shape和coords属性:

在<area>标签中可以通过shape属性来定义可点击区域的形状,并通过coords属性来定义形状所对应的坐标,其中shape属性的可选值有三个,分别是rect(矩形),circle(圆形)和poly(多边形),coords属性中坐标的值取决于可点击区域的形状。

总结:

如今图片标签在网页设计中已经是不可或缺的一部分了,很多信息可以使用图片直观有效的表达出来,不容易造成误解,由此图片标签的重要程度就不言而喻了。

HTML表格表单以及列表-CSDN博客

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

内网渗透之黄金票据的制作

1、黄金票据是用来留后门的也叫做未知权限&#xff0c;前提条件是你已经拿到了域控的最高权限 一、开始之前我们先来了解一下kerberos Kerberos是一种由MIT&#xff08;麻省理工大学&#xff09;提出的一种网络身份验证协议。它旨在通过使用密钥加密技术为客户端/服务器应…

基于muduo网络库实现的集群聊天服务器

目录 项目内容开发环境安装说明技术介绍项目目录数据库设计项目介绍启动服务器启动客户端注册账号登录成功一对一聊天业务创建群聊业务加入群聊业务群聊业务添加好友业务离线消息存储业务 特殊说明 &#xff01;&#xff01;&#xff01;项目是照着腾讯课堂施磊老师的视频学习&…

【QT+QGIS跨平台编译】054:【exiv2lib_int+Qt跨平台编译】(一套代码、一套框架,跨平台编译)

点击查看专栏目录 文章目录 一、exiv2lib_int介绍二、文件下载三、文件分析四、pro文件五、编译实践一、exiv2lib_int介绍 exiv2lib_int是 exiv2 这个开源的图像元数据库中的一个组件。 Exiv2是一个开源的C++库,用于读取、编辑和写入图片和视频文件的元数据。它可以处理各种类…

01-XML-04XML处理

XML处理 DOM DOM解析要求解析器将整个XML文件全部加载到内存中&#xff0c;生成一个Document对象。 优点&#xff1a;元素和元素之间保留结构&#xff0c;关系&#xff0c;可以针对元素进行增删改查操作。 缺点&#xff1a;如果XML文件过大&#xff0c;可能会导致内存溢出。SA…

【Linux】寿司线程池{单例模式之懒汉模式下的线程池}

文章目录 回顾单例模式0.多线程下的单例模式的意义1.什么是单例模式1.0设计模式1.1C单例模式的介绍及原理1.2拷贝构造和赋值重载的处理1.3if (nullptr ptr)&#xff0c;nullptr放在比较运算符的前面?1.4实现单例模式的方式 2.实现懒汉方式的单例模式2.1单线程的单例模式2.2多…

Go 源码之 gin 框架

Go 源码之 gin 框架 go源码之gin - Jxy 博客 一、总结 gin.New()初始化一个实例&#xff1a;gin.engine&#xff0c;该实例实现了http.Handler接口。实现了ServeHTTP方法 注册路由、注册中间件&#xff0c;调用addRoute将路由和中间件注册到 methodTree 前缀树&#xff08;节…

AR-Net网络(图像篡改检测)

AR-Net网络 摘要AbstractAR-Net1. 文献摘要2. 研究背景3. 创新点4. AR-Net 网络架构5. 实验6. 结论总结 摘要 AR-Net使用自适应注意力机制来融合位置和通道维度的特征&#xff0c;使网络能够充分利用不同维度的被篡改特征&#xff0c;此外&#xff0c;AR-Net 改进了预测掩模&a…

【Web and HTTP,HTTP概况,HTTP连接,持久HTTP,用户-服务器状态:cookie】

文章目录 Web and HTTPHTTP概况HTTP:超文本传输协议使用TCP&#xff1a;HTTP是无状态的 HTTP连接非持久HTTP持久HTTP响应时间模型 持久HTTP非持久HTTP的缺点&#xff1a;持久HTTP提交表单输入 用户-服务器状态&#xff1a;cookie Web and HTTP Web页&#xff1a;由一些对象组成…

智慧校园管理系统

一、项目介绍 1.1 项目简介 智慧校园管理系统&#xff1a;主要是以年级、班级为单位&#xff0c;进行老师和学生信息记录和统计功能。项目采用前后端分离架构思想&#xff0c;前端采用HTMLCSSVUE来实现页面效果展示&#xff0c;后端采用SpringBootMybatisPlus框架实现数据存储…

v3-admin-vite 改造自动路由,view页面自解释Meta

需求 v3-admin-vite是一款不错的后端管理模板&#xff0c;主要是pany一直都在维护&#xff0c;最近将后台管理也进行了升级&#xff0c;顺便完成一直没时间解决的小痛痒&#xff1a; 在不使用后端动态管理的情况下。我不希望单独维护一份路由定义&#xff0c;我希望页面是自解…

鸿蒙手机cordova-plugin-camera不能拍照和图片不显示问题

鸿蒙手机cordova-plugin-camera不能拍照和图片不显示问题 一、运行环境 1、硬件 手机型号&#xff1a;NOVA 7 系统&#xff1a;HarmonyOS版本 4.0.0 2、软件 android SDK platforms&#xff1a;14.0(API Level 34)、13.0&#xff08;API Level 33&#xff09; SDK Build-T…

【踩坑】荣耀系统Android8.0 system目录Read-only file system

本来以为直接把Charles证书改成系统证书格式&#xff0c;然后通过mt管理器root之后移动到系统证书目录就行了&#xff0c;结果访问baidu仍然显示网络错误&#xff0c;折腾一晚上。后来直接安装为用户证书&#xff0c;与系统证书冲突。 手机型号&#xff1a;荣耀v10 EMUI&…

win10 安装kubectl,配置config连接k8s集群

安装kubectl 按照官方文档安装&#xff1a;https://kubernetes.io/docs/tasks/tools/install-kubectl-windows/ curl安装 &#xff08;1&#xff09;下载curl安装压缩包: curl for Windows &#xff08;2&#xff09;配置环境变量&#xff1a; 用户变量&#xff1a; Path变…

牛客NC92 最长公共子序列(二)【中等 动态规划 Java,Go,PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/6d29638c85bb4ffd80c020fe244baf11 思路 https://blog.csdn.net/qq_36544411/article/details/120021203 思路 动态规划法&#xff0c; 我们以dp[i][j]表示在s1中以第i个元素结尾&#xff0c;s2中以第j个元素结…

CCF-CSP26<2022-06>-第1/2/3题

202206-1 归一化处理 题目&#xff1a;202206-1 题目分析&#xff1a; 给出了数学上归一化的数学公式&#xff0c;直接按照要求完成即可。 AC代码&#xff1a; #include <bits/stdc.h> using namespace std; int main() {int n;cin >> n;double a[n];double s…

开关恒流源简介

目录 工作原理 设计要点 应用场景 初步想法&#xff0c;为参加活动先占贴&#xff08;带家人出去玩没时间搞~~&#xff09;&#xff0c;后面优化 开关恒流源是一种基于开关电源技术的恒流输出电源设备。它采用开关管进行高速的开关动作&#xff0c;通过控制开关管的导通和截…

【跟小嘉学 Linux 系统架构与开发】一、学习环境的准备与Linux系统概述

系列文章目录 【跟小嘉学 Linux 系统架构与开发】一、学习环境的准备与Linux系统介绍 文章目录 系列文章目录[TOC](文章目录) 前言一、Linux 概述1.1、GNU 与自由软件1.2、Linux是什么1.3、Linux 特色1.4、Linux的优缺点1.4.1、Linux 优点1.4.2、Linux 缺点 二、虚拟机介绍2.1…

数据结构与算法 顺序栈的基本运算

一、实验内容 编写一个程序sqstack.cpp&#xff0c;实现顺序栈的各种基本运算&#xff0c;并在此基础上写一个程序exp6.cpp,实现以下功能 初始化栈s判断栈是否为空依次进栈元素a,b,c,d,e判断栈是否为空输出出栈序列判断栈是否为空释放栈 二、实验步骤 1、sqstack.cpp 2、ex…

6.5物联网RK3399项目开发实录-驱动开发之LCD显示屏使用(wulianjishu666)

90款行业常用传感器单片机程序及资料【stm32,stc89c52,arduino适用】 链接&#xff1a;https://pan.baidu.com/s/1M3u8lcznKuXfN8NRoLYtTA?pwdc53f LCD使用 简介 AIO-3399J开发板外置了两个LCD屏接口&#xff0c;一个是EDP&#xff0c;一个是LVDS&#xff0c;接口对应板…

go: go.mod file not found in current directory or any parent directory.如何解决?

这个错误表明你正在执行 go get 命令&#xff0c;但是当前目录或任何父目录中都找不到 go.mod 文件。这可能是因为你的项目还没有使用 Go Modules 进行管理。 要解决这个问题&#xff0c;有几种方法&#xff1a; go mod init <module-name> 其中 <module-name>…