字体(FONT)标记(TAGS)
标题字体(Header)
<h#> ... </h#> #=1, 2, 3, 4, 5, 6
<h1>今天天气真好!</h1> 今天天气真好!
<h2>今天天气真好!</h2> 今天天气真好!
<h3>今天天气真好!</h3> 今天天气真好!
<h4>今天天气真好!</h4> 今天天气真好!
<h5>今天天气真好!</h5> 今天天气真好!
<h6>今天天气真好!</h6> 今天天气真好!
- <hn>---</hn> 这些标记显示黑体字。
- <hn>---</hn> 这些标记自动插入一个空行,不必用 <p> 标记再加空行。
因此在一行中无法使用不同大小的字体。
字体大小
<font size=#> ... </font> #=1, 2, 3, 4, 5, 6, 7 or +#, -# <basefont size=#> #=1, 2, 3, 4, 5, 6, 7
<font size=7>今天天气真好!</font> 今天天气真好!
<font size=6>今天天气真好!</font> 今天天气真好!
<font size=5>今天天气真好!</font> 今天天气真好!
<font size=4>今天天气真好!</font> 今天天气真好!
<font size=3>今天天气真好!</font> 今天天气真好!
<font size=2>今天天气真好!</font> 今天天气真好!
<font size=1>今天天气真好!</font> 今天天气真好!
物理字体(Physical Style)
<b>今天天气真好!</b> 今天天气真好!
<i>今天天气真好!</i> 今天天气真好!
<u>今天天气真好!</u> 今天天气真好!
<tt>今天天气真好!</tt> 今天天气真好!
<sup>今天天气真好!</sup> 今天天气真好!
<sub>今天天气真好!</sub> 今天天气真好!
<s>今天天气真好!</s> 今天天气真好!
<strike>今天天气真好!</strike> 今天天气真好!
逻辑字体(Logical Style)
<em>今天天气真好!</em> 今天天气真好!
<strong>今天天气真好!</strong> 今天天气真好!
<code>今天天气真好!</code> 今天天气真好!
<samp>今天天气真好!</samp> 今天天气真好!
<kbd>今天天气真好!</kbd> 今天天气真好!
<var>今天天气真好!</var> 今天天气真好!
<dfn>今天天气真好!</dfn> 今天天气真好!
<cite>今天天气真好!</cite> 今天天气真好!
<small>今天天气真好!</small> 今天天气真好!
<big>今天天气真好!</big> 今天天气真好!
指定“字体大小”的标记和“指定字体”的标记的组合使用<i><font size=5> <b>今天</b> 天气<font size=6> 真好!</font> </font></i>
今天 天气 真好!
字体颜色
指定颜色 <font color=#> ... </font>
#=rrggbb 16 进制数码,或者是下列预定义色彩: Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
<font color=ffffff>White</font> & <font color=white>White</font> & White
客户端字体(Font Face)
<font face="#, #, ..., #"> ... </font> #=客户端可获得的字体
<font face="Arial, Helvetica"> Hellow World!</font>
Hellow World!
客户端字体(Font Face)示例
字符实体(Entities)
&#; #=字符实体名称 或者 ascii 值
HTML2.0 的字符集& & < < > > " "
[返回]
文字布局标记
---------------------------------------------------
行的控制
段(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>
有序列表 <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 is yesterday.
Tomorrow
Tomorrow is today.
Definition lists Compact <dl compact><dt>...<dd>...</dl>
Today Today will be yesterday. Next Tomorrow will be today.
Today
Today is yesterday.
Tomorrow
Tomorrow is today.
定制列表元素
定制表中的标记 <li type=#> #=disk, circle, square <ul> <li type=disc>ONE <li type=circle>TWO <li type=square>THREE </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>
- 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.
<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>
|
|
|
|
|
|