在Firefox和移动设备上查看HTML网站时出现问题

最近，我通过从http://www.w3schools.com/和http://www.tizag.com/htmlT/中学习了第一次创建了自己的html网站，但是我无法在Firefox和移动设备中查看我的网页。我真的不知道我哪里错了。请建议我如何在这里发布我的查询，我是否需要在这里打印我的html文本？恐怕会长达8页。在Firefox和移动设备上查看HTML网站时出现问题

非常感谢提前。

里兹

这是我的Banner.html代码在Firefox，选取框创建故障，我想有很多我的代码错误，请相应咨询我，谢谢。

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
body { 
background-color: #696969; 
margin: 0px; 
padding: 0px; 
} 
#banner { 
width: 75%; 
height: 170px; 
display: block; 
float: right; 
} 
h1 { 
position: absolute; 
color: #ffffff; 
left: 20px; 
top: 0px; 
letter-spacing: 5px; 
font-size: 50px; 
float:left; 
} 
h3 { 
position: absolute; 
color: #ffffff; 
text-shadow: 0 0 10px #ffd700; 
left: 20px; 
top: 78px; 
letter-spacing: 2.4px; 
float: left; 
} 
span {color: #ffd700;} 
span.g {color:#ffffff; text-shadow: 0 0 10px #ffd700;} 
</style> 
</head> 
<body> 
<marquee loop="true" direction="up" scrollamount="2"><img id="banner" src="handshake1.jpg" alt="BannerImage"><img id="banner" src="web.jpg" alt="BannerImage"><img id="banner" src="art.jpg" alt="BannerImage"><img id="banner" src="flower.jpg" alt="BannerImage" style="height:230px"><img id="banner" src="apple.jpg" alt="BannerImage" style="height:230px"><img id="banner" src="green.jpg" alt="Banner Image"><img id="banner" src="ocean.jpg" alt="BannerImage" style="height:250px"></marquee> 
<h1><span>Stack</span><span class="g">Overflow</span></h1> 
<h3>Online&nbsp;&#38;&nbsp;Communications</h3> 
</body> 
</html>

来源

2015-01-05 Rizin

我认为把一些代码从一个网页可能是足以让对方帮你 – Monah

我做哈迪，感谢 – Rizin

典型的移动设备优化网站包含类似如下：

<meta name="viewport" content="width=device-width, initial-scale=1">

对于设定的初始或最大比例的网页，这意味着宽度属性实际上转化为最小视口宽度。例如，如果您的布局需要至少500个像素的宽度，那么您可以使用以下标记。当屏幕大于500个像素宽，浏览器将扩大视（而不是放大），以适应屏幕：

<meta name="viewport" content="width=500, initial-scale=1"> 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd"> 
<html lang="en-US"> 
<head> 
<title>Stack Overflow Forums</title> 
    <meta name="google-site-verification" content="y4IbEwKh_krYR4qU0TDeK_R28IJCVCApOIuAm1w1n9c"> 
    <meta name="viewport" content ="width=device-width,initial-scale=1,user-scalable=yes"> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1"> 
    <meta content="Learning HTML, Website Tutorials" name="Keywords"> 
    <meta content="Website Tutorials" name="keywords"> 
    <meta content="HTML Training, etc.." name="description"> 
    <meta http-equiv="refresh" content="1800"> 
</head> 
<frameset rows="30%,70%"> 
<frame name="banner" src="banner.html" noresize scrolling="no"> 
<frame name="home" src="home.html"> 
</frameset> 
</html>

来源

2015-01-05 22:10:43

乔恩，请看看我的index.html，一旦我的错误被整理出来，我会插入上面的标签，谢谢。 – Rizin

嗨，你应该考虑通过http://validator.w3.org/这样的验证器来运行你的代码，它会帮助你纠正你的代码。我在回答中放置了一个编辑，供您查看。 –

感谢乔恩，我认真考虑完全按照你和李的建议去除帧。我测试了它，发现它很酷，现在我编辑了我的问题并粘贴了banner.html代码，请相应地告知我。 – Rizin

您应该在页面适当地标记起来，使用body标签和从越来越远框架集。

如果您的手机浏览器和其他浏览器都保持严格的HTML标准，您将获得更好的输出效果。

例如，一个基本的HTML页面布局：

<html> 
<head> 
    <title>Stackoverflow Forums</title> 
</head> 
<body> 
    <div id="banner"> 
     // Your banner HTML 
    </div> 
    <div id="content"> 
     // Your main content HTML 
    </div> 
</body> 
</html>

，您仍然可以使用所有的，你有你的head标签里面的东西，但这些都将创造divs，可以被看作是“块”，帮助单独的代码部分。

这个网页是相当不错采取通读 - http://www.w3schools.com/html/html_intro.asp

来源

2015-01-06 10:18:05 Lee

什么是框架集以外的替代HTML格式，我对网站来说是新手，我宁愿从HTML开始一个接一个地完善，让我添加body标签并看看，谢谢。 – Rizin

李，当我添加了（以下标记）（以上标记），页面打开时为空白，但是当我删除身体标记时，页面开始正常工作。 – Rizin

你需要删除你的''''标签，并复制并粘贴home.html中的所有内容，并将其放入主索引文件中。这将需要一些大量的编辑，但是当它正确完成时会更好。原因是，这些框架是旧的，并开始不受支持。 – Lee

在Firefox和移动设备上查看HTML网站时出现问题

回答

相关问题