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

CH040708

于 2024-09-16 14:51:13 发布

阅读量215

点赞数 6

文章标签： html 前端

本文链接：https://blog.csdn.net/CH040708/article/details/142298896

版权

#本文详细介绍了HTML中图片标签<img>的使用的对超链接标签<a>语法、target属性。

一、常用的图片标签和超链接标签

1.图片标签

① 前言：

在网页的简便度来看，图片远远比文字看起来生动的多，在HTML中图片标签通常指的是 <img> 标签，它是HTML中用来插入并展示图片的元素标签。HTML图片标签通常指的是 <img> 标签，这个标签是自闭合的，意味着它不需要闭合标签。

② img的使用：

<img src="url" alt="text">

③绝对路径和相对路径:

绝对路径：

是指完整的URL或文件系统路径，从根目录开始一直到文件的位置，当你使用绝对路径时，无论你的网页结构如何，浏览器都能准确地找到图片文件。

<body>
   <p>从本地导入图片（绝对路径）</p>
   <img src="D:\111\Apple .jpg" alt="图片显示失败" width="100" height="120">
</body>

运行代码后如下：

相对路径：

则是相对于当前HTML文件的路径。这可以简化链接，并使文件移动时更容易管理。相对路径可以使用点号（ . ）和双点号（ .. ）来指定当前目录和上级目录。

<body>
   <p>从本地导入图片（相对路径）</p>
   <img src="./橘子.jpg" alt="图片显示失败" width="200" height="160">
</body>

运行代码后如下：

③图片中的属性标签：设置宽度和高度，title属性。

width 和 height 属性分别用于指定图片的宽度和高度，可以通过具体的像素值或百分比来设置。

页面使用了响应式布局(自适应布局)，建议在上图图片之前裁剪好尺寸，不要设置width和height属性，，这样图片会跟着屏幕的宽度自动改变尺寸，从而不会变形，或者超出屏幕宽度。
title属性：为了更引入入目，在HTML中titl属性可以添加到 <img> 标签中，用于提供对该图片的额外描述或信息。当用户将鼠标悬停在图片上时，浏览器会显示 title 属性的文本内容作为工具提示。

<body>   
    <img src="https://www.baidu.com/img/flexible/logo/pc/result.png" 
    alt="" title="百度一下，你就知道" width="300" height="250">
</body>

运行代码后如下：

2.超链接标签

① 前言：

超链接是指在一个文档中插入的指向其他文档或资源的链接。超链接通常以文字或图标的形式出现，当用户点击该文字或图标时，会跳转到链接指定的文档或资源。我们常常用<a>标签来表示超链接。链接的两端分别称为源锚点(当前锚点)和目标锚点(其他的网页)，通过点击源锚点就可以跳转到目标锚点。

② href 属性和 name 属性:

href 属性：用于指定链接的目标地址。这个地址可以是一个URL，指向另一个网页、文件、电子邮件地址、锚点等。它是超链接标签中必须的属性。
name 属性（在HTML5中推荐使用 id ）：用于指定超链接的锚点名称。这使得链接可以指向文档内的特定位置。通过给 <a> 标签设置 id 属性，可以在同一页面内创建一个锚点，其他超链接可以通过 href 属性指向这个锚点，实现页面内的跳转。

  <body> 
    <!-- 建立锚点 -->
    <h1>《水果图鉴》</h1>
    <!-- 指向链接（）锚点 -->
    <a href="#我是橘子">查看橘子图片</a><br>
    <a href="#我是苹果">查看苹果图片</a><br>
   

    <a name="我是苹果">我是苹果</a><br>
    <img src="E:\web\1111\Apple .jpg" width="500" height="500"><br>
    <a name="我是橘子">我是橘子</a><br>
    <img src="E:\web\1111\橘子.jpg" width="500" height="500"><br>
    
    <!-- 指向链接（）锚点
    <a href="#我是苹果">点击我可以看到</a> -->
</body>

运行代码后如下：

③ 超链接的使用：

<body>
    <a href="https://www.mi.com/?g_utm=Thirdparty.Baidu.ProductUnion.
BrandZone-Baidu- PC.Brand-A-2">点击此处，打开小米商城（外部链接） </a><br>
    <a href="./橘子.jpg">点击此处，打开橘子图片（本地链接）</a><br>
</body>

运行代码后如下：