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

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

1.超链接标签：

前言:

超链接的使用：

target属性:

1)鼠标样式：

2)颜色及下划线:

总结:

2.图片标签：

前言:

img的使用:

设置图片：

1.设置宽度和高度:

2.HTML5中的:

图片映射:

shape和coords属性：

总结:

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

1.超链接标签：

前言:

在HTML中，我们常常用<a>标签来表示超链接。所谓超链接(Hyperlink)简称(Link)，是指用一个地址把一个网页和另外一个网页链接起来，这个东西可以是另外一个网页的地址，也可以当前网页中其他的位置，比如点击回到顶部，还可以是图片，文件，应用程序等，链接的两端分别称为源锚点(当前锚点)和目标锚点(其他的网页)，通过点击源锚点就可以跳转到目标锚点。

HTML常用文本标签-CSDN博客https://blog.csdn.net/lh11223326/article/details/137168202?spm=1001.2014.3001.5501HTML标签的语法和属性-CSDN博客https://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博客