点滴seraph

文字布局(TEXT STYLE)标记(TAGS)


--------------------------------------------------------------------------------



行的控制

段(Paragraph) (可以看作是空行) <p>
你好吗？<p>很好。
你好吗？


很好。



换行 <br>
你好吗？<br>很好。
你好吗？
很好。



不换行<nobr>
<nobr>
请改变您浏览器窗口的宽度， 使之小于这一行的宽度， 看看这个标记的作用！
</nobr>
请改变您浏览器窗口的宽度，使之小于这一行的宽度，看看这个标记的作用！



文字的对齐(Alignment)

<hn align=#>...</hn>
<p align=#>...</p> #=left, center, right
<h3 align=center>Hello<\h3>
<h3 align=right>Hello<\h3>
Hello
Hello

<center>...</center>
<center>Hello</center>
Hello



文字的分区(Division)显示

<div align=left> ... </div>
<div align=left>
Can you feel happiness without unpleasant? <br>
Please show me your smile.
</div>

Can you feel happiness without unpleasant?
Please show me your smile.

<div align=center> ... </div>
Can you feel happiness without unpleasant?
Please show me your smile.

<div align=right> ... </div>
Can you feel happiness without unpleasant?
Please show me your smile.



列表

无序列表 <ul><li>...</ul>
<ul>
<li>Today
<li>Tommorow
</ul>
Today
Tommorow

有序列表 <ol><li>...</ol>
<ol>
<li>Today
<li>Tommorow
</ol>
Today
Tommorow

定义列表(Definition lists) <dl><dt>...<dd>...</dl>
<dl>
<dt>Today
<dd>Today is yesterday.
<dt>Tomorrow
<dd>Tomorrow is today.
</dl>
Today
Today will be yesterday.
Tomorrow
Tomorrow will be today.

Definition lists Compact <dl compact><dt>...<dd>...</dl>
Today
Today will be yesterday.
Next
Tomorrow will be today. <dl compact>
<dt>Today
<dd>Today is yesterday.
<dt>Tomorrow
<dd>Tomorrow is today.
</dl>



定制列表元素

定制表中的标记 <li type=#> #=disk, circle, square
<ul>
<li type=disc>ONE
<li type=circle>TWO
<li type=square>THREE
</ul>
ONE
TWO
THREE

定制有序列表表中的序号 <li type=#> #=A, a, I, i, 1
<ol><li type=A>ONE-ONE
<li>ONE-TWO</ol>
ONE-ONE
ONE-TWO
<ol><li type=a>ONE-ONE
<li>ONE-TWO</ol>
ONE-ONE
ONE-TWO
<ol><li type=I>ONE-ONE
<li>ONE-TWO</ol>
ONE-ONE
ONE-TWO
<ol><li type=i>ONE-ONE
<li>ONE-TWO</ol>
ONE-ONE
ONE-TWO
<ol><li type=1>ONE-ONE
<li>ONE-TWO</ol>
ONE-ONE
ONE-TWO

定制有序列表表中的序号的起始值 <ol start=#> #=number
<ol start=5>
<li type=A>ONE-ONE
<li>ONE-TWO
<ol start=10>
<li>TWO-ONE
<li type=i>TWO-TWO
</ol></ol>




ONE-ONE
ONE-TWO
TWO-ONE
TWO-TWO


预格式化文本(Preformatted Text)

<pre>...</pre>
<pre>
Please use your card.
VISA Master
<b>Here is an order form.</b>
<ul><li>Fax
<li>Air Mail</ul>
</pre>
Please use your card
VISA Master
Here is an order form.

Fax
Air Mail

<listing>...</listing>
<listing>
Please use your card.
VISA Master
<b>Here is an order form.</b>
<ul><li>Fax
<li>Air Mail</ul>
</listing>
Please use your card.
VISA Master
Here is order form.

Fax
Air Mail

<xmp>...</xmp>
<xmp>
Please use your card.
VISA Master
<b>Here is an order form.</b>
<ul><li>Fax
<li>Air Mail</ul>
</xmp>
Please use your card.
VISA Master
<b>Here is order form.</b>
<ul><li>Fax
<li>Air Mail</ul>






空白(Spacer)

<spacer type="horizontal" size=#> #=水平空白宽度
<spacer type="vertical" size=#> #=竖直空白高度
YESTERDAY <spacer type="horizontal" size=50> TODAY
<spacer type="vertical" size=50> TOMORROW
YESTERDAY TODAY TOMORROW


<spacer type="block" width=# height=# align=##>
#=空白的尺寸
##=top, middle, bottom, left, right
<spacer type="block" width=150 height=50 align=left>
YESTERDAY<br> TODAY<br> TOMORROW
YESTERDAY
TODAY
TOMORROW



多列文本

<multicol cols=#> ... </multicol> #=列的数目
<multicol cols=2> text text text... </multicol>
例子

<multicol gutter=#> ... </multicol> #=列间的空白
<multicol cols=2 gutter=100> text text text... </multicol>
例子

<multicol width=#> ... </multicol> #=列的宽度
<multicol cols=2 width=400> text text text... </multicol>
例子


其它

块引用(Blockquote) <blockquote>...</blockquote>
Her Song:
<blockquote>
When I was young, I listened to the radio
waiting for my favorite songs....
</blockquote>
Her Song:

When I was young, I listened to the radio waiting for my favorite songs....


闪烁 <blink>...</blink>
<BLINK> 闪烁！闪烁！ </BLINK>
闪烁！闪烁！
图象(IMAGE)标记(TAGS)


--------------------------------------------------------------------------------



链入图象的基本语法

<img src=#> #=图象的 URL

<img alt=#>
#=在浏览器尚未完全读入图象时，在图象位置显示的文字。
<img src="f.gif" alt="MY FACE :-)">




图象和文字的对齐
<img align=#> #=top, middle, bottom
<img src=URL align=top> My face!
My Face!

<img src=URL align=middle> My face!
My Face!

<img src=URL align=bottom> My face!
My Face!

只有一行文字才可以放在图象的两边。（不知道翻译的对不对？)
Only one text line can be flown into the both side of Image.


图象在页面中的对齐/布局(Floating Image)

<img align=left>
<img src=URL align=left>My Face!<br>
It is always<br>
smiling.<br>
Hahaha....<br>

My Face!
It is always
smiling.
Hahaha....





<img align=right>
My Face!
It is always
smiling.
Hahaha....





<br clear=all>
<img src=URL align=left>My Face!<br>
It is always
<br clear=all>
smiling.<br>
Hahaha....<br>

My Face!
It is always

smiling.
Hahaha....




<img vspace=# hspace=#> #=value
<img src=URL align=left vspace=10 hspace=20>My Face!<br>
It is always<br>
smiling.<br>
Hahaha....<br>

My Face!
It is always
smiling.
Hahaha....





边框

<img border=#> #=value
<a href="URL">
<img src=URL border=15>
</a>




客户端图象映射图(Client Side Image Map)