图像标签和超链接标签（学习前端的第三天）

目录

图像标签

src

alt

width和height

border（了解即可，关于边框的设计会在CSS中学）

 超链接标签

1.外部链接

2.内部链接

3.空链接

4.下载链接

5.锚点标签（目录就是用这个实现的）

---

图像标签

        HTML中的图像标签是<img>标签，它用于在网页中嵌入图像。图像可以是本地文件或远程资源，可以是各种格式的图像文件，包括JPEG、PNG、GIF等。

代码样式：

<img src="example.jpg" alt="Example Image" width="500" height="300">
 

解释：

src

src是<img>标签的必须属性，指定图像文件的路径和文件名，如上例一般直接src="example.jpg"，默认路径为当前文件所在路径（图片和HTML文档在一个文件夹）。

 关于路径有以下写法：

1.相对路径，分为上级路径(../)和下级路径(/)。

<!-- 相对路径：上级路径用../; 下级路径用/  绝对路径就是该文件在本机中的位置-->
<img src="/imgs/t1.png" />                   <!--下级路径--> 
<img src="../云·原神.lnk" alt="格式错误" />  <!-- 上级路径-->

2.绝对路径，src="图片所在电脑的位置"。

3.网络绝对地址路径，右键网页里的图片，点击复制图片链接。（不推荐使用）

<img src="https://profile.csdnimg.cn/4/9/C/0_qq_65204149" /> <!--网络绝对地址-->

alt

alt是替换文本,当图片不能显示时，显示该文本。

<img src="t.png" alt="图片加载失败" /> <!--alt 替换文本,图片不能显示时，显示该文本-->

width和height

设置图片的宽度和高度，只用一个的话，另一个会自动匹配，单位是像素（px）。

    <img src="t1.png" width="500" /> <!--width 设置图片宽度 像素为单位-->
    <img src="t1.png" height="500" /> <!--height 设置图片宽度 宽、高只用一个，另一个自动-->

border（了解即可，关于边框的设计会在CSS中学）

设置边框的属性。

 <img src="t1.png" border="15" /> <!--border 设定边框-->

 超链接标签

        HTML中的超链接标签是<a>标签。它可以用来创建一个可点击的链接，将用户带到其他网页、文档、视频或其他资源

 基本格式：（href是必须存在的）

<a href="跳转目标地址" target="目标弹出的方式"> 文本或图像</a>

1.外部链接

外部链接就是href="网址"，主要说一下target这个属性，按照下面腾讯网的例子，

target="_self" 覆盖当前窗口（关闭当前窗口打开www.qq.com）

target="_blank" 在新窗口打开 www.qq.com（保留当前窗口）

<a href="https://www.qq.com" target="_self">腾讯</a> <!-- _self 覆盖当前窗口 _blank 新窗口 -->
<a href="https://www.yuanshen.com/" target="_blank"><img src="t1.png" /></a>

2.内部链接

跳转到同一文件夹下的HTML文档。

<a href="内部1.html" target="_blank">点击打开内部链接</a>

3.空链接

在没有确定用什么链接时用空链接标记。

 <a href="#">空链接</a>

4.下载链接

地址链接的是文件 .exe .zip 等，href=“该文件的路径”。

 <a href="t1.zip" target="_blank">下载</a>

5.锚点标签（目录就是用这个实现的）

目录与内容的跳转，在当前页实现跳转。

<h2 id="start">目录</h2> <!-- 建立一个标记start -->

<a href="#start">返回目录</a> <!-- 使用锚点链接跳转到相应标记 -->

   <a href="#start">返回目录</a> ——> <h2 id="start">目录</h2>

（  注意一下 href 后面要用到#  。）

#代表网页中的一个位置。右面的字符就是代表的位置信息：如

http://localhost：8081/cbuild/index.html#first

就代表网页index.html的first位置。浏览器读取这个URL后，会自动将first位置滚动至可视区域。

上面三行摘自HTML中的hash（#号）_html #_编程之间的博客-CSDN博客

好的，第三天结束！