HTML5学习干货分享之图像和超链接-CSDN博客

本文链接：https://blog.csdn.net/Wjunnn/article/details/142176296

今天的笔记部分是图像的添加和超链接。

图像的格式

图像是美化网页最常用的元素之一。常用的网页图像格式有GIF、PNG、JPG

GIF

优点	不足
支持动画	只能处理256种颜色
图像质量几乎无损

常用于Logo、小图标及其他色彩相对单一的图像

PNG

优点	不足
（保存格式为PNG-8）相较GIF体积更小	不支持动画
支持alpha透明（全透、半透、全不透）	处理PNG-24的透明显示灰色
颜色过渡更平滑

通常，图片保存为PNG-8会在同等质量下获得比GIF更小的体积，而半透的图片只能使用PNG-24。

JPG

优点	不足
所显示的颜色比上面两种格式多	是有损压缩的图像格式

JPG是特别为位图图像（照片）设计的文件格式，网页制作过程中类似于照片的图像，比如横幅广告（banner）、商品图片、较大的插图等都可以保存为JPG格式。

图像标签

在HTML中，用<img>标签在网页中添加图像，图像以嵌入的方式添加到网页中。

<img scr="图像文件名" alt="替代文字" title="鼠标悬停提示文字" 
width="图像宽度" height="图像高度" border="边框宽度" hspace="水平空白" vspace="垂直空白" align="环绕方式|对齐方式">

图像文件名

图像文件导入一般有两种途径，分别是本地导入和网络URL导入。本地导入有分绝对路径导入和相对路径导入。
本地导入中的绝对路径我理解为是直接复制图片文件在当前PC端的位置，且相隔的斜杠为"\"。
注实际编写中一般不会运用绝对路径，因为耦合度太高，不利于后期项目维护。

本地导入中的相对路径指引用文件的网页所在的位置为参考基础而建立的目录路径。

当图像文件与HTML文件位于同一文件夹，只需要输入图像文件名。<img src="同级目录.jpg>

-当图像文件在HTML文件的上级目录，则要看是图像文件的上几级。比如上一级就在文件名前加"../"，上两级就是"../../",以此类推。
相对路径上级目录举例

当图像文件在HTML文件的下级目录，输入文件夹名和文件名，之间用"/"隔开。

替代文字

指图片无法显示时出现的文字。

<img src="暹罗厘普.jpg" alt="图像显示失败"

网页效果为：
替代文字举例

鼠标悬停提示文字

这个就是最常见的，如图：（截图的时候鼠标不见了）
鼠标悬停提示文字举例

图像宽高

默认单位是像素（px），也可以是百分比。百分比便是显示图像大小为浏览器窗口大小的百分比。

边框宽度

单位为像素(px)，主要作用是美观图像，边框默认黑色。当图片作为超链接使用时，图像边框的颜色和文字超链接的颜色一致，默认为深蓝色。边框宽度举例

留白

即图像相对页面在水平位置或垂直位置的留白。

<img src="暹罗厘普.jpg" alt="图像显示失败" title="暹罗厘普"  width="600" height="300" hspace="500"  vspace="500">

网页显示效果：
留白举例

对齐方式|对齐方式

指定指定图像的对齐方式，设定图像在水平（环绕方式）或垂直方向（对齐方式）的位置，包括left（图像居左，文本在图像的右边）、right（图像居右，文本在图像的左边），top（文本与图像在顶部对齐）、middle（文本与图像在中央对齐）或 bottom（文本与图像在底部对齐）

设置网页背景图像

在网页中可以利用图像作为背景，就像在照相时选取背景一样。但是要注意不要让背景图像影响网页内容的显示，因为背景图像只是起到渲染网页的作用。此外，背景图片最好不要设置边框这样有利于生成无缝背景。
背景属性将背景设置为图像。属性值为图片的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制，格式为<body background="背景图像路径">
注意

背景图像是否增加页面的加载时间，背景图像文件大小不应超过10KB；
背景图像是否与页面中其他图像搭配良好；
背景图像是否与页面的文字颜色搭配良好。

超链接

超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。
超链接是一个网站的精髓，超链接在本质上属于网页的一部分，通过超链接将各个网页链接在一起后，才能真正构成一个网站。
超链接除了可链接文本外，也可以链接各种媒体，如声音、图像和动画等，通过它们可以将网站建设成一个丰富多彩的多媒体世界。当网页中包含超链接时，其外观为彩色（一般为蓝色）且带下划线的文字或图像。单击这些文本或图像，可跳转到相应位置。鼠标指针指向超链接时，将变成手形指针图案。

超链接的分类

根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接、电子邮件超链接等。
根据超链接单击对象的不同，超链接可分为文字超链接、图像超链接和图像映射等。

路径

创建超级链接时必须了解链接与被链接对象的路径。在一个网站中，路径通常有3种表示方式：绝对路径、根目录相对路径和文档目录相对路径。
（1）绝对路径。绝对路径是包括通信协议名、服务器名、路径及文件名的完全路径。
如连接清华大学首页，绝对路径是 http://www.tsinghua.edu.cn/publish/thu2018/index.html。
如果站点之外的文档在本地计算机上，比如连接D盘 book 目录下 default. html 文件，那么它的路径就是 file:///D:/book/default. html，这种完整地描述文件位置的路径也是绝对路径。
（2）根目录相对路径。根目录相对路径的根是指本地站点文件夹（根目录），以“/”开头，路径是从当前站点的根目录开始计算。
比如一个网页链接或引用站点根目录下 images目录中的一个图像文件 a.gif，用根相对路径表示就是/images/a. gif。
（3）文档目录相对路径。文档目录相对路径是指当前文档所在的文件夹，也就是以当前文档所在的文件夹为基础开始寻找路径。文档目录相对路径适合于创建网站内部链接。它以当前文件所在的路径为起点，进行相对文件的查找。

创建超链接

可以通过<a＞标签在 HTML 中创建超链接。<a＞标签的使用有以下两种士
① 通过使用 href 属性创建指向另一个文档的超链接。
② 通过使用 name 属性创建文档内的书签。
创建超链接的语法格式为

<a href="url" title="指向链接时显示的文字" target="窗口名称">热点文本</a>

href 属性定义了这个链接所指的目标地址，也就是路径。
-如果要创建一个不链接到其他位置的空超链接，可用符号“＃”代替URL。
target 属性设定链接被单击后打开窗口的方式，有以下4种方式。

① _blank：在新窗口中打开被链接的文档。
②_self：默认。在相同的框架中打开被链接的文档。
③ _parent：在父框架集中打开被链接的文档。
④_top：在整个窗口中打开被链接的文档。
超链接语法举例

页面超链接

如果在当前页面与其他相关页面之间建立超链接，根据目标文件与当前文件的目录系，有4种方法。注意，应该尽量采用相对路径。
（1）链接到同一目录内的网页文件。其中，“目标文件名”是链接所指向的文件。

<a href="目标文件名.html">热点文本</a>

（2）链接到下一级目录中的网页文件。

<a href="子目录/目标文件名.html">热点文本</a>

（3）链接到上一级目录中的网页文件。其中“…/”表示退到上一级目录中。

<a href="../目标文件名.html">热点文本</a>

（4）链接到同级目录中的网页文件。表示先退到上一级目录中，然后再进入目标文件所在的目录。

<a href="../子目录名/目标文件名.html">热点文本</a>

锚点超链接（书签链接）

HTML 中的链接的专业叫法是“锚点”。书签链接也叫锚点链接，常常用于内容庞大烦琐的网页，通过单击书签链接能指向页面里的特定段落，便于浏览者快速查看网页内容。书签类似于我们阅读书籍时的目录页码或章回提示，其功能类似于固定船的锚。
书签就是用<a>标签对网页元素作的一个记号，锚点与链接可以在同一个网页，也可以在不同的页面。

<a name="记号名（锚点名称）">锚（显示在页面的文本）</a>

其中，记号名或称锚点名称可以是数字或英文字母，也可以是两者的混合。在同一页面中可以有多个锚点，但名称不能相同。使用id属性替代 name 属性，锚点同样有效。
（1）页面内书签的链接
要在当前页面内实现书签链接，需要定义超链接标签和书签标签两个标签。即单击“热点文本”，将跳转到“记号名”开始的网页元素。

<a href="#记号名(锚点名称）">热点文本</a>

(2)其他页面书签的链接
书签链接还可以在不同页面之间进行链接。当单击书签链接标题，页面会根据链接中的href属性所指定的地址，将网页跳转到目标地址中书签名称所表示的内容。要在其他页面内实现书签标签。即单击“热点文本”将跳转到目标页面“记号名”开始的网页元素。

<a href="目标文件名.html #记号名">热点文本</a>

注意如果将链接写成href="#"或者href="",这样的链接通常称为空链接，有回到页面顶部的作用。

后面会一直学习补充，有错欢迎指出，一起学习。