2010-01-09 41 views
8

Tôi có nhiều tệp html trong một tệp.Nhiều <html><body></html></body> trong cùng một tệp

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

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

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

Và kết quả là tôi nhận được một tệp html sai lầm.

Cách sửa lỗi này mà không xóa <html> <body> thẻ khỏi phần còn lại?

Tôi đang sử dụng python để tạo tệp html.

  • Nếu tôi sử dụng self.response.out.write(function(query)) Tôi nhận được một trang html đẹp.

  • Nếu tôi sử dụng nó lần thứ hai self.response.out.write(function(query2)) Sau đó, trang bị méo.

Chúng ta có thể sửa lỗi này bằng iframe không? Ai đó có thể đưa ra một ví dụ?

Cảm ơn

+3

HTML rõ ràng là không hợp lệ. Bạn muốn xóa thẻ như thế nào và khi nào? Chính xác những gì bạn đang cố gắng để làm? – Eilon

+1

Tại sao bạn cần nhiều thẻ HTML trong một tệp? Có lẽ có một cách tốt hơn để làm bất cứ điều gì bạn đang cố gắng đạt được. – keyboardP

Trả lời

19

Tài liệu HTML chỉ có thể có một thẻ html và một thẻ body. Nếu bạn chỉ cần đặt một số tài liệu HTML với nhau, nó sẽ là một tài liệu không hợp lệ, và các trình duyệt có thể có vấn đề hiển thị nó.

Bạn có thể xóa các thẻ trùng lặp, nhưng có thể không đơn giản như vậy. Tài liệu cũng có thể chỉ có một thẻ head, vì vậy bạn sẽ phải kết hợp nội dung từ thẻ đầu từ các trang riêng biệt. Nếu các trang chứa các tờ định kiểu xung đột, nó sẽ khó hơn, sau đó bạn phải viết lại các tờ định kiểu và cách sử dụng nó trong các trang để chúng không xung đột nữa. Cũng vậy với Javascript; nếu bạn có các tập lệnh có tên xung đột, bạn phải viết lại chúng để chúng không còn xung đột nữa.

Có thể có nội dung trong các trang xung đột. An id chỉ có thể được xác định một lần trong một trang, do đó, nếu các trang sử dụng cùng số nhận dạng, bạn phải thay đổi chúng và cách sử dụng chúng trong các bảng định kiểu và tập lệnh.

Nếu bạn đảm bảo rằng không có xung đột như vậy, bạn sẽ có thể kết hợp các trang.

Nếu bạn có tài liệu mà bạn chỉ có quyền kiểm soát nội dung, bạn có thể vượt qua điều này bằng cách thêm thẻ bắt đầu và kết thúc cho nhận xét, để kết thúc một tệp và bắt đầu tệp tiếp theo bị bỏ qua. Bằng cách đó bạn có thể giữ sự bắt đầu của tập tin đầu tiên, nội dung từ mỗi tập tin, và sự kết thúc của tập tin cuối cùng:

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

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

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

(Lưu ý rằng điều này sẽ chỉ sử dụng phần head từ trang đầu tiên, những người khác sẽ bị bỏ qua.)

+0

Cảm ơn rất nhiều! Tôi đã có thể hợp nhất tất cả các tập tin bằng cách sử dụng python bằng phương pháp này. Đây chỉ là một cách khác để xóa các phần cơ thể html không mong muốn –

+0

Tôi biết điều này thực sự là hiển nhiên, nhưng tôi rất muốn biết trong thông số html w3c nó nói rằng một tài liệu hợp lệ chỉ có một thẻ '' và chỉ một 'thẻ nếu bạn có thông tin đó. – stiemannkj1

+0

@ stiemannkj1: Đặc điểm kỹ thuật nói rằng [phần tử html] (https://www.w3.org/TR/html5/semantics.html#the-html-element) là phần tử gốc, [phần tử đầu] (https : //.w3.org/TR/html5/document-metadata.html#the-head-element) là phần tử đầu tiên trong phần tử html và [phần tử nội dung] (https://www.w3.org /TR/html5/sections.html#the-body-element) là phần tử thứ hai trong phần tử html. Phần tử [frameset] (https://www.w3.org/TR/html5/obsolete.html#frameset) được sử dụng thay cho phần tử body trong tài liệu frameset. – Guffa

4

Bạn không nên sử dụng nhiều thẻ <html> trong một tệp.

Bạn đang cố gắng làm gì?

Nếu bạn đang kết hợp nhiều tệp HTML, bạn nên sử dụng trình phân tích cú pháp XML để kết hợp các yếu tố chính xác. Ngoài ra, bạn có thể tạo một trang khác với một chuỗi gồm IFRAME s tham chiếu các tệp HTML khác.

0

Tôi không nghĩ rằng bạn có nghĩa vụ phải có thể sử dụng nhiều câu lệnh html và nội dung trong một tệp. Cũng có thực sự không có lý do để làm như vậy.

8

Không có cách nào để sửa mà không xóa thêm <html> thẻ.

Có nhiều thẻ <html> (hoặc <body> thẻ) có nghĩa là tài liệu của bạn không phải là HTML hợp lệ và tất cả các quy tắc hiển thị nó sẽ xuất hiện ngoài cửa sổ. Một trình duyệt có thể thử nó tốt nhất, nhưng thực sự không có cách nào để biết nó trông như thế nào.

+1

Tệp HTML phải có chính xác một số và chính xác một thẻ . –

1

Vâng ... nhiều thẻ HTML bên trong cùng một HTML không có nghĩa là nó sẽ không hoạt động. Hãy thử bản thân tại http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro

Nhắc nhở điều này, khi có điều gì đó hoạt động, điều đó không có nghĩa là phải chính xác.

+1

Đúng là 'làm việc! = đúng', nhưng thường chỉ hợp lý khi sử dụng cách không chính xác để làm việc gì đó khi không có cách nào đúng. Và nếu nó không chính xác, nó cũng ít có khả năng tương thích về phía trước. – Jakar

-5

Nhiều thẻ HTML và thẻ Cơ thể hoạt động tốt với tất cả các trình duyệt. Ví dụ: bạn có thể xem trang này với nhiều thẻ html và thẻ body: http://www.codefire.org/contact-us.html

nhưng không biết nó hợp lệ và hoạt động tốt cho các công cụ tìm kiếm.

+1

Lý do duy nhất khiến trang này "hoạt động tốt" là do công cụ hiển thị của trình duyệt thực hiện sửa lỗi. Trình duyệt sẽ tự động loại bỏ các phần tử bổ sung '', '' và '', làm cho nó giống như đặt tất cả HTML vào một trang. –

0

Tôi không biết ... có thể bạn có thể tạo một tập lệnh để chỉ hiển thị một nội dung tại một thời điểm trong đầu và đặt các đầu khác ở bên cạnh phần thân của những người khác. im làm việc trên một dự án với một bộ mã hóa elses base 64. đây là mã. không làm việc nhưng im thử nghiệm với những thứ khác nhau.

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

Các vấn đề liên quan