Question

我正在使用html的文本管理器，我无法在运行代码时显示图像。此外，我需要将图像保存为html文件，不能使用常规图像。有谁知道如何做到这一点？

<!DOCTYPE HTML> 
<html lang=en> 
<head>
<meta charset="utf-8" /> 
<meta name="viewport"content="width=device-width,user-scalable=yes"/> 
<style type="text/css">
html{margin:0 auto;max-width:45em}
body{font-family:'Vollkorn', georgia, serif;font-size:18px; padding: 0 .5em 1em .5em; }
h1{font-size:175%;padding:1.25em 0 .75em 0;margin:0;text-align:center;word-spacing:.25em;font-weight:400;}
p{font-size:100%;line-height:1.5em;font-weight:400}
a:link{color:#0D47A1;text-decoration:none}
img{width:100%;height:auto}
figure {margin:0;}
nav{font-size:105%;margin:1.5em 0;text-align:center;line-height:1.35em;word-spacing:1.4em;font-weight:400}
footer{font-size:120%;margin:1.5em 0;text-align:center;font-weight:400;letter-spacing:0.15em;}
</style>
<title>
Saturdays are for Football 
</title>
</head>
<body>
<header>
<div align="center">
<h1>Saturdays are for Football</h1>

<article>
<figure><img src="IMG_2901.jpg" width="864" height="575">
<figcaption></figcaption>
</figure>
<footer>
<a href="mailto:tac5412@psu.edu">Theresa Colombo</a>
</footer>
</body>
</html>

Answer 1

您的代码（标题，文章，div）中缺少很多结束标记。当我正确关闭所有这些并通过指向占位符图像的链接替换图像src属性时，它会正确显示：

<!DOCTYPE HTML>
<html lang=en>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,user-scalable=yes" />
  <style type="text/css">
    html {
      margin: 0 auto;
      max-width: 45em
    }
    
    body {
      font-family: 'Vollkorn', georgia, serif;
      font-size: 18px;
      padding: 0 .5em 1em .5em;
    }
    
    h1 {
      font-size: 175%;
      padding: 1.25em 0 .75em 0;
      margin: 0;
      text-align: center;
      word-spacing: .25em;
      font-weight: 400;
    }
    
    p {
      font-size: 100%;
      line-height: 1.5em;
      font-weight: 400
    }
    
    a:link {
      color: #0D47A1;
      text-decoration: none
    }
    
    img {
      width: 100%;
      height: auto
    }
    
    figure {
      margin: 0;
    }
    
    nav {
      font-size: 105%;
      margin: 1.5em 0;
      text-align: center;
      line-height: 1.35em;
      word-spacing: 1.4em;
      font-weight: 400
    }
    
    footer {
      font-size: 120%;
      margin: 1.5em 0;
      text-align: center;
      font-weight: 400;
      letter-spacing: 0.15em;
    }
  </style>
  <title>
    Saturdays are for Football
  </title>
</head>

<body>
  <header>
    <div align="center">
      <h1>Saturdays are for Football</h1>
    </div>
  </header>
  <article>
    <figure><img src="http://placehold.it/864x575/fb4" width="864" height="575">
      <figcaption></figcaption>
    </figure>
  </article>
  <footer>
    <a href="mailto:tac5412@psu.edu">Theresa Colombo</a>
  </footer>
</body>

</html>

我正在使用html的文本管理器，我无法显示图像。

1 个答案: