文章目录

1.图片标签<**img**>
2. 超链接标签<**a**>
3. 综合案例

在这里插入图片描述

1.图片标签<img>

1.1 定义

img是单词image的缩写，意为图片

标签语义：用来定义图片

<img>是一个单标签

1.2 图片属性

属性就是标签的特性。

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	数字	设置图像边框的宽度

图片标签 <img> 的必备属性是：src(source的缩写，意为资源)，src存放的图片的路径。

1.3 实验前的图片资源

这是我所使用的图片资源🖼，有需要的小伙伴可以自行保存。以下实验均命名为：bingguo.jpg

在这里插入图片描述

1.4 图片属性的效果展示

代码：

<body>
    <!-- 普通图片-->
    <img src="bingguo.jpg">

    <!-- 鼠标悬浮属性 -->
    <img src="bingguo.jpg" title="我是冰菓" >

    <!-- 无法正常显示时(这里图片src不写)，文本替换属性 -->
    <img src="" alt="无法正常显示">

</body>

效果：

在这里插入图片描述

1.5 图像标签属性注意点

src属性为必备属性
属性需要写在标签名的后面，双标签的属性需要写在起始标签名的后面
属性可以写多个，不分先后顺序，但需要用空格隔开
属性在HTML中以键值对， key = “value” 的形式呈现

1.6 相对路径和绝对路径

1.6.1 绝对路径

绝对路径书写格式(url地址):协议名://主机名:端口号/路径(scheme://host:port/path)

协议名:http，https，file
主机名:域名，IP地址
端口号:
如果是http协议，默认端口号是80
如果是https协议，默认端口号是443
当跳转目标和当前目标协议相同时，协议可以省略

1.6.2 相对路径

符号	作用
./	当前目录
/	下一级目录
…/	上一级目录

由于当前目录 ./ 一开始可以省略，所以我们调用同级的文件时可以直接写文件名，因为都在当前目录。

1.6.3 同级、上下级文件架构

在这里插入图片描述

img文件夹和下面的html文件是同级文件，img文件夹是bingguo2.jpg文件的上级，那么反之，bingguo2.jpg文件是img文件夹的下级。

但目录的概念需要搞清楚：img文件夹是bingguo2.jpg文件的上级，同时img文件夹也是bingguo2的当前目录。因为bingguo2.jpg在img内部。

所以说，为什么html和img都属于同级文件呢？因为他们在同个目录底下，即他们的当前目录是相同的。

1.6.4 资源访问实例

注意❗️：我们访问图片的时候，其相对路径相对的是我当前的HTML文件的目录，即HTML文件的上级文件，也就是要从我这个HTML文件的当前目录路径去找图片。

HTML文件的同级文件的访问：

如图所示：10img不同路径的访问.html的当前目录为html文件夹，然后直接访问bingguo.jpg，即 bingguo.jpg。
```

<img src="./bingguo.jpg">


<img src="bingguo.jpg">
```

HTML文件的同级文件的下一级文件的访问

10img不同路径的访问.html的当前目录为html文件夹，然后直接访问jpg文件夹，即 jpg，最后访问jpg文件夹下的bingguo2.jpg，即 /bingguo2.jpg。
```

<img src="./img/bingguo2.jpg">


<img src="img/bingguo2.jpg">
```

HTML文件的上级文件的同级的文件的访问

10img不同路径的访问.html的当前目录为html文件夹，然后向上访问code文件夹，即 ../，最后访问code文件夹下的bingguo3.jpg，即 /bingguo3.jpg。
```

<img src="./../bingguo3.jpg">

 
<img src="../bingguo3.jpg">
```

2. 超链接标签<a>

2.1 定义

a是单词anchor的缩写，意为锚点

标签语义：用来跳转链接或者跳转相应位置

2.2 属性

属性	属性值	作用
href	url	指定跳转的地址
target	_self(默认本窗口打开)、_black(新窗口打开)等固定属性	指定打开方式

超链接标签 <a> 的必备属性是：href(Hypertext Reference的缩写，意为超文本引用)，存放的链接的地址。

<body>
    <!-- 链接在本窗口打开 -->
    <a href="https://www.baidu.com">百度（本窗口）</a>

    <!-- 链接在新的空白窗口打开 -->
    <a href="https://www.baidu.com" target="_blank">百度（新窗口）</a>
</body>

在这里插入图片描述

_self属性（会覆盖原来的页面）

在这里插入图片描述

_black属性（会在新的页面打开）

在这里插入图片描述

2.3 链接的分类

外部链接
```

<a href="https://www.baidu.com">百度</a>
```
像这样引用其他网站的连接，就是外部链接。

内部链接

<!-- 2. 内部链接 -->
<a href="06综合案例.html">综合案例</a>

用相对路径写我们自己写的其他文件。

空链接
```

<a href="#">空链接</a>
```
暂时无法确定链接的目标，以#取代。
下载连接
```

<a href="bingguo.rar">下载我</a>
```
当href里面是文件或者压缩包，可以下载这个文件。

网页元素链接

<!-- 5. 网页元素链接 -->
<a href="00第一个界面.html">
    <img src="./bingguo.jpg">
</a>

除了文字可以链接，图片，视频等也都可以链接。

锚点链接

如果我们想要实现像下图这样的跳转：
- 跳转终点加个id，相当于给他一个终点的标记
- 跳转起点href用#id名，既可实现跳转
```

<a href="#end">去终点</a>
<img src="./bingguo.jpg" height="1000px">
<p id="end">终点</p>
```

3. 综合案例

图片资源可到pink老师的gitee仓库下载
有两个页面一个demo.html和oldman.html

demo.html文本内容如下：

圣诞节的那些事

1.圣诞是怎样由来的 
2.圣诞老人的由来 
3.圣诞树的由来

圣诞是怎样由来的
        
圣诞节是基督教世界最大的节日。一般认为12月25日作为圣诞节可能开始于公元336年的罗马教会。4世纪初，1月6日是罗马帝国东部各教会纪念耶稣降生和受洗的双重节日，即上帝通过耶稣向世人显示自己。 这一天又是罗马历书的冬至节，意味着万物复苏的开始。可能由于这个原因，罗马教会才选择这一天作为圣诞节。后来，因为各地教会使用的历书不同，具体日期不能统一，于是就把12月24日到第二年的1月6日定为圣诞节节期（Christmas Tide），各地教会可以根据当地具体情况在这段节期之内庆祝圣诞节。 在欧美许多国家里，人们非常重视这个节日，把它和新年连在一起，而庆祝活动之热闹与隆重大大超过了新年，成为一个全民的节日。12月24日平安夜、12月25日圣诞节的主要纪念活动都与耶稣降生的传说有关 。
   
圣诞老人的由来
        
圣诞节当然少不了圣诞老人，根据圣经记载，书中并没有提起这一号人物。到底他是如何成为圣诞的主角之一呢？
     
相传在一千六百多年前，荷兰巴里地方有一个老人，名叫尼古拉斯，他一生最爱帮助贫穷的人家。其中有一次他帮助三个贫穷的少女，送她们三袋金子以逃过被卖的不幸。
        
到了一八二二年，由荷兰传教士把这位伟大慈善家的故事传到美国，装扮圣诞老人渐渐地流行于世界各国。根据调查，以上故事还有下文；当尼古拉斯偷偷把其中一袋金子送给其中一名女子时，他把金子从其中一个窗户扔进去，恰好掉进晾在壁炉上的一只长袜中。于是，将礼物放在圣诞袜子的送礼方法便传到至今。
        
在平安夜里，孩子总会把一双双色彩缤纷的袜子挂在床头，然后在袜子旁边放杯热牛奶让圣诞老人喝，以让劳苦功高的圣诞老人解渴，并送份大礼给自己。

圣诞树的由来
    
圣诞一直是庆祝圣诞节不可少的装饰物，如果家中没有圣诞树，就大大减少了过节气氛。关于圣诞树的来源有多种不同的传说。
        
其中一个是说：大约在十六世纪，圣诞树最先出现在德国，德国人把长青的松柏枝拿到屋中去摆设，将之成为圣诞树。后来，由德国人马丁路德把蜡烛放在树林中的枞树枝，然后点燃蜡烛，使它看起来像是引导人们到伯利恒去。而近今日，人们已经改用粉色的小灯泡了。
           
另一个传说记载。在很久以前，曾有一位农民，在圣诞节那天遇到一个穷苦小孩，他热情地接待了这个儿童。儿童临走时折下一根松枝插在地上，松枝立即变成一棵树，上面都挂满礼物，以答谢农民的好意。
            
圣诞树真正出现在圣诞节时，首先见于德国，之后又传入欧洲和美国，并以其优美的姿态，成为圣诞节不可缺少的装饰。圣诞树的种类繁多，有天然松柏圣诞树、也有人造圣诞树及白色圣诞树。每棵圣诞树上都挂满琳琅满目的装饰品，但每棵树的顶端必定有个特大的星星，象征三博士跟随该星而找到耶稣，而且也只有该家庭的一家之主可以把这棵希望之星挂上。

更多内容可以百度一下

oldman.html文本内容如下：

圣诞老人 （西方文化的传说人物）

圣诞老人（Santa Claus）别称Saint Nick、Kris Kringle、Father Christmas或Santa（爱尔兰英语的Santy），一位专门在圣诞节前夜时悄悄赠送礼物给小孩子的神秘人物，是节日主题的代表角色之一。他普遍被认为是基督教的圣人圣·尼古拉斯（Saint Nicholas）的衍生形象。 传说每到12月24日晚上，有个神秘人会乘驾由9只驯鹿拉的雪橇在天上飞翔，挨家挨户地从烟囱进入屋里，然后偷偷把礼物放在好孩子床头的袜子里，或者堆在壁炉旁的圣诞树下。他在一年中的其他时间里，都是忙于制作礼物和监督孩子们的行为。 虽然没有人真的见过神秘人的样子，但是人们会装扮成他的样子来给孩子送上礼物。他通常被描述为一位老人，头戴红色帽子，大大的白色胡子，一身红色棉衣，脚穿红色靴子的样子，拿着装有礼物的大袋子，因为总在圣诞节前夜出现派发礼物，所以习惯地称他为“圣诞老人”。

要求如下（由于这个效果是缩写网页后截的，所以有些效果，比如在那里换行可能会略有不同）

demo.html页面
oldman.html页面

文件架构：

在这里插入图片描述

代码如下：

demo.html

<body>
    <h1>圣诞节的那些事</h1>

    1.圣诞是怎样由来的<br/>
    <a href="#oldman">2.圣诞老人的由来</a><br/>
    <a href="#tree">3.圣诞树的由来</a>

    <h2>圣诞是怎样由来的</h2>

    <p>圣诞节是基督教世界最大的节日。一般认为12月25日作为圣诞节可能开始于公元336年的罗马教会。4世纪初，1月6日是罗马帝国东部各教会纪念耶稣降生和受洗的双重节日，即上帝通过耶稣向世人显示自己。 这一天又是罗马历书的冬至节，意味着万物复苏的开始。可能由于这个原因，罗马教会才选择这一天作为圣诞节。后来，因为各地教会使用的历书不同，具体日期不能统一，于是就把12月24日到第二年的1月6日定为圣诞节节期（Christmas Tide），各地教会可以根据当地具体情况在这段节期之内庆祝圣诞节。 在欧美许多国家里，人们非常重视这个节日，把它和新年连在一起，而庆祝活动之热闹与隆重大大超过了新年，成为一个全民的节日。12月24日平安夜、12月25日圣诞节的主要纪念活动都与耶稣降生的传说有关 。</p>

    <img src="./images/t1.gif">
    <h2 id="oldman">圣诞老人的由来</h2>

    <p>圣诞节当然少不了<a href="./oldman.html" target="_blank">圣诞老人</a>，根据圣经记载，书中并没有提起这一号人物。到底他是如何成为圣诞的主角之一呢？</p>
    <img src="./images/t2.jpg">

    <p>相传在一千六百多年前，荷兰巴里地方有一个老人，名叫尼古拉斯，他一生最爱帮助贫穷的人家。其中有一次他帮助三个贫穷的少女，送她们三袋金子以逃过被卖的不幸。</p>

    <p>到了一八二二年，由荷兰传教士把这位伟大慈善家的故事传到美国，装扮圣诞老人渐渐地流行于世界各国。根据调查，以上故事还有下文；当尼古拉斯偷偷把其中一袋金子送给其中一名女子时，他把金子从其中一个窗户扔进去，恰好掉进晾在壁炉上的一只长袜中。于是，将礼物放在圣诞袜子的送礼方法便传到至今。</p>

    <p>在平安夜里，孩子总会把一双双色彩缤纷的袜子挂在床头，然后在袜子旁边放杯热牛奶让圣诞老人喝，以让劳苦功高的圣诞老人解渴，并送份大礼给自己。</p>

    <h2 id="tree">圣诞树的由来</h2>

    <p>圣诞一直是庆祝圣诞节不可少的装饰物，如果家中没有圣诞树，就大大减少了过节气氛。关于圣诞树的来源有多种不同的传说。</p>

    <p>其中一个是说：大约在十六世纪，圣诞树最先出现在德国，德国人把长青的松柏枝拿到屋中去摆设，将之成为圣诞树。后来，由德国人马丁路德把蜡烛放在树林中的枞树枝，然后点燃蜡烛，使它看起来像是引导人们到伯利恒去。而近今日，人们已经改用粉色的小灯泡了。</p>

    <p>另一个传说记载。在很久以前，曾有一位农民，在圣诞节那天遇到一个穷苦小孩，他热情地接待了这个儿童。儿童临走时折下一根松枝插在地上，松枝立即变成一棵树，上面都挂满礼物，以答谢农民的好意。</p>

    <p>圣诞树真正出现在圣诞节时，首先见于德国，之后又传入欧洲和美国，并以其优美的姿态，成为圣诞节不可缺少的装饰。圣诞树的种类繁多，有天然松柏圣诞树、也有人造圣诞树及白色圣诞树。每棵圣诞树上都挂满琳琅满目的装饰品，但每棵树的顶端必定有个特大的星星，象征三博士跟随该星而找到耶稣，而且也只有该家庭的一家之主可以把这棵希望之星挂上。</p>

    <img src="./images/t3.jpg">
    <p>更多内容可以 <a href="https://www.baidu.com">百度一下</a></p>
</body>

oldman.html

<body>
    <h1>圣诞老人 （西方文化的传说人物）</h1>

    <p>圣诞老人（Santa Claus）别称Saint Nick、Kris Kringle、Father Christmas或Santa（爱尔兰英语的Santy），一位专门在圣诞节前夜时悄悄赠送礼物给小孩子的神秘人物，是节日主题的代表角色之一。他普遍被认为是基督教的圣人圣·尼古拉斯（Saint Nicholas）的衍生形象。 传说每到12月24日晚上，有个神秘人会乘驾由9只驯鹿拉的雪橇在天上飞翔，挨家挨户地从烟囱进入屋里，然后偷偷把礼物放在好孩子床头的袜子里，或者堆在壁炉旁的圣诞树下。他在一年中的其他时间里，都是忙于制作礼物和监督孩子们的行为。 虽然没有人真的见过神秘人的样子，但是人们会装扮成他的样子来给孩子送上礼物。他通常被描述为一位老人，头戴红色帽子，大大的白色胡子，一身红色棉衣，脚穿红色靴子的样子，拿着装有礼物的大袋子，因为总在圣诞节前夜出现派发礼物，所以习惯地称他为“圣诞老人”。</p>

    <img src="./images/oldman.jpg">
</body>

效果和要求基本一致👏

本文主要学习黑马程序员pink老师的视频

如有错误，敬请指正，欢迎交流🤝，谢谢♪(･ω･)ﾉ

本文含有隐藏内容，请开通VIP 后查看

html之图片标签和超链接

文章目录

1.图片标签<img>

1.1 定义

1.2 图片属性

1.3 实验前的图片资源

1.4 图片属性的效果展示

1.5 图像标签属性注意点

1.6 相对路径和绝对路径

1.6.1 绝对路径

1.6.2 相对路径

1.6.3 同级、上下级文件架构

1.6.4 资源访问实例

2. 超链接标签<a>

2.1 定义

2.2 属性

2.3 链接的分类

3. 综合案例

网站公告

今日签到

热门文章

最新发布