圣诞节的那些事（链接标签+路径）

最新推荐文章于 2022-03-24 10:43:03 发布

多加奶糖

最新推荐文章于 2022-03-24 10:43:03 发布

阅读量5.1k

点赞数 3

分类专栏：前端笔记文章标签： html

本文链接：https://blog.csdn.net/qq_40501188/article/details/108853236

版权

笔记同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

前端

21 篇文章 1 订阅

订阅专栏

文本格式化标签

加粗：<strong></strong> or <b></b>
倾斜：<em></em> or <i></i>
删除线：<del></del> or <s></s>
下划线：<ins></ins> or <u></u>
注意：以上内容均推荐使用第一种，语义更强烈，表示强调

div 和 span 标签

均为无语义标签

<div> 可定义文档中的分区或节（division/section）。是一个块级元素，相当于一个大盒子，存放一大块内容，类似标题标签，独占一行。

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。但是没有必要全都用 id 或 class 来标记

<span> 标签被用来组合文档中的行内元素。相当于一个小盒子，不会独占一行。

图像标签

<img /> 这是一个单标签，标签有两个必需的属性：src 属性和 alt 属性。
alt属性：替换文本，图像不能显示时的文字
title属性：提示文本，鼠标放到图像上，显示的文字
width/height：设置图像的宽度和高度
border：单位是像素，设置图像的边框粗细
注意：

图像标签可以有多个属性，必须写在标签名的后边
属性之间不分先后的顺序，标签名与属性、属性与属性之间均以空格分开
属性采用键值对的格式，即key = “value”的格式，属性 = “属性值”

相对路径与绝对路径

相对路径：以引用文件（相对HTML页面的位置）所在位置为参考基础，而建立出的目录路径
绝对路径：目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径，或者是网页中图片的网址

超链接标签

语法格式：<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href：用于指定链接目标的url地址（必须属性）
target：用于指定链接页面的打开方式，其中_self为默认值，在当前窗口打开，_blank为在新窗口中打开方式。
外部链接：
<a href="http://www.baidu.com">百度</a>
内部链接：网页内部的链接，直接在href后输入该链接名（xxx.html）就可以
空链接：# <a href="#">这是个空链接</a>
下载链接：
如果href后边跟的是一个压缩包形式(.exe或者.zip等)，会下载这个文件
网页元素链接：文本，图像，音频，视频等都可以添加超链接
<a href="http://www.baidu.com"><img src="img.jpg"></a>
锚点链接：点击链接，快速定位到页面中的某个位置
- href属性中设置属性值为#名字的形式<a href="#two">第二季</a>
- 找到目标位置标签，里面添加一个id 属性 = 刚才的名字，<h3 id="two">第二季介绍</h3>

案例：圣诞节的那些事

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣诞节的那些事</title>
</head>
<body>
    <h1>圣诞节</h1>
    <a href="#from">圣诞节是怎样由来的</a><br>
    <a href="#oldman">圣诞老人的由来</a><br>
    <a href="#tree">圣诞树的由来</a><br>
    <img src="https://p3.ssl.qhimgs1.com/sdr/400__/t01c3274df4fa682cc3.jpg" />
    <p><h3 id="from">圣诞节是怎样由来的</h3>在将临节期，教会的布置全都以蓝紫色为主。圣坛的桌巾、讲台的台帷、牧师袍的肩带都是紫色。并且圣坛中央通常会放置一个用长青树的叶子作的花环，中间有五枝紫色的长烛，每个星期日，便多点上一枝蜡烛。到最后的圣诞夜里的“普世同庆”点上中间的最后一枝蜡烛。烛光象征着在许多年前的圣婴孩耶稣其第一声啼哭里，为这世上带来了光明。</p>
    <p><h3 id="oldman">圣诞老人的由来</h3>
    <a href="oldman.html" target="_blank">圣诞老人</a>其实是西元第三世纪的尼可莱斯主教。他曾冒死解救被处殛刑的政治犯、也揭发过贪婪官吏屯粮，使百姓渡过饥荒。在宗教被迫害时，被捕入狱，身上满是鞭痕、钳伤与烙印，仍坚持其信仰。而后半生留在米拉，设立孤儿院、照顾病患、贫民。尼可莱斯生平事迹中，最脍炙人口的是他慷慨助人的行径和对孩童的爱心，这些事迹之后被儿童文学家，予以丰富的想像而成为我们此刻所知圣诞老人故事。</p>
    <p><h3 id="tree">圣诞树的由来</h3>据称，圣诞树最早出现在古罗马12月中旬的农神节，德国传教士尼古斯在公元8世纪用纵树供奉圣婴。随后，德国人把12月24日作为亚当和夏娃的节日，在家放上象征伊甸园的“乐园树”，上挂代表圣饼的小甜饼，象征赎罪;还点上蜡烛和球，象征基督。到16世纪，宗教改革者马丁.路德，为求得一个满天星斗的圣诞之夜，设计出在家中布置一颗装着蜡烛和球的圣诞树。</p>
    <a href="http://www.baidu.com" target="_blank">更多内容，百度一下</a>
</body>
</html>

下边这是oldman.html

在这里插入代码片<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣诞老人</title>
</head>
<body>
    <img src="http://pic25.nipic.com/20121213/2457331_102004052301_2.jpg" target="_blank" title="圣诞老人" width="200px">
    <p>圣诞老人(Santa Claus)西方神话传说中的人物，在传说中西方圣诞节前夜时悄悄赠送礼物给小孩子，是耶稣基督诞辰瞻礼即西方圣诞节的代表角色之一。他普遍被认为是基督教的圣人圣·尼古拉斯(Saint Nicholas)的衍生形象，圣诞老人的起源或与一种被称为毒蝇伞的红白相间蘑菇有关 。</p>

    <p>传说每到12月24日晚上，有个神秘人会乘驾由9只驯鹿拉的雪橇在天上飞翔，挨家挨户地从烟囱进入屋里，然后偷偷把礼物放在好孩子床头的袜子里，或者堆在壁炉旁的圣诞树下。他在一年中的其他时间里，都是忙于制作礼物和监督孩子们的行为。</p>

    <p>虽然没有人真的见过神秘人的样子，但是人们会装扮成他的样子来给孩子送上礼物。他通常被描述为一位老人，头戴红色帽子，大大的白色胡子，一身红色棉衣，脚穿红色靴子的样子，拿着装有礼物的大袋子，因为总在圣诞节前夜出现派发礼物，所以习惯地称他为"圣诞老人"。</p>
</body>
</html>