HTML5 图像和链接

Posted 2020-06-17

html5 图像和链接

URL

目录结构

目录就是 Web 战斗中文件夹的名称。目录可能有很多个，每个目录包含站点的不同部分。Web 站点的主目录，称为 Web 站点的根目录。位于根目录下的其他文件夹，称为子目录。

URL

URL(Uniform Resource Locator)：统一资源定位器，用来标识网络中的任何资源。文本、图片、音视频文件、段落或其他超文本。路径在 Web 页面上主要有三种形式：

• 绝对路径
• 相对路径
• 根相对路径

完整的 URL 组成：协议://主机名/目录路径/文件名

绝对路径

指的是文件从最高级目录下开始的完整路径，不管当前路径是什么，使用绝对路径总是能找到要链接的文件。

相对路径

指的是文件的位置是相对于当前文件的位置。它包括目录名，或指向一个可以从当前目录出发找到该文件的路径。

图像

图像格式

• JPEG(图形图像联合专家组，Joint Photopraphic Experts Group)

采用有损压缩算法，压缩比比较大

• GIF(图形接口格式，Graphics Interface Format)

使用 256 色的方法来压缩图像，色彩会有较大的失真

主要用于线条为主的图像，或者图像面幅很小时，另外 GIF 支持动画和透明图像

• PNG(可移植网络图像，Portable Network Graphic)

采用无损压缩，有8位、24位、32位三种形式

支持透明色(PNG 24 位不支持)，但不支持动画

显示颜色可达1670万种

图像元素 <img>

使用 <img> 元素可以将图像添加到页面。<img> 是一个空标记，必须属性是 src，常用属性是 width、heidht。

<img width="100" src="image/rose.jpg" />

连接

连接元素 <a>

使用 <a> 元素创建一个超级链接，语法如下：

<a href="" target="">文本</a>

常用属性：

href：链接 URL

target：目标

name：锚点名称

连接的表现形式

目标文档为下载资源。

<a href="file.zip">下载</a>

电子邮件链接。

<a href="mailto:[email protected]">联系我们</a>

返回页面顶部的空链接。

<a href="#">...</a>

链接到 javascript。

<a href="javascript:...">JS 功能</a>

锚点

锚点是文档中某行的一个记号。

定义锚点：

<a name="anchorname1">锚点一</a>

链接到锚点：

如果文本/图像与锚点存在同一页面。

<a href="#anchorname1">...</a>

如果文本/图形与锚点存在不同页面。

<a href="页面URL#anchorname1">...</a>