HTML 超链接标签、图片标签

news2024/12/30 2:04:36

超链接标签


超链接描述

HTML使用标签<a>来设置超文本链接

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

<a href="url">
   链接文本
</a>

<a>
  你好
</a>

<a>
大家好么?
</a>

<a>
   <img src="" alt="">
</a>

可以看到a标签里面可以是词 文 任意的内容,只要放进来就可以实现跳转。

超链接表现

当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手

超链接属性

href的超链接要写完整的url,带上http https。

在标签<a>中使用了href属性来描述链接的地址默认情况下,链接将以以下形式出现在浏览器中:

一个未访问过的链接显示为蓝色字体并带有下划线。访问过的链接显示为紫色并带有下划线。点击链接时,链接显示为红色并带有下划线。

特别提示:后期我们会通过CSS样式修改掉这些效果

  • 超链接标签:
  • 属性描述 

超链接就是用来跳转到路径上面。herf是和a标签一起使用的,超链接一般都是使用a标签的,href只是标签a里面的一个属性。

本窗口跳转是一种方式,打开新窗口也是一种方式,打开新窗口用的更加多。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文档的标题</title>
</head>

<body>
    <a href="http://www.aliangedu.cn/" target="_blank">访问阿良教育!</a>
    <p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p>

    <a name="tips">基本的注意事项 - 有用的提示</a>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <a href="#tips">有用的提示</a>
</body>

</html>

如果a标签里面设置name属性,那么#name名称,那么相当于瞄点。

图片标签


网站中最多的元素毋庸置疑,一定是图片simg>标签定义HTML页面中的图像

<img src="" alt="" title="" width="" height="">

图片标签:<img src="图片文件路径" alt="图片提示"/>    img是单标签,不是一对的,一般只指定width宽度,避免图片拉伸。

属性:

  • src:路径(图片地址与名字)
  • alt:规定图像的替代文本
  • width:规定图像的宽度
  • height:规定图像的高度
  • title:鼠标悬停在图片上给予提示
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>image</title>
</head>

<body>
    <img src="test.jpg" alt="boat加载失败"  width="500px" height="500px" />
    <img src="https://k8s-1252881505.cos.ap-beijing.myqcloud.com/www/images/study.jpg" width="500px" height="500px"/>
</body>

</html>

图片路径详解

  • 绝对路径
  • 相对路径
  • 网络路径
  • 绝对路径

绝对路径是电脑的盘符存储与访问的具体地址

E:\itbaizhancode\1.jpg
<img src="E:\itbaizhancode\1.jpg">

相对路径

两者相对关系,两者在同一路径下可以直接访问

  • 子级关系 /
  • 父级关系 ../
  • 同级关系 ./
 <img src="./vues/off.jpg" alt="加载失败" width="100px" title="xxx">

网络路径

具体的网络地址:http://iwenwiki.com/api/newworld/images/n1.png

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【运维】Linux升级Python2

【运维】Linux升级Python2 操作系统&#xff1a;centos7python版本&#xff1a;升级前版本2.7.5&#xff0c;升级后2.7.18python3版本&#xff1a;升级前3.6.8&#xff0c;升级后版本3.8.8 1、查看当前python版本 [root1 ~]# python -V Python 2.7.5 2、yum安装python [roots14…

Apikit 自学日记:发起文档测试-Websocket

Websocket 进入某个WS协议的API文档详情页&#xff0c;点击文档上方 测试 标签&#xff0c;即可进入 API 测试页&#xff0c;系统会根据API文档的定义的求头部、Query参数、请求体自动生成测试界面并且填充测试数据。 填写/修改请求参数 1.1设置请求头部&#xff08;Header&…

Rovio智能车改锂电经验分享

目录 小车简介 改造思路 改造目的 步骤一、改锂电 电压检测 充电检测 结束语 本文介绍如何给wowwee Rovio智能车改电源过程。 首先介绍硬件情况 小车简介 小车功能强大&#xff0c;带红外定位&#xff0c;带缺电自动归位&#xff0c;带轨迹录制回放&#xff0c;带扬声器…

【PostgreSQL 数据库线下沙龙(武汉站)】PieCloudDB:云原生分布式虚拟数仓的诞生之旅...

2023年6月3日&#xff0c;开源软件联盟 PostgreSQL 中文社区在武汉举办了技术沙龙活动。本次活动主题围绕未来数据库展开讨论和分享。通过探讨未来数据库的概念和特点&#xff0c;为智能化时代的发展提供更多的支持和服务。同时&#xff0c;通过探讨数据库和AI技术的共生共荣&a…

基于SpringBoot的美食点评系统

1.引言 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 美食点评管理系统&#xff0c;主要的模块包括首页、个人中心、用户管理、餐厅管理、美食餐厅管理、地区管理、菜系管理、餐厅点评管理、系统…

短视频矩阵抖音账号矩阵系统源码开发者自研(一)

一、短视频矩阵系统源码框架建模搭建 目录 一、短视频矩阵系统源码框架建模搭建 1.抖音账号矩阵系统功能模型建模 2.短视频账号矩阵系统接口开发规则 二、短视频矩阵系统源码视频剪辑转码处理 短视频矩阵系统是一个多功能的视频内容管理系统&#xff0c;用于创建、剪辑发布…

vue3-多人聊天室角色识别(全栈)

文章目录 主要技术栈目的实现步骤1. 前端发送信息2. 后端处理数据3. 前端渲染数据4. store 主要技术栈 主要技术栈是vue3&#xff0c;springboot&#xff0c;websocket&#xff0c;element-plus 目的 主要目的是复习和梳理 实现步骤 1. 前端发送信息 发送信息&#xff0c…

【Spring Cloud系列】-负载均衡(Load Balancer,LB)

【Spring Cloud系列】-负载均衡&#xff08;Load Balancer&#xff0c;LB&#xff09; 文章目录 【Spring Cloud系列】-负载均衡&#xff08;Load Balancer&#xff0c;LB&#xff09;一、什么是负载均衡&#xff08;Load Balancer&#xff0c;LB&#xff09;二、负载均衡的主要…

【MySQL】MySQL中SQL执行流程

文章目录 一、MySQL语句执行流程1.1、主要的原因有以下几点1.2、具体执行流程图如下 二、存储引擎三、MySQL的架构与内部模块四、崩溃恢复时如何判断事务是否需要提交 一、MySQL语句执行流程 连接器&#xff08;Connector&#xff09;&#xff1a; 当客户端发送一个连接请求时…

设计模式学习之观察者模式

设计模式系列往期文章 设计模式学习之策略模式设计模式学习之策略模式在前端的应用设计模式学习之简单工厂模式设计模式学习之工厂方法模式设计模式学习之抽象工厂模式设计模式学习之策略模式和简单工厂模式的对比 这是设计模式系列的第7篇文章&#xff0c;在这之前我们已经介…

React函数式组件

1. 创建函数式组件 我们可以通过所定义的函数来进行react中组件的定义。首先我们可以定义一个函数&#xff0c;然后通过函数的返回值来进行相关组件的定义。例如下面这张写法&#xff0c;我们可以通过调用一个函数&#xff0c;通过其返回值来进行相关的操作。 function Test()…

chatgpt赋能python:Python遍历A到Z:SEO优化的关键

Python遍历A到Z&#xff1a;SEO优化的关键 对于任何一家网站来说&#xff0c;SEO (Search Engine Optimization, 搜索引擎优化)都是至关重要的&#xff0c;特别是在当今数字时代&#xff0c;人们常常会在搜索引擎中查找信息并浏览不同网站。其中一个重要的SEO策略是为每个网站…

笔记本安装双系统ubuntu时踩的坑——戴尔

如果你遇到以下的这些问题&#xff0c;不要直接装了&#xff0c;无解&#xff01;&#xff01;&#xff01; 建议看我另一篇教程&#xff0c;把硬盘取出来在另外的电脑上装好系统再放回去&#xff0c;这样嘎嘎快。 移动硬盘中安装Ubuntu 20.04系统——立省99%的问题_放风筝的…

水质监测的重要性及应用

水质监测是保障水环境安全和人民健康的重要手段。随着城市化进程的加速和工业化程度的提高&#xff0c;水污染问题日益严重&#xff0c;水质监测的重要性也越来越凸显。水质监测是指对水体中的各种物理、化学和生物参数进行监测和分析&#xff0c;以评估水体的质量和污染程度。…

概率论--随机事件与概率--贝叶斯公式--随机变量

目录 随机事件与概率 概念 为什么要学习概率论 随机事件与随机事件概率 随机事件 随机事件概率 贝叶斯公式 概念 条件概率 概率乘法公式 贝叶斯公式 举个栗子 随机变量 随机变量的定义 随机变量的分类 离散型随机变量 连续型随机变量 随机事件与概率 概念 …

和Git相关的一些问题

1. Git拉取项目的两种方式以及区别 方式 Http&#xff1a;通过http方式的clone项目&#xff0c;不需要在git上手动绑定ssh&#xff0c;只需要在clone的时候输入账号&#xff0c;密码即可&#xff1b;SSH&#xff1a;通过ssh方式clone项目&#xff0c;需要手动绑定ssh密钥 区别 …

Linux——从零到精通

目录 前言&#xff1a; 一.Linux介绍 二.Linux基础命令 三.链接和文章从零到实战 基本信息介绍 Linux 操作系统的诞生、发展和成长过程始终依赖着五个重要支柱&#xff1a; 桌面环境 Linux为什么象征着企鹅 命名与读法 前言&#xff1a; 本篇文章结合所有从零到精通 Linux…

如何在jupyter notebook 中添加虚拟环境

一&#xff0e;如何在jupyter notebook 中添加虚拟环境 假设在D:\tf_training\envTraining创建了名为env_training的虚拟环境。 1.安装IPykernel < python2 > pip install ipykernel < python3 > pip install ipykernel 说明&#xff1a;最好进入到虚拟环境…

STM32单片机(九)USART串口----第九节:STLINK Utility

❤️ 专栏简介&#xff1a;本专栏记录了从零学习单片机的过程&#xff0c;其中包括51单片机和STM32单片机两部分&#xff1b;建议先学习51单片机&#xff0c;其是STM32等高级单片机的基础&#xff1b;这样再学习STM32时才能融会贯通。 ☀️ 专栏适用人群 &#xff1a;适用于想要…

第24天-订单服务(订单确认、订单接口幂等、订单验价、锁定库存)

f# 1.Docker安装RabbitMQ docker run -d --name rabbitmq \ -p 5672:5672 -p 25672:25672 -p 15672:15672 \ -e RABBITMQ_DEFAULT_USERadmin -e RABBITMQ_DEFAULT_PASSadmin \ --restartalways \ rabbitmq:management5672&#xff1a;AMQP端口25672&#xff1a;集群端口15672&…