html5创建多个body

转载

charlesc 2024-12-24 14:44:01

文章标签 html5创建多个body html html页面 html标签 文章分类 HTML5 移动开发

同一个页面多个html、body标签

如果写多个是什么情况呢。本着好奇的想法，试验了一下。

<html>
 
   
<body>
 
   
<p>这是第一个html</p><br>
 
   
</body>
 
   
</html>
 
   
<html>
 
   
<body>
 
   
<p>这是第二个html</p>
 
   
</body>
 
   
</html>

在浏览器中打开后，页面显示正常。并没有出现异常。

如果写多个是什么情况呢。本着好奇的想法，试验了一下。

<html>
 
   
<body>
 
   
<p>这是第一个html</p><br>
 
   
</body>
 
   
</html>
 
   
<html>
 
   
<body>
 
   
<p>这是第二个html</p>
 
   
</body>
 
   
</html>

在浏览器中打开后，页面显示正常。并没有出现异常。

html5创建多个body_html页面

看来浏览器把两个html合并了。body内容浏览器自动合并了。再写入一个title试试。

<html>
     
<head><title>第一个title</title></head>
     
<body>
     
<p>这是第一个html</p><br>
     
</body>
     
</html>
     
<html>
     
<head><title>第二个title</title></head>
     
<body>
     
<p>这是第二个html</p>
     
</body>
     
</html>

html5创建多个body_html标签_02

用JS测试下

<html>
     
<head><title>第一个title</title></head>
     
<body>
     
<p>这是第一个html</p><br>
     
</body>
     
</html>
     
<html>
     
<head><title>第二个title</title></head>
     
<body>
     
<p>这是第二个html</p>
     
</body>
     
</html>
     
<script>
     
 var html = document.getElementsByTagName("title");
     
 alert(html.length);
     
</script>

在火狐下，显示2个

html5创建多个body_html标签_03

html5创建多个body_html标签_04

浏览器下有差异。一个页面只有一个title。虽然都没有显示第二个title,但是火狐获取到了有两个title。

body,head标签IE，火狐都一样，只能获取到第一个。

<html>
     
<head><title>第一个title</title></head>
     
<body>
     
<p>这是第一个html</p><br>
     
</body>
     
</html>
     
<html>
     
<head><title>第二个title</title></head>
     
<body>
     
<p>这是第二个html</p>
     
</body>
     
</html>
     
<script>
     
 var html = document.getElementsByTagName("title");
     
 alert(html[1].innerHTML);
     
</script>

html5创建多个body_html页面_05