前端之html

标签：

1、

<table width="75%" border="0" cellspacing="0" class="tableNormal" >
<td class="tableTitleL1" colspan="4">温湿度</td>

<tr>
<td width="25%" height="25" nowrap class="tableSingularLine">连接状态
<img src="warngif/statestop1.gif" id="connect" align="middle" alt="offline">
</td>
<td class="tableSingularLine" width="25%" nowrap><div align="center">
<span id=‘state1txt‘></span>
</div></td>
<td class="tableSingularLine" width="25%" nowrap>工作状态
<img src="warngif/statestop2.gif" id="workstat" align="middle" alt="bypass">
</td>
<td class="tableSingularLine" width="25%" nowrap><div align="center">
<span id=‘state2txt‘></span>
</div></td>
</tr>

</table>

上述height与width的多少决定了几个<tr>之间的分隔距离。因为100% 会对with、height进行平分。

当想让其中一行独自占大，则可以让其width、heigth指定变大，而其它几行，会自动平均分配剩余的空间。

<td> </td>之间的内容位置可以有两种方式

   1）通过在<td algin="middle">指定其位置      <td width="25%" height="25" align="middle" nowrap  class="tableSingularLine">通讯地址（固定)</td>

   2）通过 <div align="center">
                 <span >通讯地址（固定)</span>

<td width="25%" height="25" nowrap class="tableSingularLine"><div align="center">
<span >通讯地址（固定)</span></td>

2、进行与行之间的间隔

   <p>&nbsp;</p>

 p 元素会自动在其前后创建一些空白。浏览器会自动填充这些空间，而添加&nbsp后，则一个空格独占一行

3、

<td class="tableSingularLine" width="25%" nowrap><div align="center">
<span id=‘state1txt‘></span>
</div></td>

<span> 与 <div>经常共用。

4、块元素与内联元素的区别

block（块）元素的特点：
①总是在新行上开始；
②高度，行高以及外边距和内边距都可控制；
③宽度缺省是它的容器的100%，除非设定一个宽度。
④它可以容纳内联元素和其他块元素

  inline元素的特点：
①和其他元素都在一行上；
②高，行高及外边距和内边距不可改变；
③宽度就是它的文字或图片的宽度，不可改变
④内联元素只能容纳文本或者其他内联元素

通过 display:block/inline 转化块元素与内联元素

     http://blog.csdn.net/sunlovefly2012/article/details/16859659

　　http://www.linuxfly.org/post/413/

前端之html

标签：

原文地址：http://www.cnblogs.com/hzijone/p/4397547.html