html标签（图像标签和路径，以及超链接标签）-小白学习中

最新推荐文章于 2022-11-29 22:03:06 发布

小白学习中–.–

最新推荐文章于 2022-11-29 22:03:06 发布

阅读量473

点赞数 1

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

本文链接：https://blog.csdn.net/mryer/article/details/107354231

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

html-3

8.路径
在图像标签和超链接标签中，会经常使用路径来找到目标文件，所以先介绍一下路径。

相对路径
图片相对于html页面的位置
同一级路径：没有任何的符号，直接将文件名输入到其中就可以了。
例如：

<img src="1.jpg" />

下一级路径：/ 如果需要打开的文件在同一级文件夹中，则需要使用符号 / 来打开文件夹。
例如：

<img src="a/1.jpg" />

上一级路径：

需要的符号为：../

如果需要打开的文件在上一级文件夹中，则需要使用符号来打开文件夹。
例如：

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

绝对路径
指目录下的绝对位置。直接到达目标位置，通常是从盘符开始的路径。
例如：“C:\Users\18040\Desktop\假期学习1\图片/1.jpg”
或者完整的网络地址：
“http://pic112.huitu.com/res/20181206/706539_20181206203639275070_1.jpg”

9.图像标签

<img />

内部属性：

src 生成图像，引入路径。
alt 替换文本，当图像不能显示的时候，所显示的文本。
title 提示文本，鼠标放到图片上时所显示的文本。
width 设置图像的高度。
hight 设置图像的宽度。
border 设置图像的边框粗细。

例如（这里的路径用的都是网络地址）：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>一个例子</title>
</head>

<body>
    <img src="http://pic112.huitu.com/res/20181206/706539_20181206203639275070_1.jpg"/>
	<h4>alt:如果照片出不来，有说明</h4>
	<img src="http://pic112.huitu.com/res/20181206/706539_20181206203639275070_1.jpg" alt="美景"/>
	<h4>title:我有提示</h4>
	<img src="http://pic112.huitu.com/res/20181206/706539_20181206203639275070_1.jpg" alt="美景" title="真绿"/>
	<h4>width:设置宽度，height:设置高度</h4>
	<img src="http://pic112.huitu.com/res/20181206/706539_20181206203639275070_1.jpg" alt="美景" title="真绿" width="50" height="70"/>
	<h4>border:设置边框</h4>
	<img src="http://pic112.huitu.com/res/20181206/706539_20181206203639275070_1.jpg" alt="美景" title="真绿" width="50" height="70" border="2"/>
	
</body>
</html>

10.超链接标签

<a></a>

语法格式

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

href：用于指定链接目标的地址，当标签应用href属性时，它就具有了超链接的功能。
target：用于指定链接页面的打开方式，其中_self为默认值，是在当前页面中打开新的页面。_blank是在新窗口中打开方式。

链接分类

1.外部链接，例如：
<a href="http://www.baidu.com">百度</a>
2.内部链接，例如：
<a href="index.html">打开另一个html文件</a>
3.空链接：
<a href="#"></a>
4.下载链接：
如果href里面地址是一个文件或者压缩包，会下载这个文件。
5.网页元素链接
6.锚点链接：
我们点击链接，可以快速定位到页面中的某个位置。
在链接文本的href属性中，设置属性值为#名字的形式。如
<a href="#two">第二级</a>
找到目标位置标签，里面添加一个id属性=刚才的名字。如
<h3 id="two">第二级介绍</h3>

例如：

    <h2 id="one">开头</h2>
	<h4>外部链接</h4>
	<a href="http://www.qq.com" target="_self">腾讯</a>
	<br />
	当前窗口打开页面
	<br />
	<a href="http://www.qq.com" target="_blank">腾讯</a>
	<br />
	新建窗口打开
	<h4>内部链接</h4>
	<a href="01-HTML基本标签.html" target="_blank">01</a>
	<h4>空链接</h4>
	<a href="#">首页</a>
	<h4>下载链接</h4>
	<a href="C:\Users\18040\Desktop\杂\红警.zip">下载文件</a>
	<h4>网页元素的链接</h4>
	<a href="http://www.baidu.com"><img src="../图片/06-1.jpg" width="80" height="80"></a>
    <h4>锚点链接</h4>
    <a href="#one">开头</a>