【代码笔记】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>
复制代码

 

参考资料：《菜鸟教程》

posted @ 2018-08-15 09:27  花儿迎风笑  阅读(467)  评论(0)  编辑  收藏  举报