• 897阅读
  • 16回复

HTML教程Html代码

楼层直达
级别: 论坛版主
发帖
4556
金钱
1519
威望
12
贡献值
1

— 本帖被 sjsna 执行取消置顶操作(2007-07-31) —
HTML教程Html代码(基础篇)

size粗细 color颜色 WIDTH宽度 height高度
------------------------------------------
<br>换行 <P></P>段落 ALIGN左右对齐方式 valign上下对齐方式
--------------------------------------------------------------------------------------------------
<HR>水平线段 (size粗细 color颜色 水平线的宽度width 水平线的长度 用占屏幕宽度的百分比或象素值来表示
align 水平线的对齐方式,有LEFT RIGHT CENTER三种 noshade 线段无阴影属性,为实心线段)
--------------------------------------------------------------------------------------------------------------
文字<font 属性></font>{(属性:SIZE=取值1-7 face=字体)(粗体<B></B>.斜体<I></I>.加下划线<U></U>.中间线<S></S>

字体上一点<sup></sup> 字体下一点<sub></sub>打字机字体<TT></TT>.大型字体<BIG></BIG>.小型字体<SMALL></SMALL>.

闪烁效果<BLINK></BLINK>.强调<EM></EM>.特别强调<STRONG></STRONG>.引证举例<CITE></CITE>)

(字体:Script . Small Fonts . Roman . Comic Sans MS . Arial . Modern . MS Sans Serif) 

文字移动<marquee>内容</marquee>

方向:<marquee direction=>内容</marquee> (属性:左left右right)

方式:<marquee bihavior=>内容</marquee> (属性:一圈一圈绕着scroll走一次slide来回走alternate) 

速度: <marquee scrollamount=>内容</marquee>

延时: <marquee scrolldelay=>内容</marquee>

向上: <marquee direction=up scrollamount=3>
<center><font color=颜色 size=大小 face=字体>内容</font></marquee>

向下:<marquee direction=down scrollamount=3>
<center><font color=颜色 size=大小 face=字体>内容</font></marquee>

底色: <marquee bgcolor=颜色>内容</marquee> (属性:WIDTH宽度 height高度)
-----------------------------------------------------------------------------
位置控制<DIV ALIGN=属性></DIV>(属性=LEFT左对齐缺省值 CENTER 居中 RIGHT右对齐)
-----------------------------------------------------------------------------
无序号列表<ul></ul>条目前加<LI>

序号列表<OL></OL>条目前加<LI>(<li type=实圆disc 空圆circle 实方square>

定义性列表<DL></DL>(<DT>主要<DD>叙述主要的定义)
-----------------------------------------------
表格的基本结构

<table>...</table>  定义表格(属性width= height= border= CELLSPACING=格线间 CELLPADDING=格线内 背景色彩bgcolor=)

<caption>...</caption> 定义标题(属性top上方.bottom下方)

<tr>  定义表行 (横夸colspan=几格.竖夸rowspan=几格 背景颜色bgcolor=)

<th></th>  定义表头 (属性:背景颜色bgcolor=)

<td></td>  定义表元(表格的具体数据.属性ALIGN左右对齐方式valign上下对齐方式<top上middle中bottom下baseline基线
属性:背景颜色bgcolor=)

(背景颜色:Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua)

例:<table>

<tr><th>内容</th><th>内容</th><th>内容</th>

<tr><td>内容</td><td>内容</td><td>内容</td>

</table>
--------------
超级链接

文字连接<A HREF=资源地址>链接文字</A>

图片连接<A HREF=资源地址><IMG SRC=图形文件地址></A>

-------------------------------------------
图形格式

<IMG SRC=图形文件地址>(属性:width= heigth=)
--------------------------------------------
播放音乐/视频

<SB SRC=音乐文件地址>(属性:循环开/关LOOP=TRUE/FALSE 隐藏控制面板HIDDEN=TRUE/FALSE width= heigth=)

背景音乐

<bgsound src=音乐文件地址>(属性:循环开/关LOOP=TRUE/FALSE)

视频

<img src=1 dynsrc=2>(1指图片地址.2指视频地址.总是循环loop=infinite)(注:这个命令可以在没连接到视频时,先显示图片)

关与边框的颜色:borderColor=#cccccc 这个是指边框颜色



阴影文字:
代码:
<center><FONT style="filter: shadow(color=black); width: 100%; color=#E4DC9B;font-size:40pt;font-family:华文彩云;line-height:150%;"><b>这里是文字</b></font></center>



发光文字:
代码:
<CENTER><FONT style="COLOR: #e4dc9b; FILTER: glow(color=black); FONT-FAMILY: 华文彩云; FONT-SIZE: 20pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>这里是文字</B></FONT></CENTER>





HTML代码完全篇
  HTML英语意思是:Hypertext Marked Language,即超文本标记语言,是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台(如UNIX,WINDOWS等)。自1990年以来HTML就一直被用作World Wide Web 的信息表示语言,用于描述Homepage的格式设计和它与WWW上其它Homepage 的连结信息。使用HTML语言描述的文件,需要通过WWW浏览器显示出效果。

  所谓超文本,因为它可以加入图片、声音、动画、影视等内容,因为它可以从一个文件跳转到另一个文件,与世界各地主机的文件连接。

  通过HTML可以表现出丰富多彩的设计风格

     图片调用:<IMG SRC="文件名">
     文字格式:<FONT SIZE="+5 " COLOR="00FFFF">文字</FONT>

  通过HTML可以实现页面之间的跳转

     页面跳转:〈A HREF="文件路径/文件名"></A>

  通过HTML可以展现多媒体的效果

     声频:<SB SRC="音乐文件名" AUTOSTART=true>
     视频:<SB SRC="视频文件名" AUTOSTART=true>

  上面我们在示例超文本特征的同时,采用了了一些我们在制作超文本文件时需要用到的一些标签。所谓标签,就是它采用了一系列的指令符号来控制输出的效果,这些指令符号用“<标签名字 属性>”来表示。
级别: 论坛版主
发帖
4556
金钱
1519
威望
12
贡献值
1

只看该作者 1 发表于: 2007-07-18
Re:HTML教程Html代
HTML的基本结构
  超文本文档分文档头和文档体两部分,在文档头里,对这个文档进行了一些必要的定义,文档体中才是要显示的各种文档信息。



--------------------------------------------------------------------------------


<HTML>

   <HEAD>
      头 部 信 息
   </HEAD>

   <BODY>
     文 档 主 体, 正 文 部 分
   </BODY>

</HTML>

   其中<HTML>在最外层, 表示这对标记间的内容是HTML文 档。我们还会看到一些Hompage省略<HTML>标记,因为.html 或.htm 文件被Web浏览器默认为是HTML文档。<HEAD> 之间包括文档的头部信息,如文档总标题等,若不需头部信息则可省略此标记。<BODY> 标记一般不省略, 表示正文内容的开始。



--------------------------------------------------------------------------------


下面是一个最基本的超文本文档的源代码:

<HTML>
<HEAD>
<title>一个简单的HTML示例</title>
</HEAD>

<BODY>
<CENTER>
<H3>欢迎光临我的主页</H3>
<BR>
<HR>
<FONT SIZE=2>
  这是我第一次做主页,无论怎么样,我都会努力做好!
</FONT>
</CENTER>
</BODY>

</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%"。
级别: 论坛版主
发帖
4556
金钱
1519
威望
12
贡献值
1

只看该作者 2 发表于: 2007-07-18
Re:HTML教程Html代
标题

  一般文章都有标题、副标题、章和节等结构,HTML中也提供了相应的标题标签<Hn>,其中n为标题的等HTML总共提供六个等级的标题,n越小,标题字号就越大,以下列出所有等级的标题:



--------------------------------------------------------------------------------


〈H1>…</H1>     第一级标题

〈H2>…</H2>     第二级标题

〈H3>…</H3>     第三级标题

〈H4>…</H4>     第四级标题

〈H5>…</H5>     第五级标题

〈H6>…</H6>     第六级标题



--------------------------------------------------------------------------------


请看下面的例子:

<html>
<head>
<title>标题示例</title>
</head>

<body>

这是一行普通文字<P>
〈H1>一级标题</H1>
〈H2>二级标题</H2>
〈H3>三级标题</H3>
〈H4>四级标题</H4>
〈H5>五级标题</H5>
〈H6>六级标题</H6>
</body>

</html>
换行<br>

  在编写HTML文件时,我们不必考虑太细的设置,也不必理会段落过长的部分会被浏览器切掉。因为,在HTML语言规范里,每当浏览器窗口被缩小时,浏览器会自动将右边的文字转折至下一行。所以,编写者对于自己需要断行的地方,应加上<br>标签。

  请看下面的例子:



--------------------------------------------------------------------------------


<html>
<head>
<title>无换行示例</title>
</head>

<body>
登鹳雀楼 白日依山尽,黄河入海流。欲穷千里目,更上一层楼。
</body>

</html>





--------------------------------------------------------------------------------

<html>
<head>
<title>换行示例</title>
</head>

<body>
登鹳雀楼<br>白日依山尽,<br>黄河入海流。<br>欲穷千里目,<br>更上一层楼。
</body>

</html>

段落标签<P>

  为了排列的整齐、清晰,文字段落之间,我们常用<P></P>来做标记。文件段落的开始由<P>来标记,段落的结束由</P>来标记,</P>是可以省略的,因为下一个<P>的开始就意味着上一个<P>的结束。

  <P>标签还有一个属性ALING,它用来指名字符显示时的对齐方式,一般值有CENTER、LEFT、RIGHT三种。

  下面,我们用两个例子来说明这个标签的用法。



--------------------------------------------------------------------------------


<html>
<head>
<title>段落标签</title>
</head>

<body>
<P ALIGN=CENTER>
浣溪沙 <P>一曲新词酒一杯,去年天气旧亭台,夕阳西下几时回。<P>无可奈何花落去,似曾相识燕归来。小园香径几徘徊。</P>
</body>

</html>





--------------------------------------------------------------------------------


<html>
<head>
<title>段落标签</title>
</head>

<body>
登鹳雀楼<P>白日依山尽,<br>黄河入海流。<br>欲穷千里目,<br>更上一层楼。</P>
</body>

</html>
级别: 论坛版主
发帖
4556
金钱
1519
威望
12
贡献值
1

只看该作者 3 发表于: 2007-07-18
Re:HTML教程Html代
水平线段<HR>

  这个标签可以在屏幕上显示一条水平线,用以分割页面中的不同部分。<HR>有三个属性:

   size 水平线的宽度
   width 水平线的长,用占屏幕宽度的百分比或象素值来表示
   align 水平线的对齐方式,有LEFT RIGHT CENTER三种
   noshade 线段无阴影属性,为实心线段

  我们可以用几个例子来说明这线段的用法:



--------------------------------------------------------------------------------
线段粗细的设定

<HTML>
<HEAD>
<title>线段粗细的设定</title>
</HEAD>

<BODY>
<P>这是第一条线段,无size设定,取内定值SIZE=1来显示<BR>
<HR>
<P>这是第二条线段,SIZE=5<BR>
<HR SIZE=5>
<P>这是第三条线段,SIZE=10<BR>
<HR SIZE=10>
</BODY>

</HTML>






--------------------------------------------------------------------------------


线段长度的设定
<HTML>
<HEAD>
<title>线段长度的设定</title>
</HEAD>

<BODY>
<P>这是第一条线段,无WIDTH设定,取WIDTH内定值100%来显示<BR>
<HR SIZE=3>
<P>这是第二条线段,WIDTH=50(点数方式)<BR>
<HR WIDTH=50 SIZE=5>
<P>这是第三条线段,WIDTH=50%(百分比方式)<BR>
<HR WIDTH=50% SIZE=7>
</BODY>

</HTML>







--------------------------------------------------------------------------------


线段排列的设定

<HTML>
<HEAD>
<title>线段排列的设定</title>
</HEAD>

<BODY>
<P>这是第一条线段,无ALIGN设定,(取内定值CENTER显示)<BR>
<HR WIDTH=50% SIZE=5>
<P>这是第二条线段,向左对齐BR>
<HR WIDTH=60% SIZE=7 ALIGN=LEFT>
<P>这是第三条线段,向右对齐<BR>
<HR WIDTH=70% SIZE=2 ALIGN=RIGHT>
</BODY>

</HTML>





--------------------------------------------------------------------------------

无阴影的设定

<HTML>
<HEAD>
<title>无阴影的设定</title>
</HEAD>

<BODY>
<P>这是第一条线段,无NOSHADE设定,取内定值阴影效果来显示<BR>
<HR WIDTH=80% SIZE=5>
<P>这是第二条线段,有NOSHADE设定<BR>
<HR WIDTH=80% SIZE=7 ALIGN=LEFT NOSHADE>
</BODY>

</HTML>
级别: 论坛版主
发帖
4556
金钱
1519
威望
12
贡献值
1

只看该作者 4 发表于: 2007-07-18
Re:HTML教程Html代
文字的大小设置

  提供设置字号大小的是FONT,FONT有一个属性SIZE,通过指定SIZE属性就能设置字号大小,而SIZE属性的有效值范围为1-7,其中缺省值为3。我们可以SIZE属性值之前加上“+”、“-”字符,来指定相对于字号初始值的增量或减量。

  请看示例:



--------------------------------------------------------------------------------


<html>
<head>
<title>字号大小</title>
</head>

<body>
<font size=7>这是size=7的字体</font><P>
<font size=6>这是size=6的字体</font><P>
<font size=5>这是size=5的字体</font><P>
<font size=4>这是size=4的字体</font><P>
<font size=3>这是size=3的字体</font><P>
<font size=2>这是size=2的字体</font><P>
<font size=1>这是size=1的字体</font><P>
<font size=-1>这是size=-1的字体</font><P>
</body>

</html>


---------------------------------------------------------------------------

文字的字体与样式

  HTML4.0提供了定义字体的功能,用FACE属性来完成这个工作。FACE的属性值可以是本机上的任一字体类型,但有一点麻烦的是,只有对方的电脑中装有相同的字体才可以在他的浏览器中出现你预先设计的风格。

  <font face="字体">

请看例子:



--------------------------------------------------------------------------------


<HTML>
<HEAD>
<title>字体</title>
</HEAD>

<BODY>
<CENTER>
<FONT face="楷体_GB2312">欢迎光临</FONT><P>
<FONT face="宋体">欢迎光临</FONT><P>
<FONT face="仿宋_GB2312">欢迎光临</FONT><P>
<FONT face="黑体">欢迎光临</FONT><P>
<FONT face="Arial">Welcom my homepage.</FONT><P>
<FONT face="Comic Sans MS">Welcom my homepage.</FONT><P>
</CENTER>
</BODY>

</HTML>





--------------------------------------------------------------------------------


  为了让文字富有变化,或者为了着意强调某一部分,HTML提供了一些标签产生这些效果,现将常用的标签列举如下:

<B>     </B>     粗体              HTML语言

<I>     </I>     斜体              HTML语言

<U>     </U>     加下划线            HTML语言

<TT>     <TT>     打字机字体           HTML语言

<BIG>    </BIG>    大型字体            HTML语言

<SMALL>   </SMALL>   小型字体            HTML语言

<BLINK>   </BLINK>   闪烁效果            HTML语言

<EM>     </EM>     表示强调,一般为斜体      HTML语言

<STRONG>   </STRONG>   表示特别强调,一般为粗体    HTML语言

<CITE>    </CITE>    用于引证、举例,一般为斜体   HTML语言

现在我们用一个实例来看看效果:


--------------------------------------------------------------------------------


<html>
<head>
<title>字体样式</title>
</head>

<body>
<B>黑体字</B>
<P> <I>斜体字</I>
<P> <U>加下划线</U>
<P> <BIG>大型字体</BIG>
<P> <SMALL>小型字体</SMALL>
<P> <BLINK>闪烁效果</BLINK>
<P><EM>Welcome</EM>
<P><STRONG>Welcome</STRONG>
<P><CITE>Welcom</CITE></P>
</body>

</html>
级别: 论坛版主
发帖
4556
金钱
1519
威望
12
贡献值
1

只看该作者 5 发表于: 2007-07-18
Re:HTML教程Html代
文字的颜色

  文字颜色设置格式如下:

   <font color=color_value>…</font>

  这里的颜色值可以是一个十六进制数(用“#”作为前缀),也可以是以下16种颜色名称。



--------------------------------------------------------------------------------

Black = "#000000"?        Green = "#008000"

Silver = "#C0C0C0"??        Lime = "#00FF00"

Gray = "#808080"??        Olive = "#808000"

White = "#FFFFFF"?        Yellow = "#FFFF00"

Maroon = "#800000"?        Navy = "#000080"

Red = "#FF0000"?        Blue = "#0000FF"

Purple = "#800080"?        Teal = "#008080"

Fuchsia = "#FF00FF"?        Aqua = "#00FFFF"

--------------------------------------------------------------------------------
位置控制

  通过ALIGN属性可以选择文字或图片的对齐方式,LEFT表示向左对齐,RIGHT表示向右对齐,CENTER表示居中。基本语法如下:

     <DIV ALIGN=#>   #=left/right/center



--------------------------------------------------------------------------------


例:

<html>
<head>
<title>位置控制</title>
</head>

<body>
<div align=left>
你好!<br>
<div align=right>
你好!<br>
<div align=center>
你好!<br>
</body>

</html>

--------------------------------------------------------------------------------


  另外,ALIGN属性也常常用在其它标签中,引起其内容位置的变动。

  如:<P ALIGN=#>
    <HR ALIGN=#>   #=left/right/center
    <H1 ALIGN=#〉
级别: 论坛版主
发帖
4556
金钱
1519
威望
12
贡献值
1

只看该作者 6 发表于: 2007-07-18
Re:HTML教程Html代
综合示例

  前面我们所讲是单独使用一个标签的方法,在实际的编写中,许多标签和一些属性是结合起来使用的,
比如:
    <FONT COLOR="#" SIZE=#>文字</FONT>
    <B><U>文字</U></B>



--------------------------------------------------------------------------------


【例】

<HTML>
<HEAD>
<title>字体样式</title>
</HEAD>

<BODY>
<P>
<B><U><FONT COLOR="#A35252"><FONT SIZE=+1>白居 易</FONT></FONT></U></B>
</P>

<P>  白居易(772-846年)字乐天,晚居香山,自号香山居士,原籍太原。白居易是唐代新乐府运动的倡<BR> 导者,是中国文学史上堪与屈原、李白、杜甫并列的第一流大诗人。 </P>

<P>  白居易出身于小官僚家庭。大约在贞元三年( 787年)的年初,十六岁的白居易带着自己的诗稿,到<BR> 了京都长安。老诗人顾况看到这位不速之客的姓名有“居易”二字,便很恢谐地说:“长安米贵,居住不易!”及披卷读到《赋得古原草送别》中的</P>

<P ALIGN=center><FONT COLOR="#3C7777"><CITE>“离离原上草,一岁一枯荣;野火烧不尽,春风吹又生”</CITE></FONT></P>

<P>时, 不禁大为惊奇,拍案称绝,马上改变语气,郑重地说:“能写出这样好的诗句,‘居’下去是不难的,刚才我是同你开开玩笑罢了。”从此,白居易的诗名大振。 </P>

<P>  白居易生活的时代,主要是建中、元和、长庆时期(公元781-824年)。是唐朝走向衰败的极端苦难动荡的时代。 </P>

<P>  白居易是继杜甫之后,我国伟大的现实主义诗人。 他的贡献是在总结我国自《诗经》以来现实主义诗歌创作经验的基础上,建立了现实主义的诗歌理论,掀起了一个波澜壮阔的现实主义的诗歌运动——新乐府运动,创作了大量优秀的现实主义诗篇。 </P>

</BODY>
</HTML>
级别: 荣誉会员
发帖
14410
金钱
25639
威望
11025
贡献值
219

只看该作者 7 发表于: 2007-07-18
Re:HTML教程Html代码
    晕了``````````
级别: 光明使者
发帖
11525
金钱
6209
威望
112
贡献值
30

只看该作者 8 发表于: 2007-07-19
Re:HTML教程Html代码
谢谢鸽子了!!可惜很多普通会员是无法发代码帖的!!!只能参考一下了!!
级别: 侠客
发帖
138
金钱
2345
威望
0
贡献值
0
只看该作者 9 发表于: 2007-07-20
Re:HTML教程Html代码
  为什么普通会员不您发????????????
级别: 侠客
发帖
138
金钱
2345
威望
0
贡献值
0
只看该作者 10 发表于: 2007-07-20
Re:HTML教程Html代码
楼主辛苦了  但太多了 
级别: 圣骑士
发帖
790
金钱
2129
威望
0
贡献值
0
只看该作者 11 发表于: 2007-07-20
Re:HTML教程Html代码
鸽子,光看见代码了,怎么没看见特效啊?
级别: 新手上路
发帖
58
金钱
2228
威望
0
贡献值
2
只看该作者 12 发表于: 2007-07-22
Re:HTML教程Html代码
           
'厛尒德姡闭丄眼睛 ~这铬梦哆羙鲤禳它继续
级别: 新手上路
发帖
10
金钱
2062
威望
0
贡献值
0
只看该作者 13 发表于: 2007-07-23
Re:HTML教程Html代码
怎么才能变成特殊会员阿?还想发个HTML的帖子的。。。
是朋友介绍我来的哦 。她说认识老板哈 ,嘎嘎~~还让我来灌水 ~~
渐秋阑,雪清玉瘦,向人无限依依
级别: 骑士
发帖
580
金钱
138062
威望
0
贡献值
0
只看该作者 14 发表于: 2007-07-25
Re:HTML教程Html代码
再晕一次``````````````
级别: 新手上路
发帖
22
金钱
2777
威望
0
贡献值
0
只看该作者 15 发表于: 2007-07-26
Re:HTML教程Html代码
学到了谢谢 !
级别: 圣骑士
发帖
860
金钱
4047
威望
1
贡献值
0
只看该作者 16 发表于: 2007-07-28
Re:HTML教程Html代码
虽然还是看不太懂,还是谢谢啦
辛苦
快速回复

限100 字节
认证码:
上一个 下一个