综合案例

主要复习：

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

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

例：

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

建两个.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

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

Web前端学习笔记——CSS京东案例、BFC
京东项目(一) 京东项目介绍项目名称:京东网项目描述:京东首页公共部分的头部和尾部制作,京东首页中间部分. 项目背景现阶段电商类网站很流行,很多同学毕业之后会进入电商类企业工作,同时电商类网站需 ...
web前端学习css“北方高温“案例
写于2021/11/12 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
html表单的课后心得体会,web前端学习心得体会范文
<web前端学习心得体会范文>由会员分享,可在线阅读,更多相关<web前端学习心得体会范文(2页珍藏版)>请在装配图网上搜索. 1.web前端学习心得体会范文web前端学习心得 ...
web前端学习基础教程，简单的图片旋转木马自动轮播js代码
一款简单的图片旋转木马自动轮播js代码,图片叠加轮播切换效果,支持点击左右箭头按钮控制切换. 案例效果图案例源码: <!DOCTYPE html> <html lang=" ...
Web前端学习第四周
Web前端学习第四周 position定位指定一个元素在文档中的定位方式 top,right,left,bottom属性决定最终位置 position取值 static(默认) relative a ...
好程序员web前端学习路线分享css3中的渐进增强和降级
好程序员web前端学习路线分享css3中的渐进增强和降级,渐进增强和降级这两个概念是在 CSS3 出现之后火起来的.由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器 ...
零基础想要学习前端，却无从下手？其实你就差一套这样的web前端学习路线
优秀的前端工程师无论在深度和广度上都得有自己的一套清晰透明的知识体系,同时更应该具备快速学习的能力. WEB前端工程师除了需要掌握基本的前端的开发技能外,当然,这里的基本技能说的比较宽泛,大致包括HT ...
Web 前端学习之js概述
Web 前端学习之js概述 1.JavaScript 介绍 Javascript 语言诞生主要是完成页面的数据验证.因此它运行在客户端,需要运行浏览器来解析执行JavaScript 代码. JS 是 ...
2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记
2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记 [导读]:初学web前端的小伙伴经常会遇到的问题,1.没方法 2.没资源 3.没经验,不知道从何开始 ,代码哥(D ...

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

文章目录

综合案例

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

最新文章

热门文章