我在一个文件中有多个html文件。
<html>
<body></body>
</html>
<html>
<body></body>
</html>
<html>
<body></body>
</html>
结果就是我弄乱了一个html文件。
如何解决此问题而不从其余部分删除<html> <body>标记？
我正在使用python生成html文件。
如果我使用self.response.out.write(function(query))我会得到一个不错的html页面。
如果我再次使用它self.response.out.write(function(query2))那么页面就会失真。
我们可以使用iframe更正此问题吗？有人可以举个例子吗？
答案 0 :(得分：22)
HTML文档只能有一个html代码和一个body代码。如果您只是将几个HTML文档放在一起，它将是一个无效的文档，并且浏览器可能在显示它时出现问题。
您可以删除重复的标签，但可能不那么简单。该文档也只能有一个head标记，因此您必须合并来自单独页面的head标记的内容。如果页面包含冲突的样式表，则会更难，然后您必须重写样式表及其在页面中的用法，以便它们不再发生冲突。 Javascript也是如此;如果你的脚本名称有冲突，你必须重写它们，以免它们发生冲突。
页面中的内容也可能存在冲突。 id只能在页面中定义一次，因此如果页面使用相同的标识符，则必须更改它们以及它们在样式表和脚本中的用法。
如果您确定没有此类冲突，您应该能够合并页面。
如果您有只能控制正文内容的文档，则可以通过添加注释的开始和结束标记来避免这种情况，以便忽略一个文件的结尾和下一个文件的开头。这样，您可以保留第一个文件的开头，每个文件的内容以及最后一个文件的结尾：
<html>
<body>
content...
<!--
</body>
</html>
<html>
<body>
-->
content...
<!--
</body>
</html>
<html>
<body>
-->
content...
</body>
</html>
（请注意，这只会使用第一页的head部分，其他部分将被忽略。）
答案 1 :(得分：10)
如果不删除额外的<html>标记，则无法更正。
拥有多个<html>代码（或<body>代码）意味着您的文档不是有效的HTML，并且显示它的所有规则都会从窗口中消失。浏览器可以尝试它是最好的，但实际上没有办法知道它的外观。
答案 2 :(得分：4)
您不应在单个文件中使用多个<html>标记。
你想做什么？
如果要组合多个HTML文件，则应使用XML解析器正确组合元素。或者，您可以创建另一个页面，其中IFRAME引用其他HTML文件。
答案 3 :(得分：1)
嗯......同一个HTML中的多个HTML标签并不代表它不起作用。试试http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
提醒一下，当某些事情发生时，它并不意味着必须是正确的。
答案 4 :(得分：0)
我认为你不应该在一个文件中使用多个html和body语句。也没有理由这样做。
答案 5 :(得分：0)
我不知道......也许你可以创建一个脚本，一次只显示一个身体 在头部并将其他头部放在其他人的身体侧面。即时通讯工作与某人elses base 64编码器。这是代码。不起作用，但我正在试验不同的东西。
<!DOCTYPE html>
<html>
<head>
<title>Multipage Single HTML</title>
<script>
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
</script>
<style>
.selected {
background-color: green;
}
.navigator {
background-color: maroon;
float: center;
border: groove turquoise 15px;
}
.navigation_button {
color: red;
font-size: 32px;
float: center;
margin-right: 32px;
margin-left: 32px;
}
h1 {
text-align: center;
}
p {
text-align: center;
}
</style>
</head>
<body>
<div id="index" style="display:block">
<h1>Home</h1>
<div class="navigator" style="overflow:auto;">
<p><a href="#" class="navigation_button">Home</a>
<a href="#" class="navigation_button" onclick="return show('storage','index');">Storage</a>
<a href="#" class="navigation_button" onclick="return show('2','index');">2</a>
<a href="#" class="navigation_button" onclick="return show('3','index');">3</a>
<a href="#" class="navigation_button" onclick="return show('4','index');">4</a></p>
</div>
</div>
<div id="storage" style="display:none">
<h1>Storage</h1>
<div class="navigator" style="overflow:auto;">
<p><a href="#" class="navigation_button" onclick="return show('index','storage');">Home</a>
<a href="#" class="navigation_button">Storage</a>
<a href="#" class="navigation_button" onclick="return show('2','storage');">2</a>
<a href="#" class="navigation_button" onclick="return show('3','storage');">3</a>
<a href="#" class="navigation_button" onclick="return show('4','storage');">4</a></p>
</div>
<html>
<head>
<title>Base64 File Encoder</title>
<style>
.body {
text-align: center;
font-family: Helvetica;
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.item {
position: relative;
margin: 10px;
background: #F5F5F5;
padding: 20px;
}
.remove {
position: absolute;
right: 10;
top: 10;
opacity: 0.5;
}
textarea {
width: 100%;
margin: 2px 0px;
height: 120px;
font-family: Courier;
border: none;
background: whitesmoke;
}
#results {
position: relative;
margin: 50px;
}
#dropper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#dropper.hover {
opacity: 0.5;
background: lightblue;
z-index: 100;
}
</style>
</head>
<body class="body">
<h1>Drop Files Here To Save Them To The System</h1>
<div id="dropper"></div>
<div id="results"></div>
<script>
if (typeof window.FileReader === 'undefined')
alert('File API & FileReader not supported');
var dropper = document.getElementById("dropper");
var results = document.getElementById("results");
dropper.ondragover = function () { dropper.className = 'hover'; return false; };
dropper.ondragend = function () { dropper.className = ''; return false; };
dropper.ondrop = function (e) {
e.preventDefault();
var files = [].slice.call(e.dataTransfer.files);
files.forEach(function (file) {
var reader = new FileReader();
reader.onload = function(event) {
fileLoaded(file.name, event.target.result);
};
reader.readAsDataURL(file);
dropper.className = '';
});
return false;
};
function fileLoaded(filename, dataUri) {
var div = document.createElement("div");
div.className = 'item';
var remove = document.createElement("button");
remove.className = 'remove';
remove.innerHTML = 'x';
remove.onclick = function() {
if(localStorage) localStorage.removeItem("b64-"+filename);
results.removeChild(div);
};
div.appendChild(remove);
var name = document.createElement("div");
name.innerHTML = filename;
div.appendChild(name);
if(/^data:image/.test(dataUri)) {
var imgDiv = document.createElement("div");
var img = document.createElement("img");
img.src = dataUri;
img.style['max-width'] = '100px';
img.style['height-width'] = '100px';
imgDiv.appendChild(img);
div.appendChild(imgDiv);
}
var ta = document.createElement("textarea");
ta.onclick = function() {
ta.select();
};
ta.value = dataUri;
div.appendChild(ta);
results.appendChild(div);
if(localStorage) localStorage.setItem("b64-"+filename, dataUri);
}
if(localStorage)
for(var filename in localStorage)
if(filename.indexOf("b64-") === 0)
fileLoaded(filename.replace("b64-",""), localStorage.getItem(filename));
</script>
</body>
</html>
</div>
<div id="2" style="display:none">
<h1>2</h1>
<div class="navigator">
<p><a href="#" class="navigation_button" onclick="return show('index','2');">Home</a>
<a href="#" class="navigation_button" onclick="return show('storage','2');">Storage</a>
<a href="#" class="navigation_button">2</a>
<a href="#" class="navigation_button" onclick="return show('3','2');">3</a>
<a href="#" class="navigation_button" onclick="return show('4','2');">4</a></p>
</div>
</div>
<div id="3" style="display:none">
<h1>3</h1>
<div class="navigator">
<p><a href="#" class="navigation_button" onclick="return show('index','3');">Home</a>
<a href="#" class="navigation_button" onclick="return show('storage','3');">Storage</a>
<a href="#" class="navigation_button" onclick="return show('2','3');">2</a>
<a href="#" class="navigation_button">3</a>
<a href="#" class="navigation_button" onclick="return show('4','3');">4</a></p>
</div>
</div>
<div id="4" style="display:none">
<h1>4</h1>
<div class="navigator">
<p><a href="#" class="navigation_button" onclick="return show('index','4');">Home</a>
<a href="#" class="navigation_button" onclick="return show('storage','4');">Storage</a>
<a href="#" class="navigation_button" onclick="return show('2','4');">2</a>
<a href="#" class="navigation_button" onclick="return show('3','4');">3</a>
<a href="#" class="navigation_button">4</a></p>
</div>
</div>
</body>
</html>