Html语言初级应用入门 |
HTML(HyperText Mark-up Language)：超文本标记语言，其特点是应用广泛，格式简单，利用特定的标记格式化文本，以达到特定的效果。这里我只讨论天幻社区可能应用到的HTML语言，级别到达10级的可以利用HTML语言美化自己的帖子。
注意：请不要发帖测试显示效果
|
| 一：HTML基础知识 |
HTML标记（或者称之为代码）必须由<和>组成，如：<b>
<>内为标记名，标记名与<>之间不能有空格
标记分为围堵标记与空标记两种
一个完整的围堵标记由2部分组成，起始标记和终止标记，如：<b></b>
起始标记内允许有参数，如：<font size=100>100</font>
空标记不需要终止标记
标记语言对大小写不敏感
|
| 二：文字相关的代码 |
| 标记 | 效果 | 备注 | | <B> <STRONG> | 产生粗体效果 | 围堵标记 | | <I> <EM> <VAR> <CITE> <DFN> | 产生斜体效果 | | <U> | 添加下划线 | | <STRIKE> | 添加删除线 | | <SUB> <SUP> | 下标和上标 | | <FONT> | 设定字体 |
<B>和<STRONG>
这两个都可以产生粗体的效果，但某些浏览器不兼容后者。
示例：
| 标记 | 显示效果 | | <B>粗体字</B> | 粗体字 | | <STRONG>粗体字</STRONG> | 粗体字 |
<I> <EM> <VAR> <CITE> <DFN>
都是斜体的效果，没有太大的区别，一般情况下都使用<I>。
示例：
| 标记 | 显示效果 | | <I>斜体</I> | 斜体 | | <EM>斜体</EM> | 斜体 | | <VAR>斜体</VAR> | 斜体 | | <CITE>斜体</CITE> | 斜体 | | <DFN>斜体</DFN> | 斜体 |
<U>
添加一条类似链接的下划线
示例：
<STRIKE>
添加一条删除线
示例：
| 标记 | 显示效果 | | <STRIKE>删除线</STRIKE> | 删除线 |
<SUB> <SUP>
用于显示下标和上标，一般很少用到
示例：
| 标记 | 显示效果 | | 下标<SUB>123</SUB> | 下标123 | | 上标<SUP>123</SUP> | 上标123 |
<FONT FACE="宋体" SIZE="1" COLOR="#123456">
控制字体的显示，主要参数有3个：
FACE：控制所使用的字体。如果需要显示日文，可以用ARIAL字体，比较美观。
SIZE：控制字体的大小。社区默认大小为2，因此使用SIZE="2"是垃圾代码。
COLOR：控制字体的颜色。颜色可以使用RGB16进位代码，也可以使用颜色名称。
示例：
| 标记 | 显示效果 | | <FONT FACE="黑体">黑体</FONT> | 黑体 | | <FONT SIZE="1">黑体</FONT> | 1号字大小 | | <FONT COLOR="0000FF">蓝色字</FONT> | 蓝色字 | | <FONT COLOR="BLUE">蓝色字</FONT> | 蓝色字 |
|
| 二：段落相关的代码 |
| 标记 | 效果 | 备注 | | <P> | 段落标记 | 围堵标记 | | <BR> | 折行标记 | 空标记 | | <HR> | 水平线标记 | | <CENTER> | 居中标记 | 围堵标记 | | <PRE> | 预设格式标记 | 围堵标记 |
<P ALIGN="RIGHT">
将文字定义为一个段落，段落前后各保留一个空行。参数：
ALIGN：控制段落的对齐方式。可选参数为LEFT（左对齐）, RIGHT（右对齐）, CENTER（居中对齐）。LEFT是默认。
示例：
| 标记 | 显示效果 | | 标题<P>段落1</P>落款 | 标题 段落1 落款 | | <P ALIGN="RIGHT">右对齐</P> | 右对齐 |
<BR>
让后面的内容显示在下一行。把长句子用<BR>断开可方便文字的阅读。
示例：
<HR align="LEFT" size="5" width="256">
显示一条水平线。一般不用参数， 参数含义如下：
ALIGH：对齐方式。也是LEFT，RIGHT和CENTER三种。
SIZE：控制线的厚度。
WIDTH：控制线的长度，可以用百分比，也可以用像素表示。
示例（为了显示方便，除了指定大小的线条，其他长度都用200像素）：
| 标记 | 显示效果 | | <HR ALIGN="RIGHT"> |
| | <HR SIZE="5"> |
| | <HR WIDTH="250"> |
|
<CENTER>
另标记内的内容居中显示。
示例略
<PRE>
以文字本身的格式显示。可以正常显示用空格排版的纯文本。效果看示例：
示例（数字间有3个空格）：
| 标记 | 显示效果 | | <PRE>123 456 789</PRE> | 123 456 789 |
|
| 图片、音乐和多媒体相关的标记 |
| 标记 | 效果 | 备注 | | <IMG> | 插入图片 | 围堵标记 | | <BGSOUND> | 背景音乐 | | <EMBED> | 嵌入多媒体 |
<IMG SRC="地址" WIDTH=100 HEIGHT=100 BORDER=2 ALIGN="top" alt="显示文字" LOWSCR="地址">
参数很多，具体讲解：
SRC：必要的参数。用来指定需要插入的图片。注：不要用本地地址
WIDTH：指定图片的宽度。可用百分比和像素值。默认是100%。
HEIGHT：指定图片的高度。可用百分比和像素值。默认是100%。
BORDER：图片边框的宽度。默认是0。
ALIGH：控制图片周围文字的位置，可选参数包括：
top：顶部对齐
middle：中间对齐
bottom：底部对齐（默认）
left：左对齐
right：右对齐
absmiddle：绝对中央对齐
baseline：底线对齐
texttop：顶线对齐
absbottom：绝对底部对齐（与g、p等字母的最下端对齐）
ALT：如果图片显示不出来，在屏幕上则可以这里设定的替代文字。显示图片的状态下，把鼠标放在图片上也可显示这些文字。
LOWSRC：在图像完全载入前，浏览器会先显示这个设定的图片。
示例：
| 标记 | 显示效果 | | <IMG SRC="http://www.ffsky.com/ff/ffsky/bbs/images/face7.gif"> |  | | <IMG SRC="http://www.ffsky.com/ff/ffsky/bbs/images/face7.gif" WIDTH=64 HEIGHT=64> | | | <IMG SRC="http://www.ffsky.com/ff/ffsky/bbs/images/face7.gif" ALT="脸"> | |
某些参数不是很常用，就不一一示例了。
<BGSOUND SRC="地址" LOOP="-1">
插入背景音乐。理论上只要是WINDOWS MEDIA PLAYER可以播放的音频，都可以使用。参数不多，但很重要。
SRC：背景音乐的地址
LOOP：音乐的循环次数。-1为无限循环。
示例略
<EMBED WIDTH="" HEIGHT="" AUTOSTART=TRUE LOOP="1">
EMBED是一强大的标记，可以插入多种格式的媒体，例如RM，WMV，QUICKTIME、FLASH等等。为了社区的稳定，情酌情使用该标记。
示例略
|
| 四：链接相关的标记 |
<A HREF="index.html" TARGET="_top">
建立超级链接。链接可以是图片，也可以是文字。这是有终止标记决定的。
HREF：链接页面的地址。
TARGET：链接打开的方式。UBB代码链接默认的是 _BLANK或者_NEW，即：在新窗口打开。
示例：
| 标记 | 显示效果 | | <A HREF="HTTP://WWW.GOOGLE.COM"> GOOGLE</A> | GOOGLE | | <A HREF="HTTP://WWW.GOOGLE.COM"> <IMG SRC="http://www.google.com/intl/zh-CN_ALL/images/logo.gif"></A> |  |
|
| 五：表格相关的标记 |
| 标记 | 效果 | 备注 | | <TABLE> | 插入表格 | 围堵标记 | | <TR> | 表格列属性 | | <TD> | 单元格属性 |
表格可以有效的组织格式，巧妙应用的话可以大大的提高网页的视觉效果。这里只能做泛泛的介绍。
<TABLE WIDTH="400" BORDER="1" CELLSPACING="2" CELLPADDING="2" ALIGN="CENTER" BACKGROUND="图片" BGCOLOR="#0000FF" BORDERCOLOR="#FF00FF">
这里只列出了常用参数
WIDTH：表格的宽度。社区内宽度不要超过560。
BORDER：表格边框的宽度。
CELLSPACING：格子线的厚度。
CELLPADDING：单元格之间的距离
ALIGN：对齐方式。可选参数为：LEFT、CENTER、RIGHT
BACKGROUND：背景图片。
BGCOLOR：背景颜色。
BORDERCOLOR：边框颜色。
<TR ALIGN="RIGHT" VALIGN="MIDDLE" BGCOLOR="#0000FF" BORDERCOLOR="#FF00FF">
社区使用TR控制似乎有问题，因此不做介绍，单元格一律用<TD>设置。
<TD WIDTH="50%" HEIGHT="100" colspan="2" rowspan="2" ALIGN="RIGHT" VALIGN="BOTTOM" BGCOLOR="#FF00FF" BORDERCOLOR="#808080" BACKGROUND="PICTURE.GIF">
每个单元格需要单独设置。这里的设置凌驾于<TABLE>的设置。
WIDTH：单元格宽度
HEIGHT：单元格高度
COLSPAN：横向跨栏
ROWSPAN：纵向跨栏
ALIGN：水平对齐方式
VALIGN：垂直对齐方式
BGCOLOR：背景颜色
BACKGROUND：背景图片
BORDERCOLOR：单元格边框颜色
示例：
请点击右键察看本文的源代码。
|
| 六：其他标记 |
<MARQUEE BEHAVIOR="SCROLL" DIRECTION="LEFT" BGCOLOR="#0000FF" HEIGHT="30" WIDTH="150" loop="INFINITE" SCROLLAMOUNT="30" SCROLLDELAY="500">
behavior：决定文字的卷动方式，可选值为：SCROLL 一般卷动（默认）；SLIDE 幻灯片，全部到达后消失；ALTERNATE：文字左右来回移动
direction：设定文字的卷动方向，默认是LEFT，可选参数还有RIGHT
bgcolor：设定滚动字幕的背景颜色。
HEIGHT WIDTH：设定字幕的滚动范围。
LOOP：滚动的次数。默认是无限循环。
scrollamount：文字与文字之间的距离
scrolldelay：文字滚动的间隔时间，以毫秒为单位。
示例请查阅论坛旧贴
|
| 7：其他 |
| |