当前位置: 首页 > news >正文

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

相关文章:

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

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

浏览器工作原理与实践--WebAPI:XMLHttpRequest是怎么实现的

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

TCP网络协议栈和Posix网络部分API总结

文章目录 Posix网络部分API综述TCP协议栈通信过程TCP三次握手和四次挥手&#xff08;看下图&#xff09;三次握手常见问题&#xff1f;为什么是三次握手而不是两次&#xff1f;三次握手和哪些函数有关&#xff1f;TCP的生命周期是从什么时候开始的&#xff1f; 四次挥手通信状态…...

《解释器模式(极简c++)》

本文章属于专栏- 概述 - 《设计模式&#xff08;极简c版&#xff09;》-CSDN博客 模式说明 方案&#xff1a; 对每个data建立一个单点解释器对象X&#xff0c;dataA和dataB之间的关系&#xff0c;建立一个关系解释器对象Y&#xff0c;这里的Y处理的是X1和X2。这样&#xff0c;…...

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)包含很多种&#xff0c;包括低通、高通、带通等&#xff0c;在图像上说的高斯滤波通常是指的高斯模糊(Gaussian Blur)&#xff0c;是一种高斯低通滤波。通常这个算法也可以用来模…...

WebGIS 地铁交通线网 | 图扑数字孪生

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

Docker 哲学 - push 本机镜像 到 dockerhub

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

大数据学习第十二天(hadoop概念)

1、服务器之间数据文件传递 1&#xff09;服务器之间传递数据&#xff0c;依赖ssh协议 2&#xff09;http协议是web网站之间的通讯协议&#xff0c;用户可已通过http网址访问到对应网站数据 3&#xff09;ssh协议是服务器之间&#xff0c;或windos和服务器之间传递的数据的协议…...

管理科学笔记

1.线性规划 画出区域&#xff0c;代入点计算最大最小值 2.最小生成树 a.断线法&#xff0c;从大的开始断 b.选择法&#xff0c;从小的开始选 3.匈牙利法 维度数量直线覆盖所有的0 4.一直选最当前路线最短路径 5.线性规划 6.决策论...

WebKit结构简介

WebKit是一款开源的浏览器引擎&#xff0c;用于渲染网页内容。它负责将HTML、CSS和JavaScript等网络资源转换为用户在屏幕上看到的图形界面。WebKit是一个跨平台的引擎&#xff0c;可以在多种操作系统上运行&#xff0c;如Windows、macOS、Linux等。 以下是一篇关于WebKit结构…...

Kaggle:收入分类

先看一下数据的统计信息 import pandas as pd # 加载数据&#xff08;保留原路径&#xff0c;但在实际应用中建议使用相对路径或环境变量&#xff09; 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、进程、线程 进程作为资源分配的单位&#xff0c;在内存中会为每个进程分配不同的内存区域 一个进程下面有多个…...

深入剖析JavaScript中的this(上)

在Javascript中&#xff0c;this 关键字是一个非常重要的概念&#xff0c;this这个关键字可以说是很常见也用的很多&#xff0c;说它简单也很简单&#xff0c;说它难也很难。我们经常会用到this&#xff0c;也经常会因为this头疼&#xff0c;是一个经常被误解和误用的概念&…...

Junit深入讲解(JAVA单元测试框架)

1、此处用的是Junit5&#xff0c;此处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 提供了丰富的测试功能&#xff0c;主要由以下两个模块组成&#xff1a; spring-boot-test&#xff1a;提供测试核心功能。spring-boot-test-autoconfigure&#xff1a;提供对测试的自动配置。 Spring Boot 提供了一个 spring-boot-starter-test一站式启动器&…...

Django详细教程(一) - 基本操作

文章目录 前言一、安装Django二、创建项目1.终端创建项目2.Pycharm创建项目&#xff08;专业版才可以&#xff09;3.默认文件介绍 三、创建app1.app介绍2.默认文件介绍 四、快速上手1.写一个网页步骤1&#xff1a;注册app 【settings.py】步骤2&#xff1a;编写URL和视图函数对…...

Qt编译QScintilla(C++版)过程记录,报错-lqscintilla2_qt5d、libqscintilla2_qt5找不到问题解决

Qt编译QScintilla [C版] 过程记录 本文是编译该 QScintilla 组件库供 QtCreater 开发 C 桌面软件 流程记录一、编译环境 系统&#xff1a; Windows 10Qt&#xff1a;Qt 5.14.2编译套件&#xff1a;MinGW 64Qscintilla&#xff1a;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 当我们选择删除数据库时&#xff0c;对应路径下的文件也就删除了 2. 导入导出数据工具的路径 3. 注册数据库遇到的问题 ??? 目前的问题就是服务器新建…...

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

windows系统MySQL安装文档

概览&#xff1a;本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容&#xff0c;为学习者提供全面的操作指导。关键要点包括&#xff1a; 解压 &#xff1a;下载完成后解压压缩包&#xff0c;得到MySQL 8.…...

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...

【深度学习新浪潮】什么是credit assignment problem?

Credit Assignment Problem(信用分配问题) 是机器学习,尤其是强化学习(RL)中的核心挑战之一,指的是如何将最终的奖励或惩罚准确地分配给导致该结果的各个中间动作或决策。在序列决策任务中,智能体执行一系列动作后获得一个最终奖励,但每个动作对最终结果的贡献程度往往…...

Spring Boot + MyBatis 集成支付宝支付流程

Spring Boot MyBatis 集成支付宝支付流程 核心流程 商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面 代码实现示例&#xff08;电脑网站支付&#xff09; 1. 添加依赖 <!…...