HTML5+CSS3学习笔记（第3章）图像与超链接

最新推荐文章于 2023-10-23 08:00:00 发布

放屁鮰鱼

最新推荐文章于 2023-10-23 08:00:00 发布

阅读量351

点赞数

分类专栏： HTML5 笔记

本文链接：https://blog.csdn.net/fangpihuiyu/article/details/104152083

版权

笔记同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

HTML5

16 篇文章 0 订阅

订阅专栏

HTML5+CSS3学习笔记（第3章）图像与超链接

居家隔离第2天，继续学习ing
常见的图片格式gif jpeg png

3.1添加图像

<img src="图像地址"/>

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加图像</title>
</head>
<body>
<img src="https://www.baidu.com/img/pc_1c6e30772d5e4103103bd460913332f9.png">
<img src="fish.png" height="240" width="412"/>
</body>
</html>

绝对地址
相对地址使用方法：
在同一目录下，fish.png
在下级目录下，img/fish.png
在上级目录中，…/img/fish.png
注意，以上方法适用于本地网页，服务器的情况下寻找地址和路径的方法不一样。

3.2设置图像属性

图片大小

提示：为图像指定 height 和 width 属性是一个好习惯。如果设置了这些属性，就可以在页面加载时为图像预留空间。如果没有这些属性，浏览器就无法了解图像的尺寸，也就无法为图像保留合适的空间，因此当图像加载时，页面的布局就会发生变化。（下面的篇幅详细解释了这个观点）。
提示：请不要通过 height 和 width 属性来缩放图像。如果通过 height 和 width 属性来缩小图像，那么用户就必须下载大容量的图像（即使图像在页面上看上去很小）。正确的做法是，在网页上使用图像之前，应该通过软件把图像处理为合适的尺寸。
也可以通过百分比的形式

图像的间距与对齐方式

hspace属性
vspace属性
align属性

替换文本与提示文字

alt属性规定图像的替代文本。
title属性

3.3链接标记

<a>标签

文本链接

<a href="URL">文本内容</a>

href属性链接地址
target属性打开新窗口的方式
例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加图像</title>
</head>
<body>
<a href="https://www.baidu.com/img/pc_1c6e30772d5e4103103bd460913332f9.png" target="_blank">下载</a>
</body>
</html>

书签链接

创建书签

书签链接

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加图像</title>
</head>
<body>
<a href="#str_1">跳转</a>
<a href="#str_2">跳转2</a>
<h2><a id="str_1">放屁鮰鱼</a></h2><br><br><br><br><br>
<h2><a id="str_2">放屁草鱼</a></h2><br><br><br><br><br>
<h2><a id="str_3">放屁黑鱼</a></h2><br><br><br><br><br>
<h2><a id="str_4">放屁鮰鱼</a></h2><br><br><br><br><br>
<h2><a id="str_5">放屁鮰鱼</a></h2><br><br><br><br><br>
<h2><a id="str_6">放屁鮰鱼</a></h2><br><br><br><br><br>
<h2><a id="str_7">放屁鮰鱼</a></h2><br><br><br><br><br>
</body>
</html>

3.4图像的超链接

<a href="链接地址" target=目标窗口的打开方式"><img src="URL"/></a>

标签的嵌套
例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加图像</title>
</head>
<body>
<a href="http://www.baidu.com" target="_blank"><img src="fish.png" alt="" title="放屁鮰鱼"></a>
</body>
</html>

图像热区链接

首先需要在图像文件中设置映射图像名。

<img src="URL" usemap="#映射图像名称">

然后定义热区图像以及热区的链接

<map>标签

<map name="映射图像名称">
<area shape="rect" coords ="left,top,right,bottom" href="URL" title="XXX">
</map>

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加图像</title>
</head>
<body bgcolor="#ff7f50">
<img src="big.png" alt="" usemap="#hotpoint_1">
<map name="hotpoint_1">
    <area shape="rect" coords="51,127,141,206" href="ad.jpg" alt="" title="电脑精装">
    <area shape="rect" coords="" href="ad1" alt="">
</map>
</body>
</html>