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博客

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

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

相关文章

C++心决之内联函数+auto关键字+指针空值

C++心决之内联函数+auto关键字+指针空值

目录 7.内联函数 7.1 概念 7.2 特性 8. auto关键字(C11) 8.1 类型别名思考 8.2 auto简介 8.3 auto的使用细则 8.4 auto不能推导的场景 9. 基于范围的for循环(C11) 9.1 范围for的语法 9.2 范围for的使用条件 10. 指针空值nullptr(C11) 10.1 C98中的指针空值 7.内联…
阅读更多...
R语言颜色细分

R语言颜色细分

1.如何对R语言中两种颜色之间进行细分 2.代码&#xff1a; x <- colorRampPalette(c("#FC8D62","#FDEAE6"))(12) #打印向量值 # 按字典顺序排序颜色值 x_sorted <- sort(x,decreasing TRUE)# 打印排序后的颜色值 print(x_sorted)#展示颜色 scales:…
阅读更多...
18.web 应用测试

18.web 应用测试

每年必考&#xff1b; 考几个关键点&#xff1a; 1、计算通信量&#xff1b;给定并发多少、每个并发事务请求的量是多少、单位时间并发有多少个请求&#xff1b;计算吞吐量&#xff1b; 解&#xff1a;记公式&#xff1b;课上不讲&#xff0c;真题里有公式&#xff1b;比较容易…
阅读更多...
解决Flutter应用在苹果商店上架中常见的问题与挑战

解决Flutter应用在苹果商店上架中常见的问题与挑战

引言 Flutter是一款由Google推出的跨平台移动应用开发框架&#xff0c;其强大的性能和流畅的用户体验使其备受开发者青睐。然而&#xff0c;开发一款应用只是第一步&#xff0c;将其成功上架到苹果商店才是实现商业目标的关键一步。本文将详细介绍如何使用Flutter将应用程序上…
阅读更多...
第十四章 MySQL

第十四章 MySQL

一、MySQL 1.1 MySql 体系结构 MySQL 架构总共四层&#xff0c;在上图中以虚线作为划分。 1. 最上层的服务并不是 MySQL 独有的&#xff0c;大多数给予网络的客户端/服务器的工具或者服务都有类似的架构。比如&#xff1a;连接处理、授权认证、安全等。 2. 第二层的架构包括…
阅读更多...
JWFD流程图转换为矩阵数据库的过程说明

JWFD流程图转换为矩阵数据库的过程说明

在最开始设计流程图的时候&#xff0c;请务必先把开始节点和结束节点画到流程图上面&#xff0c;就是设计器面板的最开始两个按钮&#xff0c;先画开始点和结束点&#xff0c;再画中间的流程&#xff0c;然后保存&#xff0c;这样提交到矩阵数据库就不会出任何问题&#xff0c;…
阅读更多...
MQ消息队列详解以及MQ重复消费问题

MQ消息队列详解以及MQ重复消费问题

MQ消息队列详解以及MQ重复消费问题 1、解耦2、异步调用3、流量削峰4、MQ重复消费问题&#xff0c;以及怎么解决&#xff1f;4.1、重复消费产生4.2、解决方法&#xff1a; https://blog.csdn.net/qq_44240587/article/details/104630567 核心的就是&#xff1a;解耦、异步、削锋…
阅读更多...
C#/WPF 使用开源Wav2Lip做自己的数字人(无需安装环境)

C#/WPF 使用开源Wav2Lip做自己的数字人(无需安装环境)

实现效果 Speaker Wav2Lip概述 2020年&#xff0c;来自印度海德拉巴大学和英国巴斯大学的团队&#xff0c;在ACM MM2020发表了的一篇论文《A Lip Sync Expert Is All You Need for Speech to Lip Generation In The Wild 》&#xff0c;在文章中&#xff0c;他们提出一个叫做Wa…
阅读更多...
【R】Error in library(foreach) : 不存在叫‘foreach’这个名字的程辑包

【R】Error in library(foreach) : 不存在叫‘foreach’这个名字的程辑包

Error in library(foreach) : 不存在叫‘foreach’这个名字的程辑包 此外: Warning message: package ‘parallel’ is a base package, and should not be updated 解决方法 缺少名为 foreach 的包&#xff0c;使用install.packages("foreach")将名为foreach 的包…
阅读更多...
人脸、指纹、刷卡、密码、远程，一文速懂不同功能门禁系统怎么选？

人脸、指纹、刷卡、密码、远程，一文速懂不同功能门禁系统怎么选？

门禁系统顾名思义就是对出入口通道进行管制的系统&#xff0c;它是在传统的门锁基础上发展而来。常见的门禁系统包括&#xff1a;密码识别门禁系统、刷卡识别门禁系统、生物识别门禁系统以及线上远程开门系统等。 在选择门禁系统时&#xff0c;需要根据不同的场景和需求&#x…
阅读更多...
游戏引擎中的物理系统

游戏引擎中的物理系统

一、物理对象与形状 1.1 对象 Actor 一般来说&#xff0c;游戏中的对象&#xff08;Actor&#xff09;分为以下四类&#xff1a; 静态对象 Static Actor动态对象 Dynamic Actor ---- 可能受到力/扭矩/冲量的影响检测器 TriggerKinematic Actor 运动学对象 ---- 忽略物理法则…
阅读更多...
WordPress外贸建站Astra免费版教程指南（2024）

WordPress外贸建站Astra免费版教程指南（2024）

在WordPress的外贸建站主题中&#xff0c;有许多备受欢迎的主题&#xff0c;如Avada、Astra、Hello、Kadence等最佳WordPress外贸主题&#xff0c;它们都能满足建站需求并在市场上广受认可。然而&#xff0c;今天我要介绍的是一个不断颠覆建站人员思维的黑马——Astra主题。 原…
阅读更多...
正则表达式（1）

正则表达式（1）

文章目录 专栏导读1、match2、匹配目标3、通用匹配4、常用匹配规则表格 专栏导读 ✍ 作者简介&#xff1a;i阿极&#xff0c;CSDN 数据分析领域优质创作者&#xff0c;专注于分享python数据分析领域知识。 ✍ 本文录入于《python网络爬虫实战教学》&#xff0c;本专栏针对大学生…
阅读更多...
朱啕虎对中美AIGC差距的观点总结

朱啕虎对中美AIGC差距的观点总结

根据访谈内容,我总结了以下5个主题,每个主题包含相关的观点: 中美在大模型和应用创新方面的差距 美国在大模型和应用创新方面更为领先中国在数据和应用场景方面优势明显美国的创新更多集中在"顶层"- 追求更高端的应用,如生成视频、电影等,但实现难度较大中国的AIGC…
阅读更多...
Jamba: A Hybrid Transformer-Mamba Language Model

Jamba: A Hybrid Transformer-Mamba Language Model

Jamba: A Hybrid Transformer-Mamba Language Model 相关链接&#xff1a;arXiv 关键字&#xff1a;hybrid architecture、Transformer、Mamba、mixture-of-experts (MoE)、language model 摘要 我们介绍了Jamba&#xff0c;一种新的基于新颖混合Transformer-Mamba混合专家&am…
阅读更多...
Redis缓存穿透、击穿与雪崩及对应的解决办法

Redis缓存穿透、击穿与雪崩及对应的解决办法

文章目录 Redis缓存穿透、击穿和雪崩一. 缓存穿透二. 缓存击穿三. 缓存雪崩 Redis缓存穿透、击穿和雪崩 图中的上半部分可理解为缓存雪崩&#xff0c;下半部分可理解为缓存穿透&#xff0c;接下来一起学习 一. 缓存穿透 概念 简而言之&#xff1a;数据查不到 用户想要查询一个…
阅读更多...
如何优化TCP？TCP的可靠传输机制是什么？

如何优化TCP？TCP的可靠传输机制是什么？

在网络世界中&#xff0c;传输层协议扮演着至关重要的角色&#xff0c;特别是TCP协议&#xff0c;以其可靠的数据传输特性而广受青睐。然而&#xff0c;随着网络的发展和数据量的激增&#xff0c;传统的TCP协议在效率方面遭遇了挑战。小编将深入分析TCP的可靠性传输机制&#x…
阅读更多...
“由于找不到opencv_world3413.dll，无法继续执行代码”的解决方法

“由于找不到opencv_world3413.dll，无法继续执行代码”的解决方法

问题 在Windows系统中&#xff0c;编译完涉及到opencv的项目后&#xff0c;提示&#xff0c; 由于找不到opencv_world3413.dll&#xff0c;无法继续执行代码 解决方法 在编译好的opencv的bin文件内&#xff08;如&#xff1a;D:\code\vs2017\opencv\build\x64\vc15\bin&…
阅读更多...
HTMLCSS

HTMLCSS

前端入门 1、HTML&CSS 1、选择器 通配选择器 元素选择器 类选择器 id选择器 复合(组合) 选择器 交集选择器(且) <style> p.class {... } /* 元素选择器需在前面 */.class1.class2 {... } </style>并集选择器(或者) <style> .class1, .class2, …
阅读更多...
Kaggle:收入分类

Kaggle:收入分类

先看一下数据的统计信息 import pandas as pd # 加载数据&#xff08;保留原路径&#xff0c;但在实际应用中建议使用相对路径或环境变量&#xff09; data pd.read_csv(r"C:\Users\11794\Desktop\收入分类\training.csv", encodingutf-8, encoding_errorsrepl…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发