横线：<hr />

框起来：

<div>
<table border=”1″ cellspacing=”8″>
<tbody>
<tr><td>aa</td></tr>
</tbody>
</table>
</div>
<span style=”color: #ff00ff;”>
</span>

跳转到本页的某一位置：

在该位置处添加标记：<a name=”XXXXX”></a>

然后链接为：<a href=”#XXXXX”>”链接描述文字”</a>

例如：跳到双线框处！

实线框：

<div style=”border-width: 1px; border-color: #ff0000; border-style: solid;”>TODO
TODO</div>

背景颜色:

<pre style=”background-color: #c3d9ff;”>背景为蓝色</pre>

背景为蓝色

表格：

每个表格由 table 标签开始。

每个表格行由 tr 标签开始。

每个表格数据由 td 标签开始。th表示粗体

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

双线框：

<div style=”border: green 5px double;”>TODO</div>

上划线：
<span style=”text-decoration: overline;”>Overline</span>
Overline

下划线：
<span style=”text-decoration: underline;”>Underline</span>
Underline

中划线：
<span style=”text-decoration: line-through;”>Line-through</span>
Line-through

折叠展开效果(blog.com暂时不支持此功能)：

<table width=”200″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tbody>
<tr>
<td id=”showbfq” onclick=”if(bfq.style.display==’none’){bfq.style.display=”;showbfq.innerText=’折叠’;}else{bfq.style.display=’none’;showbfq.innerText=’展开’;}” align=”center” bgcolor=”#CCCC66″ height=”20″>展开</td>
</tr>
<tr>
<td id=”bfq” style=”display: none;” align=”center” bgcolor=”#CCCCCC” height=”80″>TODO</td>
</tr>
</tbody>
</table>

竖线：
<div style=”border-left:1px solid red”>here~</div>

横虚线：
<span style=”border-top: 1px dashed red;”>aaaaaaaaaaaaaaaaaaaaaaa</span>
aaaaaaaaaaaaaaaaaaaaaaa

空格:
<span style=”border-top: 1px solid red;”>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
     

横跨表格：

<table border=”0″>
<tbody>
<tr>
<th rowspan=”4″>[</th>
<td>555 77 854</td>
<th rowspan=”4″>]</th>
</tr>
<tr><td>555 77 855</td></tr>
<tr><td>555 77 855</td></tr>
<tr><td>555 77 855</td></tr>
</tbody>
</table>

矩阵表示：

<div style=”border-left: 2px solid black;”>
<table style=”border-right: 2px solid black;” border=”0″>
<tbody>
<tr>
<td>a₁₁</td>
<td>a₁₂</td>
<td>…</td>
<td>a_1m</td>
</tr>
<tr>
<td>a₂₁</td>
<td>a₂₂</td>
<td>…</td>
<td>a_2m</td>
</tr>
<tr><th colspan=”4″ align=”middle”>┇</th></tr>
<tr>
<td>a_N1</td>
<td>a_N2</td>
<td>…</td>
<td>a_Nm</td>
</tr>
</tbody>
</table>
</div>

灰色小框：

<span style=”white-space: nowrap; border: 1.0px solid #eaeaea; background-color: #f8f8f8; display: inline; margin: 1.0em 0.15em; padding: 0.0px 0.3em; font-size: 1.0em; font-family: Consolas , Inconsolata , Courier , monospace;”>TODO</span>
TODO

占整行的灰色框：

<div style=”margin: 1.0em 0.0px; font-size: 1.0em; font-family: Consolas , Inconsolata , Courier , monospace; line-height: 1.2em; overflow: auto;”>
<div style=”border: 1.0px solid #cccccc; background-color: #f8f8f8; padding: 0.5em 0.7em; margin: 1.0em 0.15em; font-size: 1.0em; font-family: Consolas , Inconsolata , Courier , monospace;”>TODO1
TODO2</div>
</div>

列表：

<div style=”border-left-width: 4.0px; border-left-style: solid; border-left-color: #dddddd; color: #777777; padding: 0.0px 1.0em; margin: 1.0em 0.0px;”>

TODO1………………………..
TODO2………………………..

</div>

字体：
<span style=”font-size: 2.3em; font-weight: bold; color: #000000; position: relative; margin: 1.3em 0.0px 1.0em; display: block;”>大字体</span>
大字体

文字下面紧挨着一条线：

<div style=”font-weight: bold; color: #000000; position: relative; margin: 1.3em 0.0px 1.0em; font-size: 1.7em; border-bottom-width: 1.0px; border-bottom-style: solid; border-bottom-color: #cccccc; display: block;”>下面有条线</div>

多层嵌套:

<div style=”border-left-width: 4.0px; border-left-style: solid; border-left-color: #dddddd; color: #777777; padding: 0.0px 1.0em; margin: 1.0em 0.0px;”>TODO1……………………….. TODO2……………………….. <blockquote> <div style=”border-left-width: 4.0px; border-left-style: solid; border-left-color: #dddddd; color: #777777; padding: 0.0px 1.0em; margin: 1.0em 0.0px;”>TODO3……………………….. TODO3………………………..</div></blockquote> </div>

一个比较好看的醒目标题：

<h1 style=”border: #99cc00 10px double; background: #99cc00;”><span style=”font-size: xx-large;”>TODO</span></h1>

TODO

缩进引用：

<blockquote><span>Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat.</span></blockquote>

Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat.

图片上面写字：

<DIV>
<TABLE width=”100%” border=0>
<TBODY>
<TR>
<TD background=”background.jpg” height=500>
<P>文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…文字…</P></TD></TR></TBODY></TABLE></DIV>