html语言学习教程
HTML语言学习教程——HTML语言剖析（献给不懂HTML的朋友）目录1、HTML语言剖析之Html简介2、HTML语言剖析之HTML标记一览3、HTML语言剖析之文件标记4、HTML语言剖析之排版标记5、HTML语言剖析之字体标记6、HTML语言剖析之清单标记7、HTML语言剖析之表格标记8、HTML语言剖析之表单标记9、HTML语言剖析之图形标记10、HTML语言剖析之链接标记11、HTML语言剖析之多媒体标记12、HTML语言剖析之其他标记13、HTML语言剖析之特殊字符14、HTML语言剖析之调色原理1、HTML语言剖析之Html简介全写：HyperTextMark-upLanguage译名：超文件注标式语言（译名之一）简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标记（tag）使文件达到预期的显示效果。HTML是在SGML定义下的一个描述性语言，或可说HTML是SGML的一个应用程式，HTML不是程式语言，如C++和Java之类，它只是标示语言，基本上你只要明白了各种标记的用法便算学懂了HTML，HTML的格式非常简单，只是由文字及标记组合而成，于编辑方面，任何文字编辑器都可以，只要能将文件另存成ASCII纯文字格式即可，当然以专业的网页编辑软件为佳。■阅读须知：这一篇【HTML剖析】偏重于标记的介绍，考虑到易懂及每节的篇幅问题，我并不按W3C的HTML分类，这可令你更易选择有兴趣的标记，其中只有【文件标记】是必读的，其余可任意选择。这一篇不会提及任何网页编辑软件，只要掌握了HTML，任何网页编辑工具都可以变成一把利器。■标记写法：任何标记皆由"<"及">"所围住，如
标记名与小于号之间不能留有空白字符。某些标记 要加上参数，某些则不必。如Hello参数只可加于起始标记中。在起始标记之标记名前加上符号"/"便是其终结标记，如\n标记字母大小写皆可。■围堵标记与空标记：标记按型态分为围堵标记与空标记围堵标记顾名思义，它以起始标记及终结标记将文字围住，令其达到预期显示效果。例如HTMLSource：CreationofWebpageismyfavourite.显示成：CreationofWebpageismyfavourite.其中便称为围堵标记。它以起始标记及终结标记标示文字Creationofwebpage，令它显示成粗体，两者失其一都会发生错误显示。空标记是指标记单独出现，只有起始标记没有终结标记。例如HTMLSource：IloveCreationofWebpage.
It'sawonderfulplace.显示成：IloveCreationofWebpage.It'sawonderfulplace.其中换行标记
便属空标记。它的作用便是将标记后所有东西显示于下一行，可见终结标记于它是没意义的，但有些人会为空标记加上终结标记，这是为方便记认而己，对HTML没有影响。2、HTML语言剖析之HTML标记一览标记类型译名或意义作用备注文件标记●文件声明让浏览器知道这是HTML文件 ●开头提供文件整体资讯 ●标题定义文件标题，将显示于浏览顶端 <BODY>●本文设计文件格式及内文所在 排版标记<!--注解-->○说明标记为文件加上说明，但不被显示 <P>○段落标记为字、画、表格等之间留一空白行 <BR>○换行标记令字、画、表格等显示于下一行 <HR>○水平线插入一条水平线 \n <CENTER>●居中令字、画、表格等显示于中间反对<PRE>●预设格式令文件按照原始码的排列方式显示 <DIV>●区隔标记设定字、画、表格等的摆放位置 <NOBR>●不折行令文字不因太长而绕行 <WBR>●建议折行预设折行部位 字体标记<STRONG>●加重语气产生字体加粗Bold的效果 <B>●粗体标记产生字体加粗的效果 <EM>●强调标记字体出现斜体效果 <I>●斜体标记字体出现斜体效果 <TT>●打字字体Courier字体，字母宽度相同 <U>●加上底线加上底线反对<H1>●一级标题标记变粗变大加宽，程度与级数反比 <H2>●二级标题标记将字体变粗变大加宽 <H3>●三级标题标记将字体变粗变大加宽 <H4>●四级标题标记将字体变粗变大加宽 <H5>●五级标题标记将字体变粗变大加宽 <H6>●六级标题标记将字体变粗变大加宽 <FONT>●字形标记设定字形、大小、颜色反对<BASEFONT>○基准字形标记设定所有字形、大小、颜色反对<BIG>●字体加大令字体稍为加大 <SMALL>●字体缩细令字体稍为缩细 <STRIKE>●画线删除为字体加一删除线反对<CODE>●程式码字体稍为加宽如<TT> <KBD>●键盘字字体稍为加宽，单一空白 <SAMP>●范例字体稍为加宽如<TT> <VAR>●变数斜体效果 <CITE>●传记引述斜体效果 <BLOCKQUOTE>●引述文字区块缩排字体 <DFN>●述语定义斜体效果 <ADDRESS>●地址标记斜体效果 <SUB>●下标字下标字 <SUP>●上标字指数（平方、立方等） 清单标记<OL>●顺序清单清单项目将以数字、字母顺序排列 <UL>●无序清单清单项目将以圆点排列 \n <LI>○清单项目每一标记标示一项清单项目 <MENU>●选单清单清单项目将以圆点排列，如<UL>反对<DIR>●目录清单清单项目将以圆点排列，如<UL>反对<DL>●定义清单清单分两层出现 <DT>○定义条目标示该项定义的标题 <DD>○定义内容标示定义内容 表格标记<TABLE>●表格标记设定该表格的各项参数 <CAPTION>●表格标题做成一打通列以填入表格标题 <TR>●表格列设定该表格的列 <TD>●表格栏设定该表格的栏 <TH>●表格标头相等于<TD>，但其内之字体会变粗 表单标记<FORM>●表单标记决定单一表单的运作模式 <TEXTAREA>●文字区块提供文字方盒以输入较大量文字 <INPUT>○输入标记决定输入形式 <SELECT>●选择标记建立pop-up卷动清单 <OPTION>○选项每一标记标示一个选项 图形标记<IMG>○图形标记用以插入图形及设定图形属性 连结标记<A>●连结标记加入连结 <BASE>○基准标记可将相对URL转绝对及指定连结目标 框架标记<FRAMESET>●框架设定设定框架 <FRAME>○框窗设定设定框窗 <IFRAME>○页内框架于网页中间插入框架IE<NOFRAMES>●不支援框架设定当浏览器不支援框架时的提示 影像地图<MAP>●影像地图名称设定影像地图名称 <AREA>○连结区域设定各连结区域 多媒体<BGSOUND>○背景声音于背景播放声音或音乐IE<EMBED>○多媒体加入声音、音乐或影像 其他标记<MARQUEE>●走动文字令文字左右走动IE\n<BLINK>●闪烁文字闪烁文字NC<ISINDEX>○页内寻找器可输入关键字寻找于该一页反对<META>○开头定义让浏览器知道这是HTML文件 <LINK>○关系定义定义该文件与其他URL的关系 StyleSheet<STYLE>●样式表控制网页版面 <span>●自订标记独立使用或与样式表同用 注：●表示该标记属围堵标记，即需要关闭标记如</标记>。○表示该标记属空标记，即不需要关闭标记。IE表示该标记只适用于InternetExplorer。NC表示该标记只适用于NetscapeCommunicator。反对表示该标记不为W3C所赞同，通常这标记是IE或NC自订，且己为众所支持，只是HTML标准中有其它同功能或更好的选择。弃用表示该标记己为W3C所弃用，是过时的标记，但HTML具向下兼容的特性，不用担心新浏览器不支援旧标记。新表示该标记是HTML4.0中新增的。3、HTML语言剖析之文件标记<HTML>；<HEAD>；<TITLE>；<BODY>欲明白本篇【HTML剖析】之标记分类请看【标记一览】。亦请先明白围堵标记与空标记的分别请看【HTML概念】。■HTML基本架构：以下HTMLSourceCode便是一份HTML文件的基本架构：<HTML><HEAD><TITLE>网页的标题网页的内容，很多标记都作用于此\n特点解说：整份文件处于标记与之间。用以声明这是HTML文件，让浏览器认出并正确处理此HTML文件。文件分两部分，由至称为开头，至称本文。基本上两者各有适用的标记，如只可出现于开头部分。开头部分用以存载重要资讯，而只有本文部分会被显示。所以大部分标记会运用于本文部分。<TITLE>所标示的是文件的标题。会出现于浏览器顶部及为别人Bookmark时的名称，所以每页有不同而明确的标题是需要的。上述标记中只有<BODY>具参数设定。■<BODY>之参数设定：例子：<BODYtext="#000000"link="#0000FF"alink="#FF0000"vlink="#0000FF"background="bg1.gif"bgcolor="#FFFFFF"leftmargin=2topmargin=2bgproperties="fixed">text="#000000"用以设定文字颜色。#000000代表黑色，亦可以采用颜色的名称，即text="black"。各种颜色的值及名称可参考【调色原理】一节。link="#0000FF"设定一般文字连结颜色。alink="#FF0000"设定刚按下时文字连结颜色。vlink="#0000FF"设定连结后的颜色。（被按过）。background="bg1.gif"设定背景墙纸。GIF或JPEG皆可，可以是绝对途径或相对途径。bgcolor="#FFFFFF"设定背景颜色。当己设定背景墙纸时会失去作用，除非墙纸有透明部分。leftmargin=2设定整份文件显示画面的左方边沿空间，单位为像素。『只适用于IE』\ntopmargin=2设定整份文件显示画面的上方边沿空间。『只适用于IE』bgproperties="fixed"固定背景墙纸，当卷动文字时墙纸不会跟著卷动。『只适用于IE』标记及参数之字母大小都可以。4、HTML语言剖析之排版标记<!--注解-->；<P>；<BR>；<HR>；<CENTER>；<PRE>；<DIV>；<NOBR>；<WBR>； ■<!--注解-->：▲Top像很多电脑语言一样，HTML文件亦提供注解功能。浏览器会忽略此标记中的文字（可以是很多行）而不作显示，一般使用目的：为文中不同部份加上说明，方便日后修改。这对较复杂或非私人网页尤其重要，它不单是提醒自已，亦提醒你的同事这部分做什么、那部分做什么。例子：<!--由这处开始是产品订购表格-->用作版权声明。假如你不希望别人使用或复制你的网页，可加上警告字眼。例子：<!--本文版权为1998,CreationofWebpage所拥有，未经许，请勿抄摘-->■<P>：▲Top<P>称为段落标记。作用：为字、画、表格等之间留一空白行。本来<P>是一围堵标记，标于一段落的头尾，但从HTML2.0开始己不需要</P>作结尾。<P>的常用参数：如：<palign="center">align="center"可选值：right,left,center。内定值：align="left"例子：原始码Hereisthetextformyparagraph.Itdoes'tmatterhowlongitis,\nhowmanyspacearebetweenthewordsorwhenIdecidetohitthereturnkey.ItwillcreateanewparagraphonlywhenIbeginthetagwithanotherone.<P>Here'sthenextparagraph. 显示结果Hereisthetextformyparagraph.Itdoes'tmatterhowlongitis,howmanyspacearebetweenthewordsorwhenIdecidetohitthereturnkey.ItwillcreateanewparagraphonlywhenIbeginthetagwithanotherone.Here'sthenextparagraph.■<BR>：▲Top<BR>称为换行标记。作用：令字、画、表格等显示于下一行。由于浏览器会自动忽略原始码中空白和换行的部分，这令到<BR>成为最常用的标记之一。因为无论你在原始码中编好了多漂亮的文章，若不适当地加上换行标记或段落标记，浏览器只会将它显示成一大段。错误示范：（邮局可不会接受一行过的地址）原始码566EBostonPostRDMamaroneckNY10543-9982UnitedStatesofAmerica 结果566EBostonPostRDMamaroneckNY10543-9982UnitedStatesofAmerica 正确例子：原始码566EBostonPostRD<BR>MamaroneckNY10543-9982<BR>UnitedStatesofAmerica 结果566EBostonPostRDMamaroneckNY10543-9982UnitedStatesofAmerica ■<HR>：▲Top<HR>称为水平线。作用：插入一条水平线。<HR>之参数修改：以：<HRalign="LEFT"size="2"width="70%"color="#0000FF"noshade>为例。align="LEFT"\n设定线条置放位置，可选择：left；right；center三种设定值。size="2"设定线条厚度，以像素作单位，内定为2。width="70%"设定线条长度，可以是绝对值（以像素作单位）或相对值，内定为100%。color="#0000FF"『只适用于IE』设定线条颜色，内定为黑色。#0000FF代表蓝色，亦可以采用颜色的名称，即text="blue"。noshade设定线条为平面显示，若删去则具阴影或立体，这是内定值。例子：原始码<HR><HRalign="LEFT"size="4"><HRalign="LEFT"size="2"width="70%"color="#0000FF"noshade><HRalign="LEFT"size="4"width="70"color="#008000"> 显示结果--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------■<CENTER>：▲Top<CENTER>称为居中标记。作用：令字、画、表格等显示于中间。这标记原先是Netscape所定义，后来其它浏览器都支持它，但你会发现很多标记已有align="CENTER"的参数，<CENTER>似乎多馀了，事实上它还是常用的标记之一，其简单易用，常用于文字上，对于己加有align="CENTER"参数的<TABLE>标记亦要不厌其烦地加上居中标记，因有狻多浏览器不支持<TABLE>标记中的align="CENTER"参数。\n例子：原始码<CENTER>Chris'sFirstHomepage</CENTER><CENTER>What'snew</CENTER><CENTER>Myprofile</CENTER> 结果Chris'sFirstHomepageWhat'snewMyprofile ■<PRE>：▲Top<PRE>称为预设格式标记。作用：令文件按照原始码的排列方式显示。这标记允许保留你于原始码中输入的空白及Return。细看以下例子你便可体会到此标记的威力。除了运用一大堆表格标记之外你只有采用这标记才能有此效果。能以<PRE>标记产生对 效果，或产生多于一行的空白才算上乘！例子：原始码 <pre> CreationofWebpageLogAnalysisI ComposerLearning 459407480522547586673 HTMLAdvanced 200268296358385453506</pre>显示结果 CreationofWebpageLogAnalysisI ComposerLearning 459407480522547586673 HTMLAdvanced 200268296358385453506■<DIV>：▲Top<DIV>称为区隔标记。作用：设定字、画、表格等的摆放位置。<DIV>应用于StyleSheet（式样表）方面会更显威力，它最终目的是给设计者另一种组织能力，有Class;Style;title;ID等属性，将会于【StyleSheet】一节才作详述，这处只介绍一个属性设定。以<DIValign="center">为例：\nalign="center"可选值：center;left;right。决定字、画、表格等居中、靠左或靠右。<DIValign="center">的作用和居中标记<CENTER>一样，前者是由HTML3.0开始的标准，后者是通用己久的标示法。例子：原始码<DIValign="center">Chris'sFirstHomepage<br>What'snew<br>Myprofile</DIV> 结果Chris'sFirstHomepageWhat'snewMyprofile■<NOBR>：▲Top<NOBR>称为不折行标记。作用：令某些文字不因太长而绕行，一 显示于同一行或下一行。它对住址、数学算式、一行数字、程式码等尤为有用。例子：（其中Chris'sCreationofWebpage将不被分开而显示于同一行。）码Ifyouwanttoknowhowtocreateyouownhomepagequickly,don'tmiss<NOBR>Chris'sCreationofWebpage</NOBR>whichwillhelpyoualot. 结果Ifyouwanttoknowhowtocreateyouownhomepagequickly,don'tmissChris'sCreationofWebpagewhichwillhelpyoualot. ■<WBR>：▲Top<WBR>称为建议折行标记。作用：预设折行部位。它没有侵犯到<BR>的责任，只是作建议而已，若观者的系统解像度够高的话，那么它是不会折行的。例子：（若不加<WBR>标记，整个网址会显示于下一行。）原始码Pleasevisitmyotherhomepagewhichlocateathttp://www.geocities.com/SiliconValley/<WBR>Sector/8234/index.htmlTherearemanysoftwaresfordownload.Ithinkyouwillreallylovethatplace. 结果Pleasevisitmyotherhomepagewhichlocateathttp://www.geocities.com/SiliconValley/Sector/8234/index.htmlTherearemanysoftwaresfordownload.Ithinkyouwillreallylovethatplace.\n5、HTML语言剖析之字体标记<STRONG><B><I><EM><VAR><CITE><DFN><ADDRESS><TT><SAMP><CODE><KBD><U><STRIKE><BIG><SMALL><SUP><SUB><H1><H2><H3><H4><H5><H6><FONT><BASEFONT>■实体标记与逻辑标记：▲Top这一节【字体标记】你必须先明白实体标记与逻辑标记的分别，否则你会迷惑于为何不同的标记却有相同的效果。两者分别有以下两处：实体标记有固定的显示效果，逻辑标记则依不同浏览器而不同。例如逻辑标记的<EM>由于浏览器的不同它所标示的文字不一定出现斜体效果，它可能是加底线、粗体或反白等，所以这一节是以它们在IE和NC中的效果作介绍。多个实体标记亦可有效标示同一字句，逻辑标记则通常于旧浏览器不能有效显示多重的标示。例如两个逻辑标记<EM>及<STRONG>同时标示一字句于旧浏览器常失去作用。实体标记有：<I><B><U>逻辑标记有：<STRONG><EM><VAR><CITE><DFN><ADDRESS><CODE><KBO><SAMP><TT>若要求真确的效果当然以实体标记为佳。■<STRONG><B>：▲Top两者皆能产生字体加粗的效果，但必须注意的是当文件被设为gb2312Encoding时，两者所标示的中文字不会于NetscapeNetvigator显示粗体效果。例子：（第一行是没有任何字体标记的，作对照之用）HTMLSourceCode（原始码）浏览器显示结果CreationofWebpage<br><STRONG>CreationofWebpage</STRONG><br><B>CreationofWebpage</B>CreationofWebpageCreationofWebpageCreationofWebpage\n■<I><EM><VAR><CITE><DFN><ADDRESS>：▲Top这些标记于InternetExplorer都产生斜体效果，而只有</DFN>于NetscapeNetvigator失去作用。这些标记中只有<ADDRESS>较为特别，因它包括换行效果所以不必在它前面加上<BR>标记。例子：HTMLSourceCode（原始码）浏览器显示结果<I>CreationofWebpage</I><br><EM>CreationofWebpage</EM><br><VAR>CreationofWebpage</VAR><br><CITE>CreationofWebpage</CITE><br><DFN>CreationofWebpage</DFN><ADDRESS>CreationofWebpage</ADDRESS>CreationofWebpageCreationofWebpageCreationofWebpageCreationofWebpageCreationofWebpageCreationofWebpage■<TT><SAMP><CODE><KBD><U><STRIKE><BIG><SMALL><SUP><SUB>▲Top为方便对照及记认，所以把十个标记于在一起介绍。<TT><SAMP><CODE><KBD>可令每字母有相等宽度且每字母之间的距离稍为加宽。但于NC不见得如此。<U>是加底线的标记，一些特别的浏览器并不支援，因顾虑到与连结混淆。<STRIKE>加上删除线的标记。<BIG>令字体加大。<SMALL>令字体变细。<SUB>为下标字，<SUP>则为上标字，仅剩的数学标记。例子：（第一行是没有任何字体标记的，作对照之用）HTMLSourceCode（原始码）浏览器显示结果CreationofWebpage<br><TT>CreationofWebpage</TT><br><SAMP>CreationofWebpage</SAMP><br><CODE>CreationofWebpage</CODE><br><KBD>CreationofWebpage</KBD><br><U>CreationofWebpage</U><br><STRIKE>CreationofWebpage</STRIKE><br><BIG>CreationofWebpage</BIG>\n<br><SMALL>CreationofWebpage</SMALL><br>12345<SUB>7</SUB>6789<SUP>9</SUP>CreationofWebpageCreationofWebpageCreationofWebpageCreationofWebpageCreationofWebpageCreationofWebpageCreationofWebpageCreationofWebpageCreationofWebpage12345767899■<H1><H2><H3><H4><H5><H6>：▲Top这些是标题标记，由<H1>至<H6>变粗变大加宽的程度逐渐减小。每个标题标记所标示的字句将独占一行且上下留一空白行。例子：原始码<H1>HeaderLevel1</H1><H2>HeaderLevel2</H2><H3>HeaderLevel3</H3><H4>HeaderLevel4</H4><H5>HeaderLevel5</H5><H6>HeaderLevel6</H6>显示结果HeaderLevel1HeaderLevel2HeaderLevel3HeaderLevel4HeaderLevel5HeaderLevel6■<FONT><BASEFONT>：▲Top这一节只有这两个标记具参数设定，且两者的参数设定是一样的，都是负责设定文字的大小、字形及颜色，但各有用处，且看以下比较：<BASEFONT>可以用于文件的开头部分，即<HEAD>与</HEAD>之间的位置，将\n影响全文字句，是一个空标记，用以改变字体显示的内定值。<FONT>是应用于文件的内文部分，即<BODY>与</BODY>之间的位置，只影响所标示的字句，是一个围堵标记。两标记可同时存在，唯没被<FONT>所标示的字句才直接受<BASEFONT>所影响，而<FONT>本身亦受<BASEFONT>的影响。<FONT>的参数设定：例子：<fontface="Arial"size="+2"color="#008000">CreationofWebpage</font>face="Arial"设定文字的字形。Arial是常用的一种，请不要使用Window内建字形以外的字形。于没有设定为Gb2312Encoding的中文网页，NetscapeNetvigator不会显示此标记所指明的任何中文字形。size="+2"设定文字的大小。其值可以是绝对或相对，绝对的意思便是标记自己决定文字的大小，不受<BASEFONT>的影响，如size="5"表示其大小便是5，而html内定值为3，即size="3"和没有设定是一样的。相对的意思便是在内定值3的基础上增加或减少大小级数，如size="+2"便等同绝对表示法的size="5"，但若已设定<BASEFONTsize="n">则其实际大小便是n+2不再是3+2了。<BASEFONT>只有绝对表示法。color="#008000"设定文字的颜色。#008000表示绿色例子：原始码<fontsize="+1">IloveCreationofWebpage</font><br><fontsize="+2"color="#800080">IloveCreationofWebpage</font><br><fontface="TimesNewRoman"size="5"color="#008000">IloveCreationofWebpage</font>显示结果IloveCreationofWebpageIloveCreationofWebpageIloveCreationofWebpage6、HTML语言剖析之清单标记<OL><LI><UL><MENU><DIR><DL><DT><DD>■<OL><LI>: <OL>称为顺序清单标记。<LI>则用以标示清单项目。所谓顺序清单就是在每一项前面加上1,2,3...等数目，又称编号清单。<OL>的参数设定（常用）：\n例如：<oltype="i"start="4"></ol>type="i"设定数目款式，其值有五种，请参考右表，内定为type="1"。start="4"设定开始数目，不论设定了哪一数目款式，其值只能是1,2,3..等整数，内定为start="1"。TypeNumberingstyle1arabicnumbers1,2,3,...aloweralphaa,b,c,...AupperalphaA,B,C,...ilowerromani,ii,iii,...IupperromanI,II,III,...<LI>的参数设定（常用）：例如：<litype="square"value="4">type="square"只适用于非顺序清单，设定符号款式，其值有三种，如下，内定为type="disc"：符号是当type="disc"时的列项符号。符号if"width=10height=10border=0>是当type="circle"时的列项符号。符号是当type="square"时的列项符号。value="4"只适用于顺序清单，设定该一项的数目，其後各项将以此作为起始数目而递增，但前面各项则不受影响，其值只能是1,2,3..等整数，没有内定值。例子：HTMLSourceCode（原始码）浏览器显示结果Mybestfriends:<ol><li>MichelleWei<li>MichaelWan<li>GloriaLam</ol>Mybestfriends:MichelleWeiMichaelWanGloriaLam■<UL>： <UL>称为无序清单标记。所谓无序清单就是在每一项前面加上、、等符号，故又称符号清单。\n<UL>的参数设定（常用）：例如：<ULtype="square">type="square"设定符号款式，其值有三种，如下，内定为type="disc"：符号是当type="disc"时的列项符号。符号是当type="circle"时的列项符号。符号是当type="square"时的列项符号。注意：由于<UL>及<LI>都有type这个参数，两者尽可能选用其一。例子：HTMLSourceCode（原始码）浏览器显示结果MyHomepages:<ul><li>PenpalsGarden<li>ICQGarden<li>SoftwareCity<li>CreationofWebpage</ul>MyHomepages:PenpalsGardenICQGardenSoftwareCityCreationofWebpage■<MENU><DIR>： 这两个标记都不为W3C所赞同，希望用者能以<ul>及<ol>代之。<MENU>及<DIR>，基本上它和<ul>是一样的，在一些特别的浏览器可能表现出<ol>的效果，于旧版的IE或NC标记<DIR>不显示符号或数目。两标记的用法与<ul>完全一样。例子：HTMLSourceCode（原始码）浏览器显示结果MyHomepages:<dir><li>PenpalsGarden<li>ICQGarden<li>SoftwareCity<li>CreationofWebpage</dir>MyHomepages:PenpalsGardenICQGardenSoftwareCityCreationofWebpage\n■<DL><DT><DD>: <DL>称为定义清单标记。<DT>用以标示定义条目，<DD>则用以标示定义内容。所谓定义清单就是一种分二层的项目清单，其不故符号及数目。三个标记都没有常用的参数。而<DT><DD>可以独立使用，只是一些旧的浏览器并不支援，如IE3.0。常用的如<DD>标记可用以制造段落第一个字前面的空白。例子：原始码<dl><dt>HowtouseDefinitionList<dd>First,youshouldnotplaceparagraphtagrightafterorbeforealiststructureorbetweentheitemsofalist.Incerntaincontexts,useofextraparagraphtagsshouldalwaysbeavoided,whenyourealizethisconcept,itisquiteasytowriteaHTML.<dt>Otherthingstoknow<dd>WeusuallyputonlyONEDefinitiontagfollowingtheDefinitionTermtag,morethanoneDDtagisnotrecommanded.Besides,unlikeDefinitionListisanonemptytag,bothDefinitionTermandDefinitionDescriptionareemptytags.</dl>显示结果HowtouseDefinitionListFirst,youshouldnotplaceparagraphtagrightafterorbeforealiststructureorbetweentheitemsofalist.Incerntaincontexts,useofextraparagraphtagsshouldalwaysbeavoided,whenyourealizethisconcept,itisquiteasytowriteaHTML.OtherthingstoknowWeusuallyputonlyONEDefinitiontagfollowingtheDefinitionTermtag,morethanoneDDtagisnotrecommanded.Besides,unlikeDefinitionListisanonemptytag,bothDefinitionTermandDefinitionDescriptionareemptytags.7、HTML语言剖析之表格标记表格标记<TABLE><TR><TD><TH><CAPTION>■<TABLE><TR><TD>：▲Top这三个标记是定义表格的最重要的标记，可以说只学这三个己足够。<TABLE>是一个容器标记，意思是说它用以声明这是表格而且其他表格标记只能在他的范围内才适用，属容器标记的还有其他。<TR>用以标示表格列（row）\n<TD>用以标示储存格（cell）<TABLE>的参数设定（常用）：例如：<tablewidth="400"border="1"cellspacing="2"cellpadding="2"align="CENTER"valign="TOP"background="myweb.gif"bgcolor="#0000FF"bordercolor="#FF00FF"bordercolorlight="#00FF00"bordercolordark="#00FFFF"cols="2">width="400"表格宽度，接受绝对值（如80）及相对值（如80%）。border="1"表格边框厚度，不同浏览器有不同的内定值，故请指明。cellspacing="2"表格格线厚度，请看例子三，那是加厚到5的格线。cellpadding="2"文字与格线的距离，请看例子四，那是加至10的padding。align="CENTER"表格的摆放位置（水平），可选值为：left,right,center，请看例子五或六，那表格是放于中间的，为怕一些浏览器不支援，故特加上居中标记<CENTER>，只是多层保证而己，当然只用<CENTER>亦可。valign="TOP".表格内字画等的摆放贴 位置（垂直），可选值为：top,middle,bottom。background="myweb.gif"表格 纸，与bgcolor不要同用。bgcolor="#0000FF"表格底色，与background不要同用，请看例子六。bordercolor="#FF00FF"表格边框颜色，NC与IE有不同的效果，请看例子六。bordercolorlight="#00FF00"表格边框向光部分的颜色，请看例子二。『只适用于IE』bordercolordark="#00FFFF"表格边框背光部分的颜色，请看例子二，使用bordercolorlight或bordercolordark时bordercolor将会失效。『只适用于IE』cols="2"\n表格栏位数目，只是让浏览器在下载表格是先画出整个表格而己。<TR>的参数设定（常用）：例如：<tralign="RIGHT"valign="MIDDLE"bgcolor="#0000FF"bordercolor="#FF00FF"bordercolorlight="#808080"bordercolordark="#FF0000">align="RIGHT"该一列内字画等的摆放贴 位置（水平），可选值为：left,center,right。valign="MIDDLE"该一列内字画等的摆放贴 位置（垂直），可选值为：top,middle,bottom。bgcolor="#0000FF"该一列底色，请看例子五。bordercolor="#FF00FF"该一列边框颜色，请看例子三。『只适用于IE』bordercolorlight="#808080"该一列边框向光部分的颜色，请看例子三。『只适用于IE』bordercolordark="#FF0000"该一列边框背光部分的颜色，请看例子三，使用bordercolorlight或bordercolordark时bordercolor将会失效。『只适用于IE』<TD>的参数设定（常用）：例如：<tdwidth="48%"height="400"colspan="5"rowspan="4"align="RIGHT"valign="BOTTOM"bgcolor="#FF00FF"bordercolor="#808080"bordercolorlight="#FF0000"bordercolordark="#00FF00"background="myweb.gif">width="48%"该一储存格宽度，接受绝对值（如80）及相对值（如80%）。height="400"该一储存格高度。colspan="5"该一储存格向右打通的栏数。请看例子六rowspan="4"该一储存格向下打通的列数。请看例子六align="RIGHT"该一储存格内字画等的摆放贴 位置（水平），可选值为：left,center,right。valign="BOTTOM"\n该一储存格内字画等的摆放贴 位置（垂直），可选值为：top,middle,bottom。bgcolor="#FF00FF"该一储存格底色，请看例子四。bordercolor="#808080"该一储存格边框颜色，请看例子三。『只适用于IE』bordercolorlight="#FF0000"该一储存格边框向光部分的颜色，请看例子三。『只适用于IE』bordercolordark="#00FF00"该一储存格边框背光部分的颜色，请看例子三，使用bordercolorlight或bordercolordark时bordercolor将会失效。『只适用于IE』background="myweb.gif"该一储存格 纸，与bgcolor任用其一。例子一：原始码<tablewidth="60%"border="1"><tr><td>只有一个储存格（cell）的表格</td></tr></table>显示结果只有一个储存格（cell）的表格例子二：原始码<tablewidth="60%"border="0"bordercolorlight="#FF00FF"bordercolordark="#FF0000"><tr><td>第一列第一栏</td><td>第一列第二栏</td></tr></table>显示结果第一列第一栏第一列第二栏例子三：原始码<tablewidth="60%"border="0"cellspacing="5"><trbordercolor="#0000FF"><td>第一列第一栏</td><td>第一列第二栏</td></tr><trbordercolorlight="#FF00FF"bordercolordark="#00FF00"><td>第二列第一栏</td><td>第二列第二栏</td></tr></table>\n显示结果第一列第一栏第一列第二栏第二列第一栏第二列第二栏例子四：原始码<tablewidth="60%"border="0"cellpadding="10"><tr><tdbgcolor="#FFCCE6">第一列第一栏</td><tdbgcolor="#FFFFC6">第一列第二栏</td></tr><tr><tdbgcolor="#FFD9FF">第二列第一栏</td><tdbgcolor="#DAB4B4">第二列第二栏</td></tr></table>显示结果第一列第一栏第一列第二栏第二列第一栏第二列第二栏例子五：原始码<center><tablewidth="60%"cellspacing="0"cellpadding="2"align="CENTER"><tr><tdbgcolor="#FFD2E9">第一列第一栏</td><tdbgcolor="#FFDAB5">第一列第二栏</td><tdbgcolor="#FFFFB5">第一列第三栏</td></tr><trbgcolor="#C0C0C0"><td>第二列第一栏</td><td>第二列第二栏</td><td>第二列第三栏</td></tr></table></center>显示结果第一列第一栏第一列第二栏第一列第三栏第二列第一栏第二列第二栏第二列第三栏例子六原始码<center><tablewidth="350"border="1"cellspacing="0"cellpadding="2"align="CENTER"\nbgcolor="#FFC4E1"bordercolor="#0000FF"><tr><td>第一列第一栏</td><tdcolspan="2">第一列之第二栏及第三栏</td></tr><tr><tdrowspan="2">第二列及第三列之第一栏</td><td>第二列第二栏</td><td>第二列第三栏</td></tr><tr><td>第三列第二栏</td><td>第三列第三栏</td></tr></table></center>显示结果第一列第一栏第一列之第二栏及第三栏第二列及第三列之第一栏第二列第二栏第二列第三栏第三列第二栏第三列第三栏■<TH>：▲Top<TH>与<TD>同样是标示一个储存格，唯一不同的是<TH>所标示的储存格中的文字是以粗体出现，通常用于表格第一列以标示栏目。它的用法是取代<TD>的位置便可以，其参数设定请参考<TD>。当然若为<TD>所标示的储存格中的文字加上粗体标记<B>便等如<TH>的效果。例子：原始码<center><tablewidth="350"border="1"cellspacing="0"cellpadding="2"align="CENTER"><tralign="CENTER"><th>Month</th><th>%ofIEvisitor</th><th>%ofNCvisitor</th></tr><tralign="CENTER"><td>August</td><td>61%</td><td>39%</td></tr><tralign="CENTER"><td>July</td><td>54%</td><td>46%</td></tr><tralign="CENTER"><td>June</td><td>52%</td><td>48%</td></tr></table>\n</center>显示结果Month%ofIEvisitor%ofNCvisitorAugust61%39%July54%46%June52%48%■<CAPTION>：▲Top<CAPTION>的作用是为表格标示一个标题列，有如在表格上方加上一没格线的打通列。当然亦可置于下方，通常用以存放该表格的标题。<CAPTION>的参数设定（常用）：例如：<captionalign="TOP"valign="TOP"></caption>align="TOP"该表格标题列相对于表格的摆放贴 位置（水平），可选值为：left,center,right,top,middle,bottom，若align="bottom"的话标题列便会出现对表格的下方，不管你的原始码中把<caption>放在<table>中的头部或尾部。valign="TOP"该表格标题列相对于表格的摆放位置（上下），可选值为：top,bottom。和align="TOP"或align="BOTTOM"是一样的，虽然功能重复了，但如果你要标题列置于下方及向右或向左贴 ，那末两个参数便可一 用了。当只 一个参数时，请首选align，因为valign是由HTML3.0才开始的参数。例子：原始码<center><tablewidth="350"border="1"cellspacing="0"cellpadding="2"align="CENTER"><caption>网页速成八月份访客浏览器使用分析</caption><tralign="CENTER"><th>Month</th><th>%ofIEvisitor</th><th>%ofNCvisitor</th></tr><tralign="CENTER"><td>August</td><td>61%</td><td>39%</td></tr></table></center>显示结果网页速成八月份访客浏览器使用分析Month%ofIEvisitor%ofNCvisitorAugust61%39%\n8。1、HTML语言剖析之表单标记-1<FORM><INPUT>INPUT的种类：Text,Radio,Checkbox,Password,Submit/Reset,Image,File,Hidden,Button。<SELECT><OPTION><TEXTAREA>■引子表单的用处很多，于网上无处不见，当然是配合CGI使用为佳，所以馈下有意使用或学习CGI的话，表单设计见必需的，这一节介绍的标记不多，但其参数变化很多。一份表单的基本架构是：在<FORM>标记的包围下加上一种或以上的表单输入方式及一个或以上的按键。■<FORM><INPUT>： <FORM>称为表单标记，用以宣告此为表单模式，属于一个容器标记，表示其它表单标记需要在它的包围中才有效，<INPUT>便是其中的一个，用以设定各种输入资料的方法。它是一个空标记。<FORM>的参数设定（常用）：例如：<formaction="http://your.isp.com/cgi-local/example.cgi"method="POST">action="http://your.isp.com/cgi-local/example.cgi"表单通常是与CGI配合使用的，参数action便是用以指明该CGI程式的位置，这样此表单所填的资料才能正确传给CGI作处理。若馈下没有CGI以进行测试，可设定此参数为ACTION="mailto:your@email.com"那样该表单所填的资料将会寄至此电邮地址（红色部分）。method="POST"传送资料给CGI的的方式，可选值为POST,GET。你只需记住POST容许传送大量资料，但GET则只接受低于1K的资料，所以你若看过别人的表单原始码的话，你会发现申请表单用的是POST而搜找器用的是GET。<INPUT>的参数设定（常用）：由于其第一个参数type己有很多的选择，而不同的选择表示出不同的输入方式，且其它参数亦因此而异，故以下将独立介绍不同输入方式及其它参数设定。type="Text"可选值为Text,Radio,Checkbox,Password,Submit/Reset,Image,File,Hidden,Button。--------------------------------------------------------------------------------输入方式一：Text（单行文字盒）例如<inputtype="Text"name="age"value="20"align="MIDDLE"size="2"maxlength="255">\ntype="Text"输入方式为Text，能产生一单行文字盒，上限为255字元。name="age"此一单行文字盒名称，这是最重要的一个，方便CGI辨认由表单传来的资料，虽说可随便命名，但通常CGI程式中都有指定名称，若转用其它名称便需要修改该CGI程式了，名称可为没空白没特别符号的英文或数字，有大小写的分别，可以写成Your_Age，若有访客于此表单此一文字盒填入40的话，那末传给CGI的字串便是Your_Age=40。value="20"此一单行文字盒内定值。若不填写则文字盒是空白的，等待访客亲自键入，若value="20"的话，20便会出现在文字盒中，当然访客可以修改之。align="MIDDLE"可选值：top,middle,bottom,left,right,texttop,baseline,absmiddle.没太大有处。size="2"此一单行文字盒显示的长度，若馈下是采用Big5编码的中文网页便要小心，同size的文字盒NC会显示得比IE狻长。maxlength="255"此一单行文字盒可输入字元的上限，为方便编排资料或避免错输入等，宜设定上限，例如输入电话或ICQUIN的可设为8，年龄为2等。例子：原始码<formaction="http://your.isp.com/cgi-local/example.cgi"method="POST">请填入电话号码：<inputtype="Text"name="phone"value=""size="10"maxlength="8"></form>显示结果请填入电话号码：--------------------------------------------------------------------------------输入方式二：Radio（单一选择）例如：<inputtype="Radio"name="gender"value="female"align="MIDDLE"checked>type="Radio"输入方式为Radio，能产生一单一选择，以供点选。name="gender"此一Radio名称，参考Text部分的说明。value="female"内定值。每一个radio必须及仅有一个value，通常有同时采用两个或以上同name不同value的Radio输入方式，可让使用使任选其一。align="MIDDLE"可选值：top,middle,bottom,left,right,texttop,baseline,absmiddle。checked设该Radio为内定被选。同name的各个Radio中只能有一个使用，或全不使用这参数。例子：原始码<formaction="http://your.isp.com/cgi-local/example.cgi"method="POST">请选性别：<inputtype="Radio"name="gender"value="Female">女性\n<inputtype="Radio"name="gender"value="Male"checked>男性<br>你喜欢吗：<inputtype="Radio"name="like"value="Yes">喜欢<inputtype="Radio"name="like"value="No">不喜欢<inputtype="Radio"name="like"value="NotSure">不肯定</form>显示结果请选性别：女性男性你喜欢吗：喜欢不喜欢不肯定--------------------------------------------------------------------------------输入方式三：Checkbox（确认盒）例如：<inputtype="Checkbox"name="idol"value="Leon"align="RIGHT"checked>type="Checkbox"输入方式为Checkbox，能产生一确认盒，以供剔选。name="idol"此一Checkbox名称，参考Text部分的说明。value="Leon"内定值。每一个Checkbox必须及仅有一个value，当被剔选时这值便会传及CGI，例如所传字串idol=Leon。align="RIGHT"可选值：top,middle,bottom,left,right,texttop,baseline,absmiddle。checked设该Checkbox为内定被选。每个Checkbox都是独立的，所以每一个都可使用这参数，不像Radio。例子：原始码<formaction="http://your.isp.com/cgi-local/example.cgi"method="POST">你喜欢以下那些明星：<br><inputtype="Checkbox"name="idol01"value="Leon">黎明<inputtype="Checkbox"name="idol02"value="Noriko_Sagai">酒井法子<inputtype="Checkbox"name="idol03"value="Leon">郑秀文<inputtype="Checkbox"name="idol04"value="BonJovi"checked>BonJovi</form>显示结果你喜欢以下那些明星：黎明酒井法子郑秀文BonJovi--------------------------------------------------------------------------------输入方式四：Password（密码输方盒）例如：<inputtype="Password"name="pw"value="999"align="MIDDLE"size="5"maxlength="9">\nPassword的其他参数和Text是完全相同的，请参考Text的介绍。两者作用不同，Password所输入的字元全以*号表示。例子：原始码<formaction="http://your.isp.com/cgi-local/example.cgi"method="POST">请输入姓名：<inputtype="Text"name="name"><br>请输入密码：<inputtype="Password"name="pw"maxlength="9"></form>显示结果请输入姓名：请输入密码：--------------------------------------------------------------------------------输入方式五：Submit（传送键）及Reset（清除键）这是表单上重要的两个按键，两者所附带的参数相同，但用处不大。例如：<inputtype="Submit"name="other_funtion"value="确定"align="MIDDLE"><inputtype="Reset"value="清除"align="MIDDLE">type="Submit"设定输入方式为Submit或Reset。name="other_funtion"Submit的功能随name的不同而不同，须和CGI配合。若你只需要普通的传送键，则是其内定，不必用此参数。value="确定"这个值不是输给CGI的，而是显示在按键上，可以不用，传送键的内定值为SubmitQuery，清除键的内定值为Reset。align="MIDDLE"可选值：top,middle,bottom,left,right,texttop,baseline,absmiddle。例子：原始码<formaction="http://your.isp.com/cgi-local/example.cgi"method="POST"><inputtype="Submit"><inputtype="Reset"><br><inputtype="Submit"value="确定"><inputtype="Reset"value="清除"></form>显示结果8。2、HTML语言剖析之表单标记-2--------------------------------------------------------------------------------输入方式六：Image（图片按键）\n这通常用以取代Submit及Reset两个按键，因为由程式产生的按键并不漂亮，这Image参数便容许你采用自已制造的按键。例如：<inputtype="Image"name="submit"align="BOTTOM"src="ex_icon.gif">type="Image"输入方式为Image。name="submit"所要代表的按键，可以是submit,reset,或其它。align="BOTTOM"可选值：top,middle,bottom,left,right,texttop,baseline,absmiddle。src="ex_icon.gif"按键图片来源，若此图片文件不与该html文件在同一目录下，请加上相对或绝对途径。例子：原始码<formaction="http://your.isp.com/cgi-local/example.cgi"method="POST"><inputtype="Image"name="submit"align="BOTTOM"src="ex_icon.gif"></form>显示结果--------------------------------------------------------------------------------输入方式七：File例如：<inputtype="File"name="upload"align="BOTTOM"size="20"maxlength="100"accept="text/html">inputtype="File"输入方式为Image。通常用以传输文件。name="upload"这文件传输的名称，用以识别之用。align="BOTTOM"可选值：top,middle,bottom,left,right,texttop,baseline,absmiddle。size="20"所显示文字盒的长度。maxlength="100"可输入字元的上限。accept="text/html"所接受的文件类别，有二十六种选择，但可不设定。例子：原始码<formaction="http://your.isp.com/cgi-local/example.cgi"method="POST"><type="File"name="upload"size="30"maxlength="100"accept="text/html"></form>显示结果\n--------------------------------------------------------------------------------输入方式八：Hidden例如：<inputtype="Hidden"name="ID"value="6618">type="Hidden"输入方式为隐藏或内定。它不会显示任何输入介面，而是一个内定值随表单一起传给CGI，列如由CGI产生的会员号码，或传入可更改的参数以调整CGI而避免修改CGI程式码。name="ID"这文件传输的名称，用以识别之用。value="6618"内定值，会以如ID=6618形式传给CGI。例子：（"Hidden"是不被显示的，所以这处多放了一个"Submit"键，表示Hidden之内定值会随submit键被按而传给CGI）原始码<formaction="http://your.isp.com/cgi-local/example.cgi"method="POST"><inputtype="Hidden"name="ID"value="6618"><inputtype="Submit"value="Submit"></form>显示结果--------------------------------------------------------------------------------输入方式九：Button例如：<inputtype="Button"name="useless"value="Back">type="Button"输入方式为一般按键。常配合JavaScript作为其启动按键。name="useless"这文件传输的名称，用处不大。value="Back"按键显示名称。例子：其中onclick="history.go(-1);returntrue;属JAVA事件。原始码<form><inputtype="Button"value="回前一页"onclick="history.go(-1);returntrue;"></form>显示结果■<SELECT><OPTION>： <SELECT>是卷动选单标记，每一选项皆由<OPTION>所标示，把它当作围堵标记或空标记使用都可以。<SELECT>的参数设定（常用）：\n例如：<selectname="where"size="6"multiple>name="where"这卷动选单的名称，作识别之用，将会传及CGI。size="6"这卷动选单的列数，即其高度，请自行修改。若使用此参数则不会有PopUp效果。multiple令这卷动选单容许多重选择。<OPTION>的参数设定（常用）：例如：<optionvalue="tw"selected>value="tw"这选项的值，将会传及CGI。请自行修改，但不同选项必须有不同的值。selected设该选项为内定被选。一个单选卷动选单只能有一项或零可内定被选。例子一：（普通POPUP卷动选单）原始码<formaction="http://your.isp.com/cgi-local/example.cgi"method="POST">Whereyoucomfrom?<selectname="where"><optionvalue="hk">HongKong</option><optionvalue="tw"selected>Taiwan</option><optionvalue="cn">China</option><optionvalue="us">UnitedStates</option><optionvalue="ca">Canada</option></select></form>显示结果Whereyoucomfrom?HongKongTaiwanChinaUnitedStatesCanada例子二：（容许多重选择的卷动选单）原始码<formaction="http://your.isp.com/cgi-local/example.cgi"method="POST">Whereyoucomfrom?<selectname="where"multiple><optionvalue="hk">HongKong</option><optionvalue="tw"selected>Taiwan</option><optionvalue="cn">China</option><optionvalue="us">UnitedStates</option><optionvalue="ca">Canada</option></select></form>显示结果Whereyoucomfrom?HongKongTaiwanChinaUnitedStatesCanada例子三：（设定了Size的卷动选单）原始码<form\naction="http://your.isp.com/cgi-local/example.cgi"method="POST">Whereyoucomfrom?<selectname="where"size="5"><optionvalue="hk">HongKong</option><optionvalue="tw"selected>Taiwan</option><optionvalue="cn">China</option><optionvalue="us">UnitedStates</option><optionvalue="ca">Canada</option></select></form>显示结果Whereyoucomfrom?HongKongTaiwanChinaUnitedStatesCanada■<TEXTAREA>： <TEXTAREA>是表单文字区块标记，常用于bugreport,feedback等需要填写大量资料的用途。<TEXTAREA>的参数设定（常用）：例如：<textareaname="comments"cols="40"rows="4"wrap="VIRTUAL">name="comments"这文字区块的名称，作识别之用，将会传及CGI。cols="40"这文字区块的宽度，请自行修改。rows="4"这文字区块的列数，即其高度，请自行修改。wrap="VIRTUAL"设定其折行问题，可选值为：off,physical,virtual。off表示不使用此属性，physical时则会强迫刘览器在送资料到CGI（Web伺服器端）必须将实№文字中的换行一并送出，设为virtual时则送出连续成串的字（除非使用者按了键盘的RETURN/ENTER）。例子：原始码<formaction="http://your.isp.com/cgi-local/example.cgi"method="POST">Givecomments:<textareaname="comments"cols="40"rows="4"wrap="VIRTUAL">这是预设的字句，通常留空的，随你喜欢。</textarea></form>显示结果Givecomments:这是预设的字句，通常留空的，随你喜欢。9、HTML语言剖析之图形标记\n ■<IMG>：<IMG>称图形标记，主要用以插入图片于网页中，至于其它用处如配合影片文件等的播放及影像地图（ImageMap或称一图多连结）则于不会在这节提及，请看【影像地图】及【其他标记】。<IMG>的一般参数设定：例如<imgsrc="logo.gif"width=100height=100hspace=5vspace=5border=2align="top"alt="LogoofPenPalsGarden"lowsrc="pre_logo.gif">src="logo.gif"图片来源，接受.gif,.jpg及.png格式，前两者通行己久，后者由96年开始发展，于未来取代前两者。若图片文件与该html文件同处一目录则只 写上文件案名称，否则必须加上正确的途径，相对及绝对皆可。width=100height=100设定图片大小，此宽度、及高度一般采用pixels作单位。通常只设为图片的真实大小以免失真，若 要改变图片大小最好事先使用图像编辑工具。hspace=5vspace=5设定图片边沿空白，以免文字或其它图片过于贴近。hspace是设定图片左右的空间，vspace则是设定图片上下的空间，高度采用pixels作单位。border=2图片边框厚度。align="top"调整图片旁边文字的位置，你可以控制文字出现在图片的偏上方、中间、底端、左右等，可选值：top,middle,bottom,left,right，内定为botom。Netscape还支持texttop,baseline,absmiddle,absbottom，texttop表示图片和文字依顶线对 ，baseline表示图片对 到目前文字行底线值，absmiddle表示图片对 到目前文字行绝对中央，absbottom表示图片对 到目前文字行绝对底部，（绝对底部意指它考虑到比方y、g、q等字的下缘）。alt="LogoofPenPalGarden"这是用以描述该图形的文字，若用者使用文字浏览器，由于不支持图片，这些文字更会代替图片而被显示。若于支持图片显示的浏览器，当鼠标移至图片上该些文字亦会显示。lowsrc="pre_logo.gif"设定先显示低解像图片，若所加入的是一张很大的图片，下载 时很长，这张低解像图片会先被显示以免浏览失却兴趣，通当是原图片灰阶版本。例子一：原始码<imgsrc="girl.gif"width=100height=112border=0alt="beautifulgirl">普通插入显示结果普通插入例子二：原始码<imgsrc="girl.gif"width=100height=112border=0alt="beautiful"hspace=10vspace=20">设定上下左右空白位置\n显示结果设定上下左右空白位置例子三：原始码<imgsrc="girl.gif"width=100height=112border=4alt="beautiful"hspace=10vspace=20">设定上下左右空白位置显示结果设定字画中间对 ，边框厚度为4。例子四：原始码<imgsrc="girl.gif"width=100height=112alt="beautifullady"align="right"border=0>设定图片靠右。显示结果设定图片靠右。例子五：原始码<imgsrc="girl.gif"width=200height=220alt="I'mnotbeautifulrightnow"border=0>放大了的图片显示结果放大了的图片10、HTML语言剖析之链接标记<A><BASE> ■<A>：▲Top<A>称连结标记，由<A>与</A>所围的文字、图片等等可以成为一个连结。<A>的一般参数设定：例如<ahref="index.html"name="hello"target="_top">href="index.html"这参数不能与另一参数name同时使用，使用这参数才能造成可按的连结。当作为一外部连结时：href所设定的是该连结所要连到的文件名称，若该文件与此html档不是同在一目录请加上适当的路径，相对绝对皆可。当作为一内部连结时：href所设定的是该连结所要连到的同文件内参考点或指定文件之参考点，且不 要包围任何字画只 加上结束标示</a>便可以，例如<ahref="#there"></a>、<ahref="index.html#there"></a>及<ahref="http://www.school.net.hk/~chris55/index.html#there"></a>其中there便是参考点，并 於其前加上符号#以作识别，参考点由下一个参数name事先於文件中埋下。\nname="hello"这参数是为文件埋下参考点，作为被连结，不会被显示。所以说造成一个内部连结 要使用两次<A>连结标记。一个使用参数name事先於文件中埋下一参考点，另一个使用参数href连到这个参考点。target="_top"设定连结被按後之结果所要显示的视窗。可选值为：_blank,_parent,_self,_top,框窗名称。target="框窗名称"这只运用於框架中，若被设定则连结结果将显示於该“框窗名称”之框窗中，框窗名称是事先由框架标记所命名。target="_blank"或target="new"将连结的画面内容，开在新的浏览视窗中。target="_parent"将连结的画面内容，当成文件的上一个画面。target="_self"将连结的画面内容，显示在目前的视窗中。(内定值)target="_top"将框架中连结的画面内容，显示在没有框架的视窗中。（即除去了框架)例子一：（外部连结）原始码<ahref="../promote/engines.html">四百五十个寻找引擎</a><p><ahref="http://www.hkseek.com/icq"><imgsrc="link_image.gif"width=99height=44border=1alt="ICQGarden"></a><p><ahref="http://www.hkseek.com/icq"><imgsrc="link_image.gif"width=99height=44border=0alt="ICQGarden"></a> 显示结果四百五十个寻找引擎例子二（内部连结）：请到PenPalGarden的FAQPage刻体验一下何为内部连结。原始码<aname="test"></a><ahref="#test">本页的内部连结</a><br><ahref="http://www.school.net.hk/~chi/faq.html#14">跳到PenPalGarden的FAQ部分</a> 显示结果本页的内部连结跳到PenPalGarden的FAQ\n部分 ■<BASE>：▲Top<BASE>是一个连结基准标记，用以改变文件中所有连结标记的参数内定值。它只能应用於文件的开头部分，即标记<HEAD>与</HEAD>之间。<BASE>的一般参数设定：例如<basehref="http://www.microsoft.com/"target="_top">href="http://www.microsoft.com/"设定该页网页中所有HTTP文件及图形（包括相对路径连结及<IMG>图形标记等）的内定路径，其他如ftp://及gopher://等则不受影响。这参数只可填入一个相对或绝对的路径，不必填入档案名称。一般相对路径连结及<IMG>图形标记等是内定以该页网页所在的目录作为起点，若依这例子，该文件中所有连结将会以http://www.microsoft.com/作为起点，若其中有连结如<ahref="index.html">BacktoMainPage</a>，那末它不会连到自已目录下的index.html，它将会连到Microsoft的首页，这是因为相对路径己给<BASE>转成绝对的了。target="_top"设定该页网页中所有连结被按後之结果所要显示的视窗，免得分别为所有连结加上target参数，常应用於框架中。其设定与<A>连结标记中target参数相同。例子容後再写，你可亲自尝试或到一些以框架制作的网页去体验一下。11、HTML语言剖析之多媒体标记<BGSOUND><EMBED>■<BGSOUND>：<BGSOUND>是用以插入背景音乐，但只适用於IE，其参数设定不多。如下<BGSOUNDsrc="your.mid"autostart=trueloop=infinite>src="your.mid"设定midi档案及路径，可以是相对或绝对。autostart=true是否在音乐档传完之後，就自动播放音乐。true是，false否(内定值)。loop=infinite是否自动反覆播放。LOOP=2表示重复两次，Infinite表示重复多次。\n■<EMBED>：<EMBED>是用以插入各种多媒体，格式可以是Midi、Wav、AIFF、AU等等，Netscape及新版的IE都支援。其参数设定狻多。如下<EMBEDsrc="your.mid"autostart="true"loop="true"hidden="true">src="your.mid"设定midi档案及路径，可以是相对或绝对。autostart=true是否在音乐档传完之後，就自动播放音乐。true是，false否(内定值)。loop="true"是否自动反覆播放。LOOP=2表示重复两次，true是，false否。HIDDEN="true"是否完全隐藏控制画面，true为是，no为否(内定)。STARTTIME="分:秒"设定歌曲开始播放的时间。如STARTTIME="00:30"表示从第30秒处开始播放。VOLUME="0-100"设定量的大小，数值是0到100之间。内定则为使用者系统本身之设定。WIDTH="整数"和HIGH="整数"设定控制画面的宽度和高度。(若HIDDEN="no")ALIGN="center"设定控制画面和旁边文字的对 方式，其值可以是top、bottom、center、baseline、left、right、texttop、middle、absmiddle、absbottom。CONTROLS="smallconsole"设定控制画面的外貌。预设值是console。console一般正常的面板 smallconsole较小的面板 playbutton只显示播放按钮 pausecutton只显示暂停按钮 stopbutton只显示停止按钮 volumelever只显示音量调整钮12、HTML语言剖析之其他标记\n<MARQUEE><BLINK><ISINDEX><META><LINK>■<MARQUEE>：<MARQUEE>只适用於IE，译为「跑马灯」如StatusBar的那种，意指走动或卷动的文字，其参数设定狻多。我先举些例子，然後再列出各参数。例子一：原始码<marqueewidth=150>I'masmallMARQUEE</marquee>显示结果I'masmallMARQUEE例子二：原始码<marqueebehavior=slide>Thisisaslideeffect</marquee>显示结果Thisisaslideeffect例子三：原始码<marqueebehavior=alternate>撞来撞去，啊！我昏啦</marquee>显示结果撞来撞去，啊！我昏啦例子四：原始码<marqueescrolldelay=5scrollamount=50>哗！！太快了，我又昏啦</marquee>显示结果哗！！太快了，我又昏啦<marqueebehavior="SCROLL"direction="LEFT"bgcolor="#0000FF"height="30"width="150"hspace="0"vspace="0"loop="INFINITE"scrollamount="30"scrolldelay="500">Hello</marquee>behavior="SCROLL"决定文字的卷动方式，可选值为：SCROLL一般卷动，是内定值。SLIDE如幻灯片，一格格的，效果是文字一接触左边便全部消失。ALTERNATE文字向左右两边撞来撞去。direction="LEFT"设定文字的卷动方向，LEFT表示向左，是内定值，RIGHT表示向右。\nbgcolor="#0000FF"设定文字卷动范围的背景颜色。height="30"width="150">设定文字卷动范围，可采用相对或绝对，如30%或30等，单位为像素。hspace="0"vspace="0"设定文字的水平及垂直空白位置。loop="INFINITE"设定文字卷动次数，其值可以是正整数或INFINITE，INFINITE是内定值，表示无限次。scrollamount="30"每「格」文字之间的间隔，单位是像素。scrolldelay="500"文字卷动的停顿时间，单位是毫秒。■<BLINK>：▲Top<BLINK>是令文字闪烁，只适用於NC，用法直接，没有参数。看看例子便知：例子：原始码<blink>我是天上星，闪又闪</blink>显示结果我是天上星，闪又闪■<ISINDEX>：▲Top<ISINDEX>可让某些WebServer找寻网页内的关键字，假如你的WebServer提供这样的找寻功能，使用者的浏览器也支援这些找寻功能，那堋，载入网页时就会看到一个简单的找寻方块。其用法直接，没有参数，本来是要放於<HEAD>标记内的，但把它放在<BODY>标记内亦不见有问题，请记住，3W以反对此标记。例子：原始码<isindex>显示结果--------------------------------------------------------------------------------可以搜索该索引。请键入要搜索的关键字:--------------------------------------------------------------------------------\n■<META>：▲Top<META>是放於<HEAD>与</HEAD>之间的标记，功用与变化等对，所以我公式化地介绍。<metaname="Description"content="ThisisChris'sHomePage">该网页的描述，作用於寻找引擎的登录<metaname="Keywords"content="Chris,Web,Music,photo">该网页的关键字，作用於寻找引擎的登录<metahttp-equiv="Expires"content="Tue,09Dec199700:00:00GMT"><metahttp-equiv="Pragma"content="no-cache">以上行功能相同，都是要浏览器重新载入该页，不要使用快取档案，当然可以修改该Expire时间。<metahttp-equiv="Content-Type"content="text/html;charset=big5"><metahttp-equiv="Content-Type"content="text/html;charset=iso-8859-1">设定这是HTML文件及其编码语系，中文网页请使用big5那行，或者不设编码亦可，纯英文网页建议使用iso-8859-1。<metaname="GENERATOR"content="Mozilla/4.04[en](Win95;I)[Netscape]"><metaname="GENERATOR"content="MicrosoftFrontPage3.0">这只表示该网页由甚堋编辑器写成。<metahttp-equiv="refresh"content="10;url=http://www.hkiwc.com">这一行较为实用，能於预定秒数内自动转到指定的网址。原始码中10表示10秒。■<LINK>：▲Top<LINK>用来将目前文件与其它URL作连结，但不会有连结按钮，用於<HEAD>标记间，格式如下：<linkhref="URL"rel="relationship"><linkhref="URL"rev="relationship">其用法我们会於StyleSheet一节详细介绍。13、HTML语言剖析之特殊字符\n只要你认识了HTML标记，你便会知道特殊字符的用处。HTML原始码显示结果描述<<小於号或显示标记>>大於号或显示标记&&可用於显示其它特殊字符""引号®?己注册©?版权™?商标 半方大的空白 全方大的空白不断行的空白■ISOLatin-1特殊字符：HTML原始码显示结果描述Æ?UppercaseAEdiphthingÁáUppercaseA,acuteaccentÂ?UppercaseA,circumflexaccentÀàUppercaseA,graveaccentÅ?UppercaseA,ringÃ?UppercaseA,tildeÄ?UppercaseA,dieresisorumlautmarkÇ?UppercaseC,cedillaÐDUppercaseEth,IcelandicÉéUppercaseE,acuteaccentÊêUppercaseE,circumflexaccentÈèUppercaseE,graveaccentË?UppercaseE,dieresisorumlautmarkÍíUppercaseI,acuteaccentÎ?UppercaseI,circumflexaccentÌìUppercaseI,graveaccentÏ?UppercaseI,dieresisorumlautmarkÑ?UppercaseN,tildeÓóUppercaseO,acuteaccentÔ?UppercaseO,circumflexaccentÒòUppercaseO,graveaccent\nØ?UppercaseO,slashÕ?UppercaseO,tildeÖ?UppercaseO,dieresisorumlautmarkÞTUppercaseTHORN,IcelandicÚúUppercaseU,acuteaccentÛ?UppercaseU,circumflexaccentÙùUppercaseu,graveaccentÜüUppercaseU,dieresisorumlautmarkÝYUppercaseY,acuteaccentæ?LowercaseaediphthingááLowercasea,acuteaccentâaLowercasea,circumflexaccentààLowercasea,graveaccentå?Lowercasea,ringã?Lowercasea,tildeä?Lowercasea,dieresisorumlautmarkç?Lowercasec,cedillaðeLowercaseeth,IcelandicééLowercasee,acuteaccentêêLowercasee,circumflexaccentèèLowercasee,graveaccentë?Lowercasee,dieresisorumlautmarkííLowercasei,acuteaccentî?Lowercasei,circumflexaccentììLowercasei,graveaccentï?Lowercasei,dieresisorumlautmarkñ?Lowercasen,tildeóóLowercaseo,acuteaccentô?Lowercaseo,circumflexaccentòòLowercaseo,graveaccentø?Lowercaseo,slashõ?Lowercaseo,tildeö?Lowercaseo,dieresisorumlautmarkß?Lowercasesharps,German(szligature)þtLowercasethorn,IcelandicúúLowercaseu,acuteaccent\nû?Lowercaseu,circumflexaccentùùLowercaseu,graveaccentüüLowercaseu,dieresisorumlautmarkýyLowercasey,acuteaccentÿ?Lowercasey,dieresisorumlautmark14、HTML语言剖析之调色原理HTML的颜色表示可分两种：以命名方式定义常用的颜色，如RED。以RGB值表示，如#FF0000表示red。命名方式涵括的色种不多亦不甚方便，较少采用，以下介绍RGB值的原理：众所皆知颜色是由"red""green""blue"三原色组合而成的，在HTML中对於彩度的定义是采十六进位的，对於三原色HTML分别给予两个十六进位去定义，也就是每个原色可有256种彩度，故此三原色可混合成一千六佰多万的颜色。例如白色的组成是red=ff,green=ff,blue=ff,RGB值即为ffffff红色的组成是red=ff,green=00,blue=00,RGB值即为ff0000绿色的组成是red=00,green=ff,blue=00,RGB值即为00ff00蓝色的组成是red=00,green=00,blue=ff,RGB值即为0000ff黑色的组成是red=00,green=00,blue=00,RGB值即为000000於应用时常在每个RGB值之前加上符号#以示分别，但不加亦可。■HTML基本架构：选按不同颜色按键以测试前景颜色效果(只适合InternetExplorer)选按不同颜色按键以测试背景颜色效果或输入一个RGB颜色码或名称\n■16常用颜色表：ColorValueNameColorValueName#00FFFFaqua#808080gray#000080navy#C0C0C0silver#000000black#008000green#808000olive#008080teal#0000FFblue#00FF00lime#800080purple#FFFF00yellow#FF00FFfuchsia#800000maroon#FF0000red#FFFFFFwhite■其它常用颜色表：ColorValueNameColorValueName#F0F8FFaliceblue#A00000antiquewith#7FFFD4aquamarine#F0FFFFazure#F5F5DCbeige#FFE4C4bisque#000000black#FFEBCDblanchedalmond#0000FFblue#8A2BE2blueviolet#A52A2Abrown#DEB887burlywood#5F9EA0cadetblue#7FFF00chartreuse#D2691Echocolate#FF7F50coral#C0F000cornfloewrblue#FFF8DCcornsilk#00FFFFcyan#00008Bdarkblue#008B8Bdarkcyan#B8860Bdarkgoldenrod#A9A9A9darkgray#006400darkgreen#DA0000darkhaki#8B008Bdarkmagenta#556B2Fdarkolivegreen#DA000Edarkorenge#9932CCdarkorchid#8B0000darkred#E9967Adarksalmon#8FBC8Fdarkseagreen#483D8Bdarkslateblue#2F4F4Fdarkslategray#00CED1darkturquoise#9400D3darkviolet#FF1493deeppink#00BFFFdeepskyblue#696969dimgray#1E90FFdodgerblue#B22222firebrick#FFFAF0floralwhite#228B22forestgreen#DCDCDCgainsboro#00000Egostwhite#FFD700gold\n#00E00Dgolenrod#808080gray#008000green#ADFF2Fgreenyellow#F0FFF0honeydew#FF69B4hotpink#CD5C5Cindianred#FFFFF0ivory#F0E68Ckhaki#E6E6FAlavender#FFF0F5lavenderblush#7CFC00lawngreen#FFFACDlemonchiffon#ADD8E6lightblue#F08080lightcoral#E0FFFFlightcyan#0000E0lightgodenrod#0000E0lightgodenrodyellow#0000A0lightgray#90EE90lightgreen#FFB6C1lightpink#FFA07Alightsalmon#20B2AAlightseagreen#87CEFAlightskyblue#0000EBlightslateblue#778899lightslategray#B0C4DElightsteelblue#FFFFE0lightyellow#32CD32limegreen#FAF0E6linen#FF00FFmagenta#800000maroon#66CDAAmediumaquamarine#0000CDmediumblue#BA55D3mediumorchid#ED0000mediumpurpul#3CB371mediumseagreen#7B68EEmediumslateblue#00FA9Amediumspringgreen#48D1CCmediumturquoise#C71585mediumvioletred#191970midnightblue#F5FFFAmintcream#FFE4E1mistyrose#FFE4B5moccasin#FFDEADnavajowhite#000080navy#A0B0E0navyblue#FDF5E6oldlace#6B8E23olivedrab#FFA500orange#0E0EEDorengered#DA70D6orchid#A00D00palegodenrod#98FB98palegreen#AFEEEEpaleturquoise#DB7093palevioletred#FFEFD5papayawhip#FFDAB9peachpuff#CD853Fperu#FFC0CBpink#DDA0DDplum#B0E0E6powderblue#800080purple#FF0000red#BC8F8Frosybrown#4169E1royalblue#8B4513saddlebrown#FA8072salmon#F4A460sandybrown#2E8B57seagreen#FFF5EEseashell\n#A0522Dsienna#87CEEBskyblue#6A5ACDslateblue#708090slategray#FFFAFAsnow#00FF7Fspringgreen#4682B4steelblue#D2B48Ctan#D8BFD8thistle#FF6347tomato#40E0D0turquoise#EE82EEviolet#00E0EDvioletred#F5DEB3wheat#000E00hite#F5F5F5whitesmoke#FFFF00yellow#9ACD32yellowgreen </div>
<div class="show-more-content">查看更多</div>
</div>
</div>
<div class="relate">
<h2>相关文章</h2>
<ul class="docs">
</ul>
</div>
<div class="last">
<h2>您可能关注的文档</h2>
<ul class="docs">
<li><a href="/office/3676896.html" title="培训工作年终总结结尾范本" target="_blank" owa-bind="had" data-sm="spm,1.2.5.10,0">
<i class="icon-font icon-format icon-format-doc"></i>
<strong>培训工作年终总结结尾范本</strong>
</a>
</li>
<li><a href="/office/3676895.html" title="党管武装述职报告自查报告(精选多篇)" target="_blank" owa-bind="had" data-sm="spm,1.2.5.10,0">
<i class="icon-font icon-format icon-format-doc"></i>
<strong>党管武装述职报告自查报告(精选多篇)</strong>
</a>
</li>
<li><a href="/office/3676892.html" title="团支部工作年终总结（一）" target="_blank" owa-bind="had" data-sm="spm,1.2.5.10,0">
<i class="icon-font icon-format icon-format-doc"></i>
<strong>团支部工作年终总结（一）</strong>
</a>
</li>
<li><a href="/office/3676890.html" title="团支部工作年终总结范文" target="_blank" owa-bind="had" data-sm="spm,1.2.5.10,0">
<i class="icon-font icon-format icon-format-doc"></i>
<strong>团支部工作年终总结范文</strong>
</a>
</li>
<li><a href="/office/3676891.html" title="党校学报编辑部的述职报告(精选多篇)" target="_blank" owa-bind="had" data-sm="spm,1.2.5.10,0">
<i class="icon-font icon-format icon-format-doc"></i>
<strong>党校学报编辑部的述职报告(精选多篇)</strong>
</a>
</li>
<li><a href="/office/3676887.html" title="党政办秘书述职报告" target="_blank" owa-bind="had" data-sm="spm,1.2.5.10,0">
<i class="icon-font icon-format icon-format-doc"></i>
<strong>党政办秘书述职报告</strong>
</a>
</li>
<li><a href="/office/3676886.html" title="团总支办公室工作年终总结范文" target="_blank" owa-bind="had" data-sm="spm,1.2.5.10,0">
<i class="icon-font icon-format icon-format-doc"></i>
<strong>团总支办公室工作年终总结范文</strong>
</a>
</li>
<li><a href="/office/3676884.html" title="品管部工作年终总结" target="_blank" owa-bind="had" data-sm="spm,1.2.5.10,0">
<i class="icon-font icon-format icon-format-doc"></i>
<strong>品管部工作年终总结</strong>
</a>
</li>
<li><a href="/office/3676880.html" title="单位依法行政工作年终总结六篇" target="_blank" owa-bind="had" data-sm="spm,1.2.5.10,0">
<i class="icon-font icon-format icon-format-doc"></i>
<strong>单位依法行政工作年终总结六篇</strong>
</a>
</li>
<li><a href="/office/3676875.html" title="党支部党建工作述职报告(精选多篇)" target="_blank" owa-bind="had" data-sm="spm,1.2.5.10,0">
<i class="icon-font icon-format icon-format-doc"></i>
<strong>党支部党建工作述职报告(精选多篇)</strong>
</a>
</li>
</ul>
</div>
</div>
<div id="operate" style="display: block;">
<ul class="h-100 px-2 d-flex align-items-center mb-0">
<!-- <li class="collect">-->
<!-- <a id="operate_collect" href="javascript:;" title="收藏"><i class="iconfont"></i><span>收藏</span></a>-->
<!-- </li>-->
<!-- <li class="share">-->
<!-- <a id="operate_share" href="javascript:;" title="分享"><i class="iconfont"></i><span>分享</span></a>-->
<!-- </li>-->
<!-- <li class="report">-->
<!-- <a id="operate_report" href="javascript:;" title="投诉"><i class="iconfont"></i><span>投诉</span></a>-->
<!-- </li>-->
<li class="w-50">
<span style="color: #999;line-height: 35px">当前文档收益归属上传用户</span>
</li><li class="w-50" >
<button id="title_download" style="padding:10px 0!important;" type="button" type="button" class="w-100 rounded-pill btn-download d-block" data-toggle="modal" data-target="#rechargeModal" data-id="2279398"
title="html语言学习教程" data-binddown="true"><span>下载文档</span></button>
</li>
</ul>
</div>
<div id="sidebar">
<ul class="list">
<!--下一篇-->
<li class="next"><a href="/dxedu/2279399.html" title="美国描写语言学派"><i
class="iconfont"></i><span>下一篇</span></a>
</li>
<li class="top" style="display: none;"><a href="javascript:;" title="置顶"><i class="iconfont"></i></a></li>
</ul>
</div>
<!-- 充值Modal -->
<div class="modal fade" id="rechargeModal" data-backdrop="static" tabindex="-1" data-keyboard="false" aria-labelledby="rechargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-end">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-center flex-grow-1 font-weight-bold " style="font-size: 18px; padding-left: 34px;" id="rechargeModalLabel">下载文档</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="bg-light px-3 py-2">
<div style="font-size: 16px;">html语言学习教程</div>
<div class="text-secondary" ><span class="mr-4">文档大小：214.50 KB</span> <span>文档价格：<span class="price"></span></span></div>
</div>
</div>
<div class="modal-footer justify-content-center px-0 py-0">
<div class="container d-flex justify-content-between align-items-center bg-white flex-nowrap px-1">
<div class="w-50 pr-1">
<button class="btn btn-success w-100 d-flex align-items-center justify-content-center" id="wechatPay" style="height:45px"><img class="mr-1" src="/static/pc/img/wechatpay-icon.png" alt="">微信支付</button>
</div>
<div class="w-50 pl-1">
<button class="btn btn-primary w-100 d-flex align-items-center justify-content-center" id="aliPay" style="height:45px"><img class="mr-1" src="/static/pc/img/alipay-icon.png" alt="">支付宝支付</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- download模态框 -->
<!-- Modal -->
<div class="modal fade" id="downloadModal" tabindex="-1" aria-labelledby="downloadModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered justify-content-center">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-center flex-grow-1 font-weight-bold " style="font-size: 18px; padding-left: 34px;" id="rechargeModalLabel">下载文档</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="bg-light px-3 py-2 mb-4">
<div style="font-size: 16px;">html语言学习教程</div>
<div class="text-secondary" ><span class="mr-4">文档大小：214.50 KB</span> <span>文档价格：<span class="price"></span></span></div>
</div>
<div class="text-center">
<div class=""><button class="btn btn-primary px-3 py-2 mb-1" id="download-btn">立即下载文档</button></div>
</div>
</div>
</div>
</div>
</div>
<div id="mobilePayBox" class="mobile-pay-box" style="display: none;"></div>
<div id="closeAlipay" class="close-ali-pay" style="display: none;">关闭</div>
<!--footer start-->
<div id="search_layer" style="display: none">
<div class="search">
<form class="form" method="post" name="searchform"
action="/../e/search/index.php" onsubmit=""><i class="iconsearch"></i>
<input type="hidden" value="title" name="show">
<input type="hidden" value="4" name="tempid">
<input type="hidden" value="wenku" name="tbname">
<input name="mid" value="2" type="hidden">
<input name="dopost" value="search" type="hidden">
<input class="search-control" name="keyboard" type="text" aria-label="请输关键词搜索文档" placeholder="请输关键词搜索文档"
autocomplete="off">
<button class="btn-search" type="submit" title="点击搜索"></button>
</form>
<div class="cancel"><a href="javascript:;" title="个人中心">取消</a></div>
</div>
<div class="log">
<div class="hd"><strong>历史搜索</strong><a class="clear" href="javascript:;" title="清空搜索历史"><i
class="iconsearch"></i></a></div>
<ul class="list"></ul>
</div>
<div class="auto"></div>
</div>
<div id="footer">
<div class="tort">侵权举报请联系 QQ：<a
href="mqqwpa://im/chat?chat_type=wpa&uin=3074922707&version=1&src_type=web&web_src=oicqzone.com">3074922707</a>
<div class="copyright">© 2010-2022 | m.61taotao.com 淘文库. All Rights Reserved</div>
<div <a href="https://beian.miit.gov.cn/#/Integrated/index" style="color: #0a8ddf">闽ICP备2021004933号-2</a></div>
</div>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?e21f8c2ce5a8665d5d89ab97817f6393";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<!--footer end-->
<script type="text/javascript" src="/static/pc/js/global.min.js"></script>
<script type="text/javascript" src="/static/m/common/js/util.js"></script>
<script type="text/javascript" src="/static/m/common/js/common.js"></script>
<script type="text/javascript" src="/static/pc/js/main.js"></script>
<script type="text/javascript" src="/static/m/common/js/downloadFile.js"></script>
<script type="text/javascript">
(function (doc, win) {
var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) {
return;
}
if (clientWidth >= 750) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
if (!doc.addEventListener) {
return;
}
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
var detail_sidebar = {
init: function(){
var that = this;
that.top();
that.next();
},
top: function(){
var $top = $('#sidebar ul.list li.top');
$(window).scroll(function() {
clearInterval(d);
var d = setTimeout(function(){
if($(window).scrollTop() >= 100){
$top.fadeIn(300);
}else{
$top.fadeOut(300);
}
},300)
});
$top.find('a').on('click',function(){
$('html,body').animate({
scrollTop: '0px'
}, 1000);
});
},
next: function(){
$('#sidebar ul.list li.next a').on('click',function(){
operate_next.init();
});
}
};
detail_sidebar.init();
var previewMoreCon = {
encodeHasLeftView: true, //转码-是否还有剩余预览未显示
encodePage: 0, //转码-剩余预览页码
encodeLeftImgList: [], //转码-待加载图片列表
encodeSuffix: '', //转码-预览图片前缀
encodeMoreBtn: '#encodeMoreBtn', //转码-预览更多图片触发按钮
encodeMoreCon: '#encodeMoreCon', //转码-图片容器
noEncodeHeight: 800, //未转码-超出高度
noEncodeCon: '#noEncodeCon', //未转码-文本容器
noEncodeMroeBtn: '#noEncodeMoreBtn', //未转码-预览更多图片触发按钮
isEncode: true, //是否转码
init: function(moreCallback, noMoreCallback){
var _this = this;
var encodeMoreBtn = this.encodeMoreBtn.slice(1);
if (document.getElementById(encodeMoreBtn) && $(this.encodeMoreBtn).is(':visible')) {
this.isEncode = true;
this.getImgList();
$(this.encodeMoreBtn).click(function () {
_this.loadMoreImg($(this),moreCallback, noMoreCallback)
})
} else {
this.isEncode = false;
//未转码页面显示更多
if ($(this.noEncodeCon + ' .detail-con-more-txt').outerHeight(true) > this.noEncodeHeight) {
$(this.noEncodeMroeBtn).show();
} else {
$(this.noEncodeMroeBtn).hide();
}
$(this.noEncodeMroeBtn).click(function () {
//如果未登录则弹出登录框
// if (!LOGIN_STATUS || LOGIN_STATUS === '') {
// messageAlert.bsError('获取登录状态中，请稍后重试');
// return;
// } else if (!LOGIN_STATUS || LOGIN_STATUS !== '1') {
// $('#loginModal').modal('show');
// return;
// }
$(this).prop('disabled', true).addClass('text-primary').text('全部内容已经预览完成，下载至电脑可进行编辑');
$(_this.noEncodeCon).removeClass('detail-con-more')
});
}
},
getImgList: function() {
var _this = this;
var imgListItemSrcArr = $(this.encodeMoreCon + ' img:last').attr('src').split('/');
var imgListItemSrcNum = parseInt(imgListItemSrcArr[imgListItemSrcArr.length - 1].split('.')[0]);
var imgListItemSrcSuffix = '.' + imgListItemSrcArr[imgListItemSrcArr.length - 1].split('.')[1];
var leftImgNum = $(this.encodeMoreBtn + ' b').text();
leftImgNum = leftImgNum ? parseInt(leftImgNum) : 0;
imgListItemSrcArr.pop();
var imgListItemUrl = imgListItemSrcArr.join('/');
for (var i = 0; i < leftImgNum; i++) {
var imgUrl = imgListItemUrl + '/' + (imgListItemSrcNum + i + 1) + imgListItemSrcSuffix;
_this.encodeLeftImgList.push(imgUrl);
}
},
loadMoreImg: function(btn, moreCallback, noMroeCallback){
var _this = this;
//如果未登录则弹出登录框
// if (!LOGIN_STATUS || LOGIN_STATUS === '') {
// messageAlert.bsError('获取登录状态中，请稍后重试');
// return;
// } else if (!LOGIN_STATUS || LOGIN_STATUS !== '1') {
// $('#loginModal').modal('show');
// return;
// }
//如果没有剩余预览未显示
if (!this.encodeHasLeftView) {
return;
}
this.encodePage++;
var minNum = (this.encodePage - 1) * 5 - 1;
var maxNum = this.encodePage * 5;
$(this.encodeLeftImgList).each(function (index, item) {
if (index > minNum && index < maxNum) {
var img = document.createElement('img');
img.src = item;
$(_this.encodeMoreCon).append(img);
$(_this.encodeMoreCon).append($(_this.encodeMoreCon + ' .bg-light:first').clone())
} else if (index >= maxNum) {
return false;
}
});
if (this.encodeLeftImgList.length <= maxNum) {
btn.html('<span class="text-primary">预览已结束，查看全部内容需要购买此文档</span>');
btn.prop('disabled', true);
this.encodeHasLeftView = false;
if (noMroeCallback) {
noMroeCallback()
}
} else {
btn.html('还剩 <b class="text-primary">' + (this.encodeLeftImgList.length - maxNum) + '</b> 页未读，<span class="text-primary">点击继续阅读</span><i class="iconfont text-primary"></i>');
if (moreCallback) {
moreCallback()
}
}
}
};
previewMoreCon.init();
$('.show-more-content').click(function () {
$('.describe .content').removeClass('more-content');
$(this).hide();
});
if ($('#contentContainer').outerHeight(true) > 145) {
$('.show-more-content').show();
}
</script>
</body>
</html>
