超链接与图片

超链接 a 元素

超链接就是生活中常说的链接，它记录数据的所在的位置。超链接的值是一个 URL（Uniform Resource Locator，统一资源定位器），URL 可以表示任何资源的地址，比如网页、文件、邮箱、电话号码等。

在 HTML 中，使用 a 元素来标记一个超链接。

元素	类别	语义	属性	备注
`a`	内联	标记一个超链接	`href, title, target`

a 元素的属性：

属性	作用	值类型	默认值
`href`	设置超链接的地址	URL
`title`	设置提示	字符串
`target`	设置链接打开的位置	`_self`,`_blank`,`_parent`,`_top`	`_self`

例：

<a href="https://www.bilibili.com/">哔哩哔哩</a>
<a href="mailto:2830289202@qq.com">发送邮件</a>
<a href="tel:10086">移动客服</a>

title 属性

在 a 元素中，常常会使用 title 属性来为超链接设置提示，title 属性是一个全局属性，任何元素都可以设置。比如：

<p title="这段文字的中心思想是....." >一段文本</p>
<a href="https://www.douban.com" title="书籍电影点评网站" >豆瓣</p>

尝试把鼠标移动元素上，浏览器会根据 title 属性给出提示。

target 属性

target 属性用来设置资源加载的位置，比如当前页面，或者新的标签页。它有四个基本属性值：

_self：当前网站加载（默认）
_blank：新打开一个标签页加载
_parent：在父级页面加载
_top：在顶级标签页加载

页面之间可以互相嵌套，在本节最后的【内联框架】部分，我会介绍如何使用 _parent 与 _top 在嵌套页面中设置资源加载的位置。

认识 URL 与路径

URL（统一资源定位器；uniform resource locator），用来指定数据在网络上的地址，最初只是用来指定网址的，但是随着 web 技术发展，URL 被用来指定各种资源类型的地址，比如文件，邮箱，音视频等等。

URL

网页上常用的 URL 大致由以下部分组成（实际上更多）：

协议
主机
端口
路径

分析哔哩哔哩的网站链接：

80 端口是网站协议的默认端口，一般情况下，浏览器会隐藏 80 端口的显示来简化地址。

绝对地址

绝对地址表示一个完整的 URL，比如一个完整的网址，就是一个绝对地址。

双击打开一个本地的 HTML 文件，在浏览器的地址栏上，就显示了文件在本地环境的 URL：

其中，file:/// 就是文件管理系统的协议，C:/document/test/index.html 就是该文件的路径，路径一般使用 / 来分割。

【尝试使用超链接跳转到另一个文件。】

相对地址

相对地址能以较少字符表示一个 URL，它必须以另外一个 URL 作为参考来表示。相对地址有几个操作符如下：

操作符	参考路径	备注
`.`	当前文件所在路径	可省略
`..`	当前文件的上一级路径
`/`	当前协议的根路径

【相对地址演示】比如我们当前的文件夹状态如下：

html
    index.html
    app.html
out.html

在 index.html 中，可以使用 ./app.html 和 ../out.html 来指定其他两个文件。

在 out.html 中，可以使用 ./html/index.html 和 ./html/app.html 来指定其他两个文件。

备注：根路径是指当前协议解析的根路径，和计算机硬盘的根路径没有直接关系。

锚点

锚点指的是 URL 的片段，片段用于指定一个资源某个位置，片段在 URL 的最后部分。使用 # 号和路径部分隔开。

在 HTML 中，给元素使用 id 属性时，会自动生成一个锚点，访问这个锚点，页面会被定位到该元素的位置。

【锚点演示】

图片

HTML 中载入一张图片使用 img 元素：

元素	类别	语义	属性	备注
`img`	内联	标记一张图片	`src,alt`	空元素

a 元素的属性：

属性	作用	值类型
`src`	设置图片的地址	URL
`alt`	设置图片无法正常显示的提示语

例：

<img src="./img.png" alt="图片无法加载时显示的文字" />

内联框架

可以使用 iframe 元素把另一个页面引入到当前页面当中。

元素	类别	语义	属性	备注
`iframe`	内联	引入另一个页面	`src,width,height,name`

iframe 元素的属性：

属性	作用	值类型
`src`	设置引入的页面	URL
`width`	设置 `iframe` 的宽度	数字
`height`	设置 `iframe` 的高度	数字
`name`	设置 `iframe` 的名字，可以配合 `a` 链接的 `target` 属性指定载入页面的元素。

示例：

新建 one.html 和 tow.html 页面，然后编写以下代码，会发现在 index.html 中可以引入这两个页面，并且通过超链接设置具体引入哪一个页面。

<a href="./one.html" target="ifr">one.html</a>
<a href="./tow.html" target="ifr">tow.html</a>

<iframe src="./one.html" name="ifr" width="500" height="300"></iframe>

当 iframe 内部链接的 target 属性设置成 _parent 时，它会在把新页面加载到父级页面中。如果 target 属性设置为 _top 那么会加载到顶级页面当中。

综合练习

编写一个三个页面分别是 主页、社交页、我的信息页，它们都有相同的导航栏，其余内容随意补充，要求可以通过导航栏在三个页面中互相跳转。