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

我们今天所看到的网页，越来越丰富多彩，是因为添加了各种各样的图像，对于网页进行了美化。当前万维网上流行的图像格式有：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=“”>

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

HTML图像和超链接及文字颜色与排版
HTML文字颜色与排版 1.HTML中颜色表示法三种表示方法: (1)直接用英文单词表示,例如:white(白色) (2)以六位十六进制表示,例如:#ffffff(白色) (3)以RGB模式表 ...
QT+OpenCV综合示例：图像混合（滑动条）
QT+OpenCV综合示例:图像混合(滑动条) 1.代码: 2.运行结果: 0)Widget_op.ui (界面文件)设计: 1.代码: 1)opencv_imwrite_Q.pro 添加: INCL ...
【OpenCV 例程200篇】07. 图像的创建（np.zeros）
[OpenCV 例程200篇]07. 图像的创建(np.zeros) 欢迎关注『OpenCV 例程200篇』系列,持续更新中欢迎关注『Python小白的OpenCV学习课』系列,持续更新中 ...
HTML学习笔记-图像和超链接
图像和超链接 1, URL 绝对路径: https://www.baidu.com/img/bd_logo1.png 相对路径: 本目录: filenam ...
WEBBASIC Unit01 Web概述、 HTML概述、文本处理、图像和超链接、表格、表单
转载:https://blog.csdn.net/qq_38131668/article/details/73505925 参考:https://www.cnblogs.com/xiaziteng/p ...
HTML学习笔记：网页基本标签、图像、超链接、列表、音频、视频、表单
HTML学习笔记 1.网页基本标签 1.1.标题标签  <h1>标题一</h1> <h2>标题二</h2> <h ...
HTML添加图像和超链接
添加图像 <img src="图像的文件地址" alt="加载失败" height="350" width="350&quo ...
Chap 07 HTML建立超链接
2019独角兽企业重金招聘Python工程师标准>>> 7.1 超链接的基本知识每个网页都有一个唯一的地址,称为统一资源定位符(URL). 7.1.1 绝对路径绝对路径是包含服务器规 ...
OpenCV：07图像轮廓
图像轮廓什么是图形轮廓查找轮廓绘制轮廓计算轮廓的面积和周长轮廓面积轮廓周长多边形逼近凸包轮廓拟合外接矩形最小外接矩形最大外接矩形外接圆边缘检测`Canny` 霍夫变换直线 ...
HTML 基本元素2（图像、超链接、表格、列表、块div和span、字体、内联框架）
HTML的图像标签<IMG> 详解 <img> 即图像标签需要设置其属性 src指定图像的路径 1.同级目录图像如果是本地文件,只需把图片放在同一个目录下即可 src ...

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

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

最新文章

热门文章