HTML基础学习（2）——超链接和使用图像

往期文章

HTML基础学习（1）——HTML基础标签

---

1. 超链接

点击超链接可以跳转到新的网页或当前网页某部分，HTML文档中的任何文字和图像都可以被设置为超链接。

超链接包括：外部链接、电子邮件链接、锚点链接、空链接、脚本链接。

1.1 路径概念（URL）

• 每个网页都有唯一的地址，称为统一资源定位符（url）,也就是网页的绝对路径。绝对路径是包括服务器规范在内的完全路径。
• 在网页中创建内部链接时候，一般会指定一个相对路径。

URL的写法上级目录：…/表示源文件所在目录的上一级目录，…/…/表示源文件所在目录的上两级目录，以此类推。

下级目录：引用下级目录的文件，直接写下级目录文件的路径即可。

同级目录：./表示文件当前所在的目录。在书写路径的时候，开头的./可以省略掉。

注意:
绝对路径的斜线“\”和相对路径的斜线“/”方向不同，书写的时候应该特别注意。

1.2 <a>标签

//语法
<a href="url"> 可以填充的文字在这里 </a>

<a>标签的常用属性见下表：

属性	值	描述
href	url	规定链接指向的网址，可以是任何有效文档的相对或绝对路径
rel	text	规定当前文档与被链接文档之间的关系
target	_blank _parent _self _top framename	规定在何处打开链接文档
type	MIME type	链接文档的MIME类型
download	filename	下载的超链接目标
hreflang	language_code	被链接文档的语言
media	media_query	规定被链接文档是为何种媒介/设备优化的

1.3 锚点

在同一个网页中创建指向该锚点的链接:

//语法
<a href="#锚点的名称">有用的提示</a>

在其他网页中创建指向该锚点的链接：

//语法
<a href="锚点所在网页的路径#锚点的名称">有用的提示</a>

1.3.1 锚点的使用

copy下来看效果

 <!-- 链接到同一网页中的锚点 -->
    <a href="#p6">书签：第6小节</a>
    <h3>第1小节</h3>
    <p>
        这般消融，持续了数分钟，突然三道黑光，笔直的自火山之底冲出，直接洞穿火山，而在那三道黑光之中，三道人影，则是缓缓的顺着漂浮而上。<br>
        林动面色凝重的望着那黑光之中的三道人影，看那番体形，正是霍元三人，只不过此时的三人，与之前相比，却是截然不同。<br>
        三人的眼瞳，此时深陷了不少，邪恶的黑气充斥着瞳孔之中，另外，在他们的脸庞以及裸露出来的皮肤上面，一道道犹如蜘蛛网般的黑色纹路蔓延开来，远远看去，为他们平添了许些诡异与阴森
    </p>
    <br>
    <h3>第2小节</h3>
    <p>
        这般消融，持续了数分钟，突然三道黑光，笔直的自火山之底冲出，直接洞穿火山，而在那三道黑光之中，三道人影，则是缓缓的顺着漂浮而上。<br>
        林动面色凝重的望着那黑光之中的三道人影，看那番体形，正是霍元三人，只不过此时的三人，与之前相比，却是截然不同。<br>
        三人的眼瞳，此时深陷了不少，邪恶的黑气充斥着瞳孔之中，另外，在他们的脸庞以及裸露出来的皮肤上面，一道道犹如蜘蛛网般的黑色纹路蔓延开来，远远看去，为他们平添了许些诡异与阴森
    </p>
    <br>
    <h3>第3小节