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

📄 文字布局.htm

📁 HTML语言的基础教程
💻 HTM
字号:
🔍 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0046)http://www.zjou.edu.cn/te/html/text_style.html -->
<HTML><HEAD><TITLE>HTML 语言教程</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2719.2200" name=GENERATOR></HEAD>
<BODY bgColor=#d4d4d4>
<H1 align=center>文字布局(TEXT STYLE)标记(TAGS)</H1>
<CENTER>
<P>
<HR>

<P></P></CENTER>
<P><!--################## Line Control ########################--><A 
name=line></A></P>
<H2><IMG height=20 alt=+ src="文字布局.files/br20t.gif" width=20 align=top 
tppabs="http://webclass/html/br20t.gif"> 行的控制 </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><IMG height=20 alt=+ src="文字布局.files/br20t.gif" width=20 align=top 
tppabs="http://webclass/html/br20t.gif"> 文字的对齐(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><IMG height=20 alt=+ src="文字布局.files/br20t.gif" width=20 align=top 
tppabs="http://webclass/html/br20t.gif"> 文字的分区(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> 
  <P><TT></TT></P></DD></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><IMG height=20 alt=+ src="文字布局.files/br20t.gif" width=20 align=top 
tppabs="http://webclass/html/br20t.gif"> 列表 </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>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>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 
  <DD>Today will be yesterday. 
  <DT>Tomorrow 
  <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%">
  <TBODY>
  <TR>
    <TD width="50%">
      <DL compact>
        <DT>Today 
        <DD>Today will be yesterday. 
        <DT>Next 
        <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></TBODY></TABLE><PRE></PRE>
<P><!--################## List Customize ########################--><A 
name=custom></A></P>
<H2><IMG height=20 alt=+ src="文字布局.files/br20t.gif" width=20 align=top 
tppabs="http://webclass/html/br20t.gif"> 定制列表元素 </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 type=circle>TWO 
  <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>
  <OL>
    <LI type=A>ONE-ONE 
    <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>
  <OL>
    <LI type=a>ONE-ONE 
    <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>
  <OL>
    <LI type=I>ONE-ONE 
    <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>
  <OL>
    <LI type=i>ONE-ONE 
    <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>
  <OL>
    <LI type=1>ONE-ONE 
    <LI>ONE-TWO </LI></OL></DD></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>ONE-TWO 
  <OL start=10>
    <LI>TWO-ONE 
    <LI type=i>TWO-TWO </LI></OL></LI></OL><PRE></PRE>
<P><!--################## Preformatted ########################--><A 
name=pre></A></P>
<H2><IMG height=20 alt=+ src="文字布局.files/br20t.gif" width=20 align=top 
tppabs="http://webclass/html/br20t.gif"> 预格式化文本(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>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>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><IMG height=20 alt=+ src="文字布局.files/br20t.gif" width=20 align=top 
tppabs="http://webclass/html/br20t.gif"> 空白(Spacer) <IMG height=14 
src="文字布局.files/netscape.gif" width=80 
tppabs="http://webclass/html/netscape.gif"></H2>
<P><!------h&R-------></P>
<H3>&lt;spacer type="horizontal" size=#&gt; #=水平空白宽度<BR>&lt;spacer 
type="vertical" size=#&gt; #=竖直空白高度</H3>
<DL>
  <DD><TT>YESTERDAY &lt;spacer type="horizontal" size=50&gt; TODAY<BR>&lt;spacer 
  type="vertical" size=50&gt; TOMORROW </TT></DD></DL>
<P>YESTERDAY <SPACER size="50" type="horizontal">TODAY <SPACER size="50" 
type="vertical">TOMORROW </P>
<P><!------BLOCK-------></P>
<H3>&lt;spacer type="block" width=# height=# align=##&gt;<BR>#=空白的尺寸<BR>##=top, 
middle, bottom, left, right</H3>
<DL>
  <DD><TT>&lt;spacer type="block" width=150 height=50 
  align=left&gt;<BR>YESTERDAY&lt;br&gt; TODAY&lt;br&gt; TOMORROW </TT></DD></DL>
<P><SPACER type="block" align="left" height="50" 
width="150">YESTERDAY<BR>TODAY<BR>TOMORROW </P><PRE></PRE>
<P><!--################## MULTICOLUMN ########################--><A 
name=multicol></A></P>
<H2><IMG height=20 alt=+ src="文字布局.files/br20t.gif" width=20 align=top 
tppabs="http://webclass/html/br20t.gif"> 多列文本 <IMG height=14 
src="文字布局.files/netscape.gif" width=80 
tppabs="http://webclass/html/netscape.gif"></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><A href="http://www.zjou.edu.cn/te/html/multicol01.html" 
  tppabs="http://webclass/html/samp/multicol01.html">例子</A> </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><A href="http://www.zjou.edu.cn/te/html/multicol02.html" 
  tppabs="http://webclass/html/samp/multicol02.html">例子</A> </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><A href="http://www.zjou.edu.cn/te/html/multicol03.html" 
  tppabs="http://webclass/html/samp/multicol03.html">例子</A> </DD></DL><PRE></PRE>
<P><!--################## Other ########################--></P>
<H2><IMG height=20 alt=+ src="文字布局.files/br20t.gif" width=20 align=top 
tppabs="http://webclass/html/br20t.gif"> 其它 </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><PRE></PRE><BR>
<HR>
<IMG height=58 alt="NCD HOME" hspace=3 src="文字布局.files/angel-homeg.gif" width=69 
align=left vspace=10 border=0> <A 
href="http://www.zjou.edu.cn/te/html/html.htm">(返回) HTML 语言教程：目录</A> 
<BR></NOBR></BODY></HTML>

⌨️ 快捷键说明

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