HTML教程

HTML文字布局

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

行的控制

　

<p>标记：段落(Paragraph) (可以看作是空行) 

你好吗？<p>很好。
你好吗？

很好。

换行 <br>

你好吗？<br>很好。
你好吗？
很好。

不换行<nobr>

<nobr> 
    请改变您浏览器窗口的宽度， 使之小于这一行的宽度， 看看这个标记的作用！
    </nobr>

请改变您浏览器窗口的宽度， 使之小于这一行的宽度， 看看这个标记的作用！

Align:文字的对齐(Alignment)

　

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

<p align=center>Hello</p>
      <p   align=right>Hello</p>

HeLLO WORLD

HeLLO WORLD

<center>...</center> 

<center>Hello</center>

Hello

DIV:文字的分区(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.

列表

　

无序列表 <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 is yesterday.
Tomorrow
Tomorrow is today.

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

Today
Today is yesterday.
Tomorrow
Tomorrow is 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>
  1. ONE-ONE
  2. ONE-TWO
    1. TWO-ONE
    2. 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 an order form.
  • Fax
  • Air Mail

<xmp>...</xmp>

使用此元素不被推荐。请换用 PRE 或 SAMP 元素。 XMP 元素内的 HTML 元素将渲染为文本，而不是 HTML 格式化后的元素。 此元素是内嵌元素。 此元素需要关闭标签。

<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) 多列文本(multicol)

　

<spacer type="horizontal" size=#> #=水平空白宽度
<spacer type="vertical" size=#> #=竖直空白高度
<spacer type="block" width=# height=# align=##>
#=空白的尺寸 ##=top, middle, bottom, left, right

<multicol cols=#> ... </multicol> #=列的数目
<multicol gutter=#> ... </multicol> #=列间的空白
<multicol width=#> ... </multicol> #=列的宽度

注意：空白(Spacer) 和 多列文本(multicol)只在Netscape中起作用。

块引用(Blockquote) 闪烁 <blink>

　

块引用(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>
闪烁！闪烁！

注意：IE不支持Blink标签，Firefox支持此Blink属性，请在firefox中查看效果。

HTML字体 HTML字体  HTML文字移动HTML文字移动 HTML文字移动