2017-09-05 47 views
0

我为HTML使用文本处理程序,并且无法在运行代码时显示图像。此外,我需要将图像保存为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:[email protected]">Theresa Colombo</a> 
</footer> 
</body> 
</html> 

回答

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:[email protected]">Theresa Colombo</a> 
 
    </footer> 
 
</body> 
 

 
</html>

相关问题