欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

【代码笔记】Web-HTML-图像

程序员文章站 2022-10-27 20:36:38
一,效果图。 二,代码。 html 图像

An image:

一,效果图。

【代码笔记】Web-HTML-图像

 

【代码笔记】Web-HTML-图像

 

二,代码。

 

【代码笔记】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>
【代码笔记】Web-HTML-图像

 

参考资料:《菜鸟教程》