HTML示例07---图像与超链接

古城微笑少年丶 2022-03-19 14:46 283阅读 0赞

我们今天所看到的网页，越来越丰富多彩，是因为添加了各种各样的图像，对于网页进行了美化。当前万维网上流行的图像格式有：GIF、JPEG及PNG等，各自的特点可自行百度。

**1.添加图像**

语法：

<img src="图像文件的地址"/>

**2.图像大小与边框**

在网页中直接插入图片时，图像的大小和原图是相同的，而在实际应用时可以通过各种图像属性的设置调整图像的大小、分辨率等内容。

（1）调整图像大小

语法：

<img src="图像文件的地址" height="" width=""/>

说明：height---用于设置图像的高度，单位是像素，可以省略。

width---用于设置图像的宽度，单位是像素，可以省略。

在设置图片大小时，**如果只设置了高度和宽度，则另一个参数会按照相同比例进行调整**。如果同时设置两个属性，且缩放比例不同的情况下，图像可能会变形。

（2）设置图像边框---border

在默认情况下，页面中插入的图像是咩有边框的，但是可以通过border属性为图像添加边框。其语法格式如下：

<img src="图像文件的地址" border=“”>

说明：border参数为对应的数值，不同的数值代表不同的边框宽度。

**3.图像间距与对齐方式**

HTML5不仅可以用于添加图像的标记，而且还可以使用标记中的属性调整图像在页面中的间距和对齐方式，从而改变图像的位置。

（1）调整图像间距

如果不使用<br>标记或者<p>标记进行换行处理，那么添加的图像会紧跟在文字之后。但是通过hspace属性和vspace属性可以调整图像与文字之间的距离，使文字和图像的排版不那么拥挤，看上去会更协调，其语法格式为：

<img src="图像文件的地址" hspace="" vspace=""/>

说明：hspace---用于设置图像文件的水平间距，单位是像素，可以省略。

vspace---用于设置图像的垂直间距，单位是像素，可以省略。

（2）设置图像相对于文字基准线的对齐方式

图像与文字之间排列通过align参数来调整。其对齐方式可分为两类，即绝对对齐方式和相对对齐方式，绝对对齐方式包括左对齐、右对齐和居中对齐3种，而相对文字对齐方式则是指图像与另一行文字的相对位置。其语法格式如下：

<img src="图像文件的地址" align=“相对文件的对齐方式”/>

说明：align参数有很多，比如：top、middle、left、right等，具体的用法可自行百度。

**4.替换文本与提示文字**

在HTML中，可以通过为图像设置替换文本和提示文字添加提示信息，其中，提示文字在鼠标悬停在图像上时显示，而替换文本是在图像无法正常显示时显示。用以告知用户这是一张什么图片。

（1）添加图像的提示文字---title

通过title属性可以为图像设置提示文字。当流浪网页时，如果图像下载完成，鼠标放在该图像上，鼠标旁边就会出现提示文字。也就是说，当鼠标指向图像上方时，稍等片刻，可以出现图像的提示性文字，用于说明或者描述图像。其语法为：

<img src="图像文件的地址" title=“”>

（2）添加图像的替换文字---alt

如果图片由于下载或者路径的问题无法显示时，可以通过alt属性在图片的位置显示定义的替换文字。其语法格式如下：

<img src="图像文件的地址" alt=“”>

发表评论取消回复

表情：

评论列表（有 0 条评论，283人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML-03-超链接

链接格式 <a href="跳转目标" target="新窗口打开方式"> 文本或者图片</a> href用于指定链接目标的url地址，当标签应用href

灰太狼/ 2022年09月11日 03:21/ 0 赞/ 277 阅读

相关 HTML超链接标签

本文中的内容参考了W3School。 1.普通的超链接代码如下： <span style="font-size:18px;"><a href="http://www

忘是亡心i/ 2022年08月03日 03:20/ 0 赞/ 214 阅读

相关 HTML——超链接

一、What？——什么是超链接先说一下我个人目前对“超链接”的理解，就两字：跳转哈哈，我个人的理解好像解释的有点简单粗暴了，比原词还

青旅半醒/ 2022年06月11日 06:59/ 0 赞/ 329 阅读

相关 HTML：建立超链接

第三章：建立超链接超级链接是HTML文档中的最基本特征之一，他能够让浏览者在各个独立的页面之间方便的跳转。每个网站都是由众多的网页组成，网页之间通常通过链接方式相互关联

Love The Way You Lie/ 2022年06月05日 05:14/ 0 赞/ 384 阅读

相关 HTML之超链接

HTML文本之所以被称为超文本，就是因为它具有普通文本所不具有的超链接功能。我们在浏览HTML文档时，可以通过点击关键字（一个超链接），来跳转页面。要让超链接能够正常工作，

分手后的思念是犯贱/ 2022年06月04日 09:11/ 0 赞/ 299 阅读

相关 HTML示例07---图像与超链接

我们今天所看到的网页，越来越丰富多彩，是因为添加了各种各样的图像，对于网页进行了美化。当前万维网上流行的图像格式有：GIF、JPEG及PNG等，各自的特点可自行百度。 1.添

古城微笑少年丶/ 2022年03月19日 14:46/ 0 赞/ 284 阅读

相关 HTML示例02---插入超链接以及超链接颜色设置

这里主要讲了下超链接在不同时刻时候的颜色设置，包括：未访问的链接、已访问的链接、鼠标移动到链接上时的颜色设置代码如下： <!DOCTYPE html> <

浅浅的花香味﹌/ 2022年03月19日 10:56/ 0 赞/ 429 阅读

相关超链接与图像

\---恢复内容开始--- 一、图像标签 <img src ="图片的地址" alt ="当图片显示不出来时所替换的文字 title="当鼠标放到图片时显示的文字"

秒速五厘米/ 2021年12月21日 09:21/ 0 赞/ 288 阅读

相关 HTML基础（三）图像和超链接

图像 img 元素向网页中嵌入一幅图像。语法 <img src="" alt="" /> img标签常用属性 src 跳转的url

女爷i/ 2021年09月29日 09:16/ 0 赞/ 380 阅读

相关 html 超链接

超链接(行内元素) <a>一定要写点击超链接名称,可以是文字或图片</a> 属性 href 写要跳转的网页资源路径

ゞ浴缸里的玫瑰/ 2021年07月24日 21:43/ 0 赞/ 571 阅读