html--图像与链接

html图像、绝对路径和相对路径

html图像

<img>标签可以在网页上插入一张图片，它是独立使用的标签，通过“src”属性定义图片的地址，通过“alt”属性定义图片加载失败时显示的文字，以及对搜索引擎和盲人读屏软件的支持。

<img src="images/pic.jpg" alt="产品图片" />

绝对路径和相对路径

像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。

  • 绝对地址：相对于磁盘的位置去定位文件的地址
  • 相对地址：相对于引用文件本身去定位被引用的文件地址

绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。相对路径的定义技巧：

  • “ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。

  • “ ../ ” 表示当前文件所在目录下的上一级目录，比如：“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。

html链接

html链接

<a>标签可以在网页上定义一个链接地址，通过src属性定义跳转的地址，通过title属性定义鼠标悬停时弹出的提示文字框。

<a href="#"></a> <!--  # 表示链接到页面顶部   -->
<a href="http://www.itcast.cn/" title="跳转的传智播客网站">传智播客</a>
<a href="2.html">测试页面2</a>

定义页面内滚动跳转

页面内定义了“id”或者“name”的元素，可以通过a标签链接到它的页面滚动位置，前提是页面要足够高，有滚动条，且元素不能在页面顶部，否则页面不会滚动。

<a href="#mao1">标题一</a>
......
......
<h3 id="mao1">跳转到的标题</h3>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>链接</title>
</head>
<body>
    <img src="../images/resume.jpg" alt="水果图">
    <br />
    <!-- 点击文字跳转 -->
    <a href="https://i.cnblogs.com/EditArticles.aspx?catid=1575385" title="跳转到博客园">博客园</a>
    <br />
    <!-- 点击图片跳转-->
    <a href="https://i.cnblogs.com/EditArticles.aspx?catid=1575385"><img src="../images/resume.jpg" alt="水果图"></a>
    <br />
    <!-- 跳转到新的网页-->
    <a href="https://i.cnblogs.com/EditArticles.aspx?catid=1575385" title="跳转到新的网页" target="_blank">博客园1</a>
    <br />
    <br />
    <br />
    <!-- 跳转到顶部-->
    <a href="#">嘻嘻</a>
    <!-- 不跳转-->
    <br />
    <a href="javascript:;">哈哈</a>
    <br />
    <br />

    <!-- 页内跳转-->
    <a href="#biaotiyi">标题一</a>
    <a href="#biaotier">标题二</a>
    <a href="#biaotisan">标题三</a>
    <a href="#biaotisi">标题四</a>

    <h1 id="biaotiyi">标题一</h1>
    <a href="#biaotiyi">标题一</a>
    <a href="#biaotier">标题二</a>
    <a href="#biaotisan">标题三</a>
    <a href="#biaotisi">标题四</a>
    <p>美丽</p>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <h1 id="biaotier">标题二</h1>
    <a href="#biaotiyi">标题一</a>
    <a href="#biaotier">标题二</a>
    <a href="#biaotisan">标题三</a>
    <a href="#biaotisi">标题四</a>
    <p>漂亮</p>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <h1 id="biaotisan">标题三</h1>
    <a href="#biaotiyi">标题一</a>
    <a href="#biaotier">标题二</a>
    <a href="#biaotisan">标题三</a>
    <a href="#biaotisi">标题四</a>
    <p>温柔</p>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <h1 id="biaotisi">标题四</h1>
    <a href="#biaotiyi">标题一</a>
    <a href="#biaotier">标题二</a>
    <a href="#biaotisan">标题三</a>
    <a href="#biaotisi">标题四</a>
    <p>贤惠</p>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>

 

posted on 2019-10-29 21:53  cherry_ning  阅读(217)  评论(0)    收藏  举报

导航