在网上看见这教程通俗易懂。转过来大家学习。

维子

   【HTML代码简介版和入门教程以及常用HTML标签代码】
研究代码这么久终于研究点敲门 大家要认真看哇 代码是不能马虎的 一个符号都可能不能正常使用 另外我发个HTML代码编辑器地址给大家，不熟悉代码的可以先在那编辑做完后在复制粘贴在坛论编辑器里面  地址：http://www.blabla.cn/html_examples/001_a_very_simple_html.html    如有疑问请加QQ304459145 在线时间00-05点  不在请留言！
强调几点：1.必须在勾选"源码"(源码=''纯文字'')下编辑代码
2.颜色代码可以是相应的英文单词，也可以是颜色代码，如white、black，也可以表示成#ffffff、#000000

按照我平时做帖子的思路作为顺序，分三步讲解，最快的速度学会html代码，红色部分为你自己选择的内容，可以更换，这是一个极简化的html代码做帖模式，等你掌握了这套帖子，我还会提供更高级的教程。按照我刚学时的经验，初学者学习下面的内容应该不难。




第一步:先看代码的组成部分，理解了以后就不难了，我简单地将一个音乐帖子代码分为5个部分

1.设置边框、背景
<TABLE style="LEFT: -10px; WIDTH: 700px; POSITION: relative; TOP: 30px" cellSpacing=0 cellPadding=0 bgcolor=white border=10 borderColor=purple align=center>
<TBODY>
<TR>
<TD>


帖子内容


</TD></TR></TBODY></TABLE>

解释:bgcolor是背景颜色，border是边框宽度，borderColor是边框颜色，帖子内容放在中间，边框就相当于帖子的开头和结尾是定死了。




2.配图
<IMG SRC="图片地址">

解释:红色部分是图片的地址。



3.文字介绍
<font color="#FF0000" size=2 face="微软雅黑">文字介绍</font>

解释:红色部分分别是文字的颜色、大小、字体和文字介绍，文字介绍可以使歌词或自己对歌曲的感触等。



4.试听播放器
<embed style="WIDTH: 350px; HEIGHT: 50px" src="音乐地址" width="128" height="128" type="audio/mpeg" volume="0" loop="false" autostart="true" showstatusbar="1"></embed>

解释:红色部分是试听歌曲的地址、自动播放，若不想自动播放则设为false。



5.下载链接
<a href="音乐地址" target=_blank>点击下载</a>

解释:红色部分是下载歌曲的地址、显示的文字，显示文字可以随便写。
编辑完成后注意一点要勾上HTML
教程介绍
请先把简介版的学会在看入门版 易懂！

初学者一打开HTML制式，看到的往往是一堆代码，

即便不晕也是丈二和尚，往往会在这个时期放弃学习，

实际上你只要摸上规律，找到窍门，它是很简单的，因为它的组成是有定律的、是固定的
下面我就从最基本的、最基础东西开始，和大家共切磋

一个完整HTML代码的帖子包含了最基本的几个要素

1.表格(容纳内容的一个容器)

2,图片:包括FLASH

3.内容:连接地址,文字说明介绍等

4. 播放器

由此可以看出,这里关键的问题就是表格,因为其它的如文字,图片等大家都不同程度的知道或者了解

初学者往往就是被表格给卡住了,有了表格就好像有了房子,文字,图片等往里面搬就是了(最简单的复制粘贴)

其实一个最基本的表格是非常简单的 ,千万别被那些成堆的代码给吓唬住了,因为大多数帖子都是采用多

层表格来实现风格各异的效果,掌握了简单的就可以慢慢的去套2层3层....直至多层

我下面给出一个最基本的表格.

<TABLE style="WIDTH: 512px; HEIGHT: 125px" borderColor=#000000 bgColor=#b4b4b4 border=5>
<TBODY>
<TR>
<TD>
这里面就是表格的内部可以装图片等内容
</TD>
</TR>
</TBODY>
</TABLE>


我用不同的颜色来标注它们的对应关系

很明显这些代码都是成对出现的,
这是一个必须牢牢掌握的基本原则!!!记住:
有多少<TABLE>或者<TR>等等开头就一定要有多少</TABLE>等等收尾,并注意他们的相对位置


上面的表格代码显示后就是如下：

这里面就是表格的内部可以装图片等内容

注意:将上面代码复制到论坛编辑器后一定要构选左侧的启用HTML代码


下面再说说这些代码的含义

<TABLE> 就是定义这是一个表格,是表格的开头.

<TBODY>表体的起始符,实际使用中也可以省略不用.


<tr>：tr的作用是规定表格里面相关内容的行，其中，t是table，r是row（行）。有多少组tr，这张表格内就有多少行。<tr>紧跟在<tbody>之后。必须有终止符</tr>。
补充说明:
所谓行,我们不能简单的把它理解为一条线,因为在<tr> </tr>之间是可以容纳我们所需要安排的任何内容的.


<td>：td的作用是规定表格的列，t是table，d可理解为down（向下）。有多少组td，这张表格内就有多少列。第一个<td>紧跟在<tr>之后。终止符为</td>。td与tr配合构成表格内的单元格。(我们可以这样去理解,<TABLE></TABLE>是一间房子,房子里面有纵横分布不同的房间.
==============================
下面再介绍表格的7个属性

这些属性不是在任何表格中都会运用,要看需要

1.  bgcolor=某种颜色      表格的底色 注:如果选用图片作为背景就不能同时用表格底色bgcolor.用背景图片的代码是background=图片地址    表格的背景图片)

2.  bordercolor=某种颜色  表格边框的颜色

3.  bordercolorlight=某种颜色   向光部分的颜色(注意不能和上面的边框颜色bordercolor同时使用)[同时注意只有在border边框厚度大于1时该属性才会有效果]

4. bordercolordark=某种颜色    背光部分的颜色(注意不能和上面的边框颜色bordercolor同时使用)[同时注意只有在border边框厚度大于1时该属性才会有效果]

5. border=数字        表格边框的厚度

6. cellspacing=数字   表格格子之间的间隙大小(可根据自己需要设定,不选用该属性则系统按默认自动设置)

7. cellpadding=数字   表格边框和表格内部内容之间的间隙(可根据自己需要设定,不选用该属性则系统按默认自动设置)



下面就几个属性问题用实例说明

bgcolor属性
前面说了这个属性决定表格的底色

代码:
<TABLE style="WIDTH: 512px; HEIGHT: 125px" borderColor=#000000 bgColor=#8080c0 border=5>
<TBODY>
<TR>
<TD>
表格底色变了
</TD></TR></TBODY></TABLE>

表格底色变了

我不使用底色而选用背景图片

代码:
<TABLE  borderColor=#78596D  width="50%" heihgt=500 background=http://image.17173.com/bbs/upload/2005/12/14/1134531115.gif border=5>
<TBODY>
<TR>
<TD>
看看,有背景了
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>

</TD></TR></TBODY></TABLE>

看看,有背景了

注:1个<BR>就相当于一个回车

这里还必须提醒大家注意表格代码和各种属性之间都必须有一个空格否则,这些属性是不能显示的.

再就是使用HTML代码编辑帖子后不能够再去使用Discuz!代码,两者不可混用

说到这里,大家是否感觉很简单呢,一点都不难.

有了这个基础后面就更不难了.

◆常用HTML标签代码◆
　　 ◆１．文字设置代码：
<font face=黑体 size=4 color=red>文字设置代码</font>

　　◆２．大号文字设置代码：
<font face=黑体 style=font:50pt color=red>文字设置代码</font>

　　◆３．文字的边外加光辉效果代码：
<div style="FILTER: Glow(color=#0000ff,strength=12); HEIGHT: 6pt"> <FONT style="FONT-SIZE: 60pt;FONT-FAMILY:隶书; COLOR: #ffff00"> 如画江山</FONT></div>

　　◆４．文字重叠效果代码：
<div style="FONT-SIZE:70pt;filter:dropshadow(color=#000000,offX=5,offY=3,Positive=1);WIDTH:100%; COLOR:#60A000;LINE-HEIGHT:150%"> <FONT style="FONT-FAMILY:隶书">社会主义好！</FONT> </div>

　　◆５．文字竖排代码：
<p align=RIGHT> <font style="WRITING-MODE: tb-rl"style=font:14pt color=0000ff> 更喜岷山千里雪，<br> 三军过后尽开颜。<br> ．．．．．<br> </FONT></P>

　　◆６．一条横线代码：
<CENTER> <HR SIZE=2 color=#ffff00 ALIGN=CENTER WIDTH="500"> </CENTER>

　　◆７．贴图代码1：
<img src="图片地址">

　　◆８．贴图代码2：
<INPUT src="图片地址" type=image width=500>

　　◆９．羽化图片代码：
<INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="图片地址" type=image width=400>

　　◆１０．超连接代码：
<A href="连接网页地址" target=_blank>说明文字</A>

　　◆１１．从左向右移动的代码：
<MARQUEE scrollAmount=3 direction=right> 文字或图片从左向右移动 </marquee>

　　◆１２．从右向左移动的代码：
<marquee scrollamount=2 direction=left> 文字或图片从右向左移动 </marquee>

　　◆１３．从下向上移动的代码：
<marquee scrollamount=1 direction=up > 文字或图片从下向上移动 </marquee>

　　◆１４．从上向下移动的代码：
<marquee scrollamount=5 direction=down >文字或图片从下向上移动 </marquee>

　　◆１５．左右来回走移动的代码：
<marquee scrollamount=8 behavior=alternate > 文字或图片左右来回走移动 </marquee>

　　◆１６．相对定位代码：
<DIV style="LEFT: 0px; WIDTH: 500px; POSITION: relative; TOP: 20px; HEIGHT: 200px; ridge:">
</DIV>

　　◆１７．绝对定位代码：
<DIV style="LEFT: 300px; WIDTH: 220px; POSITION: absolute; TOP: 20px; HEIGHT: 220px" >
</DIV>

　　◆１８．相对定位与绝对定位加叠图片代码：
<DIV style="LEFT: 0px; WIDTH: 500px; POSITION: relative; TOP: 20px; HEIGHT: 200px; ridge:">
<DIV style="LEFT: 300px; WIDTH: 220px; POSITION: absolute; TOP: 20px; HEIGHT: 220px" >
<INPUT type=image width=160 src="http://bbs.gw.com.cn/UploadFile/2008-6/20086111653319630.jpg" >
</INPUT> </DIV> </DIV>

　　◆１９．各种常用标签语句：

<BR>　过行单标签．　　<p></p> 过段标签．　<pre>文字依原始样式显示标签</pre>　

&nbsp;一个空格．　　<li>文字行首加一个圆点．</li>圆点标签．

　　◆２０．定位标签代码：

<CENTER>内容居中</CENTER>
<DIV align=center> 内容居中</DIV>
<p align=CENTE>内容居中</P>
<p align=LEFT>内容居左</P>
<p align=RIGHT>内容居右</P>

　　水平加竖直定位指令语句（放在表格的列标签内）：
<td align=LEFT valign=top>居左靠顶</td>
<td align=center valign=top>居中靠顶</td>
<td align=right valign=top>居右靠顶</td>
<td align=LEFT valign=bottom>居左靠底</td>
<td align=center valign=bottom>居中靠底</td>
<td align=right valign=bottom>居右靠底</td>


　　◆２１．银色播放器代码：
<EMBED src="音乐文件地址" width=500 height=50 type=audio/x-ms-wma autostart="true" loop="true">



全教程以结束大家好好学吧！
评分

维子

杭州西湖 发表于 2013-12-20 06:13
@一起愉快 维子真捧，好转帖，容我慢慢消化！破例加滿分！

我也要好好反复学习，代码字记不住。需要时就到里請教、

维子

耄耋庠生 发表于 2013-12-20 06:25
大家好好学吧！

谢谢分享。

维子

武朝歌 发表于 2013-12-20 10:11
貌似看懂，我先试试：

代码有误.论坛有点变形。