前端学习打卡Day3

2.路径(前期铺垫)
1.目录文件夹和根目录

实际工作中,为了方便快速查找文件,我们需要文件夹进行管理。

目录文件夹:普通文件夹,存放了做页面所需要的相关素材,如html文件、图片等。

根目录:打开目录文件夹的第一层是根目录。

2.VSCode打开目录文件夹

文件——打开文件夹,选择目录文件夹(方便管理文件)。

3.路径

当我们制作页面时,所需要的图像非常多。通常我们会新建一个文件夹来存放图像文件(images),此时再查找图像,就需要采用“路径”的方式来指定图像文件的位置。

路径可以分为相对路径绝对路径

    • 相对路径

相对路径:以引用文件所在位置为参考基础建立出的目录路径。

(文件所在位置即为图片相对HTML文件所在的位置

相对路径分类

符号

说明

同一级路径

图像文件位于HTML文件同一级,如<img src="baidu.gif"/>

下一级路径

/

图像文件位于HTML文件下一级,如<img src="images/baidu.gif/>

上一级路径

../

图像文件位于HTML文件上一级,如<img src="../baidu.gif"/>

(上上一级和下下一级把符号重复两遍即可)

相对路径是从代码所在文件出发,去寻找目标文件。此处的相对路径分类指的是图片相对HTML文件的相对位置

    • 绝对路径

绝对路径:目录下的绝对位置,通常是从盘符开始的路径。

例如:“D:\web\img\logo.gif"或完整的网络地址"http://www.itcast.cn/images/logo.gif"

4.7超链接标签(重要)

在HTML标签中,<a>标签用于定义超链接,作用是从一个页面链接到另一个页面。

    • 超链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

单词anchor的缩写,意为:锚。

两个属性的作用如下:

属性

作用

href

用于指定连接目标的url地址,(必须属性)当为标签应用href属性时,它就具有超链接的功能

target

用于指定链接页面的打开方式,其中_self为默认值,_blank为在新窗口中打开方式

    • 链接分类:
  1. 外部链接:例如<a href="http://www.baidu.com">百度</a>。

  1. 内部链接:网站内部页面之间的相互连接,直接链接内部页面名称即可跳转,例如<a href="index.html">首页</a>。

  1. 空链接:如果不确定连接目标,<a href="#">首页</a>。

  1. 下载链接:如果href里地址是一个文件或压缩包,会下载这个文件。

  1. 网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接。

  1. 锚点链接:点击链接,可以快速定位到页面中的某个位置。

  • 在连接文本的href属性中,设置属性值为#名字的形式,如<a href="#two">第二季</a>

  • 找到目标位置标签,添加一个id属性=刚才的名字,如:<h3 id="two">第二季介绍</h3>

5.HTML中的注释和特殊字符

5.1注释

如果需要在HTML文档中添加一些便于阅读但不需要在页面中显示的注释文字,需要使用注释标签。

HTML中注释"<!--"开头,以"-->"结束

<!--注释语句-->   快捷键Ctrl+/

(注释标签是给前端工作人员看的,便于相关开发人员理解与阅读代码,不执行到页面中)

5.2特殊字符

在HTML页面中,一些特殊符号不方便直接使用,可以用下列字符替代。

(重点记忆空格、大于号、小于号,其余回头查阅即可)

6.综合案例

制作了一个图书介绍页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>屠杀器官</title>
</head>

<body>
    <h1>屠杀器官图书介绍</h1>
    <a href="#book">1.图书简介<br/></a>
    <a href="#writer">2.作者简介<br/></a>
    <a href="#slot">3.部分章节<br/></a>
    <h2 id="book">图书简介</h2>
    <img src="OIP-C.jfif" />
    <p>911事件之后,看似平静下来的世界实则陷入了巨大的恐慌。一些发达国家开始了更严密的管理体制,以求一扫恐怖组织,而这直接导致了一些发展中国家陷入了内战,以及越来越残酷的大规模虐杀。美军上尉谢泼德不断追踪一直存在于背地里的神秘男人约翰·保罗。他的目的到底何在?由于大量的杀虐带来的“屠杀语法”到底是怎么一回事?这是一本不看到最后,绝对想不到主人公会做何决定的书。</p>
    <h2 id="writer">作者简介</h2>
    <img src="8b13632762d0f703fe94144902fa513d2697c505.jfif" />
    <p><a href="伊藤计划.html">伊藤计划</a>(1974.10-2009.3),1974年10月生于东京都,毕业于武藏野美术大学。2007年正式开始科幻小说的写作,凭借处女作《屠杀器官》一鸣惊人,获得PLAYBOY推理小说大奖2008年第一名,入围了第28届日本科幻小说大奖。2009年3月20日伊藤计划因肺癌英年早逝,年仅34岁。同年,他生前完成的最后一部长篇小说《和谐》荣膺第40届日本科幻“星云赏”最佳长篇及第30届日本科幻小说大奖,其创作才华得到科幻小说界高度的肯定。两年后,美国科幻界最重要的奖项之一“菲利普·K·迪克奖”也颁给了伊藤计划的这部遗作。伊藤计划的最后一部作品《尸者帝国》只写了开头,由其盟友円城塔在伊藤计划死后完成。</p>
    <h2 id="slot">部分章节</h2>
    <p>&nbsp;&nbsp;卡车穿过泥泞留下深深的车辙,我看见一个小女孩将脸埋在里面。</p>
    <p>&nbsp;&nbsp;她就像爱丽丝,想去车辙底下延伸开的神奇异国漫游似的。可那后脑勺大敞四开,绽放着殷红的花,装在头盖骨里的东西一览无余。</p>
    <p>&nbsp;&nbsp;不足十英尺外,一个少年横躺在地。背后射入的子弹看上去像是在少年的身体里窜来窜去之后,决定从肚脐附近穿出一样。</p>
    <p>&nbsp;&nbsp;肠子从敞开的肚子里露出来,经过两小时前刚停的雨冲刷过后,闪着淡红色的光亮。从微微张开的唇际,可以窥见他那稍往外翘、讨人怜爱的门牙。好像是在诉说着,他在临死前还有什么未尽之言。</p>
    <p>&nbsp;&nbsp;沿着卡车碾过的路向前走,有一个二十户人家规模的小村庄。
        <p>&nbsp;&nbsp;村子的广场上挖了一个坑,很多人的身体烧得熏黑冒烟,摞在一起倒在坑里。弥漫着烧过的肉臭味,还有头发的焦煳味。烧到一半的肌肉紧缩起来,人们都像腹中胎儿一般蜷曲着。</p>
        <p>&nbsp;&nbsp;骨头不如肌肉的伸缩性好,有的折断了,能看见一些断臂残肢明显不是从关节那里弯曲的。萎缩变形的肢体相互缠绕,宛如肢体结成的蜘蛛网。</p>
        <p>&nbsp;&nbsp;人们都死了。 </p>
        <p>&nbsp;&nbsp;人们都死去了。我打开门,里面有我的母亲,殡仪馆已经履行华盛顿州立法案规定的义务,完成了防腐处理。遗体美容师适当地画出表情,涂上厚厚的妆粉,死者脸上焕发出永远凝固着的、虚假的安详。</p>
        <p>&nbsp;&nbsp; “瞧,看看你的身后。所有的死人都将走过去。”母亲这样说道。我回过头,在我面前展开了广阔的世界,死人们对我招手,微笑。那里有自人类开始埋葬同胞以来的所有死人。有的形体完好,有的缺胳膊少腿。我完全不明白为什么自己能看出没有头的死人在微笑,可尽管如此,他依旧微笑着,漫不经心地摆弄从腹部溢出的肠子。</p>
        <p>&nbsp;&nbsp;“所有人都死了吧。” 我一边说一边转向死去的母亲。母亲点点头,伸手指向我。</p>
        <p>&nbsp;&nbsp;“是啊。瞧,看看你的身体。” 于是我看向自己,发现身体已经开始腐烂,这才意识到我已经死了。</p>
        <p>&nbsp;&nbsp;在很远的彼岸,自人类历史开创以来所有的死人排成长河, 缓慢地向某处前行。</p>
        <p>&nbsp;&nbsp;我问母亲:“这是死后的世界吗?”母亲悠悠地摇头。孩提时,她就用这个动作纠正我的错误。</p>
        <p>&nbsp;&nbsp;“不是,这是平常的世界。你、我们生活到现在的世界。与我们的日常营生相毗邻的平常世界。” “原来是这样啊。”我说。我放下心来,泪涌流而出。那头的队伍里有几个熟悉的面孔。患小儿癌症死去的本杰明 ,脑袋被吹跑的父亲。</p>
        <p>&nbsp;&nbsp;于是,母亲牵起我的手,将我引向那个队伍。</p>
        <p>&nbsp;&nbsp;“我们走吧!”我点点头,与母亲一起走向对面死去的人们。我记得第一次上学时也是这般情景。我一边怀念感伤,一边与母亲并肩而行。</p>
        <p>&nbsp;&nbsp;我们的身边,有刚才将脸埋进车辙、脑部被子弹打穿的少女;有背后中枪、内脏从腹部露出的少年;还有被烧死在坑里的人们。</p>
        <p>&nbsp;&nbsp;我们一起前行,准备加入死人的队伍中去。</p>
        <p>更多内容可以<a href="http://www.baidu.com">百度一下</a>哦</p>
</body>

</html>

具有:1.锚点功能2.超链接3.插入图片

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值