📄 text_style.html
字号:
<HTML>
<HEAD>
<TITLE>黄金书屋 - INTERNET 教室 - HTML 语言教程</TITLE>
</HEAD>
<BODY BGCOLOR="#D4D4D4">
<H1 ALIGN=CENTER>文字布局(TEXT STYLE)标记(TAGS)</H1>
<CENTER><P>
<HR></P></CENTER>
<P><!--################## Line Control ########################--><A NAME="line"></A></P>
<H2><IMG SRC="br20t.gif" tppabs="http://www.yessir.net/html/br20t.gif" ALT="+" HEIGHT=20 WIDTH=20 ALIGN=TOP> 行的控制
</H2>
<P><!------Paragraph-------></P>
<H3>段(Paragraph) <FONT SIZE=-1>(可以看作是空行)</FONT> <p></H3>
<DL>
<DD><TT>你好吗？<p>很好。</TT></DD>
</DL>
<P>你好吗？<P>
<P>很好。</P>
<PRE>
</PRE>
<P><!------Break Line-------></P>
<H3>换行 <br></H3>
<DL>
<DD><TT>你好吗？<br>很好。</TT></DD>
</DL>
<P>你好吗？<BR>
很好。</P>
<PRE>
</PRE>
<P><!------No Break-------></P>
<H3>不换行<nobr></H3>
<DL>
<DD><TT><nobr> <BR>
请改变您浏览器窗口的宽度， 使之小于这一行的宽度， 看看这个标记的作用！<BR>
</nobr> </TT></DD>
</DL>
<P><NOBR>请改变您浏览器窗口的宽度，使之小于这一行的宽度，看看这个标记的作用！
</P>
<PRE>
</PRE>
<P><!--################## ALIGNMENT ########################--><A NAME="center"></A></P>
<H2><IMG SRC="br20t.gif" tppabs="http://www.yessir.net/html/br20t.gif" ALT="+" HEIGHT=20 WIDTH=20 ALIGN=TOP> 文字的对齐(Alignment)
</H2>
<P><!------hn centering-------></P>
<H3><hn align=#>...</hn> <BR>
<p align=#>...</p> #=left, center, right</H3>
<DL>
<DD><TT><h3 align=center>Hello<\h3><BR>
<h3 align=right>Hello<\h3> </TT></DD>
</DL>
<H3 ALIGN=CENTER>Hello</H3>
<H3 ALIGN=RIGHT>Hello</H3>
<P><!------centering-------></P>
<H3><center>...</center> </H3>
<DL>
<DD><TT><center>Hello</center> </TT></DD>
</DL>
<CENTER><P>Hello </P></CENTER>
<PRE>
</PRE>
<P><!--################## Division ########################--><A NAME="division"></A></P>
<H2><IMG SRC="br20t.gif" tppabs="http://www.yessir.net/html/br20t.gif" ALT="+" HEIGHT=20 WIDTH=20 ALIGN=TOP> 文字的分区(Division)显示
</H2>
<P><!------left-------></P>
<H3><div align=left> ... </div></H3>
<DL>
<DD><TT><div align=left><BR>
Can you feel happiness without unpleasant? <br><BR>
Please show me your smile.<BR>
</div></TT></DD>
<P><TT> </TT></P>
</DL>
<P>Can you feel happiness without unpleasant?<BR>
Please show me your smile. <!------center-------></P>
<H3><div align=center> ... </div></H3>
<CENTER><P>Can you feel happiness without unpleasant?<BR>
Please show me your smile. <!------right-------></P></CENTER>
<H3><div align=right> ... </div></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 SRC="br20t.gif" tppabs="http://www.yessir.net/html/br20t.gif" ALT="+" HEIGHT=20 WIDTH=20 ALIGN=TOP> 列表
</H2>
<P><!------Unordered List-------></P>
<H3>无序列表 <ul><li>...</ul></H3>
<DL>
<DD><TT><ul><BR>
<li>Today<BR>
<li>Tommorow<BR>
</ul> </TT></DD>
</DL>
<UL>
<LI>Today </LI>
<LI>Tommorow </LI>
</UL>
<P><!------Ordered List-------></P>
<H3>有序列表 <ol><li>...</ol></H3>
<DL>
<DD><TT><ol><BR>
<li>Today<BR>
<li>Tommorow<BR>
</ol> </TT></DD>
</DL>
<OL>
<LI>Today </LI>
<LI>Tommorow </LI>
</OL>
<P><!------Definition List-------></P>
<H3>定义列表(Definition lists) <dl><dt>...<dd>...</dl></H3>
<DL>
<DD><TT><dl><BR>
<dt>Today<BR>
<dd>Today is yesterday.<BR>
<dt>Tomorrow<BR>
<dd>Tomorrow is today.<BR>
</dl> </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 <dl compact><dt>...<dd>...</dl></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><dl compact><BR>
<dt>Today<BR>
<dd>Today is yesterday.<BR>
<dt>Tomorrow<BR>
<dd>Tomorrow is today.<BR>
</dl> </TT></TD>
</TR>
</TABLE>
<PRE>
</PRE>
<P><!--################## List Customize ########################--><A NAME="custom"></A></P>
<H2><IMG SRC="br20t.gif" tppabs="http://www.yessir.net/html/br20t.gif" ALT="+" HEIGHT=20 WIDTH=20 ALIGN=TOP> 定制列表元素 </H2>
<P><!------Mark Style-------></P>
<H3>定制表中的标记 <li type=#> #=disk, circle, square</H3>
<DL>
<DD><TT><ul><BR>
<li type=disc>ONE<BR>
<li type=circle>TWO<BR>
<li type=square>THREE<BR>
</ul> </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>定制有序列表表中的序号 <li type=#> #=A, a, I, i, 1</H3>
<DL>
<DD><TT><ol><li type=A>ONE-ONE<BR>
<li>ONE-TWO</ol> </TT></DD>
<OL>
<LI TYPE=A>ONE-ONE </LI>
<LI>ONE-TWO </LI>
</OL>
<DD><TT><ol><li type=a>ONE-ONE<BR>
<li>ONE-TWO</ol> </TT></DD>
<OL>
<LI TYPE=a>ONE-ONE </LI>
<LI>ONE-TWO </LI>
</OL>
<DD><TT><ol><li type=I>ONE-ONE<BR>
<li>ONE-TWO</ol> </TT></DD>
<OL>
<LI TYPE=I>ONE-ONE </LI>
<LI>ONE-TWO </LI>
</OL>
<DD><TT><ol><li type=i>ONE-ONE<BR>
<li>ONE-TWO</ol> </TT></DD>
<OL>
<LI TYPE=i>ONE-ONE </LI>
<LI>ONE-TWO </LI>
</OL>
<DD><TT><ol><li type=1>ONE-ONE<BR>
<li>ONE-TWO</ol> </TT></DD>
<OL>
<LI TYPE=1>ONE-ONE </LI>
<LI>ONE-TWO </LI>
</OL>
</DL>
<P><!------Sarted Number-------></P>
<H3>定制有序列表表中的序号的起始值 <ol start=#> #=number</H3>
<DL>
<PRE><ol start=5>
<li type=A>ONE-ONE
<li>ONE-TWO
<ol start=10>
<li>TWO-ONE
<li type=i>TWO-TWO
</ol></ol>
</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><IMG SRC="br20t.gif" tppabs="http://www.yessir.net/html/br20t.gif" ALT="+" HEIGHT=20 WIDTH=20 ALIGN=TOP> 预格式化文本(Preformatted Text) </H2>
<P><!------Preformatted-------></P>
<H3><pre>...</pre></H3>
<DL>
<DD><TT><pre><BR>
Please use your card.<BR>
VISA Master<BR>
<b>Here is an order form.</b><BR>
<ul><li>Fax<BR>
<li>Air Mail</ul><BR>
</pre> </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><listing>...</listing></H3>
<DL>
<DD><TT><listing><BR>
Please use your card.<BR>
VISA Master<BR>
<b>Here is an order form.</b><BR>
<ul><li>Fax<BR>
<li>Air Mail</ul><BR>
</listing> </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><xmp>...</xmp></H3>
<DL>
<DD><TT><xmp><BR>
Please use your card.<BR>
VISA Master<BR>
<b>Here is an order form.</b><BR>
<ul><li>Fax<BR>
<li>Air Mail</ul><BR>
</xmp> </TT></DD>
</DL>
<PRE>Please use your card.
VISA Master
<b>Here is order form.</b>
<ul><li>Fax
<li>Air Mail</ul>
</PRE>
<PRE>
</PRE>
<P><!--################## SPACER ########################--><A NAME="spacer"></A></P>
<H2><IMG SRC="br20t.gif" tppabs="http://www.yessir.net/html/br20t.gif" ALT="+" HEIGHT=20 WIDTH=20 ALIGN=TOP> 空白(Spacer) <IMG SRC="netscape.gif" tppabs="http://www.yessir.net/html/netscape.gif" HEIGHT=14 WIDTH=80></H2>
<P><!------h&R-------></P>
<H3><spacer type="horizontal" size=#> #=水平空白宽度<BR>
<spacer type="vertical" size=#> #=竖直空白高度</H3>
<DL>
<DD><TT>YESTERDAY <spacer type="horizontal" size=50> TODAY<BR>
<spacer type="vertical" size=50> TOMORROW </TT></DD>
</DL>
<P>YESTERDAY <SPACER type="horizontal" size=50>TODAY <SPACER type="vertical" size=50>TOMORROW
</P>
<P><!------BLOCK-------></P>
<H3><spacer type="block" width=# height=# align=##><BR>
#=空白的尺寸<BR>
##=top, middle, bottom, left, right</H3>
<DL>
<DD><TT><spacer type="block" width=150 height=50 align=left><BR>
YESTERDAY<br> TODAY<br> 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><IMG SRC="br20t.gif" tppabs="http://www.yessir.net/html/br20t.gif" ALT="+" HEIGHT=20 WIDTH=20 ALIGN=TOP> 多列文本 <IMG SRC="netscape.gif" tppabs="http://www.yessir.net/html/netscape.gif" HEIGHT=14 WIDTH=80></H2>
<P><!------Basic-------></P>
<H3><multicol cols=#> ... </multicol> #=列的数目</H3>
<DL>
<DD><TT><multicol cols=2> text text text... </multicol> <BR>
</TT><A HREF="samp/multicol01.html" tppabs="http://www.yessir.net/html/samp/multicol01.html">例子</A> </DD>
</DL>
<P><!------GUTTER-------></P>
<H3><multicol gutter=#> ... </multicol> #=列间的空白</H3>
<DL>
<DD><TT><multicol cols=2 gutter=100> text text text... </multicol>
<BR>
</TT><A HREF="samp/multicol02.html" tppabs="http://www.yessir.net/html/samp/multicol02.html">例子</A> </DD>
</DL>
<P><!------WIDTH-------></P>
<H3><multicol width=#> ... </multicol> #=列的宽度</H3>
<DL>
<DD><TT><multicol cols=2 width=400> text text text... </multicol>
<BR>
</TT><A HREF="samp/multicol03.html" tppabs="http://www.yessir.net/html/samp/multicol03.html">例子</A> </DD>
</DL>
<PRE>
</PRE>
<P><!--################## Other ########################--></P>
<H2><IMG SRC="br20t.gif" tppabs="http://www.yessir.net/html/br20t.gif" ALT="+" HEIGHT=20 WIDTH=20 ALIGN=TOP> 其它 </H2>
<P><!------BLOCKQUOTE-------></P>
<H3>块引用(Blockquote) <blockquote>...</blockquote></H3>
<DL>
<DD><TT>Her Song:<BR>
<blockquote><BR>
When I was young, I listened to the radio <BR>
waiting for my favorite songs....<BR>
</blockquote> </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>闪烁 <blink>...</blink></H3>
<DL>
<DD><TT><BLINK> 闪烁！闪烁！ </BLINK> </TT></DD>
</DL>
<P><BLINK>闪烁！闪烁！</BLINK></P>
<PRE>
</PRE>
<P><!--################## (^^) Jump & Add (^^) ########################-->
<HR><A HREF="../../tppmsgs/msgs0.htm#1" tppabs="http://ncdesign.kyushu-id.ac.jp/"><IMG SRC="angel-homeg.gif" tppabs="http://www.yessir.net/html/angel-homeg.gif" ALT="NCD HOME" HSPACE=3 VSPACE=10 BORDER=0 HEIGHT=46 WIDTH=55 ALIGN=LEFT></A>
<B><A HREF="../../tppmsgs/msgs0.htm#2" tppabs="http://www.yessir.net/html_design.html">HTML
Design Guide Main Page<BR>
<NOBR></A></B><FONT FACE="'Times New Roman', Arial"><FONT SIZE=-1><A HREF="../../tppmsgs/msgs0.htm#8" tppabs="http://www.yessir.net/html/html_design.html#content">Contents</A>
|| <A HREF="page.html" tppabs="http://www.yessir.net/html/page.html">Page</A>
|| <A HREF="font.html" tppabs="http://www.yessir.net/html/font.html">Font</A>
|| <A HREF="text_style.html" tppabs="http://www.yessir.net/html/text_style.html">Text
Style</A> || <A HREF="image.html" tppabs="http://www.yessir.net/html/image.html">Image</A>
|| <A HREF="form.html" tppabs="http://www.yessir.net/html/form.html">Form</A>
|| <A HREF="table.html" tppabs="http://www.yessir.net/html/table.html">Table</A>
|| <A HREF="table02.html" tppabs="http://www.yessir.net/html/table02.html">Table
Advanced</A> <BR>
|| <A HREF="frame.html" tppabs="http://www.yessir.net/html/frame.html">Frames</A>
|| <A HREF="marquee.html" tppabs="http://www.yessir.net/html/marquee.html">Marquee</A>
|| <A HREF="inline.html" tppabs="http://www.yessir.net/html/inline.html">Alternative
Inline Elements</A> <BR>
</FONT><FONT SIZE=-2><A HREF="tag-index.html" tppabs="http://www.yessir.net/html/tag-index.html">Tag
Index</A> || <A HREF="new.html" tppabs="http://www.yessir.net/html/new.html">What's
New</A></FONT><FONT SIZE=-1> </FONT></FONT><BR clear=all>
</P>
<P>Network Communication Design<BR>
<A HREF="../../tppmsgs/msgs0.htm#1" tppabs="http://ncdesign.kyushu-id.ac.jp/">http://ncdesign.kyushu-id.ac.jp/<BR>
</A>C&P 1994-1996 Yuriko Ienaga <FONT SIZE=-1><A HREF="mailto:v91102@vgenda.kyushu-id.ac.jp">v91102@vgenda.kyushu-id.ac.jp</A></FONT>
<!--################## (^^) END (^^) ########################--></P>
</BODY>
</HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -