html图像

2022-05-17 08:19:11 浏览数 (2)

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>

锚点链接,就是点击某一个超链接,它就会跳到当前页面的某一部分。如下图:

只要我们点击“推荐音乐”、“推荐电影”和“推荐文章”这三个超链接,滚动条就会滚动到相应的版块。

0 人点赞