图像路径

最新推荐文章于 2022-12-31 17:07:26 发布

FG.

最新推荐文章于 2022-12-31 17:07:26 发布

阅读量1.2k

点赞数 3

分类专栏： HTML5

本文链接：https://blog.csdn.net/weixin_54418006/article/details/115588152

版权

HTML5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

4.7图像路径(重点)

路径可以分为：相对路径和绝对路径.
1.相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。简单来说，图片相对于HTML页面的位置.
相对路径符号说明
同一级路径图像文件位于HTML同一级如: <img src="baidu.gif"/>
下一级路径 / 图像文件位于HTML文件下一级如:<img src="images/baidu.gif"/>
上一级路径 …/ 图像文件位于HTML上一级如:<img src="../baidu.gif"/>

在这里插入图片描述

在这里插入图片描述
2.绝对路径：是指目录下的绝对位置，直接到达目标位置，通常从盘符开始的路径。
例如:“D:\web\img\logo.gif"或完整的网络地址"http://www.itcast.cn/images/log.gif”。

<!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>
   <img src="C:\Users\86188\Desktop\HTML\img.jpg"/><br/>//绝对路径
   <img src="https://img-home.csdnimg.cn/images/20201124032511.png"/>//网络地址
</body>
</html>

在这里插入图片描述

4.8超链接标签(重点)

在HTML标签中，<a>标签用于定义超链接，作用是从一个页面连接到另一个页面。
1.链接的语法格式
<a href="跳转目标" target=" 目标窗口的弹出方式"> 文本或图像</a>
两种属性作用
href 用于指定链接目标的url地址，(必须属性)当为标签应用href属性时，它就具有了超链接的功能。
target 用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。
2.链接分类：
1.外部链接，例如:<a href="http://www.baidu.com">百度</a>
2.内部链接:网站内部页面之间的相互链接，直接链接内部页面名称即可，例如<a href="index.html">首页</a>
3.空链接：如果当时没有确定的链接目标时，<a href="#">首页</a>
4.下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。
5.网页元素链接：在网页中的各种网页元素，如文本，图像，表格，音频，视频等都可以添加超链接。

<!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>
    <h4>1.外部链接</h4>
    <a href="http://www.qq.com" target="_self">腾讯</a>
    <a href="http://www.itcast.cn" target="_blank">传智播客</a>
    <h4>2.内部链接：网站内部页面之间的相互链接</h4>
    <a href="app.html">公司简介</a>
    <h4>3.空链接：#</h4>
    <a href="#">公司地址</a>
    <h4>4.下载链接：地址链接是文件 .exe或者是zip等压缩包形式</h4>
    <a href="img.rar">下载文件</a>
    <h4>5.网页元素的链接</h4>
    <a href="http://www.baidu.com"><img src="img.jpg"/></a>
    //直接点图片可打开网页
</body>
</html>

在这里插入图片描述
6.锚点链接：点我们点击链接，可以快速定位到页面中的某个位置。
(1)在链接文本的href属性中，设置属性值为#名字的形式，如：<a href="#two">第二集</a>
(2)找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id="two">第二集介绍</h3>

4.9注释符和特殊字符

HTML中的注释以"<!- -“开头，以”- ->"结束。

<!--注释语句-->    快捷键：ctrl+/

特殊字符(只需重点记住这三个)

    空格符    &nbsp;
<   小于号    &lt;
>   大于号    &gt;

FG.

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
2
评论
图像路径

4.7图像路径(重点)路径可以分为：相对路径和绝对路径.1.相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。简单来说，图片相对于HTML页面的位置.相对路径符号说明同一级路径图像文件位于HTML同一级如: <img src="baidu.gif"/>下一级路径 / 图像文件位于HTML文件下一级如:<img src="images/baidu.gif"/>上一级路径 …/ 图像文件位于HTML上一级如:<img src="../bai
复制链接

扫一扫