天幻网 FFSKY.COM

[登陆] [注册]

Html语言初级应用入门

2003-08-12 22:27 | 陆行鸟X

无标题文档
   
 
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>
添加一条类似链接的下划线
示例：
标记显示效果
<U>下划线</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>断开可方便文字的阅读。
示例：
标记显示效果
第一行<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>建立超级链接围堵标记

<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>滚动字幕围堵标记

<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：其他
 
 
   
  • 热门论坛