社区服务
银行
朋友圈
勋章中心
博客

风格切换
black
music
china
wind
blue
gray
yellow
pink
green
fashion
moon
wind5

无围之城—喧嚣的互联网，我们需要安静 » 真情物语 » 发贴教程－－如何使用HTML语言发帖

« 1 2 3 4 5» Pages: ( 1/7 total )

本页主题: 发贴教程－－如何使用HTML语言发帖打印 \| 加为IE收藏 \| 复制链接 \| 收藏主题 \| 上一主题 \| 下一主题

枫叶红了

健康是福，开心是真。

级别: 总版主

精华: 58
发帖: 3504
威望: 7358 点
财产: 201215 魅力元
贡献值: 10 点
在线时间:1462(小时)
注册时间:2006-05-30
最后登录:2010-02-07

小中大引用推荐编辑举报只看复制

发贴教程－－如何使用HTML语言发帖

管理提醒：

本帖被 admin 执行加亮操作(2008-10-08)

　　大家在论坛看到的那些漂亮的贴图多是加了一些代码，这些代码就是ＨＴＭＬ代码。我个人认为不需要了解全部的ＨＴＭＬ代码的意义，只需要理解一些最简单的ＨＴＭＬ代码就可以了，（我一般是把这些代码复制存放在电脑里面，要用的时候拿出来按照需要修改就是）。所以这里提供一些最基本的发贴所需代码，与大家共同学习。

首先是发贴注意事项：

　　在我们的论坛里面只要直接点击右上角的〔发表新帖〕按钮就可以进入发帖界面，在发HTML语言帖子之前请注意发帖对话框左侧的功能说明，如果标明〔html 状态 On〕，则说明该板块允许发布HTML语言帖子，你只要将编辑好的代码直接粘贴在对话框里，点击〔预览帖子〕按钮，就可以看见你编辑的HTML帖子了，如效果不理想，可以在下面的发帖对话框里继续进行调整编辑，直至达到满意效果为止，这时就可以点击〔发新话题〕按钮，一篇图文并茂的优美帖子将使你认识更多的新朋友。

特别提示：如果标明〔html 状态 Off〕，则说明该板块不支持HTML。请不做无谓的尝试。

其次是HTML基本格式：

1、贴单张图：

　代码：　
<img src="图片地址">

设置图片大小：<IMG SRC=图片地址 width=数值 height=数值>

给图片加边框
代码如下：

说明：

border="6" 表格边框的厚度，不同浏览器有不同的内定值。

cellspacing="2" 表格格线的厚度

cellPadding=1　表格格线内厚度

borderColor=#FFDEAD　边框色彩

特别提示：代码中红色部分是可变参数，请根据具体情况调整设置。

图例效果：

笑口常开，幸福永伴。

顶端 Posted: 07-2-28 19:16 | [楼主]

枫叶红了

健康是福，开心是真。

级别: 总版主

精华: 58
发帖: 3504
威望: 7358 点
财产: 201215 魅力元
贡献值: 10 点
在线时间:1462(小时)
注册时间:2006-05-30
最后登录:2010-02-07

小中大引用推荐编辑举报只看复制

2、文字设置：

50pt face=华文行楷 color=red>文字内容

其中：50pt是字体大小，可以调整数值；　

　　　华文行楷是字体，也可以调整；

　　　red是颜色，也可以调整，并且可以用另一种表现方式（#FFDEAD六位字母可根据需要的颜色调整。）

3、发flash 的代码

flash地址 width=420 height=400 type=application/x-shockwave-flash>

或者：flash地址 width=420 height=400>

其中：

　　flash地址：是后缀为“ .swf”的Flash网址；

　　width=420：是规定播放器视窗宽度，红色部分可调整；

　　height=400：是规定播放器视窗高度，红色部分可调整；

效果：

4、贴音乐的公式：

反复播放的：

0 height=0 type=audio/mpeg loop="true" autostart="true" panel="0">

一般播放：

400 height=65 type=application/vnd.rn-realmedia autostart="true">
其中：

　　src="音乐连接地址"：地址可以是所有格式的音乐网址；

　　width=400：视频播放器宽度，红色部分可调整；

　　height=65：视频播放器高度，红色部分可调整；

注：两者皆取“0”则表示隐藏播放。

笑口常开，幸福永伴。

顶端 Posted: 07-2-28 19:17 | 1 楼

枫叶红了

健康是福，开心是真。

级别: 总版主

精华: 58
发帖: 3504
威望: 7358 点
财产: 201215 魅力元
贡献值: 10 点
在线时间:1462(小时)
注册时间:2006-05-30
最后登录:2010-02-07

小中大引用推荐编辑举报只看复制

5、移动的文字或者图片

<marquee direction=left>文字或图片</marquee> 说明: left 向左移动

<marquee direction=right>文字或图片</marquee> 说明: right 向右移动

<marquee behavior=scroll>文字或图片</marquee> 说明: scroll 一圈一圈绕着走

<marquee behavior=slide>文字或图片</marquee> 说明: slide 只走一次

<marquee behavior=alternate>文字或图片</marquee> 说明:alternate来回走

文字向上滚注意文字分行并拉开行距：
<marquee direction=up scrollamount=3>文字或图片</marquee> 说明: up　向上移动；改为down则是向下移动。

图片移动与文字移动一样的代码，就是把文字部分换成第一楼贴图片的代码

实例如下： left

向左滚动的文字和图片

right

向右滚动的文字和图片

向上滚动的文字和图片

down

向下滚动的文字和图片

笑口常开，幸福永伴。

顶端 Posted: 07-2-28 19:18 | 2 楼

枫叶红了

健康是福，开心是真。

级别: 总版主

精华: 58
发帖: 3504
威望: 7358 点
财产: 201215 魅力元
贡献值: 10 点
在线时间:1462(小时)
注册时间:2006-05-30
最后登录:2010-02-07

小中大引用推荐编辑举报只看复制

6、Html设置背景：

一个完整的HTML帖子应该是：
美贴＝背景＋文章＋插图＋收尾

设置背景的html代码如下：
<TABLE align=center background="背景图片网址" border=10 cellSpacing=2 borderColor=#841A00 width=500><TBODY><TR><TD>帖子的文章加图片</TD></TR></TBODY></TABLE>

注意：前边用了多少<TABLE......><TBODY><TR><TD>后面就要有多少</TD></TR></TBODY></TABLE>收尾。多收和少收都会使帖子出错。

常用的参数设定及注解：

<table width="400" border="10" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="图片网址" bgcolor="#0000FF" bordercolor="#CF0000" bordercolorlight="#00FF00" bordercolordark="#00FFFF">

width="400"
表格宽度，接受绝对值（如 500）及相对值（如 80%）。

border="10"
表格边框的厚度。

cellspacing="2"
表格格线的厚度

cellPadding=5　表格格线内厚度

align="CENTER"
表格的摆放位置（水平），可选值为：左： left,　右： right,　居中： center

valign="TOP".
表格内内容的对齐方式（垂直），可选值为： top, middle, bottom。　　

background="背景图片网址"
表格的背景图片，与 bgcolor 不要同用。

bgcolor="#0000FF"
表格的底色，与 background 不要同用

bordercolor="#CF0000"
表格边框颜色

bordercolorlight="#00FF00"
表格边框向光部分的颜色

bordercolordark="#00FFFF"
表格边框背光部分的颜色，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。

笑口常开，幸福永伴。

顶端 Posted: 07-2-28 19:20 | 3 楼

枫叶红了

健康是福，开心是真。

级别: 总版主

精华: 58
发帖: 3504
威望: 7358 点
财产: 201215 魅力元
贡献值: 10 点
在线时间:1462(小时)
注册时间:2006-05-30
最后登录:2010-02-07

小中大引用推荐编辑举报只看复制

这是别的论坛有心人发的，经本人同意，转发至此。朋友们只管学习，不可跟贴，我将继续转发。

[ 此贴被枫叶红了在07-2-28 19:49重新编辑 ]

笑口常开，幸福永伴。

顶端 Posted: 07-2-28 19:37 | 4 楼

一声叹息

级别: 总版主

精华: 21
发帖: 1639
威望: 1683 点
财产: 7096 魅力元
贡献值: 1055 点
在线时间:551(小时)
注册时间:2006-03-06
最后登录:2010-03-09

小中大引用推荐编辑举报只看复制

枫叶有心了，向枫叶致敬

和农夫交谈不离谦恭之态,与王侯散步不露谄媚之颜!

顶端 Posted: 07-2-28 19:42 | 5 楼

枫叶红了

健康是福，开心是真。

级别: 总版主

精华: 58
发帖: 3504
威望: 7358 点
财产: 201215 魅力元
贡献值: 10 点
在线时间:1462(小时)
注册时间:2006-05-30
最后登录:2010-02-07

小中大引用推荐编辑举报只看复制

帖子中移动的文字和图片的制作代码

无围论坛欢迎你

祝你成功

祝你开心

代码

无围论坛欢迎你

祝你成功

祝你开心

说明：代码的上半部分，我们看出是一个背景表格的代码，下部分才是文字和移动效果的相关属性

scrollAmount=2 direction=up 这里表示的是是移动的速度是2 方向是up，向上。如果更改速度或者移动方向的话需要更改这里。

接下来就是文字的相关属性了，我们可以参照代码多加一行字或者去掉一行字。

笑口常开，幸福永伴。

顶端 Posted: 07-3-1 06:59 | 6 楼

枫叶红了

健康是福，开心是真。

级别: 总版主

精华: 58
发帖: 3504
威望: 7358 点
财产: 201215 魅力元
贡献值: 10 点
在线时间:1462(小时)
注册时间:2006-05-30
最后登录:2010-02-07

小中大引用推荐编辑举报只看复制

一:背景（表格）

1：背景（论坛中帖子的外背景）

代码如下：

body的相关属性：

background=背景图片URL地址（设定了背景图片后bgcolor设定值将无效）
bgcolor --- 背景色彩
text --- 非可链接文字的色彩
link --- 可链接文字的色彩
alink --- 正被点击的可链接文字的色彩
vlink --- 已经点击(访问)过的可链接文字的色彩
#=rrggbb
色彩是用 16 进制的红－绿－蓝(red-green-blue, RGB) 值来表示。
16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.

2：表格

效果如：

源代码如下：

帖子内容，文字或图片..... </TD></TR></TBODY></TABLE>

<TABLE> 的参数设定（常用）：

注解：

width="400"
表格宽度，接受绝对值（如 80）及相对值（如 80%）。

border="1"
表格边框的厚度，不同浏览器有不同的内定值，故请指明。

cellspacing="2"
表格格线的厚度

align="CENTER"
表格的摆放位置（水平），可选值为： left, right, center

valign="TOP".
表格内内容的对齐方式（垂直），可选值为： top, middle, bottom。　　

background="myweb.gif"
表格的背景图片，与 bgcolor 不要同用。

bgcolor="#0000FF"
表格的底色，与 background 不要同用

bordercolor="#CF0000"
表格边框颜色

bordercolorlight="#00FF00"
表格边框向光部分的颜色

bordercolordark="#00FFFF"
表格边框背光部分的颜色，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。

cols="2"
表格栏位数目，只是让浏览器在下载表格时先画出整个表格而已。

笑口常开，幸福永伴。

顶端 Posted: 07-3-1 07:01 | 7 楼

枫叶红了

健康是福，开心是真。

级别: 总版主

精华: 58
发帖: 3504
威望: 7358 点
财产: 201215 魅力元
贡献值: 10 点
在线时间:1462(小时)
注册时间:2006-05-30
最后登录:2010-02-07

小中大引用推荐编辑举报只看复制

利用表格属性做漂亮的代码边框

　　一些新手看到别人做出漂亮的帖子边框都很好奇是怎么做成的，说穿了也就是巧妙的应用了表格的相关属性。这里我就统计几种常见的表格使用方法，可能大家也有更多更好的想法，也就起个抛砖引玉的作用吧。

例1：

说明：看起来好像是用了四层表格，其实只用了两层，同一个背景图。主要是边框向光和背光部分的颜色应用起到的效果。

源代码：

例2：

说明：这种效果其实有好几种方法做出来，但是在我认为这种是最简单的，只是金色背景那层（第二层）表格的宽是100%其它属性值一律为0。主要是在第三层，第三层的宽width的取值要是99%，而第三层的td里的width属性要是100%。源代码：
<table align="center" border="0" cellpadding="0" cellspacing="10" width="500" background="http://www.okmjy.com/bbs/UploadFile/2005-4/2005424154538849.jpg"><tr><td width="100%" align="center"><table lign="center" border="0" cellpadding="0" cellspacing="0" width="100%" background="http://www.okmjy.com/bbs/UploadFile/2005-4/200542415453858.jpg"><tr><td width="100%" align="center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="99%" background="http://www.okmjy.com/bbs/UploadFile/2005-4/2005424154538849.jpg"><tr><td width="100%" align="center">
<br><br><img border="0" src="http://www.okmjy.com/bbs/UploadFile/2005-4/200542411472098.gif">

例3：

说明：这个好像没什么特别的，就是把四个角上的框架图用表格分开。
源代码：

例4：

说明：把图片应用到边框上面，整个表格的大小很重要，调整也是件麻烦的事，所以建议大家用表格格线的厚度cellspacing的属性值或者是表格格线的间距cellpadding的属性值来调整。

源代码：

关于内容居中：

说明：

一般大家做帖子为了美观总是把整体内容全都居中，内容中的文字图片等都加上了居中的代码CENTER，频繁的使用同一组代码，用多了大家是不是觉得有些杂乱的感觉？在这里我都教大家一招，只需要用一次就可以使整个表格内的内容全都居中。

下面是大家一般使用的表格代码：
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" background="http://cry.shidabbs.com/home/bbsjc/images/jcbj03.jpg"><tr><td></td></tr></table>

将其改成如下代码：
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" background="http://cry.shidabbs.com/home/bbsjc/images/jcbj03.jpg"><tr><td width="100%" align="center"></td></tr></table>

这样样在表格内的文字图片等都不用再加居中代码了，直接插入就可以了。

笑口常开，幸福永伴。

顶端 Posted: 07-3-1 07:03 | 8 楼

枫叶红了

健康是福，开心是真。

级别: 总版主

精华: 58
发帖: 3504
威望: 7358 点
财产: 201215 魅力元
贡献值: 10 点
在线时间:1462(小时)
注册时间:2006-05-30
最后登录:2010-02-07

小中大引用推荐编辑举报只看复制

加框有一层FLASH的图片

效果：

加框有一层FLASH的图片

笑口常开，幸福永伴。

顶端 Posted: 07-3-1 07:04 | 9 楼

« 1 2 3 4 5» Pages: ( 1/7 total )	帖子浏览记录版块浏览记录
无围之城—喧嚣的互联网，我们需要安静 » 真情物语