首页 > Wordpress > 博客里面会用到的html笔记

博客里面会用到的html笔记

2012年8月6日 发表评论 阅读评论

横线:<hr />


框起来

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

aa

跳转到本页的某一位置

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

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

例如:跳到双线框处


实线框

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

TODO
TODO

背景颜色:

<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>
Month Savings
January $100


双线框

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

TODO

上划线
<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>

展开
TODO

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

here~

横虚线
<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>

[ 555 77 854 ]
555 77 855
555 77 855
555 77 855

矩阵表示

<div style="border-left: 2px solid black;">
<table style="border-right: 2px solid black;" border="0">
<tbody>
<tr>
<td>a<sub>11</sub></td>
<td>a<sub>12</sub></td>
<td>...</td>
<td>a<sub>1m</sub></td>
</tr>
<tr>
<td>a<sub>21</sub></td>
<td>a<sub>22</sub></td>
<td>...</td>
<td>a<sub>2m</sub></td>
</tr>
<tr><th colspan="4" align="middle">┇</th></tr>
<tr>
<td>a<sub>N1</sub></td>
<td>a<sub>N2</sub></td>
<td>...</td>
<td>a<sub>Nm</sub></td>
</tr>
</tbody>
</table>
</div>

a11 a12 ... a1m
a21 a22 ... a2m
aN1 aN2 ... aNm

灰色小框

<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>

TODO1
TODO2

列表

<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>

TODO1.............................
TODO2.............................

字体
<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>

TODO1.............................
TODO2.............................

TODO3.............................
TODO3.............................

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

<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>

文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...文字...

分类: Wordpress 标签: ,
  • 用《a name="X"》Y《/a》来标记锚点似乎不符合HTML5,而且有个缺点就是Y被标记成超链接了,会套用a的css。其实锚点也可以这样标记:《span id="X"》Y《/span》

    • 请务必不要在意这一篇。。。这篇东西是我以前第一次接触html写东西的时候写的。。。现在都基本想删了他了。。。