HTML语言学习教程HTML语言剖析Word格式.docx

HTML语言学习教程HTML语言剖析Word格式.docx

《HTML语言学习教程HTML语言剖析Word格式.docx》由会员分享，可在线阅读，更多相关《HTML语言学习教程HTML语言剖析Word格式.docx（38页珍藏版）》请在冰豆网上搜索。

在起始标记之标记名前加上符号"

/"

便是其终结标记，如<

标记字母大小写皆可。

■围堵标记与空标记：

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

围堵标记

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

例如HTMLSource：

<

b>

CreationofWebpage<

/b>

ismyfavourite.

显示成：

CreationofWebpageismyfavourite.

其中<

便称为围堵标记。

它以起始标记<

及终结标记<

标示文字Creationofwebpage，令它显示成粗体，两者失其一都会发生错误显示。

空标记

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

例如HTMLSource：

IloveCreationofWebpage.<

br>

It'

sawonderfulplace.

IloveCreationofWebpage.

其中换行标记<

便属空标记。

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

2、HTML语言剖析之HTML标记一览

标记类型译名或意义作用备注

文件标记

HTML>

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

HEAD>

●开头提供文件整体资讯 

TITLE>

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

BODY>

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

排版标记

!

--注解-->

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

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

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>

●程式码字体稍为加宽如<

KBD>

●键盘字字体稍为加宽，单一空白 

SAMP>

●范例字体稍为加宽如<

VAR>

●变数斜体效果 

CITE>

●传记引述斜体效果 

BLOCKQUOTE>

●引述文字区块缩排字体 

DFN>

●述语定义斜体效果 

ADDRESS>

●地址标记斜体效果 

SUB>

●下标字下标字 

SUP>

●上标字指数（平方、立方等） 

清单标记

OL>

●顺序清单清单项目将以数字、字母顺序排列 

UL>

●无序清单清单项目将以圆点排列 

LI>

○清单项目每一标记标示一项清单项目 

MENU>

●选单清单清单项目将以圆点排列，如<

反对

DIR>

●目录清单清单项目将以圆点排列，如<

DL>

●定义清单清单分两层出现 

DT>

○定义条目标示该项定义的标题 

DD>

○定义内容标示定义内容 

表格标记

TABLE>

●表格标记设定该表格的各项参数 

CAPTION>

●表格标题做成一打通列以填入表格标题 

TR>

●表格列设定该表格的列 

TD>

●表格栏设定该表格的栏 

TH>

●表格标头相等于<

，但其内之字体会变粗 

表单标记

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文件的基本架构：

网页的标题<

/TITLE>

/HEAD>

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

/BODY>

/HTML>

特点解说：

整份文件处于标记<

与<

之间。

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

文件分两部分，由<

至<

称为开头，<

称本文。

基本上两者各有适用的标记，如<

只可出现于开头部分。

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

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

所标示的是文件的标题。

会出现于浏览器顶部及为别人Bookmark时的名称，所以每页有不同而明确的标题是需要的。

上述标记中只有<

具参数设定。

■<

之参数设定：

例子：

BODYtext="

#000000"

link="

#0000FF"

alink="

#FF0000"

vlink="

background="

bg1.gif"

bgcolor="

#FFFFFF"

leftmargin=2topmargin=2bgproperties="

fixed"

text="

用以设定文字颜色。

#000000代表黑色，亦可以采用颜色的名称，即text="

black"

。

各种颜色的值及名称可参考【调色原理】一节。

link="

设定一般文字连结颜色。

alink="

设定刚按下时文字连结颜色。

vlink="

设定连结后的颜色。

（被按过）。

background="

设定背景墙纸。

GIF或JPEG皆可，可以是绝对途径或相对途径。

bgcolor="

设定背景颜色。

当己设定背景墙纸时会失去作用，除非墙纸有透明部分。

leftmargin=2

设定整份文件显示画面的左方边沿空间，单位为像素。

『只适用于IE』

topmargin=2

设定整份文件显示画面的上方边沿空间。

bgproperties="

固定背景墙纸，当卷动文字时墙纸不会跟著卷动。

标记及参数之字母大小都可以。

4、HTML语言剖析之排版标记

■<

：

▲Top

像很多电脑语言一样，HTML文件亦提供注解功能。

浏览器会忽略此标记中的文字（可以是很多行）而不作显示，一般使用目的：

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

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

--由这处开始是产品订购表格-->

用作版权声明。

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

--本文版权为1998,CreationofWebpage所拥有，未经许，请勿抄摘-->

：

称为段落标记。

作用：

为字、画、表格等之间留一空白行。

本来<

是一围堵标记，标于一段落的头尾，但从HTML2.0开始己不需要<

/P>

作结尾。

的常用参数：

如：

palign="

center"

align="

可选值：

right,left,center。

内定值：

align="

left"

原始码Hereisthetextformyparagraph.Itdoes'

tmatterhowlongitis,

howmanyspacearebetweenthewordsorwhenIdecidetohitthereturnkey.

ItwillcreateanewparagraphonlywhenIbeginthetagwithanotherone.

Here'

sthenextparagraph. 

显示结果Hereisthetextformyparagraph.Itdoes'

tmatterhowlongitis,howmanyspacearebetweenthewordsorwhenIdecidetohitthereturnkey.ItwillcreateanewparagraphonlywhenIbeginthetagwithanotherone.

sthenextparagraph.

称为换行标记。

令字、画、表格等显示于下一行。

由于浏览器会自动忽略原始码中空白和换行的部分，这令到<

成为最常用的标记之一。

因为无论你在原始码中编好了多漂亮的文章，若不适当地加上换行标记或段落标记，浏览器只会将它显示成一大段。

错误示范：

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

MamaroneckNY10543-9982

UnitedStatesofAmerica 

结果566EBostonPostRDMamaroneckNY10543-9982UnitedStatesofAmerica 

正确例子：

原始码566EBostonPostRD

结果566EBostonPostRD

称为水平线。

插入一条水平线。

之参数修改：

以：

HRalign="

LEFT"

size="

2"

width="

70%"

color="

noshade>

为例。

设定线条置放位置，可选择：

left；

right；

center三种设定值。

size="

设定线条厚度，以像素作单位，内定为2。

width="

设定线条长度，可以是绝对值（以像素作单位）或相对值，内定为100%。

color="

设定线条颜色，内定为黑色。

#0000FF代表蓝色，亦可以采用颜色的名称，即text="

blue"

noshade

设定线条为平面显示，若删去则具阴影或立体，这是内定值。

原始码<

4"

70"

#008000"

显示结果

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

称为居中标记。

令字、画、表格等显示于中间。

这标记原先是Netscape所定义，后来其它浏览器都支持它，但你会发现很多标记已有align="

CENTER"

的参数，<

似乎多馀了，事实上它还是常用的标记之一，其简单易用，常用于文字上，对于己加有align="

参数的<

标记亦要不厌其烦地加上居中标记，因有狻多浏览器不支持<

标记中的align="

参数。

Chris'

sFirstHomepage<

/CENTER>

What'

snew<

Myprofile<

结果Chris'

sFirstHomepage

snew

Myprofile 

称为预设格式标记。

令文件按照原始码的排列方式显示。

这标记允许保留你于原始码中输入的空白及Return。

细看以下例子你便可体会到此标记的威力。

除了运用一大堆表格标记之外你只有采用这标记才能有此效果。

能以<

标记产生对　效果，或产生多于一行的空白才算上乘！

原始码 

pre>

CreationofWebpageLogAnalysisI

ComposerLearning 

459407480522547586673

HTMLAdvanced 

200268296358385453506<

/pre>

显示结果 

CreationofWebpageLogAnalysisI 

200268296358385453506

称为区隔标记。

设定字、画、表格等的摆放位置。

应用于StyleSheet（式样表）方面会更显威力，它最终目的是给设计者另一种组织能力，有Class;

Style;

title;

ID等属性，将会于【StyleSheet】一节才作详述，这处只介绍一个属性设定。

以<

DIValign="

为例：

center;

left;

right。

决定字、画、表格等居中、靠左或靠右。

的作用和居中标记<

一样，前者是由HTML3.0开始的标准，后者是通用己久的标示法。

/DIV>

Myprofile

称为不折行标记。

令某些文字不因太长而绕行，一　显示于同一行或下一行。

它对住址、数学算式、一行数字、程式码等尤为有用。

（其中Chris'

sCreationofWebpage将不被分开而显示于同一行。

）码Ifyouwanttoknowhowtocreateyouownhomepagequickly,don'

tmiss<

sCreationofWebpage<

/NOBR>

whichwillhelpyoualot. 

结果Ifyouwanttoknowhowtocreateyouownhomepagequickly,don'

tmissChris'

sCreationofWebpagewhichwillhelpyoualot. 

称为建议折行标记。

预设折行部位。

它没有侵犯到<

的责任，只是作建议而已，若观者的系统解像度够高的话，那么它是