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

上一篇 / 下一篇  2007-01-26 20:23:19 / 个人分类:HTML/CSS

+ 行的控制

z~?"@qJ']0

q/@Xq#Wf*U$EW0

段(Paragraph) (可以看作是空行) <p>

你好吗?<p>很好。

9q}ID }1dM*jt0你好吗?

n2q0v4hVSB9Z0

/\T yX%_2S0很好。SupeSite/X-Space官方站/Y'_ d EHf


HgJq%X0h6Y!cpg0SupeSite/X-Space官方站 ~Q#W(A.}L gg

换行 <br>

你好吗?<br>很好。

usX D(Ju/XF ]a}0你好吗?
g"Wi'h7_3Mb ?"ir0很好。

h9?-g!_$[ewJ0

nt niU6l._0

_y_?L9n${ PN-w U/o0

不换行<nobr>

<nobr>
C:C2B(Y7i0请改变您浏览器窗口的宽度, 使之小于这一行的宽度, 看看这个标记的作用!SupeSite/X-Space官方站D{hI V P0?.E
</nobr>

,~6};yW`Sk0请改变您浏览器窗口的宽度,使之小于这一行的宽度,看看这个标记的作用! SupeSite/X-Space官方站'x/[GzV/V5V


SupeSite/X-Space官方站MY5Ey%Hf!t

SupeSite/X-Space官方站 v^k-g;p tsy

+ 文字的对齐(Alignment)

SupeSite/X-Space官方站sY4N2n$Jr2]1v

SupeSite/X-Space官方站GG,@x:E$^.Hmn

<hn align=#>...</hn>
s^,RMwV0<p align=#>...</p> #=left, center, right

<h3 align=center>Hello<\h3>
*q}W:s+pb5D%~u0s(g'_0<h3 align=right>Hello<\h3>

Hello

Hello

SupeSite/X-Space官方站#~qEPI!DJ

wn [A }0

<center>...</center>

<center>Hello</center>
SupeSite/X-Space官方站 y YS%rXd#}

Hello SupeSite/X-Space官方站!Ul:p8T](@


SupeSite/X-Space官方站	u+Ukkd#D-wU#B:j:K

C}\1_#LP0

+ 文字的分区(Division)显示

SupeSite/X-Space官方站Nk~8tplx }

SupeSite/X-Space官方站a"l&_)GkX)Y(]s

<div align=left> ... </div>

<div align=left>
?8q+z5m1b*mM4LNE0Can you feel happiness without unpleasant? <br>SupeSite/X-Space官方站B5e@d}l-X
Please show me your smile.
yFmxY"F{'t8nR0</div>

f#^3~J"GZy|0

y u&Ac!I+e0k%`0

RU#?KK;b R?1j0Can you feel happiness without unpleasant?
T(UL? J-Y Z)i0Please show me your smile. SupeSite/X-Space官方站_t2O D#K7Kf-?PD

<div align=center> ... </div>

qy'M2V0fX|!Ptz$Y0Can you feel happiness without unpleasant?
MDnB-ST#y g$D8o0Please show me your smile.

m*p,aWv fu0

<div align=right> ... </div>

SupeSite/X-Space官方站%E,sCaa5lw#[

Can you feel happiness without unpleasant?
? P+e8u0N M0Please show me your smile. SupeSite/X-Space官方站|:o,p*\3ANi C


SupeSite/X-Space官方站&e2eQ9}$j}:p9l3b

SupeSite/X-Space官方站R#[&N6G(epx.]8W

+ 列表

SupeSite/X-Space官方站t.BF%e\2q

SupeSite/X-Space官方站2zV4[u3Hy*|PLl

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

<ul>
;r+_G9u B d0<li>TodaySupeSite/X-Space官方站U(bpF+\ B7V
<li>TommorowSupeSite/X-Space官方站KN T/`7t
</ul>
  • Today
  • Tommorow
SupeSite/X-Space官方站$b+H`;|;C'wW,P|

SupeSite/X-Space官方站K+O2B2H U

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

<ol>SupeSite/X-Space官方站!T l3kHC
<li>TodaySupeSite/X-Space官方站"zg N]&J0Jab
<li>Tommorow
]%n*Pws0u)Ky ?0</ol>
  1. Today
  2. Tommorow
SupeSite/X-Space官方站 |x6BCj`oB+S

:VsX9@QP0

定义列表(Definition lists) <dl><dt>...<dd>...</dl>

<dl>
3}F#q3h3PhJ0<dt>TodaySupeSite/X-Space官方站&\z6U&X8b heNB
<dd>Today is yesterday.
+q1F;jtp9dG0<dt>Tomorrow
*XiOb0K*[6G0<dd>Tomorrow is today.
-L3c4EI!_2u5v4y3y0</dl>
Today
Today will be yesterday.
Tomorrow
Tomorrow will be today.

&Xal nEP0LGrO0SupeSite/X-Space官方站3}u7N*d:kT_o)p

Definition lists Compact <dl compact><dt>...<dd>...</dl>

Today
Today will be yesterday.
Next
Tomorrow will be today.
<dl compact>
9ax[b;m eQ"_I+j.t0<dt>TodaySupeSite/X-Space官方站{,k)Iz&NJ:m
<dd>Today is yesterday.
%wm*[ DlD u0<dt>TomorrowSupeSite/X-Space官方站9BpH wfM^}
<dd>Tomorrow is today.
p(dh L6nt0P0</dl>

6Z#^D]u6E.LXg0SupeSite/X-Space官方站)w i Idgqg1F

+ 定制列表元素

7m|GL,X Q8HB5M~0SupeSite/X-Space官方站 N f k }/E [+vD

定制表中的标记 <li type=#> #=disk, circle, square

<ul>SupeSite/X-Space官方站9}\av Pc5z
<li type=disc>ONESupeSite/X-Space官方站|Y'^(lV5_@
<li type=circle>TWOSupeSite/X-Space官方站T tI4N[:d4tV
<li type=square>THREESupeSite/X-Space官方站z`3?R&Ta/K
</ul>
  • ONE
  • TWO
  • THREE

zKO:r7UfA!hP.M0SupeSite/X-Space官方站{5g`\.IMC

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

<ol><li type=A>ONE-ONESupeSite/X-Space官方站2R(sS:~ _m$Yl
<li>ONE-TWO</ol>
  1. ONE-ONE
  2. ONE-TWO
<ol><li type=a>ONE-ONE
1C8r/I6~ ` e+d Q0<li>ONE-TWO</ol>
  1. ONE-ONE
  2. ONE-TWO
<ol><li type=I>ONE-ONE
F%Y/Z3I@_7R!zc2?.I0<li>ONE-TWO</ol>
  1. ONE-ONE
  2. ONE-TWO
<ol><li type=i>ONE-ONE
&`,Sh.X `$|7i0<li>ONE-TWO</ol>
  1. ONE-ONE
  2. ONE-TWO
<ol><li type=1>ONE-ONESupeSite/X-Space官方站1_+Bk(l#`
<li>ONE-TWO</ol>
  1. ONE-ONE
  2. ONE-TWO

R'{jhE0N0

U(W|~2Y3q?]&N0

定制有序列表表中的序号的起始值 <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>

    ,p;df v&~ m ].G)d0SupeSite/X-Space官方站lRDGB!?L0W
    SupeSite/X-Space官方站;~U:s.y6n {V&\5C3H

  1. ONE-ONE
  2. ONE-TWO
    1. TWO-ONE
    2. TWO-TWO

J J l/~c~U0SupeSite/X-Space官方站,V7UlA Z&oi

+ 预格式化文本(Preformatted Text)

e$?&n}3G;e,En} F0SupeSite/X-Space官方站fn2V\]mO

<pre>...</pre>

<pre>SupeSite/X-Space官方站$l/X"a4l*D,n)W*pE
Please use your card.SupeSite/X-Space官方站(ym$W+uv i
VISA MasterSupeSite/X-Space官方站.uuxc'a7?&U
<b>Here is an order form.</b>
aUi(S"B IU0<ul><li>Fax
u q Nt'x:x0<li>Air Mail</ul>SupeSite/X-Space官方站'e4Tw"V"iO$k
</pre>
Please use your card
VISA    Master
Here is an order form.
  • Fax
  • Air Mail

$n _;Q.p;D M0

MW_9}1ev m:j#m.}p0

<listing>...</listing>

<listing>
cg.S0Q|M0Please use your card.
-C]0XU*a o8]N0VISA Master
*g%e|HzV0<b>Here is an order form.</b>SupeSite/X-Space官方站co"aB"}i's1e(t7y
<ul><li>FaxSupeSite/X-Space官方站#f2K^ y&\
<li>Air Mail</ul>SupeSite/X-Space官方站?F1P M2o^ ]x
</listing>
Please use your card.
VISA    Master
Here is order form.
  • Fax
  • Air Mail

bsf J'W3XX"h0SupeSite/X-Space官方站5Tu s|7T

<xmp>...</xmp>

<xmp>
*i"[IM9KR0Please use your card.
pw({%V!W0VISA Master
%m7F%?0r+TZ2U0<b>Here is an order form.</b>
XJ1y[Ct6zv j0<ul><li>FaxSupeSite/X-Space官方站Mw-Q&O$U
<li>Air Mail</ul>
ml(Y6ot(A0</xmp>
Please use your card.
VISA    Master
<b>Here is order form.</b>
<ul><li>Fax
<li>Air Mail</ul>




SupeSite/X-Space官方站%a!O!jF`7Pp.M

SupeSite/X-Space官方站 Zp8R w(@L

+ 空白(Spacer)

SupeSite/X-Space官方站)Tv8MS9~

SupeSite/X-Space官方站8s)_2]/lHF/@

<spacer type="horizontal" size=#> #=水平空白宽度
5c9~t4m*W v0<spacer type="vertical" size=#> #=竖直空白高度

YESTERDAY <spacer type="horizontal" size=50> TODAY
f I R7_9R0<spacer type="vertical" size=50> TOMORROW

L%G w ]8zp#?0YESTERDAY TODAY TOMORROW

?#s5I"w1jQ(s0 SupeSite/X-Space官方站$l }"j H6| v

H|q)^ T+{-p0

<spacer type="block" width=# height=# align=##>
pVY g TRv0#=空白的尺寸SupeSite/X-Space官方站.kaS"j3X8@$m/y?
##=top, middle, bottom, left, right

<spacer type="block" width=150 height=50 align=left>
JTMX[1hv#V0YESTERDAY<br> TODAY<br> TOMORROW

j3v3X{o]`@m!Mm0YESTERDAY
i{"AvA/{0TODAY
.m%EZ;ov|q9H.k0TOMORROW

E$Q5~n#C6h4W0

"h J-rk&|n:l0

Q L)~5Qa#V(w+}.M0

+ 多列文本

W(ck@,L0

tpFX#LXd0

<multicol cols=#> ... </multicol> #=列的数目

<multicol cols=2> text text text... </multicol> SupeSite/X-Space官方站7PY$y oM.jRb
例子
SupeSite/X-Space官方站;Ri6H]3_dp0D

`? wfO8P.gm0

<multicol gutter=#> ... </multicol> #=列间的空白

<multicol cols=2 gutter=100> text text text... </multicol> SupeSite/X-Space官方站#OD2sV6n8@"x s5i
例子
SupeSite/X-Space官方站+CD6H3{6K:b

SupeSite/X-Space官方站 q| T|%w2m'F

<multicol width=#> ... </multicol> #=列的宽度

<multicol cols=2 width=400> text text text... </multicol> SupeSite/X-Space官方站 z#`},R0aeH;C~jh
例子

SupeSite/X-Space官方站w-rye1w5nxX

SupeSite/X-Space官方站2e!B\6jT RH\

+ 其它

C{i6Dq3F0

)R*MD4Cs+X0

块引用(Blockquote) <blockquote>...</blockquote>

Her Song:
7Sd!kZ g'TpL0<blockquote>
t%prkc*AT;l(\0When I was young, I listened to the radio
-X,IWiN7P0waiting for my favorite songs....SupeSite/X-Space官方站FW'}(}RH
</blockquote>

~z+hxAfBJO"U,y!y0Her Song: SupeSite/X-Space官方站Kt yZ[u

SupeSite/X-Space官方站j6?~7P:W~@Q5Q9N7U

When I was young, I listened to the radio waiting for my favorite songs.... SupeSite/X-Space官方站]%W]-`8k

SupeSite/X-Space官方站%qJ9t0Hgqd

i.z5QY | n+g A0

闪烁 <blink>...</blink>

<BLINK> 闪烁!闪烁! </BLINK>
SupeSite/X-Space官方站yL"sY5].PFI

闪烁!闪烁!

'S7T qcwKU@A'I+J0

TAG: 文字 布局 TEXT STYLE 标记 TAGS Paragraph Alignment Division 列表 Preformatted 预格式化 空白 Spacer

 

评分:0

我来说两句

显示全部

:loveliness: :handshake :victory: :funk: :time: :kiss: :call: :hug: :lol :'( :Q :L ;P :$ :P :o :@ :D :( :)

数据统计

  • 访问量: 317
  • 日志数: 3
  • 建立时间: 2006-04-28
  • 更新时间: 2007-01-26

RSS订阅

Open Toolbar