打印

HTML简易教程

本主题由竹凌友于 2008-7-27 08:59 提升

hhf_123

初来乍到

Rank: 1

积分: 47
元宝: 30 枚
鲜花: 0 朵
鸡蛋: 0 枚

1^# 大中小发表于 2007-7-8 23:43 只看该作者

HTML简易教程

HTML简易教程

受人所托，今天自己费了一些时间，出个HTML简易教程。高手就不需要看了，各位新人可以看看。。。～

很简单的发帖技巧

如果你不去深入地学一下，只想简单地发个小帖子，那么仅仅几步就行了。。。～
1、首先准备好素材。
2、点击发表主题
3、复制以下基本代码（根本不用管代码是怎么写的：）
<TABLE align=center cellSpacing=88 cellPadding=38 width="100%" background=http://www.s1.inets.jp/~rouge/free/017f.jpg border=0>
<TBODY>
<TR>
<TD align=center width="100%">

^O^（你所要添加的内容）^o^

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

4、将左边 “启用 Html 代码” 一项选中
5、点击 “预览帖子” 看一下满意不满意。然后就可以发表了。。。～
其中align=center表示居中，background=http://www.s1.inets.jp/~rouge/free/017f.jpg 是帖子边框第一层的图片地址。你自己可以换成你自己喜欢的。

cellSpacing=88 表示格间线宽度，cellPadding=38 表示内容与格线之间的宽度。border=0表格边框的厚度。width="100%" 表示帖子的宽度
如果还想再深一步，那么就得深入地学一些东西了。。。～

搜索更多相关主题的帖子: 简易教程 HTML

TOP

hhf_123

初来乍到

Rank: 1

积分: 47
元宝: 30 枚
鲜花: 0 朵
鸡蛋: 0 枚

2^# 大中小发表于 2007-7-8 23:43 只看该作者

HTML入门（二）

超文本中的标签
　　刚刚接触超文本，遇到的最大的障碍就是一些用“<”和“>”括起来的句子，我们称它为标签，是用来分割和标记文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。
1. 单标签
　　某些标记称为“单标签”，因为它只需单独使用就能完整地表达意思，这类标记的语法是：
　　　　　　　　　　< 标签名称>
　　最常用的单标签是<BR>, 它表示换行。
2.双标签
　　另一类标记称为“双标签”，它由“始标签”和“尾标签”两部分构成，必须成对使用，其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标签告诉Web浏览器在这里结束该功能。始标签前加一个斜杠（/）即成为尾标记。这类标记的语法是：
　　　　　　　　　　　　　<标签> 内容</ 标签>
　　其中“内容” 部分就是要被这对标记施加作用的部分。例如你想突出对某段文字的显示，就将此段文字放在一<EM> </EM>标记中：
　　　　　　　　　　　　　　<EM>第一：</EM>
3.标签属性
　　许多单标记和双标记的始标记内可以包含一些属性，其语法是：
　　　　　　　　< 标签名字属性1 属性2 属性3 … >
　　各属性之间无先后次序，属性也可省略（即取默认值），例如单标记<HR>表示在文档当前位置画一条水平线（horizontal line），一般是从窗口中当前行的最左端一直画到最右端。带一些属性：
<HR SIZE=3 ALIGN=LEFT WIDTH="75%">
　　其中SIZE属性定义线的粗细，属性值取整数，缺为1；ALIGN属性表示对齐方式，可取LEFT（左对齐，缺省值），CENTER（居中），RIGHT（右对齐）；WIDTH 属性定义线的长度，可取相对值，（由一对 " "号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的个数，如WIDTH=300），缺省值是"100%"。

下面是一些常用的：
1)贴图：<img src="图片地址">
2)加入连接：<a href="所要连接的相关地址">写上你想写的字</a>
3)在新窗口打开连接：<a href="相关地址" target="_blank">写上要写的字</a>
4)移动字体(走马灯)：<marquee>写上你想写的字</marquee>
5)字体加粗：<b>写上你想写的字</b>
6)字体斜体：<i>写上你想写的字</i>
7)字体下划线: <u>写上你想写的字</u>
8)字体删除线: <s>写上你想写的字</s>
9)字体加大: <big>写上你想写的字</big>
10)字体控制大小：<h1>写上你想写的字</h1> (其中字体大小可从h1-h5,h1最大，h5最小)
11)更改字体颜色：<font color="#value">写上你想写的字</font>(其中value值在000000与ffffff(16位进制)之间
12)消除连接的下划线：<a href="相关地址" style="text-decoration:none">写上你想写的字</a>
13)贴音乐：<embed src="音乐地址" width="宽度" height="高度" autostart=false>
14)贴flash: <embed src="flash地址" width="宽度" height="高度">
15)贴影视文件：<img dynsrc="文件地址" width="宽度" height="高度" start=mouseover>
16)换行：<br>
17)段落：<p>段落</p>
18)原始文字样式：<pre>正文</pre>
19)换帖子背景：<body background="背景图片地址">
20)固定帖子背景不随滚动条滚动：<body background="背景图片地址" body
bgproperties=fixed>
21)定制帖子背景颜色：<body bgcolor="#value">(value值见10)
22)帖子背景音乐：<bgsound="背景音乐地址" loop=infinite>
23)贴网页：<iframe src="相关地址" width="宽度" height="高度"></iframe>

一些字体效果：

<h1>...</h1>标题字(最大)
<h6>...</h6>标题字(最小)
<b>...</b>粗体字
<strong>...</strong>粗体字(强调)
<i>...</i>斜体字
<em>...</em>斜体字(强调)
<dfn>...</dfn>斜体字(表示定义)
<u>...</u>底线
<ins>...</ins>底线(表示插入文字)
<strike>...</strike>横线
<s>...</s>删除线
<del>...</del>删除线(表示删除)
<kbd>...</kbd>键盘文字
<tt>...</tt> 打字体
<xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效)
<plaintext>...</plaintext>固定宽度字体(不执行标记符号)
<listing>...</listing> 固定宽度小字体
<font color=00ff00>...</font>字体颜色
<font size=1>...</font>最小字体
<font style =font-size:100 px>...</font>无限增大

TOP

cat

初来乍到

Rank: 1

积分: 87
元宝: 32 枚
鲜花: 0 朵
鸡蛋: 0 枚

3^# 大中小发表于 2007-7-8 23:43 只看该作者

HTML入门（三）

下面看一下如何编辑单层帖图：
例如下面的一段：

<TABLE align=center cellSpacing=35 cellPadding=20 width="100%" background=http://sarah2001.myrice.com/wyzf/bg3/c1.jpg border=0>
<TBODY>
<TR>
<TD align=center width="100%">
^O^（你所要添加的内容）^o^
</TD></TR></TBODY></TABLE>

其中：align=center表示居中。 cellSpacing=35 表示格间线宽度。格与格之间的线为格间线，它的宽度可以使用<TABLE>中的CELLSPACING属性加以调节。 cellPadding=20 表示内容与格线之间的宽度。在<TABLE>中设置CELLPADDING属性，用来规定内容与格线之间的宽度。 width="100%" 表示帖子的宽度，background=http://sarah2001.myrice.com/wyzf/bg3/c1.jpg是帖子边框第一层的图片地址。border=0 边框是用border属性来体现的，它表示表格的边框边厚度和框线。将border设成不同的值，有不同的效果。

帖子第一层的HTML代码我们已经编写好了。现在开始编写第二层的代码。第二层代码要写在第一层代码的开头和结尾之间。即:<TABLE ..............><TBODY><TR><TD align=center width="100%">第二层</TD></TR></TBODY></TABLE>

<TABLE align=center cellSpacing=35 cellPadding=20 width="100%" background=http://sarah2001.myrice.com/wyzf/bg3/c1.jpg border=0>
<TBODY>
<TR>
<TD align=center width="100%">
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 width="100%" borderColorLight=#6080c0 background=http://sarah2001.myrice.com/wyzf/bg3/c2.jpg border=1>
<TBODY>
<TR>
<TD align=center width="100%">
^O^（你所要添加的内容）^o^
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

看到这里，相信第三，第四层大家也会了。。。～需要注意的是需更改<table>里的属性值和边框素材的图片地址。。。～

TOP

xingmu1000

初来乍到

Rank: 1

积分: 61
元宝: 28 枚
鲜花: 0 朵
鸡蛋: 0 枚

4^# 大中小发表于 2007-7-8 23:43 只看该作者

HTML入门（四）

几个小例子：

例一：

<TABLE align=center cellSpacing=35 cellPadding=20 width="100%" background=http://sarah2001.myrice.com/wyzf/bg3/c1.jpg border=0>
<TBODY>
<TR>
<TD align=center width="100%">
<CENTER><IMG src="http://www.yuandi.com/wysc/renwu/rw6/r053.GIF">
<MARQUEE direction=up height=200 scrollAmount=1>
<CENTER><FONT color=#66a3ff face=隶书 size=5> ^O^（你所要添加的内容）^o^ </FONT></CENTER></MARQUEE>
<CENTER><IMG src="http://www.yuandi.com/wysc/renwu/rw6/r053.GIF">
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<P><EMBED src=http://hd3.15150.com/banzou1/2006_2_2/23524_14511090.mp3
width=1 height=1 type=audio/x-pn-realaudio-plugin controls="ControlPanel" loop="true" autostart="true"
volume="100" initfn="load-types" mime-types="mime.types"></EMBED></P>
<CENTER><FONT color=#ffffff face=方正舒体 size=5>图文：网络</FONT></CENTER>
<CENTER><FONT color=#ffffff face=方正舒体 size=5>编制：豆子</FONT></CENTER></CENTER></EMBED>
</TD></TR></TBODY></TABLE>

例二：

<BR>
<TABLE cellSpacing=25 borderColorDark=#344228 cellPadding=0 width="100%" align=center borderColorLight=#7ea063
background=http://xz1.2000y.net/348114/uploadpic/20041114100356772.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=15 borderColorDark=#344228 cellPadding=0 width="100%" align=center borderColorLight=#7ea063
background=http://xz1.2000y.net/348114/uploadpic/20041130221326230.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellPadding=0 width="100%" background=http://xz1.2000y.net/348114/uploadpic/20041114959024242.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=5 borderColorDark=#344228 cellPadding=0 width="100%" borderColorLight=#7ea063
background=http://xz1.2000y.net/348114/uploadpic/20041225173612541.gif border=1>
<TBODY>
<TR>
<TD>
<TABLE cellPadding=0 width="100%" background=http://xz1.2000y.net/348114/uploadpic/20041114959024242.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=5 borderColorDark=#344228 cellPadding=0 width="100%" borderColorLight=#7ea063
background=http://xz1.2000y.net/348114/uploadpic/20041225173612541.gif border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=http://xz1.2000y.net/348114/
uploadpic/20041130223351617.jpg border=0>
<TBODY>
<TR>
<TD>
<P align=center><FONT color=#f0ffff size=5><STRONG><EM>^O^（你所要添加的内容）^o^</EM>
<CENTER><FONT color=#ffffff face=方正舒体 size=5>图文：网络</FONT></CENTER>
<CENTER><FONT color=#ffffff face=方正舒体 size=5>编制：豆子</FONT></CENTER></CENTER></EMBED>
<P><EMBED src=http://hd3.15150.com/banzou1/2006_2_2/23524_14511090.mp3
width=1 height=1 type=audio/x-pn-realaudio-plugin controls="ControlPanel" loop="true" autostart="true"
volume="100" initfn="load-types" mime-types="mime.types"></EMBED></P>
</STRONG></FONT></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD>
</TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD>
</TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<DIV></DIV>
<P></P>
上面的几个小例子大家可以自己运行一下试一试，然后可以照葫芦画瓢，改动一下里面的音乐及图片链接试一下。。。～

TOP

hywen

初来乍到

Rank: 1

积分: 50
元宝: 22 枚
鲜花: 0 朵
鸡蛋: 0 枚

5^# 大中小发表于 2007-7-8 23:43 只看该作者

^O^一点小技巧^O^

现在大多数会员没有发H帖的权限，不过没有关系，大家可以用如下的方法试试。

      你可以在你桌面建立一个 *.TXT 文档  把代码复制到里面，保存。

      再把文件名改为  *.HTM  或*.HTML，文件名可以是随意的有效字符。

      双击文件，  即可运行代码浏览效果。

TOP

疯狂的石头

著名写手

Rank: 5 Rank: 5

积分: 1983
元宝: 2482 枚
鲜花: 4 朵
鸡蛋: 0 枚

6^# 大中小发表于 2007-7-8 23:43 只看该作者

番茄花园欢迎你！

番茄花园欢迎你！

^O^以上的一些仅仅是给初学者一些简单的感官认识，要想进一步学习，网上其实有许多教材和技巧。大家若以番茄花园为家，那么希望图区是花园的一个别致的后花园，在这里，大家可以欣赏美图，交流心情。同时，我们也很高兴看到大家的好作品在图区发表。在这里，图区全体斑斑热烈欢迎大家的到来。。。～^o^

图文：网络
编制：豆子

TOP

gary

初来乍到

Rank: 1

积分: 29
元宝: 12 枚
鲜花: 0 朵
鸡蛋: 0 枚

7^# 大中小发表于 2007-7-8 23:43 只看该作者

谢谢分享了啊

TOP

laolu

初来乍到

Rank: 1

积分: 49
元宝: 32 枚
鲜花: 0 朵
鸡蛋: 0 枚

8^# 大中小发表于 2007-7-8 23:43 只看该作者

这个合我,我正学做网页,谢谢楼主

TOP

hhf_123

初来乍到

Rank: 1

积分: 47
元宝: 30 枚
鲜花: 0 朵
鸡蛋: 0 枚

9^# 大中小发表于 2007-7-8 23:43 只看该作者

谢谢分享！！！学习中，

TOP

菲菲

初来乍到

Rank: 1

积分: 76
元宝: 30 枚
鲜花: 0 朵
鸡蛋: 0 枚

10^# 大中小发表于 2007-7-8 23:43 只看该作者

辛苦了楼主，好帖子

TOP