HTML小白初步学习教程8-职坐标

HTML小白初步学习教程8

沉沙 2018-10-25 来源：阅读 1258 评论 0

摘要：本篇教程探讨了HTML小白初步学习教程8，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

本篇教程探讨了HTML小白初步学习教程8，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

今天的重头是<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}

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&nbsp the&nbsp 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   
  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="//baike.baidu.com/link?url=K42ca815BWGJ9Y6S7xCj6KJXR9SDbmV_8FGkohIQRAAb8cKTtZWMtKbv9oj4i4cYfR9jzBj1eCWxVGQWIHqA2a">作者</a><br/>
97       <a href="//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="//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="//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="//ac.qq.com/Comic/ComicInfo/id/505432">第1话-20话</a><br/>
109       <a href="//ac.qq.com/Comic/ComicInfo/id/505432">第691话-外传第10话</a><br/>
110      </div>
111     </td>
112    </tr>
113   </table>
114  </body>
115 </html>