首页 前端知识 HTML的图像标签与超链接的说明,以《水果图鉴》为例子,重点需要用到页面内书签的标签

HTML的图像标签与超链接的说明,以《水果图鉴》为例子,重点需要用到页面内书签的标签

2025-03-15 13:03:05 前端知识 前端哥 91 913 我要收藏

一、图像标签

  在HTML中,用<img>标签在网页中添加图像,图像以嵌入的方式添加到网页中图像标签的格式为:<img scr="图像文件名" alt="替代文字 " title="鼠标悬停提示文字 " width="图像宽度 " height="图像高度 " border="边框宽度 " hspace="水平空白 " vspace="垂直空白 " align="环绕方式或对齐方式 " /> 

标签中的属性说明见表,其中scr是必要的属性

1、图像标签的常用属性

属性说明
src图像来源,即图像的URL路径
alt如果图像无法显示,则用文字代替
title提供额外的提示,方便用户的使用
width图像的显示宽度(像素数或百分数),通常设图像的真实大小以免是真
height图像的显示高度(像素数或百分数)
border图片的边框大小,默认情况下图片没有边框,即border=0
hespace图片左侧或右侧的空白像素数(水平边距)
vspace图片顶部或底部的空白像素数(垂直边距)
align图像在水平(环绕方式)或垂直方向(对齐方式),包括left(图像居左)、righe(图像居右)、top(文本与图像在顶部对齐)、middle(文本与图像在中央对齐)或bottom(文本与图像在底部对齐)

2、图像标签的例题

题目:在HTML中导入一个星空的图片

解答:首先需要构建好html的基本框架,这里运用快捷方式,输入“”,接着在<body></body>中运用图像标签<img>就可以了,其中要在scr中输入图像的URL路径,接下来图像的位置、大小、提示等根据常用属性操作即可。

示例代码:

 <p>星空图片</p>
    <img src="https://img95.699pic.com/photo/40248/3133.jpg_wh860.jpg" alt="图片加载失败" width="200" height="200">

运行结果: 

​​​​​

二、超链接

1、超链接的定义

超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页的不同位置,还可以是一个图片、一个电子邮件地址、一个文件甚至是一个应用。

2、路径

创建超链接时必须了解链接与被链接对象的路径,在网站中路径通常有3种表达方式:绝对路径(它包括通信协议名、服务器名、路径及文件名的完全路径)、根目录相对路径(它指本地站点文件夹(根目录),以“/”开头,路径是从当前站点的根目录开始算的)、文档目录相对路径(以当前文档所在的文件夹为基础开始寻找路径)。

3、创建超链接

在HTML中可以通过<a>标签创建超链接,其中<a>标签有2种使用方式:

①通过使用href属性创建指向另一个文档的超链接;

②通过使用name属性创建文档内的书签。

超链接的语法格式为:<a href="url" title="指向链接时显示的文字" target="窗口名称">热点文本</a>

注:href属性定义了这个链接所指的路径,如果一个链接不到其他位置的空超链接,可以用符号“#”代替URL

4、超链接的例题

题目:创建一个直接到百度网页的超链接

解答:跟图像标签一样,首先需要构建好html的基本框架,这里运用快捷方式,输入“”,接着在<body></body>中运用超链接标签<a>就可以了,其中要在href输入超链接的路径

示例代码:

<p>跳转到百度的超链接</p>
    <a href="https://www.baidu.com/">点击跳转百度</a>

运行结果:     

5、书签链接

书签链接常用于内容庞大复杂的网页,通过单击书签链接能指向页面里的特定段落,便于浏览者快速查看网页内容。

书签就是用<a>标签对网页元素做的一个记号,锚点与链接可以在同一页面,也可以在不同页面。在实现锚点链接之前,需要先创建锚点,格式为

<a name="记号名(锚点名称)"锚(显示在页面中的文本)</a>

三、实践例题——《水果图鉴》

题目:创建一个水果书签链接(页面内书签的链接)

解答:首先需要构建好html的基本框架,这里运用快捷方式,输入“”,接着在<body></body>中运用超链接的标签<a>然后href创建锚点“这是某种水果”,再然后输入热点文本:查看某某水果,最后点击“查看某某水果”,将跳转到“记号名”开始的网页元素。

为了更好的浏览,热点文本中将加入图片,这需要加入图像标签,图像标签的使用方法在最开头那里。

示例代码:

 <h2>《水果图鉴》 </h2>
    <a href="#这是橘子图片"><h4>查看橘子图片</h4></a>
    <a href="#这是苹果图片"><h4>查看苹果图片</h4></a>
    <a href="#这是香蕉图片"><h4>查看香蕉图片</h4></a>

    <a name="这是橘子图片">
        <p>这是橘子</p>
    </a>
    <img src="./水果图鉴/图片/orange.jpg" width="480rpx"  height="500rpx">
    <br>
    <a name="这是苹果图片">
        <p>这是苹果</p>
    </a>
    <img src="./水果图鉴/图片/apple.jpg" width="480rpx"  height="500rpx">
    <br>
    <a name="这是香蕉图片">
        <p>这是香蕉</p>
    </a>
    <br>
    <img src="./水果图鉴/图片/banana.jpg" width="480rpx"  height="500rpx">

运行结果:

四、总结

本篇文章主要介绍图像标签与超链接的基本使用方法,外加网页内的书签链接的例题,文献参考Web前端开发技术。

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/23707.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!