商务网站建设考试,佛山搜索seo优化排名,唐山住房和城乡建设网站,怎么开发一个网站系统这篇文章#xff0c;我们来讲解一下图像标签
目录
1.图像标签
1.1介绍
1.2实际展示
1.3图像标签的属性
1.3.1 alt属性
1.3.2 title属性
1.3.3 width / height 属性
1.3.4 border属性
1.4注意事项
2.文件夹
2.1目录文件夹和根目录
2.2 VSCode打开目录文件夹
3.路…这篇文章我们来讲解一下图像标签
目录
1.图像标签
1.1介绍
1.2实际展示
1.3图像标签的属性
1.3.1 alt属性
1.3.2 title属性
1.3.3 width / height 属性
1.3.4 border属性
1.4注意事项
2.文件夹
2.1目录文件夹和根目录
2.2 VSCode打开目录文件夹
3.路径
3.1相对路径
3.2绝对路径
4.小结 1.图像标签
下面让我们来看一下如何在网页中插入图片
1.1介绍
在HTML标签中img标签用于定义HTML页面中的图像。img标签是一个单标签
代码格式
img src图像的URL /
注意单词 img 是 image 的缩写意为图像
其中src 是img标签的必须属性它用于指定图像文件的路径和文件名。
所谓属性简单理解就是属于这个图像标签的特性
其实这一点可以和java中的类进行对比理解java中的类也有属性img标签也有属性且属性是必须的不可或缺
1.2实际展示
下面就用代码来实际展示一下如何在HTML页面中插入图片
第一步将图片和你的HTML文件放在同一个文件夹下这样就可以把图片插入到网页当中了如下图所示 第二步书写代码运行演示 第三步加点文字再次演示 第四步加点其他标签调整下格式再次运行 代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydivh3世间万物皆系于一箭之上br //h3img srchb.jpg //div
/body
/html
1.3图像标签的属性
下面我们来讲一下图像标签的属性
属性属性值说明src图片路径必须属性alt文本替换文本图像不能显示的文字title文本提示文本鼠标放到图像上显示的文字width像素设置图像的宽度height像素设置图像的高度border像素设置图像的边框粗细
下面我们一一来讲解这些属性的使用
1.3.1 alt属性
alt属性替换文本。
作用当我们的图片不能正常显示的时候就用alt里面的文字来替换显示
实例 1.3.2 title属性
title属性提示文本
作用当鼠标放在上面显示的信息
实例 1.3.3 width / height 属性
width / height 属性设置图片的宽和高的
实例
说实话在不知道图片的大小比例和具体高和宽的情况下随便修改这两个属性会让图片变形就好很丑那有没有解决方法呢
答有。 HTML有这样一个功能你只用修改一个属性另一个属性就好等比例的缩放这样图片就不会变形。
看下面的实例 1.3.4 border属性
border属性设置图像的边框的
实例 注意这个标签在HTML中是可以用的但是不推荐因为修改边框是CSS的事后面会写CSS的
1.4注意事项
下面讲一下使用图像标签的注意事项
图像标签可以拥有多个属性必须写在标签名的后面属性之间不分先后顺序标签名和属性、属性与属性之间均以空格分开属性采取键值对的格式即 keyvalue 的格式属性“属性值”
2.文件夹
下面我们来讲一下文件夹
2.1目录文件夹和根目录
实际工作中我们的文件不能随便乱放否则用起来很难快速的找到他们因此我们需要一个文件夹来管理他们。
目录文件夹就是普通文件夹里面只不过存放了我们做页面所需要的相关素材比如html文件图片等
根目录打开目录文件夹的第一层就是根目录
这个比较难理解下面用具体的实例来说明 如上图所示我的桌面上有关“项目”的文件夹里面有三个不同时期的项目文件夹那么这个项目文件夹就不能称为目录文件夹。 此时我打开“22寒假项目”这个文件夹里面有个“ProcessOn项目”文件夹我再打开这个文件夹里面可以看到“src”和“pom.xml”两个文件。
此时我们可以把“ProcessOn项目”这个文件夹称为目录文件夹因为我一打开它它里面就有直接的代码文件而我们打开目录文件夹的第一层我们将其称为根目录
注意根目录和目录文件夹是相对应的不是死的这个要具体情况具体分析。
2.2 VSCode打开目录文件夹
这个是与实操有关的下面用图片进行演示 3.路径
页面中的图片会非常非常多通常我们会创建一个文件夹来存放这些图像images这时再查找图像就需要采用“路径”的方式来指定图像文件的位置了。
路径可以分为相对路径和绝对路径
3.1相对路径
相对路径以引用文件所在位置为参考而建立出的目录路径
这里简单来说就是图片相对HTML页面的位置。
相对路径还分以下几种情况
相对路径分类符号说明同一级路径图像文件位于HTML文件同一级 如img srchb.jpg /下一级路径/图像文件位于HTML文件下一级 如img srcimages/hb.jpg /上一级路径../图像文件位于HTML文件上一级 如img src../hb.jpg /
这样说还是不太清楚下面用实例来具体的讲一下 这里多提一下如果图片在HTML文件的上一级我们使用 ../ 的意思是翻回到上一级目录然后再寻找目录。
相对路径是从代码所在的这个文件出发去寻找目标文件的而我们这里所说的上一级、下一级和同一级就是图片相对于HTML页面的位置。
3.2绝对路径
绝对路径是指目录下的绝对位置直接到达目标位置通常是从盘符开始的路径。
例如D:\IDEA2021\IntelliJ IDEA 2021.1.3\bin\idea.exe或完整的网络地址http://www.itcast.cn/images/logo.gif。
下面来具体的演示一下 获取网络图片地址的方法右击图片选择“复制图像链接”
如果用这种方法获取图片的话如果网络上图片的地址换了你也就显示不了了。 这种方法就是放图片在你计算机上存的绝对路径。缺点就是别人无法访问。
4.小结
这篇文章主要就是讲了图像标签和图像标签延伸出的一些内容。都是重点都要学会。
