清华大学图书馆主页 - INTERNET 教室 - HTML 语言教程

# 文字布局(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

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

1. Today
2. 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>`

1. ONE-ONE
2. ONE-TWO

  `<ol><li type=a>ONE-ONE
  <li>ONE-TWO</ol>`

1. ONE-ONE
2. ONE-TWO

  `<ol><li type=I>ONE-ONE
  <li>ONE-TWO</ol>`

1. ONE-ONE
2. ONE-TWO

  `<ol><li type=i>ONE-ONE
  <li>ONE-TWO</ol>`

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

5. ONE-ONE
6. ONE-TWO

10. TWO-ONE
11. 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>`

闪烁！闪烁！

HTML Design Guide Main Page
Contents || Page || Font || Text Style || Image || Form || Table || Table Advanced
|| Frames || Marquee || Alternative Inline Elements
Tag Index || What's New

Network Communication Design
http://www.newasp.net/
C&P 1994-2006 Xin Yun newasp.net@gmail.com