png文件未显示在HTML5页面上

时间:2016-10-15 19:23:25

标签: html html5

我创建了一个小网页。我将png文件放在与index.html相同的位置。但它没有显示出来。

这是我的HTML代码:

<!DOCTYPE html>
<html> 

  <head>
    <title>Welcome to Learners lingo!! </title>
    <meta charset=“UTF-8”/>
    <link rel=“stylesheet” href=‘styles.css’ type=“text/css” >
    <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>


  </head>
  <body bgcolor="#e6ecff">
    <header class=“mainHeader”> 
        <img src=‘logo.png’ alt=“logo” width="42" height="42">


        <nav><ul> 
            <li><a href=“#”>Home</a></li>
            <li><a href=“#”>About</a></li>
            <li><a href=“#”>Course material</a></li>
            <li><a href=“#”>Nasty Things</a></li>
            <li><a href=“#”>Contact</a></li>
        </ul></nav>
    </header>

    <div class=“mainContent”>
        <div class=“content”>
            <article class=“top content”>
                <header> 
                    <h2><a href=“#” title=“First Post”>First Post</a></h2>
                </header> 
                <footer>
                    <p> class=“post-info”>This post is written by Me !</p> 
                </footer> 
                <content> 
                    <p> Just this is one of the main content </p>
                </content>
            </article>
        </div>
    </div>

    <aside class=“top-side-bar”>
        <article> 
            <h2> Top side bar</h2>
            <p> This is just a side bar </p>
        </article> 
    </aside> 

    <aside class=“middle-side-bar”>
        <article> 
            <h2> Middle side bar</h2>
            <p> This is just a side bar </p>
        </article> 
    </aside> 

    <aside class=“Bottom-side-bar”>
        <article> 
            <h2> Bottom side bar</h2>
            <p> This is just a side bar </p>
        </article> 
    </aside> 

    <footer class=“Main Footer”>
        <p> Copyright &copy; <a href=“http://www.learnerslingoo.net”> Learners Lingoo </a> </p>
    </footer> 
  </body>

</html>

有人可以帮我理解为什么没有显示图像。我一直试图解决它几个小时,但不知道我在做什么错。文件名是正确的。一个简单的logo.png

enter image description here

2 个答案:

答案 0 :(得分:4)

您应该使用常规单引号(')或双引号("),而不是

<img src="logo.png" alt="logo" width="42" height="42">
<!--Here-^--------^-----^----^ -->

答案 1 :(得分:2)

更改引号
src=‘logo.png’

src="logo.png"