在代码插入图像的位置

在代码插入图像的位置将对如何显示图像产生影响。以下分别是在代码插入图像的三种位置由此也会产生不同效果。

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div>TODO write content</div>
        <img src="images/bird.gif" alt="Bird" width="100" height="100" />
        <p>第一种，在段落前，段落在图像之后另起一行开始显示</p>
        <hr />
        <p><img src="images/bird.gif" alt="Bird" width="100" height="100" />
        第二种，在段落起始处，段落文本的第一行将于图像底部对齐</p>
        <hr />
        <p>第三种，在段落之中 <img src="images/bird.gif" 
        alt="Bird" width="100" height="100" />图像将位于它所在段落文字之中</p>
    </body>
</html>

　　

posted @ 2018-07-21 17:24  梦人亭  阅读(144)  评论(0)  编辑  收藏  举报