2010-01-09 19 views
8

Tengo varios archivos html en un archivo.Múltiple <html><body></html></body> en el mismo archivo

<html> 
    <body></body> 
</html> 

<html> 
    <body></body> 
</html> 

<html> 
    <body></body> 
</html> 

Y el resultado es que me da un archivo html dañado.

¿Cómo corregir esto sin eliminar las etiquetas <html> <body> del resto?

Estoy usando python para generar el archivo html.

  • Si utilizo el self.response.out.write(function(query)) me sale una buena página html.

  • Si lo uso por segunda vez self.response.out.write(function(query2)) Entonces la página se distorsiona.

¿Podemos corregir esto usando iframes? ¿Alguien puede dar un ejemplo?

Gracias

+3

El HTML es obviamente válido. ¿Cómo y cuándo quieres eliminar las etiquetas? ¿Qué estás tratando de hacer exactamente? – Eilon

+1

¿Por qué necesita muchas etiquetas HTML en un archivo? Probablemente haya una mejor manera de hacer lo que sea que intentes lograr. – keyboardP

Respuesta

19

Un documento HTML solo puede tener una etiqueta html y una etiqueta body. Si coloca varios documentos HTML juntos, será un documento no válido y los navegadores pueden tener problemas para mostrarlo.

Puede quitar las etiquetas duplicadas, pero podría no ser tan simple. El documento también puede tener una sola etiqueta head, por lo que deberá combinar el contenido de las etiquetas de cabecera de las páginas separadas. Si las páginas contienen hojas de estilo que entran en conflicto, será más difícil, luego tendrá que volver a escribir las hojas de estilo y su uso en las páginas para que no entren en conflicto. Lo mismo vale para Javascript; si tiene scripts con nombres conflictivos, debe reescribirlos para que no entren en conflicto.

Puede haber contenido en las páginas que también entren en conflicto. Un id solo se puede definir una vez en una página, por lo que si las páginas usan los mismos identificadores, debe cambiarlos y su uso en hojas de estilo y scripts.

Si se asegura de que no haya tales conflictos, debería poder combinar las páginas.

Si tiene documentos en los que solo tiene control sobre el contenido del cuerpo, puede eludir esto agregando etiquetas de inicio y finalización para comentarios, de modo que se ignore el final de un archivo y el inicio del siguiente archivo. De esta manera se puede mantener el comienzo del primer archivo, el contenido de cada archivo, y el final del último archivo:

<html> 
    <body> 
    content... 
    <!-- 
    </body> 
</html> 

<html> 
    <body> 
    --> 
    content... 
    <!-- 
    </body> 
</html> 

<html> 
    <body> 
    --> 
    content... 
    </body> 
</html> 

(Tenga en cuenta que esto sólo se utilizará la sección head desde la primera página, los demás será ignorado.)

+0

¡Muchas gracias! Pude fusionar todos los archivos usando Python con este método. Esta es solo otra forma de eliminar las secciones no deseadas del cuerpo HTML. –

+0

Sé que esto es realmente evidente, pero me gustaría saber en qué parte de la especificación w3c html dice que un documento válido solo tiene una etiqueta '' y solo una ' 'etiqueta si tiene esa información. – stiemannkj1

+0

@ stiemannkj1: La especificación dice que el [elemento html] (https://www.w3.org/TR/html5/semantics.html#the-html-element) es el elemento raíz, el [elemento principal] (https : //www.w3.org/TR/html5/document-metadata.html#the-head-element) es el primer elemento en el elemento html y el [elemento del cuerpo] (https://www.w3.org /TR/html5/sections.html#the-body-element) es el segundo elemento en el elemento html. El [elemento de conjunto de marcos] (https://www.w3.org/TR/html5/obsolete.html#frameset) se usa en lugar del elemento de cuerpo en un documento de conjunto de marcos. – Guffa

4

No se deben utilizar múltiples <html> etiquetas en un solo archivo.

¿Qué estás tratando de hacer?

Si está combinando varios archivos HTML, debe usar un analizador XML para combinar los elementos correctamente. Alternativamente, podría hacer que otra página con una secuencia de IFRAME haga referencia a otros archivos HTML.

0

No creo que se suponga que se deba poder utilizar múltiples declaraciones html y cuerpo en un archivo. Además, realmente no hay ninguna razón para hacerlo.

8

No hay forma de corregir eso sin eliminar las etiquetas <html> adicionales.

Tener etiquetas <html> múltiples (o etiquetas <body>) significa que su documento no es HTML válido, y todas las reglas para mostrarlo salen por la ventana. Un navegador puede probar lo mejor, pero realmente no hay forma de saber cómo se verá.

+1

El archivo HTML debe tener exactamente una y exactamente una etiqueta . –

1

Bueno ... múltiples etiquetas HTML dentro del mismo HTML no significa que no funcionará. Inténtalo en http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro

Recuerda esto, cuando algo está funcionando, no significa que tenga que ser correcto.

+1

Es cierto que 'working! = correct', pero por lo general solo es razonable usar la forma incorrecta para que funcione cuando no hay una forma correcta. Y si no es correcto, también es mucho menos probable que sea compatible con versiones anteriores. – Jakar

-5

Múltiples etiquetas HTML y etiquetas corporales funcionan bien con todos los navegadores. Por ejemplo, puede ver esta página con múltiples etiquetas html y body: http://www.codefire.org/contact-us.html

pero no sé si es válida y también funciona bien para los motores de búsqueda.

+1

La única razón por la cual esta página "funciona bien" se debe a que el motor de renderizado de los navegadores realiza la corrección de errores. El navegador eliminará automáticamente los elementos adicionales '', '' y '', lo que equivale a colocar todo el HTML en una sola página. –

0

no sé ... tal vez podrías crear un guión para mostrar solo un cuerpo a la vez en la cabeza y poner las otras cabezas en los lados de los cuerpos de los demás. Estoy trabajando en un proyecto con el codificador de base 64 de alguien más. aquí está el código. no funciona pero estoy experimentando con cosas diferentes.

<!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; 
 
\t } 
 

 
    .navigator { 
 
    background-color: maroon; 
 
    float: center; 
 
\t 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> 
 
\t <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>