HTML 学习笔记(图像)

时间：2022-11-19 17:05:47

HTML 图像

图像标签（<img>）和源属性（Src）

在HTML中,图像由<img>标签定义。

<img>是空标签，意思是说，他只包含属性，并且没有闭合标签

要在页面上显示图像 你需要使用源属性(src) src是指"source"源属性指的是图片的URL地址。或者图片的文件路径。

替换文本属性（Alt）

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

例子

<img src="img/HBuilder.png" width="100px" height="100px" alt="没找到图片" />

src 指出图片的路径  width height 表示你想要图片显示的宽度和高度。 alt 表示显示图片错误时 显示给用户的提示信息。

下面是更多的例子

设置HTML页面的背景图片

<body background="img/HBuilder.png">

</body>

注意 如果页面很大但是图片很小 会默认平铺多张图片 直到铺满整个页面。

使用下面这个属性 可以避免这种情况

<body background="img/HBuilder.png" style="background-repeat: no-repeat; ">

</body>

图片的排列

<body>

    <h2>未设置对齐方式的图像</h2>

    <p>图像<img src="img/HBuilder.png"/>在文本中</p>

    <h2>已经设置对齐方式的图像</h2>

    <p>图像 <img src="img/HBuilder.png" align="bottom"> 在文本中</p>

    <p>图像 <img src="img/HBuilder.png" align="middle"> 在文本中</p>

    <p>图像 <img src="img/HBuilder.png" align="top"> 在文本中</p>

    <p>请注意，bottom 对齐方式是默认的对齐方式。</p>

</body>

浮动图片

<body>

        <p>图片浮动到左侧

            <img src="img/HBuilder.png" align="left" width="50" height="50" />

        </p>

        <br />

        <p>图片浮动到右侧

            <img src="img/HBuilder.png" align="right" width="50" height="50" />

        </p>

    </body>

关于浮动 后面还会降到 float这事布局中常用的属性，后面将会详细介绍。

点击图像 跳转到一个链接

<body>

    <a href="http://www.baidu.com">

        <img src="img/HBuilder.png" width="100" height="100" />

    </a>

</body>

上面就是html图像标签<img />的一些基本使用。

相关文章