HTML语言剖析之HTML标记一览

上传人：2*** IP属地：湖北上传时间：2022-12-29 格式：DOC 页数：30 大小：105.50KB 积分：30 举报 版权申诉

已阅读5页，还剩25页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、HTML语言剖析之Html简介

全写：HyperTextMark-upLanguage

译名：超文件注标式语言（译名之一）

简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标记（tag）使文件达到预期的显示效果。

HTML是在SGML定义下的一个描述性语言，或可说HTML是SGML的一个应用程式，HTML不是程式语言，如C++和Java之类，它只是标示语言，基本上你只要明白了各种标记的用法便算学懂了HTML，HTML的格式非常简单，只是由文字及标记组合而成，于编辑方面，任何文字编辑器都可以，只要能将文件另存成ASCII纯文字格式即可，当然以专业的网页编辑软件为佳。

■阅读须知：

这一篇【HTML剖析】偏重于标记的介绍，考虑到易懂及每节的篇幅问题，我并不按W3C的HTML分类，这可令你更易选择有兴趣的标记，其中只有【文件标记】是必读的，其余可任意选择。这一篇不会提及任何网页编辑软件，只要掌握了HTML，任何网页编辑工具都可以变成一把利器。

■标记写法：

任何标记皆由"<"及">"所围住，如<P>

标记名与小于号之间不能留有空白字符。

某些标记要加上参数，某些则不必。如<fontsize="+2">Hello</font>

参数只可加于起始标记中。

在起始标记之标记名前加上符号"/"便是其终结标记，如</font>

标记字母大小写皆可。

■围堵标记与空标记：

标记按型态分为围堵标记与空标记

围堵标记

顾名思义，它以起始标记及终结标记将文字围住，令其达到预期显示效果。

例如HTMLSource：<b>CreationofWebpage</b>ismyfavourite.

显示成：CreationofWebpageismyfavourite.

其中<b></b>便称为围堵标记。

它以起始标记<b>及终结标记</b>标示文字Creationofwebpage，令它显示成粗体，两者失其一都会发生错误显示。

空标记

是指标记单独出现，只有起始标记没有终结标记。

例如HTMLSource：

IloveCreationofWebpage.<br>It'sawonderfulplace.

显示成：

IloveCreationofWebpage.

It'sawonderfulplace.

其中换行标记<br>便属空标记。

它的作用便是将标记后所有东西显示于下一行，可见终结标记于它是没意义的，但有些人会为空标记加上终结标记，这是为方便记认而己，对HTML没有影响。2.标记类型译名或意义作用备注

文件标记

<HTML>●文件声明让浏览器知道这是HTML文件

<HEAD>●开头提供文件整体资讯

<TITLE>●标题定义文件标题，将显示于浏览顶端

<BODY>●本文设计文件格式及内文所在

排版标记

○说明标记为文件加上说明，但不被显示

<P>○段落标记为字、画、表格等之间留一空白行

<BR>○换行标记令字、画、表格等显示于下一行

<HR>○水平线插入一条水平线

<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>●无序清单清单项目将以圆点排列

<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

<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剖析】之标记分类请看【标记一览】。

亦请先明白围堵标记与空标记的分别请看【HTML概念】。

■HTML基本架构：

以下HTMLSourceCode便是一份HTML文件的基本架构：

<HTML>

<HEAD>

<TITLE>网页的标题</TITLE>

</HEAD>

<BODY>

网页的内容，很多标记都作用于此

</BODY>

</HTML>

特点解说：

整份文件处于标记<HTML>与</HTML>之间。

<HTML>用以声明这是HTML文件，让浏览器认出并正确处理此HTML文件。

文件分两部分，由<HEAD>至</HEAD>称为开头，<BODY>至</BODY>称本文。

基本上两者各有适用的标记，如<TITLE>只可出现于开头部分。

开头部分用以存载重要资讯，而只有本文部分会被显示。

所以大部分标记会运用于本文部分。

<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』

topmargin=2

设定整份文件显示画面的上方边沿空间。『只适用于IE』

bgproperties="fixed"

固定背景墙纸，当卷动文字时墙纸不会跟著卷动。『只适用于IE』

标记及参数之字母大小都可以。4、HTML语言剖析之排版标记

；<P>；<BR>；<HR>；<CENTER>；<PRE>；<DIV>；<NOBR>；<WBR>；

■：▲Top

像很多电脑语言一样，HTML文件亦提供注解功能。浏览器会忽略此标记中的文字（可以是很多行）而不作显示，一般使用目的：

为文中不同部份加上说明，方便日后修改。

这对较复杂或非私人网页尤其重要，它不单是提醒自已，亦提醒你的同事这部分做什么、那部分做什么。

例子：

假如你不希望别人使用或复制你的网页，可加上警告字眼。

例子：

■<P>：▲Top

<P>称为段落标记。作用：为字、画、表格等之间留一空白行。

本来<P>是一围堵标记，标于一段落的头尾，但从HTML2.0开始己不需要</P>作结尾。

<P>的常用参数：如：<palign="center">

align="center"

可选值：right,left,center。

内定值：align="left"

例子：原始码Hereisthetextformyparagraph.Itdoes'tmatterhowlongitis,

howmanyspacearebetweenthewordsorwhenIdecidetohitthereturnkey.

ItwillcreateanewparagraphonlywhenIbeginthetagwithanotherone.

<P>Here'sthenextparagraph.

显示结果Hereisthetextformyparagraph.Itdoes'tmatterhowlongitis,howmanyspacearebetweenthewordsorwhenIdecidetohitthereturnkey.ItwillcreateanewparagraphonlywhenIbeginthetagwithanotherone.

Here'sthenextparagraph.

■<BR>：▲Top

<BR>称为换行标记。作用：令字、画、表格等显示于下一行。

由于浏览器会自动忽略原始码中空白和换行的部分，这令到<BR>成为最常用的标记之一。因为无论你在原始码中编好了多漂亮的文章，若不适当地加上换行标记或段落标记，浏览器只会将它显示成一大段。

错误示范：（邮局可不会接受一行过的地址）原始码566EBostonPostRD

MamaroneckNY10543-9982

UnitedStatesofAmerica

结果566EBostonPostRDMamaroneckNY10543-9982UnitedStatesofAmerica

正确例子：原始码566EBostonPostRD

<BR>MamaroneckNY10543-9982

<BR>UnitedStatesofAmerica

结果566EBostonPostRD

MamaroneckNY10543-9982

UnitedStatesofAmerica

■<HR>：▲Top

<HR>称为水平线。作用：插入一条水平线。

<HR>之参数修改：

以：<HRalign="LEFT"size="2"width="70%"color="#0000FF"noshade>为例。

align="LEFT"

设定线条置放位置，可选择：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"参数。

例子：原始码<CENTER>Chris'sFirstHomepage</CENTER>

<CENTER>Myprofile</CENTER>

结果Chris'sFirstHomepage

What'snew

Myprofile

■<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">为例：

align="center"

可选值：center;left;right。决定字、画、表格等居中、靠左或靠右。

<DIValign="center">的作用和居中标记<CENTER>一样，前者是由HTML3.0开始的标准，后者是通用己久的标示法。

例子：原始码<DIValign="center">Chris'sFirstHomepage

<br>What'snew

<br>Myprofile</DIV>

结果Chris'sFirstHomepage

What'snew

Myprofile

■<NOBR>：▲Top

<NOBR>称为不折行标记。作用：令某些文字不因太长而绕行，一显示于同一行或下一行。它对住址、数学算式、一行数字、程式码等尤为有用。

例子：（其中Chris'sCreationofWebpage将不被分开而显示于同一行。）码Ifyouwanttoknowhowtocreateyouownhomepagequickly,don'tmiss<NOBR>Chris'sCreationofWebpage</NOBR>whichwillhelpyoualot.

结果Ifyouwanttoknowhowtocreateyouownhomepagequickly,don'tmissChris'sCreationofWebpagewhichwillhelpyoualot.

■<WBR>：▲Top

<WBR>称为建议折行标记。作用：预设折行部位。

它没有侵犯到<BR>的责任，只是作建议而已，若观者的系统解像度够高的话，那么它是不会折行的。

例子：（若不加<WBR>标记，整个网址会显示于下一行。）原始码Pleasevisitmyotherhomepagewhichlocateat/SiliconValley/<WBR>Sector/8234/index.htmlTherearemanysoftwaresfordownload.Ithinkyouwillreallylovethatplace.

结果Pleasevisitmyotherhomepagewhichlocateat/SiliconValley/Sector/8234/index.htmlTherearemanysoftwaresfordownload.Ithinkyouwillreallylovethatplace.5、HTML语言剖析之字体标记

■实体标记与逻辑标记：▲Top

这一节【字体标记】你必须先明白实体标记与逻辑标记的分别，否则你会迷惑于为何不同的标记却有相同的效果。两者分别有以下两处：

实体标记有固定的显示效果，逻辑标记则依不同浏览器而不同。

例如逻辑标记的<EM>由于浏览器的不同它所标示的文字不一定出现斜体效果，它可能是加底线、粗体或反白等，所以这一节是以它们在IE和NC中的效果作介绍。

多个实体标记亦可有效标示同一字句，逻辑标记则通常于旧浏览器不能有效显示多重的标示。

例如两个逻辑标记<EM>及<STRONG>同时标示一字句于旧浏览器常失去作用。

实体标记有：

逻辑标记有：

若要求真确的效果当然以实体标记为佳。

■<STRONG><B>：▲Top

两者皆能产生字体加粗的效果，但必须注意的是当文件被设为gb2312Encoding时，两者所标示的中文字不会于NetscapeNetvigator显示粗体效果。

例子：（第一行是没有任何字体标记的，作对照之用）HTMLSourceCode（原始码）浏览器显示结果

CreationofWebpage

<br><STRONG>CreationofWebpage</STRONG>

<br><B>CreationofWebpage</B>

CreationofWebpage

■<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>

CreationofWebpage

■<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>

<br><SMALL>CreationofWebpage</SMALL>

CreationofWebpage

12345767899

■<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>

显示结果HeaderLevel1

HeaderLevel2

HeaderLevel3

HeaderLevel4

HeaderLevel5

HeaderLevel6

■<FONT><BASEFONT>：▲Top

这一节只有这两个标记具参数设定，且两者的参数设定是一样的，都是负责设定文字的大小、字形及颜色，但各有用处，且看以下比较：

<BASEFONT>可以用于文件的开头部分，即<HEAD>与</HEAD>之间的位置，将影响全文字句，是一个空标记，用以改变字体显示的内定值。

<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>

显示结果IloveCreationofWebpage

IloveCreationofWebpage

IloveCreationofWebpage6、HTML语言剖析之清单标记

<UL>

■<OL><LI>:

<OL>称为顺序清单标记。<LI>则用以标示清单项目。

所谓顺序清单就是在每一项前面加上1,2,3...等数目，又称编号清单。

<OL>的参数设定（常用）：

例如：<oltype="i"start="4"></ol>

type="i"

设定数目款式，其值有五种，请参考右表，内定为type="1"。

start="4"

设定开始数目，不论设定了哪一数目款式，其值只能是1,2,3..等整数，内定为start="1"。

TypeNumberingstyle

1arabicnumbers1,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:

MichelleWei

MichaelWan

GloriaLam

■<UL>：

<UL>称为无序清单标记。

所谓无序清单就是在每一项前面加上、、等符号，故又称符号清单。

<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:

PenpalsGarden

ICQGarden

SoftwareCity

CreationofWebpage

■<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:

PenpalsGarden

ICQGarden

SoftwareCity

CreationofWebpage

■<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>

显示结果HowtouseDefinitionList

First,youshouldnotplaceparagraphtagrightafterorbeforealiststructureorbetweentheitemsofalist.Incerntaincontexts,useofextraparagraphtagsshouldalwaysbeavoided,whenyourealizethisconcept,itisquiteasytowriteaHTML.

Otherthingstoknow

WeusuallyputonlyONEDefinitiontagfollowingtheDefinitionTermtag,morethanoneDDtagisnotrecommanded.Besides,unlikeDefinitionListisanonemptytag,bothDefinitionTermandDefinitionDescriptionareemptytags.7、HTML语言剖析之表格标记

表格标记

<TH>

■<TABLE><TR><TD>：▲Top

这三个标记是定义表格的最重要的标记，可以说只学这三个己足够。

<TABLE>是一个容器标记，意思是说它用以声明这是表格而且其他表格标记只能在他的范围内才适用，属容器标记的还有其他。

<TR>用以标示表格列（row）

<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"

表格栏位数目，只是让浏览器在下载表格是先画出整个表格而己。

<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"

该一储存格内字画等的摆放贴位置（垂直），可选值为：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>

显示结果

第一列第一栏第一列第二栏

第二列第一栏第二列第二栏

例子四：原始码<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="#C0C0C8。1、HTML语言剖析之表单标记-1

INPUT的种类：Text,Radio,Checkbox,Password,Submit/Reset,Image,File,Hidden,Button。

■引子

表单的用处很多，于网上无处不见，当然是配合CGI使用为佳，所以馈下有意使用或学习CGI的话，表单设计见必需的，这一节介绍的标记不多，但其参数变化很多。一份表单的基本架构是：在<FORM>标记的包围下加上一种或以上的表单输入方式及一个或以上的按键。

■<FORM><INPUT>：

<FORM>称为表单标记，用以宣告此为表单模式，属于一个容器标记，表示其它表单标记需要在它的包围中才有效，<INPUT>便是其中的一个，用以设定各种输入资料的方法。它是一个空标记。

<FORM>的参数设定（常用）：

例如：<formaction="/cgi-local/example.cgi"method="POST">

action="/cgi-local/example.cgi"

表单通常是与CGI配合使用的，参数action便是用以指明该CGI程式的位置，这样此表单所填的资料才能正确传给CGI作处理。若馈下没有CGI以进行测试，可设定此参数为ACTION="mailto:your@"那样该表单所填的资料将会寄至此电邮地址（红色部分）。

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">

type="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="/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="/cgi-local/example.cgi"method="POST">

请选性别：

<inputtype="Radio"name="gender"value="Female">女性

<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="/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">

Password的其他参数和Text是完全相同的，请参考Text的介绍。

两者作用不同，Password所输入的字元全以*号表示。

例子：原始码<formaction="/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="/cgi-local/example.cgi"method="POST">

<inputtype="Submit"><inputtype="Reset">

<br><inputtype="Submit"value="

确定

"><inputtype="Reset"value="清除">

</form>

显示结果8。2、HTML语言剖析之表单标记-2

输入方式六：Image（图片按键）

这通常用以取代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="/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="/cgi-local/example.cgi"method="POST">

<type="File"name="upload"size="30"maxlength="100"accept="text/html">

</form>

显示结果

输入方式八：Hidden

例如：<inputtype="Hidden"name="ID"value="6618">

type="Hidden"

输入方式为隐藏或内定。它不会显示任何输入介面，而是一个内定值随表单一起传给CGI，列如由CGI产生的会员号码，或传入可更改的参数以调整CGI而避免修改CGI程式码。

name="ID"

这文件传输的名称，用以识别之用。

value="6618"

内定值，会以如ID=6618形式传给CGI。

例子：（"Hidden"是不被显示的，所以这处多放了一个"Su

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

HTML语言剖析之HTML标记一览

文档简介

温馨提示

最新文档

评论

HTML语言剖析之HTML标记一览

文档简介

温馨提示

最新文档

评论

相关文档