什么是DIV？

最新推荐文章于 2025-10-29 10:27:03 发布

转载最新推荐文章于 2025-10-29 10:27:03 发布 · 4.1k 阅读

文章标签：

#div #javascript #internet #mozilla #浏览器 #文档

WEB开发相关专栏收录该内容

11 篇文章

订阅专栏

本文介绍了DIV元素，它为HTML文档内大块内容提供结构和背景，IE和Netscape浏览器都支持。还区分了DIV和SPAN元素，给出DIV标签分割页面的示例代码，结合JavaScript控制区域显示隐藏，组合DHTML和JavaScript可预加载内容、适时显示，提高性能。

部署运行你感兴趣的模型镜像

ZDNet China

DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。Internet Explorer和Netscape的浏览器都支持DIV标签。

DIV和SPAN
很多开发人员都把DIV元素同SPAN元素弄混淆了。尽管它们在特性上相同，但是SPAN是用来定义内嵌内容而不是大块内容的。你可以对段落使用DIV标签，但是SPAN对于为段落内的一个或者多个字赋予特殊的特性很有用。

DIV标签允许你分割一个Web页面，以此来进行格式化和演示。可以将它和可视性的技巧组合起来使用，用以分割页面的内容，并显示你所选择的内容。下面这段示例代码使用了DIV标签将该页面分割成了多个区域；超链接会显示和隐藏这些区域：
<html><head>
<title>div test</title>
<script language="JavaScript">
function setAllVisible() {
document.getElementById("section1").style.visibility="hidden";
document.getElementById("section2").style.visibility="hidden";
document.getElementById("section3").style.visibility="hidden";
document.getElementById("section4").style.visibility="hidden";
}
</script></head>
<body onLoad='setAllVisible();'>
<h1>Builder.com Sample</h1>
<ul>
<li><a href="#"
onClick='
document.getElementById("section1").style.visibility="visible";
document.getElementById("section2").style.visibility="hidden";
document.getElementById("section3").style.visibility="hidden";
document.getElementById("section4").style.visibility="hidden";'>Section 1</a></li>
<li><a href="#"
onClick='
document.getElementById("section1").style.visibility="hidden";
document.getElementById("section2").style.visibility="visible";
document.getElementById("section3").style.visibility="hidden";
document.getElementById("section4").style.visibility="hidden";'>Section 2</a></li>
<li><a href="#"
onClick='
document.getElementById("section1").style.visibility="hidden";
document.getElementById("section2").style.visibility="hidden";
document.getElementById("section3").style.visibility="visible";
document.getElementById("section4").style.visibility="hidden";'>Section 3</a></li>
<li><a href="#"
onClick='
document.getElementById("section1").style.visibility="hidden";
document.getElementById("section2").style.visibility="hidden";
document.getElementById("section3").style.visibility="hidden";
document.getElementById("section4").style.visibility="visible";'>Section 4</a></li>
</ul><br>
<div id="section1">Section 1 text.</div>
<div id="section2">Section 2 text.</div>
<div id="section3">Section 3 text.</div>
<div id="section4">Section 4 text.</body>
</html>

这段代码包括了一个用来隐藏所有DIV元素的JavaScript函数。当文档被加载的时候，这个函数就被调用了。点击每个超链接将会显示相关的区域并隐藏其他的区域。这种方式的一个弱点是，只有Internet Explorer 5或者更高版本的浏览器以及Netscape Navigator 6或者更高版本的浏览器才支持这些方法。但是，我使用Mozilla 1.01测试过，没有问题。