HTML語言教程之三:文字佈局(TEXT STYLE)標記
行的控制
段(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>
HelloHello
<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 [/li]Tommorow [/li][/ul]有序列表 <ol><li>...</ol>
<ol>
<li>Today
<li>Tommorow
</ol>
Today [/li]Tommorow [/li][/ol]定義列表(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 [/li][/ul]TWO [/li][/ul]THREE [/li][/ul]定製有序列表表中的序號 <li type=#> #=A, a, I, i, 1
<ol><li type=A>ONE-ONE
<li>ONE-TWO</ol>
A. ONE-ONE
B. ONE-TWO
<ol><li type=a>ONE-ONE
<li>ONE-TWO</ol>
a. ONE-ONE
b. ONE-TWO
<ol><li type=I>ONE-ONE
<li>ONE-TWO</ol>
I. ONE-ONE
II. ONE-TWO
<ol><li type=i>ONE-ONE
<li>ONE-TWO</ol>
i. ONE-ONE
ii. ONE-TWO
<ol><li type=1>ONE-ONE
<li>ONE-TWO</ol>
1. ONE-ONE
2. 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 [/li]ONE-TWO [/li]TWO-ONE [/li][/ol][/ol]TWO-TWO [/li][/ol][/ol]預格式化文本(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 [/li]Air Mail [/li][/ul]<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 [/li]Air Mail [/li][/ul]<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>
閃爍!閃爍!