HTML常用的图片标签和超链接标签
目录
一.常用的图片标签和超链接标签:
1.超链接标签:
前言:
超链接的使用:
target属性:
1)鼠标样式:
2)颜色及下划线:
总结:
2.图片标签:
前言:
img的使用:
设置图片:
1.设置宽度和高度:
2.HTML5中的:
图片映射:
shape和coords属性:
总结:
一.常用的图片标签和超链接标签:
1.超链接标签:
前言:
在HTML中,我们常常用<a>标签来表示超链接。所谓超链接(Hyperlink)简称(Link),是指用一个地址把一个网页和另外一个网页链接起来,这个东西可以是另外一个网页的地址,也可以当前网页中其他的位置,比如点击回到顶部,还可以是图片,文件,应用程序等,链接的两端分别称为源锚点(当前锚点)和目标锚点(其他的网页),通过点击源锚点就可以跳转到目标锚点。
HTML常用文本标签-CSDN博客
https://blog.csdn.net/lh11223326/article/details/137168202?spm=1001.2014.3001.5501HTML标签的语法和属性-CSDN博客
https://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博客
相关文章:

HTML常用的图片标签和超链接标签
目录 一.常用的图片标签和超链接标签: 1.超链接标签: 前言: 超链接的使用: target属性: 1)鼠标样式: 2)颜色及下划线: 总结: 2.图片标签: 前言: img的使用: 设置图片: 1.设置宽度和高度: 2.HTM…...

浏览器工作原理与实践--WebAPI:XMLHttpRequest是怎么实现的
在上一篇文章中我们介绍了setTimeout是如何结合渲染进程的循环系统工作的,那本篇文章我们就继续介绍另外一种类型的WebAPI——XMLHttpRequest。 自从网页中引入了JavaScript,我们就可以操作DOM树中任意一个节点,例如隐藏/显示节点、改变颜色、…...

TCP网络协议栈和Posix网络部分API总结
文章目录 Posix网络部分API综述TCP协议栈通信过程TCP三次握手和四次挥手(看下图)三次握手常见问题?为什么是三次握手而不是两次?三次握手和哪些函数有关?TCP的生命周期是从什么时候开始的? 四次挥手通信状态…...
《解释器模式(极简c++)》
本文章属于专栏- 概述 - 《设计模式(极简c版)》-CSDN博客 模式说明 方案: 对每个data建立一个单点解释器对象X,dataA和dataB之间的关系,建立一个关系解释器对象Y,这里的Y处理的是X1和X2。这样,…...

c#仿ppt案例
画曲线 namespace ppt2024 {public partial class Form1 : Form{public Form1(){InitializeComponent();}//存放所有点的位置信息List<Point> lstPosition new List<Point>();//控制开始画的时机bool isDrawing false;//鼠标点击开始画private void Form1_MouseD…...

10.图像高斯滤波的原理与FPGA实现思路
1.概念 高斯分布 图像滤波之高斯滤波介绍 图像处理算法|高斯滤波 高斯滤波(Gaussian filter)包含很多种,包括低通、高通、带通等,在图像上说的高斯滤波通常是指的高斯模糊(Gaussian Blur),是一种高斯低通滤波。通常这个算法也可以用来模…...

WebGIS 地铁交通线网 | 图扑数字孪生
数字孪生技术在地铁线网的管理和运维中的应用是一个前沿且迅速发展的领域。随着物联网、大数据、云计算以及人工智能技术的发展,地铁线网数字孪生在智能交通和智慧城市建设中的作用日益凸显。 图扑软件基于 HTML5 的 2D、3D 图形渲染引擎,结合 GIS 地图…...

Docker 哲学 - push 本机镜像 到 dockerhub
注意事项: 1、 登录 docker 账号 docker login 2、docker images 查看本地镜像 3、注意的是 push镜像时 镜像的tag 需要与 dockerhub的用户名保持一致 eg:本地镜像 express:1 直接 docker push express:1 无法成功 原因docker不能识别 push到哪里 …...

大数据学习第十二天(hadoop概念)
1、服务器之间数据文件传递 1)服务器之间传递数据,依赖ssh协议 2)http协议是web网站之间的通讯协议,用户可已通过http网址访问到对应网站数据 3)ssh协议是服务器之间,或windos和服务器之间传递的数据的协议…...

管理科学笔记
1.线性规划 画出区域,代入点计算最大最小值 2.最小生成树 a.断线法,从大的开始断 b.选择法,从小的开始选 3.匈牙利法 维度数量直线覆盖所有的0 4.一直选最当前路线最短路径 5.线性规划 6.决策论...
WebKit结构简介
WebKit是一款开源的浏览器引擎,用于渲染网页内容。它负责将HTML、CSS和JavaScript等网络资源转换为用户在屏幕上看到的图形界面。WebKit是一个跨平台的引擎,可以在多种操作系统上运行,如Windows、macOS、Linux等。 以下是一篇关于WebKit结构…...

Kaggle:收入分类
先看一下数据的统计信息 import pandas as pd # 加载数据(保留原路径,但在实际应用中建议使用相对路径或环境变量) data pd.read_csv(r"C:\Users\11794\Desktop\收入分类\training.csv", encodingutf-8, encoding_errorsrepl…...

【Go】十七、进程、线程、协程
文章目录 1、进程、线程2、协程3、主死从随4、启动多个协程5、使用WaitGroup控制协程退出6、多协程操作同一个数据7、互斥锁8、读写锁9、deferrecover优化多协程 1、进程、线程 进程作为资源分配的单位,在内存中会为每个进程分配不同的内存区域 一个进程下面有多个…...
深入剖析JavaScript中的this(上)
在Javascript中,this 关键字是一个非常重要的概念,this这个关键字可以说是很常见也用的很多,说它简单也很简单,说它难也很难。我们经常会用到this,也经常会因为this头疼,是一个经常被误解和误用的概念&…...

Junit深入讲解(JAVA单元测试框架)
1、此处用的是Junit5,此处pom文件需要引的依赖是 <dependency><groupId>org.junit.jupiter</groupId><artifactId>junit-jupiter-api</artifactId><version>5.9.1</version><scope>test</scope></depende…...

Spring boot如何执行单元测试?
Spring Boot 提供了丰富的测试功能,主要由以下两个模块组成: spring-boot-test:提供测试核心功能。spring-boot-test-autoconfigure:提供对测试的自动配置。 Spring Boot 提供了一个 spring-boot-starter-test一站式启动器&…...

Django详细教程(一) - 基本操作
文章目录 前言一、安装Django二、创建项目1.终端创建项目2.Pycharm创建项目(专业版才可以)3.默认文件介绍 三、创建app1.app介绍2.默认文件介绍 四、快速上手1.写一个网页步骤1:注册app 【settings.py】步骤2:编写URL和视图函数对…...

Qt编译QScintilla(C++版)过程记录,报错-lqscintilla2_qt5d、libqscintilla2_qt5找不到问题解决
Qt编译QScintilla [C版] 过程记录 本文是编译该 QScintilla 组件库供 QtCreater 开发 C 桌面软件 流程记录一、编译环境 系统: Windows 10Qt:Qt 5.14.2编译套件:MinGW 64Qscintilla:QScintilla_src-2.11.6 二、下载链接 网站链…...
android QtScrcpy 共享屏幕 获取本地Address
android QtScrcpy https://gitee.com/B arryda/QtScrcpy scrcpy - 手机无线投屏到电脑 https://zhuanlan.zhihu.com/p/80264357?utm_sourcewechat_session public String getLocalIpAddress() { String ipv4; List<NetworkInterface> nilist …...

【SQL Server】1. 认识+使用
1. 创建数据库的默认存储路径 C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Microsoft SQL Server 2008 R2 当我们选择删除数据库时,对应路径下的文件也就删除了 2. 导入导出数据工具的路径 3. 注册数据库遇到的问题 ??? 目前的问题就是服务器新建…...

测试微信模版消息推送
进入“开发接口管理”--“公众平台测试账号”,无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息: 关注测试号:扫二维码关注测试号。 发送模版消息: import requests da…...
day52 ResNet18 CBAM
在深度学习的旅程中,我们不断探索如何提升模型的性能。今天,我将分享我在 ResNet18 模型中插入 CBAM(Convolutional Block Attention Module)模块,并采用分阶段微调策略的实践过程。通过这个过程,我不仅提升…...

基于ASP.NET+ SQL Server实现(Web)医院信息管理系统
医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上,开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识,在 vs 2017 平台上,进行 ASP.NET 应用程序和简易网站的开发;初步熟悉开发一…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明
AI 领域的快速发展正在催生一个新时代,智能代理(agents)不再是孤立的个体,而是能够像一个数字团队一样协作。然而,当前 AI 生态系统的碎片化阻碍了这一愿景的实现,导致了“AI 巴别塔问题”——不同代理之间…...
大数据学习(132)-HIve数据分析
🍋🍋大数据学习🍋🍋 🔥系列专栏: 👑哲学语录: 用力所能及,改变世界。 💖如果觉得博主的文章还不错的话,请点赞👍收藏⭐️留言Ǵ…...
Java线上CPU飙高问题排查全指南
一、引言 在Java应用的线上运行环境中,CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时,通常会导致应用响应缓慢,甚至服务不可用,严重影响用户体验和业务运行。因此,掌握一套科学有效的CPU飙高问题排查方法&…...

云原生玩法三问:构建自定义开发环境
云原生玩法三问:构建自定义开发环境 引言 临时运维一个古董项目,无文档,无环境,无交接人,俗称三无。 运行设备的环境老,本地环境版本高,ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

使用LangGraph和LangSmith构建多智能体人工智能系统
现在,通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战,比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...
苹果AI眼镜:从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会
在2025年的AI硬件浪潮中,苹果AI眼镜(Apple Glasses)正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch,而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠,而在于如何通过形态设计打破社交壁垒,成为用户“全天佩戴…...
redis和redission的区别
Redis 和 Redisson 是两个密切相关但又本质不同的技术,它们扮演着完全不同的角色: Redis: 内存数据库/数据结构存储 本质: 它是一个开源的、高性能的、基于内存的 键值存储数据库。它也可以将数据持久化到磁盘。 核心功能: 提供丰…...