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

  • 相关阅读:
    C winpcap 网络抓包 并获取IP TCP 协议的相关信息
    python基础
    k8s部署测试实例
    node节点的部署
    k8s集群之master节点部署
    k8s集群之Docker安装镜像加速器配置与k8s容器网络
    k8s集群部署之环境介绍与etcd数据库集群部署
    docker存储管理
    docker 镜像仓库的安装与使用
    docker 镜像管理
  • 原文地址:https://www.cnblogs.com/huanying2000/p/6170512.html
Copyright © 2011-2022 走看看