学习HTML语言(三)

社区服务
高级搜索
猴岛论坛电脑百科学习HTML语言(三)
发帖 回复
正序阅读 最近浏览的帖子最近浏览的版块
1个回复

学习HTML语言(三)

楼层直达
happynight

ZxID:2495802

等级: 元老
潜水王(传说中的小斌)

举报 只看楼主 使用道具 楼主   发表于: 2009-02-12 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>
  • 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 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>

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

<ol><li type=A>ONE-ONE
<li>ONE-TWO</ol>
    ONE-ONE
  1. ONE-TWO
  

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


    ONE-ONE
  1. ONE-TWO

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


    ONE-ONE
  1. ONE-TWO

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


    ONE-ONE
  1. ONE-TWO

<ol><li type=1>ONE-ONE
<li>ONE-TWO</ol>


    ONE-ONE
  1. 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
  1. ONE-TWO [list=1]
  2. TWO-ONE
  3. 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>

闪烁!闪烁!
[ 此帖被happynight在2009-07-24 14:00重新编辑 ]
想当007么,点下图加入吧。
清芷泫音

ZxID:200124

等级: 元老
配偶: 展昭

举报 只看该作者 沙发   发表于: 2009-02-12 0
图片看不到都是X。。。用本地上传把

楼主留言:

明天我就换。。

« 返回列表
发帖 回复