Question

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

非常感谢提前。

里兹

这是我的Banner.html代码，在Firefox中，marquee会出现故障，我猜我的代码中有很多错误，请相应地给我建议，谢谢。

<!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>

Answer 1

典型的移动设备优化网站包含以下内容：

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

对于设置初始或最大比例的页面，这意味着width属性实际上转换为最小视口宽度。例如，如果您的布局需要至少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>

Answer 2

您应该使用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>

你仍然可以使用头标记中的所有内容，但这些内容会创建divs，可以看作是＆＃39; block＆＃39;这有助于分开代码部分。

这个页面非常适合阅读 - http://www.w3schools.com/html/html_intro.asp

在Firefox和移动设备中查看HTML网站时遇到问题

2 个答案: