[07/09][快乐教程]HTML帖子制作教程
<table border=1 cellspacing=5 cellpadding=5 width=750 background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/03/n2.gif><tr><td colspan=3><BR><BR><font size=4 color=purple><b>
<center><h1>前言</H1></center>
<P> 追求完美的你，不可能只留恋于像编辑Word文档一样编辑你的帖子，也不会满足于使用有限的UBB语法来制作你的帖子，“盗用”别人的代码也不是长久之计。看到别人那些精美无比的HTML帖子，你早已跃跃欲试了！</P>
<P>如果是这样，那么，本教程就是为你准备的！</P>
<P>本教程主要适合于HTML论坛新手和初中级水平的水手参考使用，对于拥有Web管理网站的朋友，本教程也很有指导意义。而对于想学习HTML的朋友，这也是一个不错的教程。总之，黑马尽量使用最通俗易懂的方式介绍HTML帖子的相关语法和制作方法、技巧。</P>
<P>或许你已经是HTML帖子的制作高手了，那么，如果你有耐心一章一节地看下去，说不准也对你有所帮助——里面的内容，极可能有些是你未接触过或者不太熟悉的；如果你是教授级别的，那么，浏览一下也无妨，你可以给黑马提提意见，让本教程对大家的帮助达到最佳效果。</P>
<P>最后，祝你进步！</P></td></tr></table>
<table border=1 cellspacing=5 cellpadding=5 width=750 background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/03/n2.gif><tr><td colspan=3><BR><BR>
<font size=4 color=purple><b>
<H1>字体设置</H1>
<P>让我们首先从字体设置开始。</P>
<P>在HTML代码里，字体的定义并不是很难，我们只需用<font>标签即可定义字体、字号、字体颜色等。<*font> 标签原则上要求成对出现，即在被修饰的字体前使用<*font>引导，在被修饰的文字后用<*/font>结尾。下面给出例子和效果及相关说明：</P>
<P>语法：<BR></P>
<center><textarea rows=3 cols=50><font face=黑体 size=4 color=red>音画学堂</font></textarea></center><BR>
<P>效果:</P>
<P ALIGN=CENTER><font face=黑体 size=4 color=red>音画学堂</font></P>
<P>说明：</P>
<P><UL>
<LI><*font>标签里，face为字体名称，“=黑体”即表示被修饰的文字即“黑马在线动力”的字体为黑体，至于定义为什么字体，看你的喜好了，如果你所设置的字体不存在，系统自动使用默认字体显示（如中文Windows平台下宋体就是默认字体）；</LI>
<LI>size表示字号，论坛里可用字号是1号到7号，通常数字越大字号也就越大（也有的论坛相反），如果用户定义的字号超过7号则以7号显示（但还有其他方法突破7号字体，稍后我们会讨论到的）；</LI>
<LI>color用来定义文字的显示颜色，其值放在和前面的各元素一样放在等号的后面，颜色的表示方式可用少量的颜色英文明文，也可用Web色码方式，如#ff0000。</LI></P>
<P>size还有一种赋值方法，形式如下：</P>
<P align=center><textarea cols=50 rows=3><font size=+1>音画学堂</font></textarea></P>
<P>这类表达式适用于未使用CSS设定的页面，它表示被修饰的文字在默认字号基础上加大一号。</P>
<P>字体修饰还用到其他的标签，分别介绍如下：</P></b></font></td></tr></P></TD></TR></TABLE>
<table border=1 cellspacing=5 cellpadding=5 width=750 background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/03/n2.gif>
<font size=4 color=purple>
<TR><TD width=20%>粗体：</TD><TD width=20%><textarea rows=2 cols=20><b>文字</b> </textarea></TD><TD width=20%><B>文字</B></P></TD></TR>
<TR><TD width=20%>加重：</TD><TD width=20%><textarea rows=2 cols=20><strong>文字</strong> </textarea></TD><TD width=20%><strong>文字</strong></TD></TR>
<TR><TD width=20%>上标：</TD><TD width=20%><textarea rows=2 cols=20><sup>文字</sup> </textarea></TD><TD width=20%><sup>文字</sup></TD></TR>
<TR><TD width=20%>下标：</TD><TD width=20%><textarea rows=2 cols=20><sub>文字</sub> </textarea></TD><TD width=20%><sub>文字</sub></TD><TR>
<TR><TD width=20%>斜体：</TD><TD width=20%><textarea rows=2 cols=20><i>文字</i> </textarea></TD><TD width=20%><i>文字</i> </TD></TR>
<TR><TD width=20%>下划线：</TD><TD width=20%><textarea rows=2 cols=20><u>文字</u></table></P> </textarea></TD><TD width=20%><u>文字</u></TD></TR></TABLE>
<table border=1 cellspacing=5 cellpadding=5 width=750 background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/03/n2.gif><tr><td colspan=3><BR><BR>
<font size=4 color=purple><b>提示：连同<font>标签一块，以上这些修饰方法，只要不相互冲突就可以结合起来使用。
标题修饰：<*hx>文字<*/hx>。其中，x为1到6的数字。以下是h1到h6的标题式样效果，我们可以看到，字号是逐渐变小的：
</B></FONT></TD></TR></table>
<table border=1 cellspacing=5 cellpadding=5 width=750 background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/03/n2.gif>
<font size=4 color=purple>
<TR><TD width=20%>1</TD><TD width=20%><textarea rows=2 cols=20><h1>文字</h1> </textarea></TD><TD width=20%><h1>文字</h1></P></TD></TR>
<TR><TD width=20%>2</TD><TD width=20%><textarea rows=2 cols=20><h2>文字</h2> </textarea></TD><TD width=20%><h2>文字</h2></TD></TR>
<TR><TD width=20%>3</TD><TD width=20%><textarea rows=2 cols=20><h3>文字</h3> </textarea></TD><TD width=20%><h3>文字</h3></TD></TR>
<TR><TD width=20%>4</TD><TD width=20%><textarea rows=2 cols=20><h4>文字</h4> </textarea></TD><TD width=20%><h4>文字</h4></TD><TR>
<TR><TD width=20%>5</TD><TD width=20%><textarea rows=2 cols=20><h5>文字</h5> </textarea></TD><TD width=20%><h5i>文字</h5> </TD></TR>
<TR><TD width=20%>6</TD><TD width=20%><textarea rows=2 cols=20><h6>文字</h6></table></P> </textarea></TD><TD width=20%><h6>文字</h6></TD></TR></TABLE>
<table border=1 cellspacing=5 cellpadding=5 width=750 background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/03/n2.gif><tr><td colspan=3>
<font size=4 color=purple><b>
<P>最后讲讲突破7号字大小问题：</P>
<P>我们需要以嵌套方式调用CSS样式来定义字体，这种方法可以让我们最大限度地设置字号大小，实现方法也很简单，只需在<font>标签里用以下代码替换纯HTML原来的元素即可。请看以下代码和效果：</p>
<P>代码：</P>
<center><textarea rows=3 cols=50><font color=#ff0000 style="font-size: 100pt;font-family:华文行楷,隶书,黑体">春天</font></textarea></center><BR>
<P>效果:</P>
<P align=center><font color=#ff0000 style="font-size: 100pt;font-family:华文行楷,隶书,黑体">春天</font></P>
<P>CSS扩展了HTML功能，它能够令帖子和网页的可控制程度更高。更多的CSS知识我们将在后面陆续介绍，你也可以阅读 这个了解和学习一下CSS滤镜修饰字体的强大功能。</P></B></font></td></tr></table>
<table border=1 cellspacing=5 cellpadding=5 width=750 background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/03/n2.gif><tr><td colspan=3><font size=4 color=purple><b>
<H1>分隔标签详解</H1>
</P>从代码结构来看，HTML帖子实际上就是一个去头去尾的Web页面，原帖和回复置于<body>和</body>之间，我们可以把原帖和回复帖分开来看，这样，每一个帖子实际上就相当于Web页面的正文了。正文的行与行之间、段与段之间甚至上一个显示元素和下一个显示元素之间，如若我们不刻意去把它们分隔开来，情形会怎么样呢？显然会是一团糟，你的帖子将是一个大团块，阅读起来将十分不便。</P>
<P> 为此，学习和掌握HTML语法中的分隔标签非常有必要，娴熟地应用分隔标签，将能令你制作的帖子可读性强、外观整洁漂亮。</P>
<h3>强行换行：<*br></H3>
<P>在需要处打上<*br>标签，<*br>后面的内容将强行换到下一行。Web页会根据自己的可显示宽度自动换行（除非定义为不换行，不换行标签是<*nobr>），但有些情况下，我们需要强行换行（比如诗歌、歌词等的编排），此时<*br>标签就能派上用场。<*br>可以连续使用，如果<*br>后面没有内容，它将表示一个空行。<*br>是独立使用的标签，没有终止符，<*/br>是错误的！
<H3>强行分段：<*p>内容<*/p></H3>
<P>与换行不同，p用来强行分段，它是成对出现的标签，即以起始符<*p>引导被修饰的段落，以<*/p>结束该段。在HTML页面里，段与段之间的距离相当于一个空行，并不像Word里用回车分段得出的效果那样。默认情况下用两个<*br>也得到分段的效果，但这样可能会存在一些问题：一是，假设预定义了行高，那么，两个<*br>造成的两个段落的上下间距可能与用p的不同；二是，像动网论坛那样，用<*br>来给一系列超级链接分行，不管连续用多少个<*br>，<*br>都极可能被吞掉，结果是，那些超级链接外观上将是连在一起的，分辩起来哪是哪比较困难，所以建议用p标签来给它们分段（当然还有其他的手段）。
<P>类似p标签的还有div，记作：<*div>内容<*/div>。严格来说div不是一个分段标签，它和span等元素一样，属于网页布局元素，用于网页制作的布局、定位、色块等设计，但在论坛里，div的作用非常类似于p，不过，它分出的段落间距不一定与标签p一致。
<H3>分隔线：<*hr></H3>
<P>分隔线标签<*hr>也是独立使用的，它将令Web页出现一条线条。如果不需要特别的装饰，直接用<*hr>即可，也可以修饰分隔条，让它和你的帖子更协调地配合起来。<*hr>标签可定义元素主要有：</P>
<P><ul>
<LI>size— 厚度，即分隔线的粗细，默认为1；</LI>
<LI>color — 颜色，记作：color=颜色值；</LI>
<LI>width — 宽度，可用实数值表示，也可用百分比；</LI>
<LI>align — 对齐方式。居中：center，左对齐：left，右对齐：right。默认为居中。</LI></P>
<P><*hr>标签还有一些诸如title（标题）、noshade（无阴影）等元素，这里就不一一介绍了。</P>
</B></font></td></tr></table>
<table border=1 cellspacing=5 cellpadding=5 width=750 background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/03/n2.gif><tr><td colspan=3><font size=4 color=purple><b>
<H1>排版标签详解</H1>
<P> HTML的排版不同于Word的直观排版概念，它不是所见即可得的。但是，最终追求的结果是一样的：令终端页面的外观像我们预设的一样显示出来。</P>
<P>在支持HTML论坛里，排版可分为常规排版和非常规排版两种，后者属于较为高深的内容，出于学习的循序渐进要求，我们在本节只介绍常规排版。</P>
<H2>一、格式预设：<*pre>内容<*/pre></H2>
<P>这是非常有用的一个标签，它可以使得最终显示效果以原始格式实现。请看以下代码和效果：</P>
<P align=center><textarea rows=5 cols=50><pre>
1236
-1207
--------
29 </pre></textarea><BR>
效果如下:<BR>
<TABLE border=1 cellspadding=5 cellspacing=5 width=15%><TD><BR><center><pre>
1236
-1207
--------
29 </pre></center></TD></TABLE>
<P>论坛里，有时我们需要精确地对齐某些元素，pre标签能够帮上大忙，它能令效果比在“设计”模式下用空格符移动显示符号更准确。</P>
<H2>二、对齐：align</H2>
<P>align作为一个元素放置在相应标签里令被该标签修饰的显示单元按指定方式对齐或在图文混排时定义图片, 与文字的对齐方式。</P>
<P>先介绍前者，即被修饰单元的对齐方式。这种情形，align通常有三个值可以选择：left（左对齐）、center（居中）、right（右对齐），记作align=值。align不能独立使用，它要放在相应的标签里，如放在<*table ...>里，则令表格按取值情况对齐，<*table ... align=center>一句，将令表格居中；再如放在<p>标签里，则令<*p>...<*/p>里面的内容按指定值对齐，<*p laign=right>文字</p>将使“文字”右对齐。align的这种用法还可以用于<*div>、<*hr>等标签里。</P>
<P>而当align用于<*img>（图像标签）里时，它所指的是图片与文字的对齐方式，其值比较多，现解释如下：</P>
<div align=center><TABLE border=1 cellspacing=5 cellpadding=5><TR><TD>代码</TD><TD>效果</TD><TR>
<TR><TD><textarea rows=4 cols=30><img src=http://www.xyhc.com/images/default/logo.gif align=top>顶对齐</textarea></TD><TD align=top><img src=http://www.xyhc.com/images/default/logo.gif align=top>>顶对齐</TD><TR>
<TR><TD><textarea rows=4 cols=30><img src=http://www.xyhc.com/images/default/logo.gif align=bottom>顶对齐</textarea></TD><TD><img src=http://www.xyhc.com/images/default/logo.gif align=bottom>底对齐</div</TD><TR>
</TABLE></center>
<h2>三、缩进：<*blockquote></h2>
<P>blockquote将例被修饰的对象往右边缩退，记作<*blockquote>内容<*/blockquote>，以下效果是这样的语法实现的（用了两个缩进单位）：<*blockquote><*blockquote>本版简介：本区是音画特别训练营，主要用于音画制作教程、素材分享和经验交流，如果你有好的音画作品，请直接到主区〖优质美图〗区发布。……<*/blockquote><*/blockquote></P>
<BR><BR>
<P><blockquote><blockquote>本版简介：本区是音画特别训练营，主要用于音画制作教程、素材分享和经验交流，如果你有好的音画作品，请直接到主区〖优质美图〗区发布。</blockquote></blockquote><P>
</B></font></td></tr></table>
<table border=1 cellspacing=5 cellpadding=5 width=750 background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/03/n2.gif><tr><td colspan=3><font size=4 color=purple><b><P>未完待续.......注意，在使用代码时，请去掉代码中的“*”号</P></B></font></td></tr></table>
[ 本帖最后由 happy-yan 于 2006-7-10 13:27 编辑 ] <BLINK><font color=violet style="font-size: 30pt;font-family:华文行楷,隶书,黑体">很 清 楚 簡 易 的 教 程 ….^^真 辛 苦 快 樂 了 .. <BR> 大 家 別 只 欣 賞 羨 慕 人 家 的精 美帖 子, <BR>自 己 也 要 努 力 學 習 ,可 要 快 點 交 作 業 啊 .. </font></BLINK> <font color=#ff0001 style="font-size: 50pt;font-family:华文行楷,隶书,宋体"><i>谢谢版主</i></font>
[ 本帖最后由 云来云去 于 2006-7-11 19:44 编辑 ] 真的很详细~ 请问楼主除了用code让别人可以复制html代码之外，http://i70.photobucket.com/albums/i94/jason11214/F286E51F-7B81-41E9-A52B-70A89665652.jpg你这个框框的代码是怎么打的，谢谢了，教下小弟。 原帖由 rayboy 于 2006-7-15 05:57 发表
请问楼主除了用code让别人可以复制html代码之外，http://i70.photobucket.com/albums/i94/jason11214/F286E51F-7B81-41E9-A52B-70A89665652.jpg你这个框框的代码是怎么打的，谢谢了，教下小弟。
<BR><BR><P align=left>代 碼 : <BR><BR>
<TEXTAREA rows=5 cols=80>發表內容</TEXTAREA>
</P><BR><BR><BR><FONT size=3>rows : 橫 行 <BR>
cols:直 行
</FONT>
[ 本帖最后由 月儿 于 2006-7-20 17:45 编辑 ] (:))十分感谢～！！！ 的确简洁易懂。。8错 <img src=http://www.xyhc.com/images/default/logo.gif align=top>顶对齐 谢谢了，正在努力学习中
[ 本帖最后由 马甲之神 于 2006-7-31 09:51 编辑 ]
页:
[1]
2