当前位置：首页 > 编程日记 > 正文

HTML4.0标准语法--文字布局

编程日记 2024-11-23 11:30:00

◇行的控制

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

<center>Hello</center>

Hello

◇ 文字的分区(Division)显示

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

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
1. TWO-ONE
2. TWO-TWO

◇ 预格式化文本(Preformatted Text)

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

https://www.dkcj.cn/info/28759.html

◇行的控制

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

不换行<nobr>

◇ 文字的对齐(Alignment)

Hello

Hello

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

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

◇ 列表

◇ 定制列表元素

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

<listing>...</listing>

<xmp>...</xmp>

◇ 空白(Spacer)

◇ 多列文本

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

◇ 其它

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

相关文章：