同一文件中的多个 <html><body> </html></body>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2035462/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple <html><body> </html></body> in same file
提问by Guffa
I have a multiple html files in one file.
我在一个文件中有多个 html 文件。
<html>
<body></body>
</html>
<html>
<body></body>
</html>
<html>
<body></body>
</html>
And the result is that I get a messed up html file.
结果是我得到了一个混乱的 html 文件。
How to correct this without removing <html> <body>tags from the rest?
如何在不删除<html> <body>其余标签的情况下纠正此问题？
I am using python to generate the html file.
我正在使用 python 生成 html 文件。
If I use the
self.response.out.write(function(query))I get a nice html page.If I use it a second time
self.response.out.write(function(query2))Then the page gets distorted.
如果我使用，
self.response.out.write(function(query))我会得到一个不错的 html 页面。如果我第二次使用它
self.response.out.write(function(query2))然后页面会扭曲。
Can we correct this using iframes? Can somebody give an example?
我们可以使用 iframe 纠正这个问题吗？有人可以举个例子吗？
回答by Guffa
An HTML document can only have one htmltag and one bodytag. If you just put several HTML document together, it will be an invalid document, and the browsers may have problems displaying it.
一个 HTML 文档只能有一个html标签和一个body标签。如果你只是把几个 HTML 文档放在一起，它将是一个无效的文档，浏览器可能会显示它的问题。
You could remove the duplicate tags, but it might not be that simple. The document can also have only one headtag, so you would have to combine the contents from the head tags from the separate pages. If the pages contains style sheets that conflict, it will be harder, then you have to rewrite the style sheets and it's usage in the pages so that they no longer conflict. The same goes for Javascript; if you have scripts with conflicting names, you have to rewrite them so that they no longer conflict.
您可以删除重复的标签，但可能没有那么简单。文档也可以只有一个head标签，因此您必须将来自不同页面的 head 标签的内容组合起来。如果页面包含有冲突的样式表，那就更难了，那么您必须重写样式表及其在页面中的用法，使它们不再发生冲突。Javascript 也是如此；如果您有名称冲突的脚本，则必须重写它们以使它们不再冲突。
There may be content in the pages that conflict also. An idmay only be defined once in a page, so if the pages uses the same identifiers, you have to change them, and their usage in style sheets and scripts.
页面中也可能存在冲突的内容。Anid只能在页面中定义一次，因此如果页面使用相同的标识符，则必须更改它们，以及它们在样式表和脚本中的用法。
If you make sure that there are not such conflicts, you should be able to combine the pages.
如果您确保没有此类冲突，您应该能够合并页面。
If you have documents where you only have control over the body content, you can circumvent this by adding starting and ending tags for comments, so that the ending of one file and start of the next file are ignored. That way you can keep the start of the first file, the content from each file, and the ending of the last file:
如果您的文档只能控制正文内容，则可以通过为注释添加开始和结束标记来规避这一点，以便忽略一个文件的结尾和下一个文件的开头。这样您就可以保留第一个文件的开头、每个文件的内容以及最后一个文件的结尾：
<html>
<body>
content...
<!--
</body>
</html>
<html>
<body>
-->
content...
<!--
</body>
</html>
<html>
<body>
-->
content...
</body>
</html>
(Note that this will only use the headsection from the first page, the others will be ignored.)
（请注意，这只会使用head第一页的部分，其他部分将被忽略。）
回答by zombat
There is no way to correct that without removing the extra <html>tags.
如果不删除额外的<html>标签，就无法纠正这种情况。
Having multiple <html>tags (or <body>tags) means that your document is not valid HTML, and all the rules on displaying it go out the window. A browser can try it's best, but there's really no way of knowing how it's going to look.
拥有多个<html>标签（或多个标签<body>）意味着您的文档不是有效的 HTML，并且所有显示它的规则都被排除在外。浏览器可以尽最大努力，但真的无法知道它会是什么样子。
回答by SLaks
You should not use multiple <html>tags in a single file.
您不应<html>在单个文件中使用多个标签。
What are you trying to do?
你想做什么？
If you're combining multiple HTML files, you should use an XML parser to combine the elements properly. Alternatively, you could make another page with a sequence of IFRAMEs referencing other HTML files.
如果要组合多个 HTML 文件，则应使用 XML 解析器正确组合元素。或者，您可以使用IFRAME引用其他 HTML 文件的s序列制作另一个页面。
回答by Rizky Wahyudi
Multiple HTML tags inside same HTML doesn't mean it will not working. Try yourself at http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
同一 HTML 中的多个 HTML 标签并不意味着它不起作用。在http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro 上尝试一下
Remind this, when something is working, it doesn't mean have to be correct though.
提醒一下，当某些东西在起作用时，并不意味着必须是正确的。
回答by user5701633
Maybe you could create a script to show only one body at a time in the head and put the other heads in side the bodies of the others. I'm working on a project with someone elses base 64 encoder. Here is the code. Doesn't work but I'm experimenting with different things.
也许您可以创建一个脚本，一次只在头部显示一个身体，而将其他头部放在其他头部的侧面。我正在与别人的 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>回答by adamse
I don't think that you are supposed to be able to use multiple HTML and body statements in one file. Also there is really no reason to do so.
我不认为您应该能够在一个文件中使用多个 HTML 和正文语句。而且真的没有理由这样做。
