最新整理HTML语言学习教程2Word文件下载.docx
《最新整理HTML语言学习教程2Word文件下载.docx》由会员分享，可在线阅读，更多相关《最新整理HTML语言学习教程2Word文件下载.docx（39页珍藏版）》请在冰豆网上搜索。
P>
标记名与小于号之间不能留有空白字符。
某些标记 要加上参数，某些则不必。
如<
fontsize="
+2"
Hello<
/font>
参数只可加于起始标记中。
在起始标记之标记名前加上符号"
/"
便是其终结标记，如<
标记字母大小写皆可。
■围堵标记与空标记：
标记按型态分为围堵标记与空标记
围堵标记
顾名思义，它以起始标记及终结标记将文字围住，令其达到预期显示效果。
例如HTMLSource：
<
b>
CreationofWebpage<
/b>
ismyfavourite.
显示成：
CreationofWebpageismyfavourite.
其中<
便称为围堵标记。
它以起始标记<
及终结标记<
标示文字Creationofwebpage，令它显示成粗体，两者失其一都会发生错误显示。
空标记
是指标记单独出现，只有起始标记没有终结标记。
例如HTMLSource：
IloveCreationofWebpage.<
br>
It'
sawonderfulplace.
IloveCreationofWebpage.
其中换行标记<
便属空标记。
它的作用便是将标记后所有东西显示于下一行，可见终结标记于它是没意义的，但有些人会为空标记加上终结标记，这是为方便记认而己，对HTML没有影响。
二、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中新增的。
三、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="
固定背景墙纸，当卷动文字时墙纸不会跟著卷动。
标记及参数之字母大小都可以。
四、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>
whichwillhelpyoua
升级会员 