⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 html3.htm

📁 HTML的入门教程
💻 HTM
字号:
🔍 
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb_2312-80">
<META NAME="Generator" CONTENT="Microsoft Word 97">
<TITLE>HTML语言教程之三：文字布局(TEXT STYLE)标记</TITLE>
<META NAME="Template" CONTENT="C:\PROGRAM FILES\MICROSOFT OFFICE\OFFICE\html.dot">
<link rel="stylesheet" href="../../cpcw.css"></HEAD>
<BODY LINK="#0000ff" VLINK="#800080" background="../bg.gif">
<table width="85%" border="0" align="center">
  <tr bgcolor="#FFFFFF"> 
    <td> 
      <p align="CENTER"><font size="6" lang="ZH-CN"><font color="#FF3333" class="title"><b>HTML语言教程之三：文字布局(TEXT 
        STYLE)标记</b></font></font></p>
      <p align="JUSTIFY"></p>
      <hr>
      <p>&nbsp;</p>
      <h2> 行的控制 </h2>
      <p><!------Paragraph-------></p>
      <h3>段(Paragraph) <font size=-1>(可以看作是空行)</font> &lt;p&gt;</h3>
      <dl> 
        <dd><tt>你好吗？&lt;p&gt;很好。</tt></dd>
      </dl>
      <p>你好吗？
      <p> 
      <p>很好。</p>
      <pre>
</pre>
      <p><!------Break Line-------></p>
      <h3>换行 &lt;br&gt;</h3>
      <dl> 
        <dd><tt>你好吗？&lt;br&gt;很好。</tt></dd>
      </dl>
      <p>你好吗？<br>
        很好。</p>
      <pre>
</pre>
      <p><!------No Break-------></p>
      <h3>不换行&lt;nobr&gt;</h3>
      <dl> 
        <dd><tt>&lt;nobr&gt; <br>
          请改变您浏览器窗口的宽度， 使之小于这一行的宽度， 看看这个标记的作用！<br>
          &lt;/nobr&gt; </tt></dd>
      </dl>
      <p><nobr>请改变您浏览器窗口的宽度，使之小于这一行的宽度，看看这个标记的作用！ </p>
      <pre>
</pre>
      <p><!--################## ALIGNMENT ########################--><a name="center"></a></p>
      <h2> 文字的对齐(Alignment) </h2>
      <p><!------hn centering-------></p>
      <h3>&lt;hn align=#&gt;...&lt;/hn&gt; <br>
        &lt;p align=#&gt;...&lt;/p&gt; #=left, center, right</h3>
      <dl> 
        <dd><tt>&lt;h3 align=center&gt;Hello&lt;\h3&gt;<br>
          &lt;h3 align=right&gt;Hello&lt;\h3&gt; </tt></dd>
      </dl>
      <h3 align=CENTER>Hello</h3>
      <h3 align=RIGHT>Hello</h3>
      <p><!------centering-------></p>
      <h3>&lt;center&gt;...&lt;/center&gt; </h3>
      <dl> 
        <dd><tt>&lt;center&gt;Hello&lt;/center&gt; </tt></dd>
      </dl>
      <center>
        <p>Hello </p>
      </center>
      <pre>
</pre>
      <p><!--################## Division ########################--><a name="division"></a></p>
      <h2> 文字的分区(Division)显示 </h2>
      <p><!------left-------></p>
      <h3>&lt;div align=left&gt; ... &lt;/div&gt;</h3>
      <dl> 
        <dd><tt>&lt;div align=left&gt;<br>
          Can you feel happiness without unpleasant? &lt;br&gt;<br>
          Please show me your smile.<br>
          &lt;/div&gt;</tt></dd>
        <p><tt> </tt></p>
      </dl>
      <p>Can you feel happiness without unpleasant?<br>
        Please show me your smile. <!------center-------></p>
      <h3>&lt;div align=center&gt; ... &lt;/div&gt;</h3>
      <center>
        <p>Can you feel happiness without unpleasant?<br>
          Please show me your smile. <!------right-------></p>
      </center>
      <h3>&lt;div align=right&gt; ... &lt;/div&gt;</h3>
      <div align=right>
        <p>Can you feel happiness without unpleasant?<br>
          Please show me your smile. </p>
      </div>
      <pre>
</pre>
      <p><!--################## List ########################--><a name="list"></a></p>
      <h2> 列表 </h2>
      <p><!------Unordered List-------></p>
      <h3>无序列表 &lt;ul&gt;&lt;li&gt;...&lt;/ul&gt;</h3>
      <dl> 
        <dd><tt>&lt;ul&gt;<br>
          &lt;li&gt;Today<br>
          &lt;li&gt;Tommorow<br>
          &lt;/ul&gt; </tt></dd>
      </dl>
      <ul>
        <li>Today </li>
        <li>Tommorow </li>
      </ul>
      <p><!------Ordered List-------></p>
      <h3>有序列表 &lt;ol&gt;&lt;li&gt;...&lt;/ol&gt;</h3>
      <dl> 
        <dd><tt>&lt;ol&gt;<br>
          &lt;li&gt;Today<br>
          &lt;li&gt;Tommorow<br>
          &lt;/ol&gt; </tt></dd>
      </dl>
      <ol>
        <li>Today </li>
        <li>Tommorow </li>
      </ol>
      <p><!------Definition List-------></p>
      <h3>定义列表(Definition lists) &lt;dl&gt;&lt;dt&gt;...&lt;dd&gt;...&lt;/dl&gt;</h3>
      <dl> 
        <dd><tt>&lt;dl&gt;<br>
          &lt;dt&gt;Today<br>
          &lt;dd&gt;Today is yesterday.<br>
          &lt;dt&gt;Tomorrow<br>
          &lt;dd&gt;Tomorrow is today.<br>
          &lt;/dl&gt; </tt></dd>
      </dl>
      <dl> 
        <dt>Today </dt>
        <dd>Today will be yesterday. </dd>
        <dt>Tomorrow </dt>
        <dd>Tomorrow will be today. </dd>
      </dl>
      <p><!------Definition List Compact-------></p>
      <h3>Definition lists Compact &lt;dl compact&gt;&lt;dt&gt;...&lt;dd&gt;...&lt;/dl&gt;</h3>
      <table width="100%" >
        <tr> 
          <td width=50%> 
            <dl compact> 
              <dt>Today </dt>
              <dd>Today will be yesterday. </dd>
              <dt>Next </dt>
              <dd>Tomorrow will be today. </dd>
            </dl>
          </td>
          <td><tt>&lt;dl compact&gt;<br>
            &lt;dt&gt;Today<br>
            &lt;dd&gt;Today is yesterday.<br>
            &lt;dt&gt;Tomorrow<br>
            &lt;dd&gt;Tomorrow is today.<br>
            &lt;/dl&gt; </tt></td>
        </tr>
      </table>
      <pre>
</pre>
      <p><!--################## List Customize ########################--><a name="custom"></a></p>
      <h2> 定制列表元素 </h2>
      <p><!------Mark Style-------></p>
      <h3>定制表中的标记 &lt;li type=#&gt; #=disk, circle, square</h3>
      <dl> 
        <dd><tt>&lt;ul&gt;<br>
          &lt;li type=disc&gt;ONE<br>
          &lt;li type=circle&gt;TWO<br>
          &lt;li type=square&gt;THREE<br>
          &lt;/ul&gt; </tt></dd>
      </dl>
      <ul>
        <li type=disc>ONE </li>
        <li type=circle>TWO </li>
        <li type=square>THREE </li>
      </ul>
      <p><!------Capital letters-------></p>
      <h3>定制有序列表表中的序号 &lt;li type=#&gt; #=A, a, I, i, 1</h3>
      <dl> 
        <dd><tt>&lt;ol&gt;&lt;li type=A&gt;ONE-ONE<br>
          &lt;li&gt;ONE-TWO&lt;/ol&gt; </tt></dd>
        <ol>
          <li type=A>ONE-ONE </li>
          <li>ONE-TWO </li>
        </ol>
        <dd><tt>&lt;ol&gt;&lt;li type=a&gt;ONE-ONE<br>
          &lt;li&gt;ONE-TWO&lt;/ol&gt; </tt></dd>
        <ol>
          <li type=a>ONE-ONE </li>
          <li>ONE-TWO </li>
        </ol>
        <dd><tt>&lt;ol&gt;&lt;li type=I&gt;ONE-ONE<br>
          &lt;li&gt;ONE-TWO&lt;/ol&gt; </tt></dd>
        <ol>
          <li type=I>ONE-ONE </li>
          <li>ONE-TWO </li>
        </ol>
        <dd><tt>&lt;ol&gt;&lt;li type=i&gt;ONE-ONE<br>
          &lt;li&gt;ONE-TWO&lt;/ol&gt; </tt></dd>
        <ol>
          <li type=i>ONE-ONE </li>
          <li>ONE-TWO </li>
        </ol>
        <dd><tt>&lt;ol&gt;&lt;li type=1&gt;ONE-ONE<br>
          &lt;li&gt;ONE-TWO&lt;/ol&gt; </tt></dd>
        <ol>
          <li type=1>ONE-ONE </li>
          <li>ONE-TWO </li>
        </ol>
      </dl>
      <p><!------Sarted Number-------></p>
      <h3>定制有序列表表中的序号的起始值 &lt;ol start=#&gt; #=number</h3>
      <dl> 
        <pre>&lt;ol start=5&gt;
&lt;li type=A&gt;ONE-ONE
&lt;li&gt;ONE-TWO
        &lt;ol start=10&gt;
        &lt;li&gt;TWO-ONE
        &lt;li type=i&gt;TWO-TWO
&lt;/ol&gt;&lt;/ol&gt;
</pre>
      </dl>
      <ol start=5>
        <p><br>
        </p>
        <li type=A>ONE-ONE </li>
        <li>ONE-TWO </li>
        <ol start=10>
          <li>TWO-ONE </li>
          <li type=i>TWO-TWO </li>
        </ol>
      </ol>
      <pre>
</pre>
      <p><!--################## Preformatted ########################--><a name="pre"></a></p>
      <h2> 预格式化文本(Preformatted Text) </h2>
      <p><!------Preformatted-------></p>
      <h3>&lt;pre&gt;...&lt;/pre&gt;</h3>
      <dl> 
        <dd><tt>&lt;pre&gt;<br>
          Please use your card.<br>
          VISA Master<br>
          &lt;b&gt;Here is an order form.&lt;/b&gt;<br>
          &lt;ul&gt;&lt;li&gt;Fax<br>
          &lt;li&gt;Air Mail&lt;/ul&gt;<br>
          &lt;/pre&gt; </tt></dd>
      </dl>
      <pre>Please use your card
VISA    Master
<b>Here is an order form.</b>
</pre>
      <ul>
        <li>Fax </li>
        <li>Air Mail </li>
      </ul>
      <p><!------Listing-------></p>
      <h3>&lt;listing&gt;...&lt;/listing&gt;</h3>
      <dl> 
        <dd><tt>&lt;listing&gt;<br>
          Please use your card.<br>
          VISA Master<br>
          &lt;b&gt;Here is an order form.&lt;/b&gt;<br>
          &lt;ul&gt;&lt;li&gt;Fax<br>
          &lt;li&gt;Air Mail&lt;/ul&gt;<br>
          &lt;/listing&gt; </tt></dd>
      </dl>
      <pre>Please use your card.
VISA    Master
<b>Here is order form.</b>
</pre>
      <ul>
        <li>Fax </li>
        <li>Air Mail</li>
      </ul>
      <p><!------Example-------></p>
      <h3>&lt;xmp&gt;...&lt;/xmp&gt;</h3>
      <dl> 
        <dd><tt>&lt;xmp&gt;<br>
          Please use your card.<br>
          VISA Master<br>
          &lt;b&gt;Here is an order form.&lt;/b&gt;<br>
          &lt;ul&gt;&lt;li&gt;Fax<br>
          &lt;li&gt;Air Mail&lt;/ul&gt;<br>
          &lt;/xmp&gt; </tt></dd>
      </dl>
      <pre>Please use your card.
VISA    Master
&lt;b&gt;Here is order form.&lt;/b&gt;
&lt;ul&gt;&lt;li&gt;Fax
&lt;li&gt;Air Mail&lt;/ul&gt;



</pre>
      <pre>
</pre>
      <p><!--################## SPACER ########################--><a name="spacer"></a></p>
      <h2> 空白(Spacer) </h2>
      <p><!------h&R-------></p>
      <h3>&lt;spacer type=&quot;horizontal&quot; size=#&gt; #=水平空白宽度<br>
        &lt;spacer type=&quot;vertical&quot; size=#&gt; #=竖直空白高度</h3>
      <dl> 
        <dd><tt>YESTERDAY &lt;spacer type=&quot;horizontal&quot; size=50&gt; TODAY<br>
          &lt;spacer type=&quot;vertical&quot; size=50&gt; TOMORROW </tt></dd>
      </dl>
      <p>YESTERDAY <spacer type="horizontal" size=50>TODAY <spacer type="vertical" size=50>TOMORROW 
      </p>
      <p><!------BLOCK-------></p>
      <h3>&lt;spacer type=&quot;block&quot; width=# height=# align=##&gt;<br>
        #=空白的尺寸<br>
        ##=top, middle, bottom, left, right</h3>
      <dl> 
        <dd><tt>&lt;spacer type=&quot;block&quot; width=150 height=50 align=left&gt;<br>
          YESTERDAY&lt;br&gt; TODAY&lt;br&gt; TOMORROW </tt></dd>
      </dl>
      <p><spacer type="block" width=150 height=50 align=left>YESTERDAY<br>
        TODAY<br>
        TOMORROW </p>
      <pre>
</pre>
      <p><!--################## MULTICOLUMN ########################--><a name="multicol"></a></p>
      <h2> 多列文本 </h2>
      <p><!------Basic-------></p>
      <h3>&lt;multicol cols=#&gt; ... &lt;/multicol&gt; #=列的数目</h3>
      <dl> 
        <dd><tt>&lt;multicol cols=2&gt; text text text... &lt;/multicol&gt; <br>
          </tt></dd>
      </dl>
      <p><!------GUTTER-------></p>
      <h3>&lt;multicol gutter=#&gt; ... &lt;/multicol&gt; #=列间的空白</h3>
      <dl> 
        <dd><tt>&lt;multicol cols=2 gutter=100&gt; text text text... &lt;/multicol&gt; 
          <br>
          </tt></dd>
      </dl>
      <p><!------WIDTH-------></p>
      <h3>&lt;multicol width=#&gt; ... &lt;/multicol&gt; #=列的宽度</h3>
      <dl> 
        <dd><tt>&lt;multicol cols=2 width=400&gt; text text text... &lt;/multicol&gt; 
          <br>
          </tt></dd>
      </dl>
      <pre>
</pre>
      <p><!--################## Other ########################--></p>
      <h2> 其它 </h2>
      <p><!------BLOCKQUOTE-------></p>
      <h3>块引用(Blockquote) &lt;blockquote&gt;...&lt;/blockquote&gt;</h3>
      <dl> 
        <dd><tt>Her Song:<br>
          &lt;blockquote&gt;<br>
          When I was young, I listened to the radio <br>
          waiting for my favorite songs....<br>
          &lt;/blockquote&gt; </tt></dd>
      </dl>
      <p>Her Song: </p>
      <blockquote> 
        <p>When I was young, I listened to the radio waiting for my favorite songs.... 
        </p>
      </blockquote>
      <p><!------Blink-------></p>
      <h3>闪烁 &lt;blink&gt;...&lt;/blink&gt;</h3>
      <dl> 
        <dd><tt>&lt;BLINK&gt; 闪烁！闪烁！ &lt;/BLINK&gt; </tt></dd>
      </dl>
      <p><blink>闪烁！闪烁！</blink></p>

      <p align="CENTER"><a href="html1.htm">页面标记|</a>
        <a href="html2.htm">字体标记|</a>
        <a href="html3.htm">文字布局|</a>
        <a href="html4.htm">图像标记|</a>
        <a href="html5.htm">表单标记|</a>
        <a href="html6.htm">表格标记|</a>
        <a href="html7.htm">表格进阶|</a>
        <a href="html8.htm">多窗口|</a>
        <a href="html9.htm">移动文字|</a>
        <a href="html10.htm">多媒体</a><br>
        <a href="html2.htm">上一节</a> <a href="start.html">首页</a> <a href="html4.htm">下一节</a></p>
      </td>
  </tr>
</table>
</BODY>
</HTML>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -