zoukankan      html  css  js  c++  java
  • HTML 学习笔记(图像)

    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 />的一些基本使用。

  • 相关阅读:
    你可见过一种基于状压的二进制筛法?
    dp
    tricks
    csp2020 游记
    洛谷P2982 [USACO10FEB]慢下来Slowing down
    NOIP 2018 大翻车记
    2019 ICPC 南京网络赛
    POJ2778 AC自动机 + 快速矩阵幂
    2019 CCPC网络赛
    2018ICPC 北京
  • 原文地址:https://www.cnblogs.com/huanying2000/p/6170512.html
Copyright © 2011-2022 走看看