首页 > 其他分享 >HTML 链接和图片

HTML 链接和图片

时间:2024-04-07 19:44:07浏览次数:18  
标签:图片 HTML 跳转 文本 链接 页面

 

在HTML中,链接和图片是构建网页的基本元素之一,它们分别通过<a>标签和<img>标签来实现。

详细文档:HTML 链接和图片-CJavaPy

链接(Anchor)

链接,也称为锚点,允许用户点击跳转到另一个页面或页面内的某个部分。链接的基本语法如下:

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

  • href属性指定链接目标的URL。
  • 链接文本是显示给用户的可点击文本。

示例

  • 外部链接:

    <a href="https://www.example.com">访问Example网站</a>

  • 内部链接(页面内跳转):

    <a href="#section1">跳转到Section 1</a>

    需要在页面某处有对应的ID:

    <h2 id="section1">Section 1</h2>

  • 邮件链接:

    <a href="mailto:[email protected]">发送邮件</a>

图片(Image)

图片标签<img>用于在网页中嵌入一张图片,基本语法如下:

<img src="image_url" alt="替代文本">

  • src属性指定图片的URL。
  • alt属性提供图片的替代文本,如果出于某种原因图片无法显示,将显示该文本。

示例

<img src="https://www.example.com/image.jpg" alt="示例图片">

实用提示

  • 对于链接和图片,始终包含alt属性(对于图片)和有意义的文本(对于链接)。这不仅有助于提高可访问性,对于搜索引擎优化(SEO)也是一个好习惯。
  • 使用相对路径(如<img src="/images/picture.jpg">)来引用同一网站内的资源,这样在迁移站点或更改域名时会更加方便。
  • 对于重要的图片,考虑提供多种尺寸以支持不同的设备和屏幕分辨率,可以使用<picture>元素或在CSS中使用响应式图片技术。

详细文档:HTML 链接和图片-CJavaPy

标签:图片,HTML,跳转,文本,链接,页面
From: https://www.cnblogs.com/tinyblog/p/18119759

相关文章

  • 基于JSP+Mysql+HTml+Css宾馆酒店管理系统设计与实现
     博主介绍:黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程,学习后应对毕业设计答辩。项目配有对应开发文档、开题报告、任务书、P......
  • opencv基础操作:读取图片时使用灰度方式、转换颜色空间、使用opencv展示图片、使用open
    包含的操作有:读取图片时使用灰度方式转换颜色空间使用opencv展示图片使用opencv对BGR通道进行划分并展示,需要注意的是直接使用cv2.split()得到的B,G,R分别是单通道的,因此最终展示出来为灰度图像。    如果想保留彩色图像,可以直接对img切片来实现。使用opencv在一个窗口......
  • Opencv实现边界填充、两个图片像素直接相加后超过255的处理方式(阈值处理方式),一个窗口
     opencv两个图片直接相加,会直接相加,如果超过255,会取模。 print((img_cat+img_cat2)[:5,:,0])#0-255若相加越界后294用294%256获得余数38可以使用这种方式查看。展示的是前5行,所有列的第一个通道的值。还有一种方法是cv2.add(),这个方法会直接将超过255的值设置为25......
  • 苦瓜:音乐知识图片备份
    和弦基础......
  • 用HTML5写奥林帕斯奖简介
    一、用VSCODE写奥林帕斯奖简介代码1、以.html为结尾写主要代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0">&......
  • 「36」如何让直播间的文字,图片动起来?
    OBS中的滚动滤镜是一种视频滤镜效果,用于在直播或录制过程中创建滚动字幕或滚动文本效果。滚动滤镜,可以让您在视频画面中显示滚动的文本内容,以提供额外的信息或注释。你经常看到,直播间的「文字和图片」在匀速的滚动,怎么做的呢?现在教你……实操步骤一、文字走动第1步添加......
  • HTML基础知识详解(下)(如果想知道html的全部基础知识点,那么只看这一篇就足够了!)
        前言:在上一篇文章中,我们已经学习完了超链接标签、列表标签和表格标签,但是我们还有一些标签没有学习,在这篇文章中,我们将学习剩余的标签。✨✨✨这里是秋刀鱼不做梦的BLOG✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客首先让我们看一下还剩余......
  • 批量图片翻转、裁剪
    【Python】Windows环境-Python批量图片翻转、裁剪WindowsVsCode搭建Python环境注意事项python不要安装在含有中文的路径里修改pip源(PowerShell里)a.更新pip>python-mpipinstall-ihttps://pypi.tuna.tsinghua.edu.cn/simple--upgradepipb.设置pip源(清华大学......
  • HTML:HTML事件汇总
    html事件是用户和页面交互的一些效果,用户通过点击,触摸等等方式更新数据,页面在加载完成之后的交互效果就需要通过触发事件来完成,事件大概分为,鼠标事件,窗口事件,表单事件,键盘事件,媒体事件等HTML事件窗口事件(window事件)属性 值 描述onafterprint   script在打印文档之后运......
  • 多平台商品图片批量下载,素材应有尽有!
    在现在信息传播速度飞快的网络时代,电商平台上的商品图片更是林林总总。对于设计师和营销人员来说,想要获取这些精美的商品图片,以便用于广告、宣传册或其他创意作品,确实是一项不小的挑战。不过,要将这一切都将变得轻而易举,也不是不可以。“什么,你们不信?”小编来脾气了,现在就证明给......