HTML有用的标签

 编程原理

sPan与div
编程原理
　　用客户端的JavaScript脚本语言，对HTML语言的< UL>< /UL>、< SPAN>< /SPAN>和< DIV>< /DIV>标记进行编程，可以在Internet Explore中实现网页中的菜单、树形结构目录、滚动条、列表框、下拉列表框及其它控件。

　　< SPAN>< /SPAN>标记定义了HTML文档中的一个行内间隔，可以给这个间隔赋一个id属性，给整个间隔一个统一的颜色、字体、边框、背景等属性，使整个间隔响应相同的事件，可以用这个标记制作菜单、树形结构目录、列表框及下拉列表框的某一项。多个< SPAN>< /SPAN>标记可以放在同一行内，组成下拉式菜单的菜单条。

　　< DIV>< /DIV>标记定义了HTML文档中的一个矩形区域，可以给这个区域赋一个id，给整个区域一个统一的颜色、字体、边框、背景等属性，使整个区域响应相同的事件，通过设置< DIV>< /DIV>标记的style.display属性为block或none可以在运行时动态的显示或隐藏这个区域，可以用这个标记制作树形结构目录的子目录、弹出式菜单、下拉式菜单的某一子菜单、列表框及下拉列表框。通过程序代码设置< DIV>< /DIV>标记的style.posLeft、style.posTop、style.posWidth、style.posHeight属性，可以在运行时动态的改变< DIV>< /DIV>区域的位置和大小，用来设计滚动条。

　　列表框和下拉列表框

　　在一个< DIV>< /DIV>标记中放置一组< SPAN>< /SPAN>标记，不同的< SPAN>< /SPAN>标记间用< BR>标记换行，形成一个列表框。给< SPAN>< /SPAN>标记添加事件，使其能根据鼠标的位置改变颜色。在< SPAN>< /SPAN>标记的onclick事件中，完成指定的操作或将所选择的项目的innerText或id属性存放与隐藏控件或变量中，以便检索所选择的项目。

　　在网页中放置一个< SPAN>< /SPAN>标记作为下拉列表框。

　　在下拉列表框的右边放置另外一个< SPAN>< /SPAN>标记，设置这个< SPAN>< /SPAN>标记的背景图片，形成下拉箭头。在下拉列表框的下边放置一个< DIV>< /DIV>标记制作的列表框作为下拉列表，设置下拉列表的style.display属性为none，然后根据鼠标动作显示或隐藏列表。编写列表项目的onclick事件处理程序，将所选择的项目文本放在下拉列表框中。

　　弹出式菜单

　　由于网页不能响应鼠标右键，因此，在网页中只能用鼠标左键的click事件实现弹出式菜单。按照列表框的设计方法设计弹出式菜单，将弹出式菜单< DIV>< /DIV>标记的style.display属性设置为none。在document的click事件中，通过设置< DIV>< /DIV>标记的style.posLeft和style.posTop属性，将弹出式菜单移动到光标所在的位置，将< DIV>< /DIV>标记的style.display属性设置为block，显示菜单。当鼠标离开菜单时，隐藏菜单。

　　下拉式菜单

　　用一个< SPAN>< /SPAN>标记制作菜单条，菜单条< SPAN>< /SPAN>标记中嵌

　　套几个< SPAN>< /SPAN>标记作为子菜单。按照弹出式菜单的设计方法，分别为每一个子菜单设计下拉菜单。通过响应子菜单的鼠标事件，显示或隐藏下拉式菜单。

　　为了方便程序移植，可以将菜单数据放在数组里，在程序中通过document对象的write方法动态生成菜单。

　　滚动条

　　在网页中放置一个< DIV>< /DIV>标记作为滚动条的背景，设置背景的颜色和图片，背景图片的重复属性设置为repeat-x。在背景区域的左右两端放置两个< DIV>< /DIV>标记作为滚动条的左右箭头，设置左右箭头的背景颜色和背景图片。在背景区域的中间放置一个< DIV>< /DIV>标记作为滚动条的滑块，设置滑块的背景颜色和背景图片，背景图片的重复属性设置为repeat-x。在滚动条的上面覆盖一个事件< DIV>< /DIV>标记用来响应鼠标事件，不设置这个标记的背景颜色和背景图片属性，使其透明。为了能正确的看到滚动条的各个部分并使事件< DIV>< /DIV>区域能截获鼠标事件，应使事件< DIV>< /DIV>标记的Z-INDEX属性最大，背景< DIV>< /DIV>标记的Z-INDEX属性最小。在事件< DIV>< /DIV>标记的鼠标事件中，通过比较鼠标window.event.clientX和滚动条各个部件的相对位置进行不同的滚动操作。

　　在window对象的load事件和resize事件中根据窗口和网页的大小改变滚动条各个部件的大小和位置。在网页中放置一个< DIV>< /DIV>标记，将网页中需要滚动的部分都放在这个< DIV>< /DIV>区域中。在滚动条的滚动事件中通过改变这个标记的style.posLeft和style.posTop属性，实现网页的滚动。

　　用以上方法实现的滚动条，可以设计成任意的大小和颜色，放置在网页的任意位置，选择任意的图片作为箭头和滑块的背景，极大的满足艺术化设计网页的需求。

　　本文利用了HTML标记< SPAN>< /SPAN>和< DIV>< /DIV>的风格属性，在网页中实现了菜单、树形结构目录和自定义的滚动条、列表框、下拉列表框。到目前为止，只有运行在Windows平台下的浏览器Internet Explore支持这种风格属性，实际应用中应当判断客户浏览器类型，以便提供不同的网页。

 

SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。

　　下面以一个实例来说明这两个属性的区别。

　　代码:

　　SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。在此例中，标识符允许你将一个段落分成不同的部分。

　　还有一个标识符具有类似的功能，

DIV也被用来在HTML文件中建立逻辑部分。但与
SPAN不同，
工作于文本块一级，它在它所包含的HTML元素的前面及后面都引入了行分隔。

　　效果:

　　SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。在此例中，标识符允许你将一个段落分成不同的部分。

　　还有一个标识符具有类似的功能，

　　DIV也被用来在HTML文件中建立逻辑部分。但与

　　SPAN不同，

　　工作于文本块一级，它在它所包含的HTML元素的前面及后面都引入了行分隔。