div / span 的不同

每一个 html 元素都有一个默认显示的值,这个值取决于这个元素的类型.
对于大多数元素来说,这个默认显示的值就是块(block)或者行内元素(inline)

<div> 是一个块元素(block-level element), Defines a section in a document (block-level)

块元素通常从一个新行开始,而且尽可能地占据全部的页面宽度(撑满页面的左右两侧)
常常用来做为其他元素的容器(container);没有特别的属性 但是可以用
styleclass 定义属性。当和CSS一起使用的时候,

可以用来装饰块内的内容

<span> 是一个行内元素(inline element), Defines a section in a document (inline)

行内元素不会从一个新行开始,只是占据这个元素需要的页面宽度就可以了。
通常作为一些文字(text)的容器,没有特别的属性,可以通过styleclass来定义属性。当和CSS一起使用的时候,可以用来装饰文本。

class 与 id 的不同

class 属性可以对具有相同class名字的元素,定义相同的装饰风格
class 可以用来装饰块元素 (block elements)

class 还可以装饰行内元素 (inline elements)

id 属性可以为一个HTML元素,定义了一个只属于这个元素的唯一的属性,在整个HTML文件中,这个id的属性必须是唯一的。通过HTML DOM,JavaScript可以用这个唯一的id,去操作这些元素.

p 与 br 的不同

<p></p> 定义一个段落(paragraph)

<br>元素定义了一条分隔线。不用另起一个新的段落,而是在当前的段落里分行
<br>是一个空标签(empty tag),没有结尾的标签

<html>

<p>In HTML, spaces and new lines are ignored:</p>

<h2>Paragraph without "br"</h2>

<p>

My Bonnie lies over the ocean. 

My Bonnie lies over the sea.

My Bonnie lies over the ocean. 

Oh, bring back my Bonnie to me.
  
</p>

<h2> Paragraph with "br" at the end of lines </h2>
<p>

My Bonnie lies over the ocean.<br>

My Bonnie lies over the sea. <br>

My Bonnie lies over the ocean.<br>

Oh, bring back my Bonnie to me.<br>
  
</p>

<h2> Paragraph with "br" in the front of lines </h2>

<p>

<br>My Bonnie lies over the ocean. 

<br>My Bonnie lies over the sea. 

<br>My Bonnie lies over the ocean. 

<br>Oh, bring back my Bonnie to me.

</p>
</html>   

结果如下

如何使用 table 排版

<html>

<table>
    <tr>                                   # each row 
    <th>Tabel Header 1 </th>             # each heading 默认加粗和居中
    <th>Table Header 2 </th>
    ...
    <th>Table Header N </th>
  </tr>   
  <tr>
    <td> Content 1 </td>
    <td> Content 2 </td>
    ...
    <td> Content N </td>
  </tr>
</table>

</html>