喽大家好,我是胖达。本期视频来看看路径相关的内容。我们知道在网页中存在很多的图片,如果把这些图片和html文档放在一起,这样不光不美观,管理起来也非常不方便。通常会新建一个专门用来管理图像资源的文件夹,当需要查找图像的时候就会选择使用路径的方式来指定图像文件的位置。
路径的类型又分为两种,第一种是相对路径,第二种是绝对路径。今天先来了解一下相对路径。相对路径是相对于当前文件的位置来表示资源,也就是图片位置的路径表达方式。简单来说就是图片相对于当前html文档的位置。这里把相对路径的分类给大家列出来了,一个一个往下看。
·首先是同级路径。同级路径不需要在html里面写任何符号,只需要将文件名写到html属性里就可以了。在代码里看一下,这里有一个image,点jpg的图片和html文档处于同一级,所以在html的属性里直接写image,点jpg保存一下看看效果。
可以看到现在图片是正常展示的,同级路径下只需要在html属性里完整填写图像文件的名称就可以了。
·再来看第二个下级路径。当图像文件位于html文件下一集时,需要在html属性里完整填写同级文件夹的名称,然后斜杠写出对应图片文件的名称。
→首先打开资源文件夹,在这里新增一个images的文件夹。将image图片文件复制一份放到images文件夹里。
→打开vscode,新建一个gtml文档,这里新增一个image标签。
→在左侧资源管理器中刚刚新增的images文件夹已经显示出来了,打开以后会发现里面有一个image,点jpg的图片。把这个路径写一下,在src属性里面写入位于当前html文件同级的images文件夹的名称,使用符号斜杠找到image,点gpg,看一下效果。此时图片也完整显示出来了。
→如果在amager四文件夹里还有一个amager四文件夹,下级路径又该怎么写?在amager文件夹里再新建一个文件夹,打开vscod,在左侧的资源管理器中a major s文件夹下面又新增了一个a major s文件夹,在这里面又放了一张图片。
这张图片应该怎样让它展示出来?一起来看一下。
→首先找到同级的images文件夹,使用符号斜杠,此时vscode会提供给两个选项,一个是imagers文件夹,另一个是imager.gpg。选择imagers,imagers文件夹里面的imager.gpg的文件了,保存一下看看效果。
在浏览器中这两张图片都完美的展现出来了。
最后来看一下相对路径里面的。上级路径使用的符号是点点杠。上级路径又应该怎么理解?也就是图像文件是位于当前这个 hd ml文件的上一集。
在练习文件夹里新增一个名为 hd ml的文件夹,打开vs code,选择刚刚新增的文件夹,选择新建文件,这里需要新增一个 hd ml文档。在当前 hd ml文档中,如果想要调用上一级的 image 点 j p g 的图片应该怎么做?在 sr c 属性里面使用点点杠。
这里 vs code提供了上一集路径中存在的文件,选择 image 点 j p g,在浏览器中看下效果,此时图片也是正常显示的。如果hd ml文件藏得更深一些,把当前的文件复制一份,新增一个hd ml文件夹,将复制的文档粘贴一下,打开刚刚复制的文档,修改sr c属性里面的值,使用点点杠。
此时是没有找到 amage 点 j p g 的文件,这个时候就需要重复刚刚的操作,点点杠就能找到需要到的 amage 点 jbg 的文件了,保存一下看看效果。这里可以看到图片还是正常显示出来了。
本期视频主要了解了相对路径的三种分类,一个是同级路径,一个是下级路径,还有一个是上级路径。希望小伙伴们下来可以好好练习一下,这对于后期的内容非常重要。下期再来聊聊绝对路径。本期的内容到此结束,感谢观看,下期再见。
哈喽大家好,我是公众号作者“未来”,本期分享的内容是Web前端系列课程,本系列总共29个阶段,坚持学习3个月蜕变为Web前端高手哦!
1 什么是标签及其分类
在HTML页面中,带有“< >”符号的元素被称为HTML标签,<html>、<head>、<body>都是HTML标签。所谓标签就是放在”<>”标签符中表示某个功能的编码命令,也称为HTML标签或HTML元素。
1.双标签: <标签名>内容<标签名>
2.单标签: <标签名/>(数量非常少)
单标签也称空标签,是指用一个标签符号即可完整地描述某个功能的标签。
.它是一种计算机(PC)的超文本标记语言(Hyper Text Markup Language),缩写为HTML,HTML是一种标记语言(markup language),是制作网页所必备的语言,语法较为松散,不严格的web语言;标签可以不闭合,不区分大小写。
2.标记标签通常被称为HTML标签,标签由尖括号包围的关键字组成,通常都是成对出现的,有开始标签和结束标签,如<html></html>。
浏览器不会显示html标签(白话:浏览器只会显示标签里边的内容),而是使用标签来解释页面的内容。
比如这一行代码:<body>你好 </body>要放在<html></html>里边,网页只展示了你好 其他内容并没有展示。
代码
页面
以下资料均由自己的认知和资料整理所得:
1989年,欧洲物理量子实验室(CERN)的信息专家蒂姆·伯纳斯·李发明了超文本链接语言, 使用此语言能轻松地将一个文件中的文字或图形连到其它的文件中去,这就是HTML的前身。1991年,蒂姆伯·纳斯·李在CERN定义了HTML语言的第一个规范,之后成为W3C组织为专门在互联网上发布信息而设计的符号化语言规范。可以说,HTML(Hypertext Markup Language)是SGML的一个实例,它的DTD作为标准被固定下来。因此,HTML不能作为定义其它符号化语言的元语言。
作为World Wide Web的一个组成部分,HTML语言发展很快,在短短的几年里,它已历经了HTML1.0、HTML2.0和HTML3.0、HTML4.0等多个版本,同时DHTML (动态)、VHTML(虚拟)、SHTML等也飞速发展起来。HTML以简单精练的语法、极易掌握的通用性与易学性,使Web网页可以亲近于每一个普通人,互联网因此得以普及发展以至今日辉煌。
但是,目前的HTML还不稳定,不同的浏览器会产生不同的显示效果。此外,由于HTML对超级链接支持不足,并缺乏空间立体描述,处理图形、图像、音频、视频等多媒体能力较弱,图文混排功能简单,不能表示多种媒体的同步关系等缺点,也影响HTML的大规模应用以及用于复杂的多媒体数据处理,一种语言各有各的优点和缺点。
人们常常赞美蒂姆·伯纳斯·李“与其他所有推动人类进程的发明不同,这是一件纯粹个人的劳动成果,万维网只属于蒂姆·伯纳斯·李一个人。”而这个心怀浪漫、献身科学的英国学者,却将只属于他一个人的发明,无偿献给了世界。
*请认真填写需求信息,我们会在24小时内与您取得联系。