dvbbs
收藏本页
联系我们
论坛帮助
dvbbs

秋雁南回文学社区 → 现代文学 → 缪斯乐园 → [转帖]HTML帖子教程（作者：黑马）


  共有17759人关注过本帖树形打印

主题：[转帖]HTML帖子教程（作者：黑马）
帅哥哟，离线，有人找我吗？
梦里柳地
 小大  1楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：义勇神侯 贴子：1941 积分：3033 威望：0 精华：0 注册：2005-10-3 9:13:00 		[转帖]HTML帖子教程（作者：黑马）  发贴心情 Post By：2005-10-4 21:07:04

HTML帖子教程（作者：黑马） HTML帖子教程（作者：黑马） 追求完美的你，不可能只留恋于像编辑Word文档一样编辑你的帖子，也不会满足于使用有限的UBB语法来制作你的帖子，“盗用”别人的代码也不是长久之计。看到别人那些精美无比的HTML帖子，你早已跃跃欲试了！ 如果是这样，那么，本教程就是为你准备的！ 本教程主要适合于HTML论坛新手和初中级水平的水手参考使用，对于拥有Web管理网站的朋友，本教程也很有指导意义。而对于想学习HTML的朋友，这也是一个不错的教程。总之，黑马尽量使用最通俗易懂的方式介绍HTML帖子的相关语法和制作方法、技巧。 或许你已经是HTML帖子的制作高手了，那么，如果你有耐心一章一节地看下去，说不准也对你有所帮助——里面的内容，极可能有些是你未接触过或者不太熟悉的；如果你是教授级别的，那么，浏览一下也无妨，你可以给黑马提提意见，让本教程对大家的帮助达到最佳效果。 本页左边的目录是超级链接，你可以点击任意一个标题阅读该章节，但黑马建议你从上到下按顺序去学习这些内容。黑马同时提醒你：一次不要学太多哦——知识是靠慢慢积累的，不要企图一蹴而就。 最后，祝你进步！ （下一节：文字设置）
[此贴子已经被作者于2005-12-26 9:52:21编辑过]
0 支持(0) 中立(0) 反对(0) 回到顶部
帅哥哟，离线，有人找我吗？
梦里柳地
 小大  2楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：义勇神侯 贴子：1941 积分：3033 威望：0 精华：0 注册：2005-10-3 9:13:00 		  发贴心情 Post By：2005-10-4 21:08:25

让我们首先从字体设置开始。

在HTML代码里，字体的定义并不是很难，我们只需用<font>标签即可定义字体、字号、字体颜色等。<font> 标签原则上要求成对出现，即在被修饰的字体前使用<font>引导，在被修饰的文字后用</font>结尾。下面给出例子和效果及相关说明：

语法：<font face=黑体 size=4 color=red>黑马在线动力</font>

效果：黑马在线动力

说明：<font>标签里，face为字体名称，“=黑体”即表示被修饰的文字即“黑马在线动力”的字体为黑体，至于定义为什么字体，看你的喜好了，如果你所设置的字体不存在，系统自动使用默认字体显示（如中文Windows平台下宋体就是默认字体）；size表示字号，论坛里可用字号是1号到7号，通常数字越大字号也就越大（也有的论坛相反），如果用户定义的字号超过7号则以7号显示（但还有其他方法突破7号字体，稍后我们会讨论到的）；color用来定义文字的显示颜色，其值放在和前面的各元素一样放在等号的后面，颜色的表示方式可用少量的颜色英文明文，也可用Web色码方式，如#ff0000，色码表请参阅黑马在线动力提供的色码表。

size还有一种赋值方法，形式如下：

<font size=+1>黑马在线动力</font>

这类表达式适用于未使用CSS设定的页面，它表示被修饰的文字在默认字号基础上加大一号。

字体修饰还用到其他的标签，分别介绍如下：

粗体：<b>文字</b> （例：文字）

加重：<strong>文字</strong> (例：文字）

上标：<sup>文字</sup> （例：文字）

下标：<sub>文字</sub> （例：文字）

斜体：<i>文字</i> （例：文字）

下划线：<u>文字</u> （例：文字）

提示：连同<font>标签一块，以上这些修饰方法，只要不相互冲突就可以结合起来使用。

标题修饰：<hx>文字</hx>。其中，x为1到6的数字。以下是h1到h6的标题式样效果，我们可以看到，字号是逐渐变小的：

标题一

标题二

标题三

标题四

标题五

标题六

最后讲讲突破7号字大小问题：

我们需要以嵌套方式调用CSS样式来定义字体，这种方法可以让我们最大限度地设置字号大小，实现方法也很简单，只需在<font>标签里用以下代码替换纯HTML原来的元素即可。请看以下代码和效果：

代码：<font color=#ff0000 style="font-size: 100pt;font-family:华文行楷,隶书,黑体">春天</font>

效果： 春天

CSS扩展了HTML功能，它能够令帖子和网页的可控制程度更高。更多的CSS知识我们将在后面陆续介绍，你也可以阅读 这个了解和学习一下CSS滤镜修饰字体的强大功能。

（下一节：分隔标签）

[此贴子已经被作者于2005-12-26 9:55:17编辑过]
0 支持(0) 中立(0) 反对(0) 回到顶部
帅哥哟，离线，有人找我吗？
梦里柳地
 小大  3楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：义勇神侯 贴子：1941 积分：3033 威望：0 精华：0 注册：2005-10-3 9:13:00 		  发贴心情 Post By：2005-10-4 21:09:56


0 支持(0) 中立(0) 反对(0) 回到顶部
帅哥哟，离线，有人找我吗？
梦里柳地
 小大  4楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：义勇神侯 贴子：1941 积分：3033 威望：0 精华：0 注册：2005-10-3 9:13:00 		  发贴心情 Post By：2005-10-4 21:12:58

<PS制作好看的细线条边框>

*梦里柳地再编辑*

（根据风中的百合原稿）

1.打开图片，图层--新建图层--，Ctrl+A(全选) --编辑--描边[居中，10像素，颜色自选]

2.滤镜--像素化--晶格化（10）

3.滤镜--像素化--碎片

4.滤镜--锐化--锐化（锐化多次到变为细线条为止），trl+d去逍选择。这里重复上次的滤镜可用快捷键 Ctrl+F操作

5.保存文件:JPEG格式

[此贴子已经被作者于2005-12-12 13:42:10编辑过]
0 支持(0) 中立(0) 反对(0) 回到顶部
帅哥哟，离线，有人找我吗？
梦里柳地
 小大  5楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：义勇神侯 贴子：1941 积分：3033 威望：0 精华：0 注册：2005-10-3 9:13:00 		  发贴心情 Post By：2005-10-4 21:16:57

放东东
0 支持(0) 中立(0) 反对(0) 回到顶部
帅哥哟，离线，有人找我吗？
梦里柳地
 小大  6楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：义勇神侯 贴子：1941 积分：3033 威望：0 精华：0 注册：2005-10-3 9:13:00 		  发贴心情 Post By：2005-10-4 21:24:25

梦里柳地赠送

0 支持(0) 中立(0) 反对(0) 回到顶部
帅哥哟，离线，有人找我吗？
梦里柳地
 小大  7楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：义勇神侯 贴子：1941 积分：3033 威望：0 精华：0 注册：2005-10-3 9:13:00 		  发贴心情 Post By：2005-10-4 21:32:02

加内容

[此贴子已经被作者于2005-12-13 12:01:27编辑过]
0 支持(0) 中立(0) 反对(0) 回到顶部
帅哥哟，离线，有人找我吗？
梦里柳地
 小大  8楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：义勇神侯 贴子：1941 积分：3033 威望：0 精华：0 注册：2005-10-3 9:13:00 		  发贴心情 Post By：2005-10-4 21:39:31

梦里柳地赠送


0 支持(0) 中立(0) 反对(0) 回到顶部
帅哥哟，离线，有人找我吗？
梦里柳地
 小大  9楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：义勇神侯 贴子：1941 积分：3033 威望：0 精华：0 注册：2005-10-3 9:13:00 		  发贴心情 Post By：2005-10-4 21:41:31

8层红色有内框大边框

内框7层

字后最后
0 支持(0) 中立(0) 反对(0) 回到顶部
帅哥哟，离线，有人找我吗？
梦里柳地
 小大  10楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：义勇神侯 贴子：1941 积分：3033 威望：0 精华：0 注册：2005-10-3 9:13:00 		  发贴心情 Post By：2005-10-4 21:47:51

梦里柳地赠送
最后
[此贴子已经被作者于2005-10-4 22:11:58编辑过]
0 支持(0) 中立(0) 反对(0) 回到顶部
帅哥哟，离线，有人找我吗？
梦里柳地
 小大  11楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：义勇神侯 贴子：1941 积分：3033 威望：0 精华：0 注册：2005-10-3 9:13:00 		  发贴心情 Post By：2005-10-4 22:16:05

从代码结构来看，HTML帖子实际上就是一个去头去尾的Web页面，原帖和回复置于<body>和</body>之间，我们可以把原帖和回复帖分开来看，这样，每一个帖子实际上就相当于Web页面的正文了。正文的行与行之间、段与段之间甚至上一个显示元素和下一个显示元素之间，如若我们不刻意去把它们分隔开来，情形会怎么样呢？显然会是一团糟，你的帖子将是一个大团块，阅读起来将十分不便。

为此，学习和掌握HTML语法中的分隔标签非常有必要，娴熟地应用分隔标签，将能令你制作的帖子可读性强、外观整洁漂亮。

强行换行：<br>

在需要处打上<br>标签，<br>后面的内容将强行换到下一行。Web页会根据自己的可显示宽度自动换行（除非定义为不换行，不换行标签是<nobr>），但有些情况下，我们需要强行换行（比如诗歌、歌词等的编排），此时<br>标签就能派上用场。<br>可以连续使用，如果<br>后面没有内容，它将表示一个空行。<br>是独立使用的标签，没有终止符，</br>是错误的！

强行分段：<p>内容</p>

与换行不同，p用来强行分段，它是成对出现的标签，即以起始符<p>引导被修饰的段落，以</p>结束该段。在HTML页面里，段与段之间的距离相当于一个空行，并不像Word里用回车分段得出的效果那样。默认情况下用两个<br>也得到分段的效果，但这样可能会存在一些问题：一是，假设预定义了行高，那么，两个<br>造成的两个段落的上下间距可能与用p的不同；二是，像动网论坛那样，用<br>来给一系列超级链接分行，不管连续用多少个<br>，<br>都极可能被吞掉，结果是，那些超级链接外观上将是连在一起的，分辩起来哪是哪比较困难，所以建议用p标签来给它们分段（当然还有其他的手段）。

类似p标签的还有div，记作：<div>内容</div>。严格来说div不是一个分段标签，它和span等元素一样，属于网页布局元素，用于网页制作的布局、定位、色块等设计，但在论坛里，div的作用非常类似于p，不过，它分出的段落间距不一定与标签p一致。

分隔线：<hr>

分隔线标签<hr>也是独立使用的，它将令Web页出现一条线条。如果不需要特别的装饰，直接用<hr>即可，也可以修饰分隔条，让它和你的帖子更协调地配合起来。<hr>标签可定义元素主要有：

size — 厚度，即分隔线的粗细，默认为1； color — 颜色，记作：color=颜色值； width — 宽度，可用实数值表示，也可用百分比； align — 对齐方式。居中：center，左对齐：left，右对齐：right。默认为居中；

<hr>标签还有一些诸如title（标题）、noshade（无阴影）等元素，这里就不一一介绍了。

（上一节：字体设置 下一节：排版标签）

[此贴子已经被作者于2005-12-26 9:57:57编辑过]
0 支持(0) 中立(0) 反对(0) 回到顶部
美女呀，离线，留言给我吧！
闻风
 小大  12楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 人生游戏
等级：逍遥半仙 贴子：3217 积分：13415 威望：4 精华：34 注册：2004-4-27 23:31:00 		  发贴心情 Post By：2005-10-4 23:02:25

难！图片点击可在新窗口打开查看图片点击可在新窗口打开查看图片点击可在新窗口打开查看

0 支持(0) 中立(0) 反对(0) 回到顶部
美女呀，离线，留言给我吧！
倚风揽月
 小大  13楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 月下青荷
等级：特邀嘉宾 贴子：261 积分：527 威望：0 精华：1 注册：2003-12-21 21:53:00 		  发贴心情 Post By：2005-10-5 0:32:32

真漂亮！就是不知道该怎么拿来用啊：（（（


我的博客： 淡淡花开

欢迎光临月下青荷论坛
0 支持(0) 中立(0) 反对(0) 回到顶部
美女呀，离线，留言给我吧！
风中的百合
 小大  14楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 缪斯乐园影音评论
等级：版主 贴子：5955 积分：15837 威望：7 精华：77 注册：2002-1-2 19:04:00 		  发贴心情 Post By：2005-10-5 0:42:31

多谢柳地，我喜欢的很，收下啦！！

姐妹们，如果有兴趣，我们一起来利用这些边框做音画贴吧

图片点击可在新窗口打开查看


点击图片进入
0 支持(0) 中立(0) 反对(0) 回到顶部
美女呀，离线，留言给我吧！
雁雨忧忧
 小大  15楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：无双秀才 贴子：263 积分：448 威望：0 精华：1 注册：2005-5-15 10:26:00 		  发贴心情 Post By：2005-10-5 8:34:16

好漂亮,可是我不会做里面嵌套的边框

真的好想你

文:雁雨忧忧

制作:雁雨忧忧

借用楼主的边框,谢谢你!

0 支持(0) 中立(0) 反对(0) 回到顶部
帅哥哟，离线，有人找我吗？
梦里柳地
 小大  16楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：义勇神侯 贴子：1941 积分：3033 威望：0 精华：0 注册：2005-10-3 9:13:00 		  发贴心情 Post By：2005-10-5 11:25:48

HTML的排版不同于Word的直观排版概念，它不是所见即可得的。但是，最终追求的结果是一样的：令终端页面的外观像我们预设的一样显示出来。

在支持HTML论坛里，排版可分为常规排版和非常规排版两种，后者属于较为高深的内容，出于学习的循序渐进要求，我们在本节只介绍常规排版。

一、格式预设：<pre>内容</pre>

这是非常有用的一个标签，它可以使得最终显示效果以原始格式实现。请看以下代码和效果：

代码：

<pre>   1236  -1207--------     29 </pre>效果：   1236  -1207--------     29

论坛里，有时我们需要精确地对齐某些元素，pre标签能够帮上大忙，它能令效果比在“设计”模式下用空格符移动显示符号更准确。

二、对齐：align

align作为一个元素放置在相应标签里令被该标签修饰的显示单元按指定方式对齐或在图文混排时定义图片与文字的对齐方式。

先介绍前者，即被修饰单元的对齐方式。这种情形，align通常有三个值可以选择：left（左对齐）、center（居中）、right（右对齐），记作align=值。align不能独立使用，它要放在相应的标签里，如放在<table ...>里，则令表格按取值情况对齐，<table ... align=center>一句，将令表格居中；再如放在<p>标签里，则令<p>...</p>里面的内容按指定值对齐，<p laign=right>文字</p>将使“文字”右对齐。align的这种用法还可以用于<div>、<hr>等标签里。

而当align用于<img>（图像标签）里时，它所指的是图片与文字的对齐方式，其值比较多，现解释如下：

left：图片位于文字的左边。例：

黑马在线动力

right：图片位于文字的右边。例：

黑马在线动力

top：后面的文字与图片的顶站对齐。例：

黑马在线动力

bottom：后面的文字与图片的底部对齐。例：

黑马在线动力

middle：后面的文字与图片的中间对齐。例：

黑马在线动力

absmiddle：后面的文字与图片的绝对中间对齐。例：

黑马在线动力

更多的img标签里的align元素请参阅其他资讯。

三、缩进：<blockquote>

blockquote将例被修饰的对象往右边缩退，记作<blockquote>内容</blockquote>，以下效果是这样的语法实现的（用了两个缩进单位）：<blockquote><blockquote>黑马在线动力……</blockquote></blockquote>

黑马在线动力是一个综合性网站，有“PC动力”、“原创大厅”、“情感小屋”、“读书角”、“音画广场”和“音乐岛”六个栏目，网站还开设有听歌台主站。

当然，你也可以用空格符号实现缩进（代码记作：&nbsp;），但它只管左边的，对右边没有影响，而blokcquote标签是有的。

四、居中对齐：<center>内容</center>

这个很简单，成组使用即可，不多说什么了。

五、其他排版方式：表格

用表格来实现网页布局一直被大量使用。在论坛里发帖，有些需要居中的地方，我们不妨用用表格，它得出的效果会比用center标签好得多。试看以下例子：

为了那一夏的热烈 爱需要蛰居多久 在漫长的暗无天日的日子里 一切早已精心策划 单等风和日丽之时破土而出 而后羽化成歌 烈日下本就炽热的爱必须张扬 让正午的阳光更为燥热 让黄昏的空气鼓动起来 让爱肆无忌惮 当爱成为阳光下的风景 曾经的等待又何需忆起

如果我们将表格的边框设置为0，那么，看表将看不到，文字的居中效果就非常理想了。

（上一节：分隔标签 下一节：图像标签）

[此贴子已经被作者于2005-12-26 10:01:09编辑过]
0 支持(0) 中立(0) 反对(0) 回到顶部
帅哥哟，离线，有人找我吗？
梦里柳地
 小大  17楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：义勇神侯 贴子：1941 积分：3033 威望：0 精华：0 注册：2005-10-3 9:13:00 		  发贴心情 Post By：2005-10-5 11:27:02

更多内容……

http://www.gxblk.com/pc/no3/thtml.htm

[此贴子已经被作者于2005-12-26 10:03:27编辑过]
0 支持(0) 中立(0) 反对(0) 回到顶部
帅哥哟，离线，有人找我吗？
梦里柳地
 小大  18楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：义勇神侯 贴子：1941 积分：3033 威望：0 精华：0 注册：2005-10-3 9:13:00 		  发贴心情 Post By：2005-10-5 11:28:33

黑马老师搬地方了：）

http://www.gxblk.com/pc/no3/thtml.php?id=0#

[此贴子已经被作者于2005-12-26 10:07:05编辑过]
0 支持(0) 中立(0) 反对(0) 回到顶部
帅哥哟，离线，有人找我吗？
梦里柳地
 小大  19楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：义勇神侯 贴子：1941 积分：3033 威望：0 精华：0 注册：2005-10-3 9:13:00 		  发贴心情 Post By：2005-10-5 11:29:40

叫帖子动起来 帖子内单一图片的移动代码如下： <CENTER><MARQUEE scrollAmount=1 direction=up height=600> <TABLE style="WIDTH: 500px; HEIGHT: 375px" background=http://bbs.xxjy.net/UploadFile/2005-1/200512821819969.jpg border=0> <TBODY> <TR> <TD></TD></TR></TBODY></TABLE></MARQUEE></CENTER> MARQUEE：为移动“命令”代码 scrollAmount：为速度，数值越大，移动速度越快 direction ：为方向，up,down,left,right分别代表上下左右的方向 height：为移动的高度

[此贴子已经被作者于2005-12-26 10:10:37编辑过]
0 支持(0) 中立(0) 反对(0) 回到顶部
帅哥哟，离线，有人找我吗？
梦里柳地
 小大  20楼 个性首页 | 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：义勇神侯 贴子：1941 积分：3033 威望：0 精华：0 注册：2005-10-3 9:13:00 		  发贴心情 Post By：2005-10-5 11:34:40

同理，我们也可以叫整个帖子动起来~~

代码如下：

<MARQUEE scrollAmount=2 direction=right width=550 height=1400> <TABLE cellSpacing=26 borderColorDark=#3d452c cellPadding=0 width=720 align=center borderColorLight=#879964 background=http://bbs.xxjy.net/UploadFile/2005-1/2005127213434934.jpg border=0> <TBODY> <TR> <TD width="100%"> <DIV align=center> <TABLE cellSpacing=5 borderColorDark=#3d452c cellPadding=0 width="100%" borderColorLight=#879964 background=http://bbs.xxjy.net/UploadFile/2005-1/2005127213555536.jpg border=1> <TBODY> <TR> <TD width="100%"> <TABLE cellSpacing=5 borderColorDark=#3d452c cellPadding=0 width="100%" borderColorLight=#879964 background=http://bbs.xxjy.net/UploadFile/2005-1/2005127213555536.jpg border=1> <TBODY> <TR> <TD width="100%"> <DIV align=center> <TABLE cellSpacing=10 cellPadding=0 width="100%" background=http://bbs.xxjy.net/UploadFile/2005-1/2005127213534784.jpg border=0> <TBODY> <TR> <TD width="100%"> <DIV align=center> <TABLE borderColorDark=#3d452c cellPadding=0 width="100%" borderColorLight=#879964 background=http://bbs.xxjy.net/UploadFile/2005-1/2005127213555536.jpg border=1> <TBODY> <TR> <TD width="100%"> <DIV align=center> <TABLE borderColorDark=#3d452c cellPadding=0 width="100%" borderColorLight=#879964 background=http://bbs.xxjy.net/UploadFile/2005-1/2005127213555536.jpg border=1> <TBODY> <TR> <TD width="100%"> <DIV align=center> <TABLE cellSpacing=0 cellPadding=0 width="100%" background=http://bbs.xxjy.net/UploadFile/2005-1/200512821523294.jpg border=0> <TBODY> <TR> <TD width="100%"> <CENTER> <TABLE style="WIDTH: 550px; HEIGHT: 380px" borderColor=#cccccc cellSpacing=2 cellPadding=3 background=http://bbs.xxjy.net/UploadFile/2005-1/2005128211051895.jpg border=0> <TBODY> <TR> <TD></TD></TR></TBODY></TABLE> <CENTER> <TABLE style="WIDTH: 550px; HEIGHT: 150px" borderColor=#cccccc cellSpacing=2 cellPadding=3 background=http://bbs.xxjy.net/UploadFile/2005-1/200512821523294.jpg border=0> <TBODY> <TR> <TD><EMBED align=right src=http://bbs.xxjy.net/wmuser/byys/flash/nixuehui.swf width=550 height=150 type=application/x-shockwave-flash quality="high" menu="false" wmode="trans