6、图像
(一)、图像标签
在HTML中,图像标签为<img>。<img>是一个自闭合标签。img标签只需要掌握3个属性就可以了:src、alt、title。
语法:
<img src="图片地址" alt="图片描述(给搜索引擎看)" title="图片描述(给用户看)">
表1 img标签常用属性
属性 说明
src 图像的文件地址
alt 图片显示不出来时的提示文字
title 鼠标移到图片上的提示文字
src和alt这两个属性是img标签必不可少的属性。其他属性我们一般用不到,所以只需要掌握这两个属性即可,大家要是在别的书籍上看到<img>还有别的属性,你不用去记忆它们。
(二)、相对路径和绝对路径
相对路径,指的是同一个网站下,不同文件之间的的位置定位。引用的文件位置是相对当前文件的位置而言,从而得到相对路径。
绝对路径,指的是文件的完整路径。
详细复习内容,请查看相对路径和绝对路径。
(三)、图片格式
虽然图片格式这一节知识比较多,大部分我们只需要了解就可以了,我们只需要掌握.jpg、.png和.gif三种图片格式的区别即可。
1、JPG可以很好处理大面积色调的图像,如相片、网页一般的图片。
2、PNG格式图片体积小,而且无损压缩,能保证网页的打开速度。最重要的是PNG格式图片支持透明信息。PNG格式图片可以称为“网页设计专用格式”。
3、GIF格式图片图像效果很差,但是可以制作动画。
7、链接
超链接使用a标签,语法如下:
<a href="链接地址" target="目标窗口的打开方式">
表1 <a>标签target属性
target属性值 说明
_self 默认方式,即在当前窗口打开链接
_blank 在一个全新的空白窗口中打开链接
_top 在顶层框架中打开链接
_parent 在当前框架的上一层里打开链接
我们只需要掌握“_self”和“_blank”这两个属性值就可以了,其他两个用不到。
超链接根据链接对象的不同分为:
(1)外部链接
(2)内部链接:
①内部页面链接;
②锚点链接;
举例:
代码语言:javascript复制
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>锚点链接</title>
</head>
<body>
<div>
<a href="#music">推荐音乐</a><br />
<a href="#movie">推荐电影</a><br />
<a href="#article">推荐文章</a><br />
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="music">
<h3>推荐音乐</h3>
<ul>
<li>林俊杰-被风吹过的下图</li>
<li>曲婉婷-在我的歌声里</li>
<li>许嵩-灰色头像</li>
</ul>
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="movie">
<h3>推荐电影</h3>
<ul>
<li>蜘蛛侠系列</li>
<li>钢铁侠系统</li>
<li>复仇者联盟</li>
</ul>
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="article">
<h3>推荐文章</h3>
<ul>
<li>朱自清-荷塘月色</li>
<li>余光中-乡愁</li>
<li>鲁迅-阿Q正传</li>
</ul>
</div>
</body>
</html>
锚点链接,就是点击某一个超链接,它就会跳到当前页面的某一部分。如下图:
只要我们点击“推荐音乐”、“推荐电影”和“推荐文章”这三个超链接,滚动条就会滚动到相应的版块。