web前端学习28-29（综合案例：圣诞节的那些事）

最新推荐文章于 2023-02-27 09:25:25 发布

香甜的甲基橙

最新推荐文章于 2023-02-27 09:25:25 发布

阅读量1.7k

点赞数 2

分类专栏： web前端基础学习笔记文章标签：前端 html

本文链接：https://blog.csdn.net/weixin_51249285/article/details/121108960

版权

web前端基础学习笔记专栏收录该内容

68 篇文章 13 订阅

订阅专栏

文章目录

综合案例

综合案例

主要复习：

目录文件夹
今日所学标签
路径
锚点链接

根据前面所学知识可以很容易做出下面这个案例：圣诞节的那些事

例：

首先可以先建一个文件夹用来保存这个案例

在这里插入图片描述

建两个.html文件在同一路径

demo.html

<!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>Document</title>
</head>
<body>
    <h1>圣诞节的那些事</h1>
    1.圣诞是怎么由来的<br/>
    <a href="#live1">2.圣诞老人的由来</a><br/>    <!--锚点链接-->
    <a href="#live2">3.圣诞树的由来</a><br/>
    
    
    <h3>圣诞是怎么由来的</h3>
    <p>圣诞节是基督教世界最大的节日。一般认为12月25日作为圣诞节可能开始于公元336年的罗马教会。4世纪初，1月6日是罗马帝国东部各教会纪念耶稣降生和受洗的双重节臣
        即上帝通过
        耶稣向世人显示自己。这一天又是罗马历书的冬至节，意味着万物复苏的开始。可能由于这个原因，罗马教会才选择这一天作为圣诞节。后来，因为各地教会使用的历书不同
        具体日期不能
        统一，于是就把12月24日到第二年的1月6日定为圣诞节节期(Chistmas Tide)，各地教会可以根据当地具体情况在这段节期之内庆祝圣诞节。在欧美许多国家里，人们非常重视这个节日，把它和新年连在一起，而庆祝活动之热闹与隆重大大超过了新年，成为一个全民的节日。12月24日平安夜、12月25日圣诞节的主要纪念活动都与耶稣降生的传说有关。
        </p>
    <img src="http://5b0988e595225.cdn.sohucs.com/images/20171224/da9f6735224c42089d961f03fac051ff.jpeg" height="300" width="400"/>  <!--外部链接-->
    
    
    <h3 id="live1">圣诞老人的由来</h3>
    <p>圣诞节当然少不了<a href="shengdanlaoren.html">圣诞老人</a> <!--内部链接-->，根据圣经记载，书中并没有提起这一号人物。到底他是如何成为圣诞的主角之一呢?
    </p>
    <img src="https://pic2.zhimg.com/v2-a41f93f3a51a16d1c6fdf340c6cc518a_b.jpeg" height="300" width="400"/>
    <p>相传在一千六百多年前，荷兰巴里地方有一个老人，名叫尼古拉斯，他一生最爱帮助贫穷的人家。其中有一次他帮助三个贫穷的少女，送她们三袋金子以逃过被卖的不幸
        到了一八二二年，由荷兰传教士把这位伟大慈善家的故事传到美国，装扮圣诞老人渐渐地流行于世界各国。根据调查，以上故事还有下文;当尼古拉斯偷伯把其中一袋金子送给其中一名女子时，他把金子从其中一个窗户扔进去，恰好掉进晾在壁炉上的一只长袜中。于是，将礼物放在圣诞袜子的送礼方法便传到至今。
        </p>
    
    
    <h3 id="live2">圣诞树的由来</h3>
    <p>据说有一位农民在一个风雪交加的圣诞夜里接待了一个饥寒交迫的小孩，让他吃了一顿丰盛的圣诞晚餐，这个孩子告别时折了一根杉树枝插在地上并祝福说：“年年此日，礼物满枝，留此美丽的杉树，报答你的好意。”小孩走后，农民发现那树枝竟变成了一棵小树，他才明白自己接待的原来是一位上帝的使者。这个故事就成为圣诞树的来源</p>
    <img src="http://5b0988e595225.cdn.sohucs.com/images/20171224/22e22ff3558248d5958026fd1f3a386a.jpeg" height="300" width="400"/>
    
    <p>更多内容可以<a href="http://www.baidu.com" target="_blank">百度一下</a></p>
</body>
</html>

其中用到一个内部链接，在文件相同路径加一个

shengdanlaoren.html

<!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>
    <p>圣诞老人( santa laus)别称aint lick、 Kis Kingle、Father Chistmas或Santa (爱尔兰英语的Santy )，一位专门在圣诞节前夜时悄悄赠送礼物给小孩子的神秘人物，是节日主题的代表角色之一，他普遍被认为是基督救的圣人圣尼古拉斯( ant Nicholas ) 的衍生形象。传说每到12月24日晚上，有个神秘人会乘驾由9只驯鹿拉的雪橇在天上飞翔，挨家换户地从烟囱进入屋
        里，然后偷偷把礼物放在好孩子床头的袜子里，或者堆在壁炉旁的圣诞树下。他在一年中的其他时间里，都是忙于制作礼物和监督孩子们的行为。虽然没有人真的见贝过神秘人的样子，但是人.会装扮成他的样子来给孩子送上礼物，他通常被锚述为一位老人，头戴红色帽子，大大的白色胡子，一身红色棉衣，脚穿红色数子的样子，拿着装有礼物的大袋子，因为总在圣诞节前夜出现派发礼物，所以习惯地称他为“圣诞老人”。
        </p>
    <img src="http://5b0988e595225.cdn.sohucs.com/images/20171224/0a82df5044c2457491cdee8d85a59340.jpeg" height="300" width="400"/>

</body>
</html>

网页显示：

在这里插入图片描述

点击圣诞老人可跳转：

在这里插入图片描述

其中主要细节：

锚点链接使用

在这里插入图片描述

内部链接使用

在这里插入图片描述

网页元素的链接

在这里插入图片描述

本文链接：https://blog.csdn.net/weixin_51249285/article/details/121108960

香甜的甲基橙

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
3
评论
web前端学习28-29（综合案例：圣诞节的那些事）

文章目录综合案例综合案例主要复习：目录文件夹今日所学标签路径锚点链接根据前面所学知识可以很容易做出下面这个案例：圣诞节的那些事例：首先可以先建一个文件夹用来保存这个案例建两个.html文件在同一路径demo.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compat
复制链接

扫一扫

专栏目录