HTML初步学习8
今天的重头是<div> & <span>
w3school上的解释:
HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。
如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。
在Dreamweaver中,层有两类,CSS层(使用div和span标签定位页面内容)和Netscape层(使用layer与ilayer标签定位页面内容)
对一个普通的应用程序二样,一个浏览器的窗口可以认为是第一层,当在一个菜单上单击链接时,菜单本身会显示在窗口之上,这就是第二层。
使用div标签很简单,必须做的事情就是将它放在想定义为一个数据块的元素的周围。当然,div应用于Style Sheet方面会更显威力,有
class:元素样式设置,CSS样式中的class选择符
style:其值为CSS属性值,用于设置对象的内嵌样式,使用方法如下:
eg:
<div style="各种参数设置"> content... </div>
关于style的参数:
position:定位 display:设置元素的浮动特征 visibility:是显示还是隐藏
title:设置或检索对象的咨询信息
ID:相当于名字,与CSS样式结合,实现对网页中的元素的控制
等属性
eg:
#font1{font-size=larger}<!--定义CSS规则--> id="font1"
class:元素样式设置,CSS样式中的class选择符
eg:
<!—语法-->classname{color} color1{color:lime;background:#FF80C0} class="color1"
class是一个样式,可以套在任何结构与内容上。总的来说,id通常用于定义页面上仅出现一次的标签,在对页面排版进行结构化布局时,一般使用id比较理想,因此id在一个文档中只能使用一次;class是用于根据用户定义的标准对一个或多个元素进行定义,相当于剧本,因此在一个页面上可以使用不同的class名称,区分不同的人物(即故事线)。在实际应用上,class可能对文字排版比较有用,而id则对宏观布局和实际放置各种元素较有用。
关于二者,可以参考一下这篇文章——XHTML 结构化之二:案例分析:W3school 的结构化标记
<span>标签
<span>标签和<div>标签一样,是无意义标签,如果不对 span 应用样式,那么 span 元素中的文本与其他文本不会任何视觉上的差异。
<span>是行内元素,也就是使用它不会自动换行,不像<div>
从功能角度,<div>一般用来做布局,<span>一般用来做文字效果,尤其是标题和链接的效果,所以我们常常看见
<h1 class="..."><span></span></h1>类型代码
<iframe>标签
特殊框架结构,被称为浮动框架,它是在浏览的窗口嵌套另外的网页文件
格式如下:
<iframe src="file_name" height="number" width="number" name="frame_name" scrolling="value" frameborder="value"> </iframe>
当然,iframe有很多的属性,不一一列举了。
<layer> 标签 与 <ilayer>标签
用来重叠显示Web内容的各个实体。两者的区别是,一个会自动变坐标,一个如果不改变,消息会重叠
eg:
记录重叠
<layer top 10>first-line</layer> <layer top 10>second-line</layer>
记录分行
<ilayer top 10>first-line</ilayer> <ilayer top 10>first-line</ilayer>
在前期(HTML初步学习2),我们用background-Repeat属性的no-repeat值来显示一个独立而不是平铺的背景,但是NC和NV不支持这一属性,不过可以用层来达到效果。
代码:
<body background="images/1.jpg"> <layer top="200" left="0" z-index="1"> <table width="400" border="0" bgcolor="#45ffac"> <tr> <td>testing  the  bg</td> </tr> </layer> <layer z-index="2"> first-linefirst-linefirst-linefirst-linefirst-linefirst-linefirst-linefirst-linefirst-linefirst-linefirst-linefirst-linefirst-linefirst-linefirst-linefirst-linefirst-linefirst-linefirst-linefirst-linefirst-linefirst-linefirst-linefirst-linefirst-linefirst-linefirst-line </layer> </body>
最后是一个用div做的下拉菜单,可是代码在我的IE上没反应,不知道什么问题,没查出来。。。who knows tell me~~~
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus®"> 6 <!--CSS样式--> 7 <title>下拉菜单导航条</title> 8 </head> 9 <body> 10 <style type="text/css"> 11 .menubar 12 {position:absolute; 13 top:10px; 14 width:100px;height:20px; 15 cursor:default; 16 border-width:1px; 17 border-style:outset; 18 color:#99FFFF; 19 background:#669900} 20 .menu 21 {position:absolute; 22 top:32px; 23 width:140px; 24 display:none; 25 border-width:2px; 26 border-style:outset; 27 border-color:white sliver sliver white; 28 padding:15px; 29 background:#333399} 30 .menu A{text-decoration:none;color:#99FFFF;} 31 .menu A:hover{color:#FFFFFF;} 32 </style> 33 <script language="javascript"> 34 function divControl(show){ 35 //判断是否是显示相对应的下拉列表 36 window.event.cancelBubble=true; 37 var objID=event.srcElement.id; 38 var index=objID.indexOf("_"); 39 var mainID=objID.substring(0,index); 40 var numID=objID.substring(index+1); 41 if(mainID=="Tdiv"){ 42 if(show==1){eval("showdiv("+"Div"+numID+")");} 43 else{eval("hidediv("+"Div"+numID+")");} 44 } 45 } 46 var nbottom=0,speed=2; 47 function displayMenu(obj){ 48 //在显示下拉菜单时,以下拉方式显示下拉菜单 49 obj.style.clip="rect(0 100% "+nbottom+"% 0)"; 50 nbottom+=speed; 51 if(nbottom <= 100){ 52 timerID=setTimeout("displayMenu("+obj.id+"),1"); 53 } 54 else 55 {clearTimeout(timerID);} 56 } 57 function showdiv(obj){ 58 //显示下拉列表的下拉选项 59 obj.style.display="block"; 60 obj.style.clip="rect(0 0 0 0)"; 61 nbottom = 5; 62 displayMenu(obj); 63 } 64 function hidediv(obj){ 65 //隐藏下拉列表的下拉选项 66 nbottom=0; 67 obj.style.display="block"; 68 } 69 function keepstyle(obj){ 70 //在下拉菜单中移动时,保持下拉列表的样式 71 obj.style.display="block"; 72 } 73 74 </script> 75 <table width="455" border="0" align="center" cellpadding="0" cellspacing="0" style="font-size:15px"> 76 <tr> 77 <td width="33%"> 78 <div align="center" id="Tdiv_1" class="menubar" onMouseOver="divControl(1)" onMouseOut="divControl(0)"> 79 关于 80 </div> 81 </td> 82 <td width="33%"> 83 <div align="center" id="Tdiv_2" class="menubar" onMouseOver="divControl(1)" onMouseOut="divControl(0)"> 84 漫画 85 </div> 86 </td> 87 <td width="33%"> 88 <div align="center" id="Tdiv_3" class="menubar" onMouseOver="divControl(1)" onMouseOut="divControl(0)"> 89 动漫 90 </div> 91 </td> 92 </tr> 93 <tr> 94 <td width="33%" height="67"> 95 <div align="left" id="Div1" class="menu" onMouseOver="keepstyle(this)" onMouseOut="hidediv(this)"> 96 <a href="http://baike.baidu.com/link?url=K42ca815BWGJ9Y6S7xCj6KJXR9SDbmV_8FGkohIQRAAb8cKTtZWMtKbv9oj4i4cYfR9jzBj1eCWxVGQWIHqA2a">作者</a><br/> 97 <a href="http://baike.baidu.com/item/%E7%AC%AC%E4%B8%83%E7%8F%AD">主角</a><br/> 98 </div> 99 </td> 100 <td width="33%"> 101 <div align="left" id="Div2" class="menu" onMouseOver="keepstyle(this)" onMouseOut="hidediv(this)"> 102 <a href="http://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&tn=monline_4_dg&wd=%E7%81%AB%E5%BD%B1%E5%BF%8D%E8%80%85&oq=%25E5%25B2%25B8%25E6%259C%25AC%25E9%25BD%2590%25E5%258F%25B2&rsv_pq=cd4570760007590a&rsv_t=9c17NLVa3LPZFB1TST%2Bq3FU5tLVQniQOTjFoFpTrsRbMjwpAey%2BVenF1i9U2zckSwy70&rsv_enter=1&inputT=7793&rsv_sug3=24&rsv_sug1=16&bs=%E5%B2%B8%E6%9C%AC%E9%BD%90%E5%8F%B2">第1-76集</a><br/> 103 <a href="http://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&tn=monline_4_dg&wd=%E7%81%AB%E5%BD%B1%E5%BF%8D%E8%80%85&oq=%25E5%25B2%25B8%25E6%259C%25AC%25E9%25BD%2590%25E5%258F%25B2&rsv_pq=cd4570760007590a&rsv_t=9c17NLVa3LPZFB1TST%2Bq3FU5tLVQniQOTjFoFpTrsRbMjwpAey%2BVenF1i9U2zckSwy70&rsv_enter=1&inputT=7793&rsv_sug3=24&rsv_sug1=16&bs=%E5%B2%B8%E6%9C%AC%E9%BD%90%E5%8F%B2">第557-652集</a><br/> 104 </div> 105 </td> 106 <td width="34%"> 107 <div align="left" id="Div3" class="menu" onMouseOver="keepstyle(this)" onMouseOut="hidediv(this)"> 108 <a href="http://ac.qq.com/Comic/ComicInfo/id/505432">第1话-20话</a><br/> 109 <a href="http://ac.qq.com/Comic/ComicInfo/id/505432">第691话-外传第10话</a><br/> 110 </div> 111 </td> 112 </tr> 113 </table> 114 </body> 115 </html>