零基础10天学会网页制作第二天(上)之文件路径

简介: 对于这门编程语言,应该来说是标签语言,它是所有的编程语言里最最简单的,一定要放宽心,只要亦步亦趋,跟上课程,就一定能够学有所成。

前言


Hello,大家好,我是AbnerMing,经过第一天的授课,大家是否对网页制作有了一个初步的了解呢,网页制作呢,其实并不难,大家一定不要有压力,对于这门编程语言,应该来说是标签语言,它是所有的编程语言里最最简单的,一定要放宽心,只要亦步亦趋,跟上课程,就一定能够学有所成。


第二天的内容呢稍微有点多,这里我分了上中下三部分,其实写教程也蛮累的,因为不仅要对文字的斟酌,还要对授课过程中的代码,都要自己亲自去实现,所以,每一篇文章下来,都要花费很长的时间,既要有过程,也要保证知识点的通顺,能够让初学者一目了然,这个是难的,希望大家能够包容,多点理解,少些指责。


今天呢,进入《零基础10天学会网页制作》第二天的学习,首先呢,我们针对第一天的作业做一个讲解。


作业呢,是实现下面的新闻列表:




对于这个新闻列表,我们首先来分析一下,它可以分为上中下三部分,上部分的标题,我们可以使用h标签,中间部分的图片,我们可以使用img标签,下面的来源和时间,我们可以使用p标签,不难发现,这个作业的练习,就是针对第一天学的几个标签的综合练习。


首页,我们看代码实现:




图片呢,我放在和网页文件的同级目录中:



对于以上的代码,我们再次回顾一下,尽量,我在授课的时候,穿插一些对以往知识点的回顾,这样的做的目的,就是不断加深大家的印象,以此,让知识点更加的牢固。


上面的代码,充分展现了网页的一个整体结构,用来声明文档类型为html,以便于以网页的形式进行展现,<!DOCTYPE html>用来声明文档类型为html,以便于以网页的形式进行展现,<html></html>是文档的开始和结尾,所有的内容都是包含在里面的,<head></head>标签里,主要放置一些头部的引用,如网页的title,网页的作者,网页的描述,还有css,javascript的引用等等,<body></body>标签里,就是网页的主题内容,所有的网页展示,都是在里面所实现,比我今天的作业。


还有一个需要注意的,第一天的课程里,已经讲过了,这里我再强调一下,那就是,绝大多数的标签,都是成对出现的,当然了也有一部分是单标签,后续会讲到,成对出现的,就是有开始,有结束,结束的标签里,一定不要忘记斜杠“/”,还有所有的标签,虽然大小写不分,但4.0之后,还是建议以小写为主,这里的,我也建议大家,以后都写小写。


作业的代码已经写完了,我们看下效果:



这个作业呢,简单吧,所以啊,网页制作啊,并不难,大家千万不要有任何的压力。

作业讲过之后,我们简单地回顾一下昨天的内容,其实对于昨天的讲述,除了后面的四个小节,其余的大家都可以作为了解。两个知识点需要掌握,1、网页的整体结构,2,h、p、img标签的使用。


第二天的内容,我们继续来研究html中的标签


1、图片的路径选择及属性的使用

2、a标签及属性的使用

3、表格标签,table,tr,td

4、文本格式化的使用

5、总结及回顾


1、图片的路径选择及属性的使用


在昨天的讲述及作业中,我们在写图片的时候,基本上都把图片放在的本地的同级目录,那么如果不在同级目录,我们该如何拿到这个图片地址呢?,


我们先看同级目录,图片和网页都在一起:




代码里图片地址书写,src里直接书写文件全名:



效果:




上级目录


我们新建文件夹,名字为上级目录,文件里放上一个图片,在上级目录文件夹里新建一个目录为网页文件夹,网页目录文件夹里存放展示图片的html。




那么针对这个“路径上级.html”l文件,对于图片的路径,我们还能直接书写图片的全名吗?显然是不能的,因为不在同一个目录下。


关于这个路径的选择,就好比一套房子,自己房间里的东西,我们可以自己直接拿来去用,但是客厅里的东西,我们如果说要拿来使用,是不是得先打开门,走到客厅里,然后再去拿我们需要的东西。


而当前这个“路径上级.html”l文件,就好比在卧室里,而图片呢就好比在客厅里,我们如果想拿来使用的话,需要走到客厅去拿,怎么去拿?大家记住了,使用“../”,写法如下:



效果:



下级目录


这一次呢,我们新建一个目录为“下级目录”文件夹,目录里,新建一个“路径下级.html”,再新建一个文件夹为“image”,image文件夹里存放一张图片。



存放图片



那么在“路径下级.html”这个文件里,我们对这张如何书写地址呢?


书写如下:



效果如下:



对于路径的选择,这个我们一定要掌握,很多刚入门的朋友,对这个路径总是很难掌握,不知道为什么要这样去写,所以大家下去一定多练习练习,因为在实际开发中,不仅图片,其它文件,如css,javascript,等等很多文件的引入,或者是页面的跳转,都会牵扯到路径,这里我做一个总结:


同级别目录,路径的选择,我们可以直接书写文件全名,也可以“./”,后面跟文件全名,效果是一样的,一般同级的话,这个“./”可以省略,大家看清楚,这是一个点一个斜杠。

上级目录,也就是父级目录,文件全名前我们添加“../”,也就是两个点一个斜杠,这里延伸一下,那么多个父级呢?也就是有多个目录呢?大家记住,每多一个目录,就要多一个“../”,比如两个,那么就是“../../”,三个就是“../../../”,依次类推。


下级目录,也就是子目录,这个就要全路径,有几个文件夹,我们就写几个文件夹的名字,比如上面的下级目录练习当中,只有一个“image”文件夹,那么书写就是“image/image.png”。


当然了,除了上面的几个路径选择外,还有一个根目录的选择,直接用“/”来表示,所谓的根目录,就是第一个目录,比如下图,那么根目录,就是C盘。



比如,我们在根目录下方一张图片,image.png:



代码里我们就可以这样去书写,直接斜杠+文件全名:



效果:



同样的,因为所有的文件都在根目录下,我们也可以举一反三,比如上述中的同级目录文件夹下有一个image图片:



我们要在根目录文件夹下的网页里,怎么才能拿到这个路径呢?




有两种方式,第一种通过根目录,其实就是全路径了,这个应该明白吧。



第二种方式,先找到父级目录,在父级目录里找:


通过“../”,我们到了父级目录



发现根目录文件夹和同级目录文件夹是同级别,那么书写如下:




文件的路径寻找呢,这个可能刚接触的朋友稍微有点懵,不过,多练习几遍也就懂了,无非就是文件地址的一个寻找。

相关文章
|
3月前
|
前端开发 iOS开发
分享42个animals-wildlifePSD和33个abstractPSD文件,总有一款适合你
分享42个animals-wildlifePSD和33个abstractPSD文件,总有一款适合你
24 0
|
3月前
|
算法 C++ 容器
开心档之 C++ 模板
开心档之 C++ 模板
|
3月前
|
算法 C++ 容器
开心档之C++ 模板
开心档之C++ 模板
|
10月前
|
缓存 JavaScript 前端开发
开心档之jqery
开心档之jqery
27 2
phpcms文章发布时间莫名变成1970-01-01问题的解决
phpcms文章发布时间莫名变成1970-01-01问题的解决
105 0
十分钟学会Markdown,让你的文稿瞬间增色(上)
十分钟学会Markdown,让你的文稿瞬间增色
58 0
|
Windows 容器
十分钟学会Markdown,让你的文稿瞬间增色(下)
十分钟学会Markdown,让你的文稿瞬间增色
79 0
|
存储 编译器 C语言
开心档之开发入门网-C++ 字符串
开心档之开发入门网-C++ 字符串
开心档之开发入门网-C++ 字符串
|
前端开发
开心档之 boostrap 按钮 2
Bootstrap4 按钮,Bootstrap 4 提供了不同样式的按钮。
|
前端开发 JavaScript 区块链
(小说版)【简历优化平台-2】四个部分初显现,上传按钮打头前
(小说版)【简历优化平台-2】四个部分初显现,上传按钮打头前