《HTML教程》05章文字布局

行的控制
段(Paragraph) <p>

WebPage<p>劝学网是一个很好的学习网。</p>

WebPage

劝学网是一个很好的学习网。

换行(break) <br>

WebPage<br>劝学网是一个很好的学习网。

WebPage
劝学网是一个很好的学习网。

不换行<nobr>

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

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

段和换行的区别:

换行 <br>相当于页面上的一个硬回车，本身不会改变文字布局的任何设置。（换行 <br clear="left/right/all">可以解除环绕功能，之外几乎没有什么其它功能）。
段<p>具有很丰富的功能，段内可以有换行 <br>

s05_01.htm

文字的对齐(Alignment)
很多元素都具有align属性，如P元素、H1～H6元素、IMG元素、TABLE元素等。align属性的值为left，center，right三个之一。

<h4 align="left">小雅<\h4>
<h4 align="center">51民歌网<\h4>
<h4 align="right">劝学网<\h4>

小雅
51民歌网
劝学网

CENTER元素也可以起到对中的作用。<center>...</center>

<center>劝学网是一个很好的学习网</center>

劝学网是一个很好的学习网

文字的分区(Division)显示
DIV元素的真正作用应结合css来使用，此处的作用和段基本差不多。
<div align=left/center/right> ... </div>

<div align=left>小雅<\div>
<div align=center>51民歌网<\div>
<div align=right>劝学网<\div>

小雅
51民歌网
劝学网

DIV元素相当于块分区，而与DIV元素类似的SPAN元素相当于inline的分区功能，这二者都需要与css结合才能有效发挥很大的作用。一般的标记元素自身都有一定意义，如<i>表示斜体等，而如<div>和如<span>自身没有特殊功能，只有与CSS结合之后，可以实现其它任何标记元素的功能。

列表
无序列表 <ul><li>...</ul>

<ul>
<li>WebPage
<li>Visual C++
</ul>

WebPage
Visual C++

有序列表 <ol><li>...</ol>

<ol>
<li>WebPage
<li>Visual C++
</ol>

WebPage
Visual C++

项目及其说明列表(Definition lists) <dl><dt>...<dd>...</dl>

<dl>
<dt>WebPage
<dd>html
<dd>javascript
<dt>Visual C++
<dd>MFC
<dd>SDK
</dl>

WebPage
html
javascript
Visual C++
MFC
SDK

定制列表元素
定制表中的标记 <li type=#> #=disk(实心圆), circle(空心圆), square(正方块)

<ul>
<li type=disc>WebPage
<li type=circle>Visual Basic
<li type=square>Visual C++
</ul>

WebPage
Visual Basic
Visual C++

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

<ol>
<li type=A>WebPage
<li type=a>CSS
<li type=I>VBSCRIPT
<li type=i>CGI
<li type=1>WebPage
</ol>

WebPage
CSS
VBSCRIPT
CGI
WebPage

定制有序列表表中的序号的起始值 <ol start=#> #=number

<ol start=7>
<li>WebPage
<li>Visual C++
</ol>

WebPage
Visual C++

预格式化文本(Preformatted Text)
该元素与段<P>元素功能类似，但<P>元素会将编辑时的空格和回车自动地过滤掉，真正需要用空格和回车时必须用 和<BR>来代替。而<PRE>则保留空格和回车使其在页面上产生同样的作用。<pre>...</pre>

<pre>
劝学网是一个很好的学习网“空格”WebPage“回车”
劝学网是一个很好的学习网“空格”Visual“空格”C++
</pre>

劝学网是一个很好的学习网 WebPage
劝学网是一个很好的学习网 Visual C++

文字组合
RUBY元素、RB元素、RT元素、RP元素的组合使用可以实现汉字和拼音等文字组合成一体。<RUBY>...<RUBY>；<RB>...<RB>；<RT>...<RT>；<RP>...<RP>

<ruby> <rb>小雅</rb> <rp>(</rp> <rt>yalan</rt> <rp>)</rp> </ruby>	a<ruby> <rb>1</rb> <rp>(</rp> <rb>8</rb> <rp>)</rp> </ruby> + a<ruby> <rb>2</rb> <rp>(</rp> <rb>8</rb> <rp>)</rp> </ruby>
小雅 ( yalan )	a 1 8 + a 2 8

    在Netscape下拼音并不显示在汉字的上面，而是显示在右边的括号里。如：小雅(yalan)

水平分隔线
    HR元素将占领整个一行。<HR>
    或<HR size="粗细" width="宽度" align="left/center/right" noshade>

<hr>
<hr size="10">
<hr size="30"width="30">
<hr size="5"width="50%"align="left">
<hr size="5"width="50%"align="right">
<hr noshade>
<hr noshade size="10">

《HTML教程》05章 文字布局

小雅

51民歌网

劝学网

《HTML教程》05章文字布局