zoukankan      html  css  js  c++  java
  • 【代码笔记】Web-HTML-图像

    一,效果图。

     

     

    二,代码。

     

    复制代码
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>html 图像</title>
    </head>
    
    <body>
        <!--插入图像-->
        <p>
            An image:<img sr="smiley.gif" alt="smiley face" with="32" height="32">
        </p>
        <p>A moving image:<img src="hackanm.gif" alt="computer man" with="48" height="48">
        </p>
        <p>note that the syntax of inserting a moving image is no different from a non-moving image.
        </p>
        <!--从不同的位置插入图片-->
        <p>An image from another folder:</p>
        <img src="/images/chrome.gif" alt="Google chrome" width="33" height="32">
        <p>An image frome W3Schools:</p>
        <img src="http://www.w3cschool.cc/images/w3cschool.png" alt="W3CSchool.cc" width="336" height="69">
        <!--排列图片-->
        <h4>Image with default alignment(align="bottom"):</h4>
        <p>this is some text,<img src="smiley.gif" alt="smiley face" width="32" heigth="32">this is some text.</p>
        <h4>image with align="middle":</h4>
        <p>this is some text,<img src="smiley.gif" alt="smiley face" align="middle" with="32" height="32">this is some text</p>
        <h4>image with align="top":</h4>
        <p>this is some text.<img src="smiley.gif" alt="smiley face" align="top" width="32">this is some text.</p>
        <p><b>Note:</b> the align attribute is deprecated in html4,and is not supported html5.Use CSS instead.</p>
        <!--浮动头像-->
        <p>
            <img src="smiley.gif" alt="simly face" style="float:left" width="32" height="32"> A paragraph with an image. The image will float to the left of this text.
        </p>
        <p>
            <img src="simley.gif" alt="smiley face" style="float:right" width="32" height="32">A paragraph with an image. The image will float to the right of this text.
        </p>
        <p><b>Note:</b> Here we have used the CSS "float" property to align the image; as the align attribute is deprecated in HTML 4, and is not supported in HTML5.</p>
        <!--设置图像链接-->
        <p>创建图片链接:
            <a href="http://www.runoob.com/html/html-tutorial.html">
                <img src="smiley.gif" alt="HTML 教程" width="32" height="32"></a>
        </p>
        <p>无边框的图片链接:
            <a href="http://www.runoob.com/html/html-tutorial.html">
                <img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a>
        </p>
        <!--设置图像映射-->
        <p>点击太阳或其他行星,注意变化:</p>
        <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
        <map name="planetmap">
            <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
            <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
            <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
        </map>
    </body>
    
    </html>
    复制代码

     

    参考资料:《菜鸟教程》

  • 相关阅读:
    IIS6为应用程序池**提供服务的进程与 World Wide Web Publishing 服务通信时遇到致命错误
    C# WINFORM 强制让窗体获得焦点
    数据库性能优化详解
    sqlserver 2008 修改表结构不能保存
    SQL性能优化
    aspnet打印 设置(页脚 一些数据显示在打印页的最下面)
    图片转成byte数组
    在配置文件中定义初始值然后读取
    DOM编程
    html动态显示时间
  • 原文地址:https://www.cnblogs.com/yang-guang-girl/p/9479503.html
Copyright © 2011-2022 走看看