蛇蝎美人02:网页代码学习(基础篇)

来源:百度文库 编辑:九乡新闻网 时间:2024/05/05 01:01:51
HTML基本架构   <HTML> 
<HEAD> 标头区
<TITLE>...</TITLE> 标题区
</HEAD> 标头区结束 <BODY> 本文区
本文区
</BODY> 本文区结束 </HTML> 结束
<HTML> 网页格局。
<HEAD> 标头区 : 记实基本资料,如、编写。
<TITLE> 标题区 : 标题须在标头区内,在浏览器最上面看到标题。
<BODY> 本文区 : 资料,即在浏览器上看到的。  注意事项   通常一份HTML网页包含二个部份 : <HEAD>...</HEAD> 标头区、 <BODY>...</BODY> 本文区。而 <HTML> 和 </HTML> 代表网页格局。   习惯上的首页名称通常订为 index.htm 或 index.html 这样只要浏览,浏览器便会自动的找出 index.htm 。字体 在这里将要谈的是有关文字的标记,包括字体大小、颜色、字型...等变化,适当的应用增加页面的美观!   常用字体标记 <Hn>...</Hn> 标题,设定标题字体大小, n = 1 ( 大 ) ~ 6 ( 小 ) 会自动跳下一行。通常用在如章节、段落等标题上。
如 : <H2> 标题 </H2> 标题
如 : <H3 ALIGN = CENTER> 标题 </H3> ( 标题置中 )
标题
<B>...</B> 粗体字。
如 : <B> 粗体字 </B> 粗体字
<I>...</I> 斜体字。
如 : <I> 斜体字 </I>
斜体字
<U>...</U> 加底线。
如 : <U> 加底线 </U>
加底线
<DEL>...</DEL> 横线 ( 表示删除 )。
如 : <DEL> 横线 </DEL>
横线
<TT>...</TT> 打字体 ( 固定宽度文字 )。
如 : <TT> 打字体 </TT>
打字体
<SUP>...</SUP> 上标字。
如 : 字体 <SUP> 上标字 </SUP>
字体上标字
<SUB>...</SUB> 下标字。
如 : 字体 <SUB> 下标字 </SUB>
字体下标字
<!...> 注解 ( 不会显示在浏览器上 ),多行。 如 : <! 更新日期 : 2000/1/1>    设定字体大小、颜色、字型  有关设定文字的方法共有以下几种 :   1.设定HTML主体文字颜色。<BODY>...</BODY>标记。
   如 : <BODY TEXT=RED>...</BODY> 或
     <BODY TEXT=#FF0000>...</BODY>   2.设定基本字体大小、颜色、字型。<BASEFONT>...</BASEFONT>标记。   3.设定字体大小、颜色、字型。<FONT>...</FONT>标记。 <BASEFONT>...</BASEFONT> 设定基本字体,SIZE = 1 ~ 7,1 ( 最小 ) 7 ( 最大 )。
如 : <BASEFONT SIZE=4> 基本字体大小为 4 </BASEFONT>
基本字体大小为 4 如 : <BASEFONT COLOR =#FF0000> 设定颜色 </BASEFONT>
设定颜色 如 : <BASEFONT FACE = 标楷体 , 细明体 > 设定字型 </BASEFONT>
设定字型
<BIG>...</BIG> 基本字体加大。
如 : <BASEFONT SIZE=4> 基本字体大小为 4,</BASEFONT>
<BIG> 加大为 5 </BIG>
基本字体大小为 4,加大为 5
<SMALL>...</SMALL> 基本字体减小。
如 : <BASEFONT SIZE=4> 基本字体大小为 4,</BASEFONT>
<SMALL> 减小为 3 </SMALL>
基本字体大小为 4,减小为 3
<FONT>...</FONT> 设定字体大小、颜色、字型,SIZE = 1 ~ 7,1 ( 最小 ) 7 ( 最大 )。
如 : <FONT SIZE=4> 字体大小为 4 </FONT>
字体大小为 4 如 : <BASEFONT SIZE=4> 基本字体大小为 4
<FONT SIZE=+1> +1字体大小为 5 </FONT>
<FONT SIZE=-2> -2字体大小为 2 </FONT>...</BASEFONT>
  基本字体大小为 4
  +1字体大小为 5
   -2字体大小为 2
如 : <FONT COLOR =#FF0000> 设定颜色 </FONT>
设定颜色 如 : <FONT FACE = 标楷体 , 细明体 > 设定字型 </FONT>
设定字型    注意事项  1. 设定字体的大小分 : 绝对SIZE 如 : <FONT SIZE=4>
和 相对SIZE 如 : <FONT SIZE=+1> ( 以 BASEFONT 设定的字体大小做加减 )。   2. 设定字体的颜色是颜色名称或#RRGGBB表红绿蓝强度 ( 00 暗 ~ FF 亮 )。 #RRGGBB 所代表的是红、绿、蓝三原色,每一色由两位十六进制的数值表示 ( 即十进制 0 ~ 255 )。
十六进制 : 0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F。   3. 设定字体的字型会按照顺序找出显示的字型,若找不到则以预设字型显示。表格 表格是HTML的一项非常重要,利用其多种属机能够出多样化的表格。表格使页面有良多意想不到的效果,使页面更加整齐美观。   常用表格标记 <TABLE>…</TABLE> 表格指令。
属性 :
·ALIGN 调整
·BGCOLOR 背景颜色
·BORDER 边框
·HEIGHT 高度
·WIDTH 宽度
<CAPTION>…</CAPTION> 表格标题。
属性 :
·ALIGN 调整
<TR>…</TR> 表格列 ( </TR>可省略 ) 。
属性 :
·ALIGN 调整
<TH>…</TH> 表格栏标题 ( 表头 ) 粗体字 ( </TH>可省略 ) 。
属性 :
·ALIGN 调整
·COLSPAN 栏宽
·ROWSPAN 栏高
<TD>…</TD> 表格栏资料 ( 储存格 ) ( </TD>可省略 ) 。
属性 :
·ALIGN 调整
·BGCOLOR 背景颜色
·HEIGHT 高度
·WIDTH 宽度
·COLSPAN 栏宽
·ROWSPAN 栏高
  举例 如 : ( 基础型 )
<TABLE BORDER=1 ALIGN=CENTER>
<TR><TD>华夏黑客联盟<TD>华夏黑客联盟
<TR><TD>华夏黑客联盟<TD>华夏黑客联盟
</TABLE>
华夏黑客联盟 华夏黑客联盟
华夏黑客联盟 华夏黑客联盟
如 : ( 加强型 ) 增加背景颜色、表格标题、栏标题、跨栏宽、跨栏高。
<TABLE BORDER=1 ALIGN=CENTER BGCOLOR=#CCCCFF>
<CAPTION>表格标题</CAPTION>
<TR><TD><TH COLSPAN=2>行标题 1 <TH COLSPAN=2>行标题 2
<TR><TH ROWSPAN=2>列标题 1 <TD>A <TD>A <TD>A <TD>A
<TR><TD>B <TD>B <TD>B <TD>B
<TR><TH ROWSPAN=2>列标题 2 <TD>C <TD>C <TD>C <TD>C
<TR><TD>D <TD>D <TD>D <TD>D
</TABLE>标示HTML许多种类的标示标记,作项目标示,而且作巢状式标示!   常用标示标记 <LI> 标示项目。
如 :
<OL>
<LI>第一项
<LI>第二项
</OL>
第一项
第二项 <OL>...</OL> 编号标示,可标示数字或英文、罗马字母。
如 :
<OL TYPE=I>
<LI>第一项
<LI>第二项
</OL>
第一项
第二项 <UL>...</UL> 符号标示,可标示数字或英文、罗马字母。
如 :
<UL>
<LI>第一项
<LI>第二项
</UL>
第一项
第二项 <DT> 定义项目。 <DD> 定义资料。 <DL>...</DL> 定义标示。
如 :
<DL>
<DT>十进制 :<DD>0、1、2、3、4、5、6、7、8、9
<DT>十六进制 :<DD>0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F
</DL>
十进制 :
0、1、2、3、4、5、6、7、8、9
十六进制 :
0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F   巢状式标示 如 : <OL>
<LI>第一章
    <OL TYPE=i>
    <LI>第一节
          <UL>
          <LI>第一段
          <LI>第二段
          </UL>
    <LI>第二节
    </OL>
<LI>第二章
<LI>第三章
</OL>
第一章
第一节
第一段
第二段
第二节
第二章
第三章
  其他标示标记<DIR>...</DIR> 目录式标示 ( 自动加圆点 )。
如 :
学院 :
<DIR>
<LI>新手上路
<LI>教室
<LI>教室
<LI>开发教室
</DIR> 学院 :
新手上路
教室
教室
开发教室   注意事项  标示项目符号也用<FONT>...</FONT> 标记,以符号字元 ( ○、◆、◎、★、■...等 ) 标示。  如 :<FONT COLOR =#FF0000> ● </FONT>   特殊符号 :  在HTML中,有些符号是代表特定的意义的。当要特殊符号时,便要用替代指令。
符号 替代指令
&quot; &quot; 或 &quot;
& & 或 &
< < 或 <
> > 或 >
不可分空格  区段标记 不仅要丰硕外,也要有美观简洁的版面。HTML所的区段标记,好好的利用也会有相称不错的效果。   常用区段标记 <HR> 产生水平线。
如 : <HR ALING=CERTEN WIDTH=90%> --------------------------------------------------------------------------------
<BR> 跳下一行。
如 : 华夏黑客联盟,<BR>网上学电脑的好去处。
华夏黑客联盟,
网上学电脑的好去处。
<P>...</P> 段落,跳下一行并加一行空白。 ( </P> 可省略 )
如 : 华夏黑客联盟,<P>网上学电脑的好去处。
华夏黑客联盟, 网上学电脑的好去处。
<CENTER>...</CENTER> 置中。
如 : <CENTER>置中</CENTER>
置中
<NOBR>...</NOBR> 不跳下一行。
如 : <NOBR>华夏黑客联盟,</NOBR>网上学电脑的好去处。
华夏黑客联盟,网上学电脑的好去处。  <PRE>...</PRE> 以原始格局显示。 如 : <PRE>原始格局: </PRE>
原始格局:  滚动条这是由IE的滚动条,可不要被众多的属性吓到了,越多的属性越强喔!【文字卷动标记】 <MARQUEE>…</MARQUEE> 文字卷动 ( 滚动条 )。【属性】 ·BEHAVIOR = 设定卷动
-- ALTERNATE 交替来回卷动
-- SCROLL 卷动 ( 预设 )
-- SLIDE 滑动 ·BGCOLOR = color 背景颜色
·DIRECTION = 设定卷动方向
·HEIGHT = n 高度
·LOOP = n 轮回 , 卷动次数 ( 预设轮回 )
·SCROLLAMOUNT = n 设定卷动距离
·SCROLLDELAY = milliseconds 设定卷动
·TRUESPEED = milliseconds 设定卷动速度
·WIDTH = n 宽度 ( 可设百分比% )【举例】 如 : <MARQUEE BGCOLOR=RED BEHAVIOR=ALTERNATE DIRECTION=LEFT SCROLLAMOUT=10 SCROLLDELAY=100> <FONT COLOR=WHITE>华夏黑客联盟</FONT></MARQUEE>链接
  无论哪一行,都职业的技能。天才总应该伴跟着那种导向目标的、有头脑的、不间断的训练,这一点,甚至连最幸运的才能,也会无影无踪地消失。 —— 德拉克罗瓦 链接可说是HTML中最重要的!HTML拥有链接的,使你能接上INTERNET、WWW ……享受多姿多彩的。
基本上链接分成 : 外部链接——链接至的某个URL网址或,可参考考链接。
内部链接——链接HTML的某个区段。 链接 链接 : //主机名称 / 路径 / 名称 网址 如 : http : //www.5i6i.cn/bbs传输 如 : ftp : //ftp.5i6i.cn/ bbsGROPHER 传输 如 : gropher : //gropher.net.cn/ 远端登入 如 : telnet : //bbs.net.cn/  如 : file : //data/html/file.zip NET NEWS 传输 如 : news : talk.hinet.net.cn E-Mail 如 : mailto : ****@******.com.cn
常用链接标记 <BASE> 设定基本URL位置或路径,以後只要设定名称即会自动加上位置或路径。
属性 :
·HREF 链接的URL位址或
·TARGET 指定链接到的URL位址或显示于那视窗 ( 可和 <FRAME> 视窗标记配合或开新的视窗 ) 如 :
<BASE HREF=&quot;http://www.5i6i.cn/bbs/&quot;>
<A HREF=&quot;kk.htm&quot;>■</A> <BASE HREF=&quot;http://www.5i6i.cn/bbs/&quot; TARGET=frame1>
<A>...</A> 链接指令。
属性 :
·HREF 链接的URL位址或
·NAME 名称
·TARGET 指定链接到的URL位址或显示于那视窗 ( 可和 <FRAME> 视窗标记配合或开新的视窗 ) 如 :
外部链接
<A HREF=&quot;http : //www.pconline.com.cn/&quot;>■</A> <A HREF=&quot;http : //www.pconline.com.cn/&quot; TARGET=frame1>■</A> 内部链接
·CH1.HTM
<A HREF=#A>■</A> ( 欲链接至HTML A 点 ) <A NAME=A>■</A> ( HTML A 点 ) ·CH2.HTM
<A HREF=CH1.HTM#A>■</A> (欲链接至CH1.HTM  A 点 ) &quot; ■ &quot; 表示链接点,是文字或图案。( 即游标移到时,会变成手指形状的地方 )
<LINK> 链接指令 ( 用于HEAD区,设定CSS )。 <META> 储存应用资讯,可设定载入网页 ( 用于HEAD区 )。
属性 :
·CHARSET 设定
·CONTENT 回应表头资料 , 若是数字表示秒数
·HTTP-EQUIV 回应表头 , 若设定为REFRESH载入URL设定
·URL HTML位置
如 :
·设定中文自动跳行。
<META HTTP-EQUIV=&quot;Content-Type&quot; CONTENT=&quot;text/html;charset=gb2312&quot;> ·设定十秒回到首页。 ( 若不设定HTML位置则再载入原HTML )
<META HTTP-EQUIV=&quot;REFRESH&quot; CONTENT=10 URL=index.htm>
设定链接、未链接部份颜色 设定链接、未链接部份颜色,用<BODY>...</BODY>标记。 属性 : ·ALINK按下链接部份未放开时颜色
·LINK未看过的链接部份颜色
·VLINK已看过的链接部份颜色 如 : <BODY LINK=#0000FF ALINK=#FF0000 VLINK=#00FF00>框架框架架构的标记,是分割窗口和插入浮动窗口的。能有效的运用将有助于浏览网页的效率!
  常用窗口标记 <FRAMESET>...</FRAMESET> 定义分割窗口。
属性 :
·BORDER 边框
·COLS 行 , 设定分割左右窗口宽度 ( 用『,』分隔,可设百分比 % ;『*』表示剩余部份 )
·FRAMEBORDER 显示边框
·ROWS 列 , 设定分割上下窗口高度 ( 用『,』分隔,可设百分比 % ;『*』表示剩余部份 )
<FRAME> 定义窗口。
属性 :
·FRAMEBORDER 显示边框
·NAME 名称
·NORESIZE 设定是否调整窗口大小
·SRC 或URL位址
·SCROLLING 设定是否卷动
<NOFRAMES>...</NOFRAMES> 无增援分割窗口浏览器显示文字。 <IFRAME>...</IFRAME> 插入浮动窗口。
属性 :
·BORDER 边框
·FRAMEBORDER 显示边框
·NORESIZE 设定是否调整窗口大小
·SRC 或URL位址
·SCROLLING 设定是否卷动
  举例 如 : 窗口架构。
( 先分割成上下窗口,再于窗口各分割成左右窗口。 )
<FRAMESET ROWS=74,* COLS=140,* FRAMEBORDER=NO BORDER=0>
<FRAME SRC=rad.htm NAME=RAD NORESIZE SCROLLING=NO>
<FRAME SRC=a-1.htm NAME=FRAME1 NORESIZE SCROLLING=NO>
<FRAME SRC=b-1.htm NAME=FRAME2 NORESIZE SCROLLING=AUTO>
<FRAME SRC=c-1.htm NAME=FRAME3 NORESIZE SCROLLING=AUTO>
</FRAMESET> 如 : 浮动窗口
<CENTER>
<IFRAME FRAMEBORDER=YES SCROLLING=YES SRC=c1-01.htm>
</IFRAME>
</CENTER>   注意  窗口基本架构的,通常放在HTML的第一页,如 : index.htm 。此HTML的基本架构并不本文区 ( BODY ),只需定义窗口架构,而其他HTML可用连结 ( A HREF=...连结标记 TARGET属性 ) 显示于指定的窗口中。设置的用的,几乎很少了吧!增加了版面的美观,不外也不要放了大量的,而拖慢传输的效率喔!   有关设定的方法共有以下几种 :
设定HTML背景、背景颜色。<BODY>…</BODY>标记。
如 : <BODY BACKGROUND=A.GIF>…</BODY> 或
<BODY BGCOLOR=#000000>…</BODY>
设定。<IMG>标记。
设定地图。<MAP>…</MAP>标记。
  常用标记 <IMG> 指令
属性 :
·ALIGN 调整
·ALT 提示字
·BORDER 边框
·HEIGHT 高度
·SRC 或URL位址
·USEMAP 地图名称
·WIDTH 宽度 如 : 可插入 ( GIF、JPG格局 )、AVI片子
<CENTER>
<IMG SRC=&quot;../../../images/pcedu_lo.gif&quot; ALT=&quot;华夏黑客联盟&quot; ALIGN=TOP BORDER=1>
</CENTER> <MAP>…</MAP> 地图
属性 :
·NAME 名称
<AREA> 设定地图动作区域
属性 :
·COORDS 设定动作区域座标 ( 左上角座标 : X1,Y1 ; 右下角座标 : X2,Y2 )
·HREF 动作区域连结点 ( 可载入位址或 )
·NOHREF 动作区域连结点不动作
·SHAPE 外型
  举例设定地图
<IMG BORDER=0 SRC=A.GIF USEMAP=#A>
<MAP NAME=A>
<AREA SHAPE=RECT COORDS=0,0,200,100 HREF=1.HTM>
<AREA SHAPE=RECT COORDS=0,100,200,200 NOHREF>
<AREA SHAPE=RECT COORDS=0,200,200,300 HREF=3.HTM>
</MAP>加入声音HTML不仅能插入,也载入MIDI音乐、WAV 音效喔!
常用音乐标记 <BGSOUND> 背景音乐、音效。 属性 :
·LOOP 轮回 , 背景音乐播放次数
·SRC 或URL位址 (可为WAV、MIDI格局 ) 如 :
<BGSOUND SRC=m-1.mid LOOP=True> 内嵌音乐插件 <EMBED>…</EMBED> 内嵌插件。 属性 :
·HEIGHT 高度
·WIDTH 宽度 ( 可设百分比% )
·SRC 设定内嵌物件的 URL 位址
·LOOP 轮回 , 背景音乐播放次数
·AUTOSTART 自动播放 如 :
<EMBED SRC=m-1.mid WIDTH=145 HEIGHT=60 AUTOSTART=True LOOP=True></EMBED>