HTML5:图像标签和超链接标签

一、图像标签

1.图像标签格式：

<img src="图像文件名" alt="代替文字" title="鼠标悬停提示文字" width="图像宽度" height="图像高度" border="边框宽度" hspace="水平空白" vspace="垂直空白" align="对齐方式">

2.常用属性

属性	说明
src	指定图像原，即图像URL路径
alt	图片无法显示所代替的文字
title	鼠标悬停提示文字，提供额外信息
width	图像显示宽度
height	图像显示高度
border	图像的边框大小，默认为图片无边框，即border=“ 0 ”
hspace	图片左右侧的空白像素数（水平边距）
vspace	图片顶部和底部的空白像素数（垂直边距)
align	图像的对齐方式

3.从本地导入本地图片

先创建一个如下图的目录：

(1)绝对路径：

图片文件在硬盘上真正存在的路径

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像标签</title>
</head>
<body>
    <p>从本地导入本地图片（绝对路径）</p>
    <img src="C:\Users\wodey\Desktop\web前端\1\2.图片\img-src\风景1.jpg" alt="图片读取失败" title="风景很美" width="500" height="300">
</body>
</html>

运行结果如下：

(2)相对路径：

以当前文件资源所在的目录为参照基础，链接到目标文件资源 (或文件夹)的路径

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像标签</title>
</head>
<body>

    <p>从本地导入本地图片（绝对路径）</p>
    <img src="C:\Users\wodey\Desktop\web前端\1\2.图片\img-src\风景1.jpg" alt="图片读取失败" title="风景很美" width="500" height="300">

    <p>从本地导入本地图片（相对路径）</p>
    <!-- " . "--代表当前目录  “ / ”--代表根目录-->
    <img src="./风景2.jpg" alt="图片读取失败" title="风景很美" width="500" height="300">    <br>

    <!-- " .. "--代表上一级目录 -->
    <img src="../2.图片/风景2.jpg" alt="图片读取失败" title="风景很美" width="500" height="300">


</body>
</html>

“ . ”——代表目前所在目录

“ .. ”——代表上一层目录

“ . ”——代表根目录

运行结果如下：

(3)从网络URL导入图片

打开网页中的图片

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像标签</title>
</head>
<body>

    <p>从网路URL导入图片</p>
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="图片读取失败" title="百度一下" width="500" height="300">

</body>
</html>

运行结果如下：

二、超链接标签

1.超链接标签格式：

通过< a >标签在HTML中创建超链接，< a >标签有两种方式：

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

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

（1）创建超链接语法格式：

<a href="url" title=" 指向链接时显示文字" target=" 窗口名称 ">热点文本</a>

（2）target 属性：

_blank	在新窗口中打开被链接的文档
_self	默认。在相同的框架中打开被链接的文档
_parent	在父框架集中打开被链接的文档
_top	在整个窗口中打开被链接的文档

2.链接形式：

（1）跳转外部链接(URL):

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接标签</title>
</head>
<body>
    
    <!--<a href="url" title=" 指向链接时显示文字" target=" 窗口名称 ">热点文本</a>-->
    <a href="https://www.mi.com/shop" title="进入小米商城" target="_blank"> 点击此处访问小米商城</a>
    
</body>
</html>

运行结果如下：（点击链接即可跳转）

（2）跳转内部链接：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接标签</title>
</head>
<body>

    <a href="C:\Users\wodey\Desktop\web前端\1\2.图片\img-src\风景1.jpg" title="打开图片">点击此处，打开风景图片</a>

</body>
</html>

运行结果如下：（点击链接即可跳转）

3.跳转当前HTML5网页中的某个地方：（书签链接）

先建立锚点，在连接锚点

① 建立锚点：<a name="记号名">记号名</a>

② 链接锚点：<a href="#记号名">链接文字</a>

即单击“链接文字”，将跳转到“记号名”开始的网页

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接标签</title>
</head>
<body>

    <h2>《水果图鉴》</h2><br>
    <!-- 创建锚点 -->
    <a href="#这是苹果图片">这是苹果图片</a>    <br>
    <a href="#这是菠萝图片">这是菠萝图片</a>    <br>
    <a href="#这是草莓图片">这是草莓图片</a>    <br>

    <hr>
    <!-- 建立锚点 -->
     <a name="这是苹果图片">这是苹果图片</a><br>
     <img src="C:\Users\wodey\Desktop\web前端\html\3.超链接.html\苹果.jpg" alt="这是苹果图片" width="500" height="500"><br>
     <a name="这是菠萝图片">这是菠萝图片</a><br>
     <img src="C:\Users\wodey\Desktop\web前端\html\3.超链接.html\菠萝.jpg" alt="这是菠萝图片" width="500" height="500"><br>
     <a name="这是草莓图片">这是草莓图片</a><br>
     <img src="C:\Users\wodey\Desktop\web前端\html\3.超链接.html\草莓.jpg" alt="这是草莓图片" width="500" height="500"><br>

</body>
</html>

运行结果如下：（点击链接即可跳转）