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，任何网页编辑工具都可以变成一把利器。■标记写法：任何标记皆由及所围住，如P标记名与小于号之间不能留有空白字符。某些标记要加上参数，某些则不必。如fontsize=+2Hello/font参数只可加于起始标记中。在起始标记之标记名前加上符号/便是其终结标记，如/font标记字母大小写皆可。■围堵标记与空标记：标记按型态分为围堵标记与空标记围堵标记顾名思义，它以起始标记及终结标记将文字围住，令其达到预期显示效果。例如HTMLSource：bCreationofWebpage/bismyfavourite.显示成：CreationofWebpageismyfavourite.其中b/b便称为围堵标记。它以起始标记b及终结标记/b标示文字Creationofwebpage，令它显示成粗体，两者失其一都会发生错误显示。空标记是指标记单独出现，只有起始标记没有终结标记。例如HTMLSource：IloveCreationofWebpage.brIt'sawonderfulplace.显示成：IloveCreationofWebpage.It'sawonderfulplace.其中换行标记br便属空标记。它的作用便是将标记后所有东西显示于下一行，可见终结标记于它是没意义的，但有些人会为空标记加上终结标记，这是为方便记认而己，对HTML没有影响。2、HTML语言剖析之HTML标记一览标记类型译名或意义作用备注文件标记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●程式码字体稍为加宽如TTKBD●键盘字字体稍为加宽，单一空白SAMP●范例字体稍为加宽如TTVAR●变数斜体效果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○页内框架于网页中间插入框架IENOFRAMES●不支援框架设定当浏览器不支援框架时的提示影像地图MAP●影像地图名称设定影像地图名称AREA○连结区域设定各连结区域多媒体BGSOUND○背景声音于背景播放声音或音乐IEEMBED○多媒体加入声音、音乐或影像其他标记MARQUEE●走动文字令文字左右走动IEBLINK●闪烁文字闪烁文字NCISINDEX○页内寻找器可输入关键字寻找于该一页反对META○开头定义让浏览器知道这是HTML文件LINK○关系定义定义该文件与其他URL的关系StyleSheetSTYLE●样式表控制网页版面span●自订标记独立使用或与样式表同用注：●表示该标记属围堵标记，即需要关闭标记如/标记。○表示该标记属空标记，即不需要关闭标记。IE表示该标记只适用于InternetExplorer。NC表示该标记只适用于NetscapeCommunicator。反对表示该标记不为W3C所赞同，通常这标记是IE或NC自订，且己为众所支持，只是HTML标准中有其它同功能或更好的选择。弃用表示该标记己为W3C所弃用，是过时的标记，但HTML具向下兼容的特性，不用担心新浏览器不支援旧标记。新表示该标记是HTML4.0中新增的。3、HTML语言剖析之文件标记HTML；HEAD；TITLE；BODY欲明白本篇【HTML剖析】之标记分类请看【标记一览】。亦请先明白围堵标记与空标记的分别请看【HTML概念】。■HTML基本架构：以下HTMLSourceCode便是一份HTML文件的基本架构：HTMLHEADTITLE网页的标题/TITLE/HEADBODY网页的内容，很多标记都作用于此/BODY/HTML特点解说：整份文件处于标记HTML与/HTML之间。HTML用以声明这是HTML文件，让浏览器认出并正确处理此HTML文件。文件分两部分，由HEAD至/HEAD称为开头，BODY至/BODY称本文。基本上两者各有适用的标记，如TITLE只可出现于开头部分。开头部分用以存载重要资讯，而只有本文部分会被显示。所以大部分标记会运用于本文部分。TITLE所标示的是文件的标题。会出现于浏览器顶部及为别人Bookmark时的名称，所以每页有不同而明确的标题是需要的。上述标记中只有BODY具参数设定。■BODY之参数设定：例子：BODYtext=#000000link=#0000FFalink=#FF0000vlink=#0000FFbackground=bg1.gifbgcolor=#FFFFFFleftmargin=2topmargin=2bgproperties=fixedtext=#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文件亦提供注解功能。浏览器会忽略此标记中的文字（可以是很多行）而不作显示，一般使用目的：为文中不同部份加上说明，方便日后修改。这对较复杂或非私人网页尤其重要，它不单是提醒自已，亦提醒你的同事这部分做什么、那部分做什么。例子：!--由这处开始是产品订购表格--用作版权声明。假如你不希望别人使用或复制你的网页，可加上警告字眼。例子：!--本文版权为1998,CreationofWebpage所拥有，未经许，请勿抄摘--■P：▲TopP称为段落标记。作用：为字、画、表格等之间留一空白行。本来P是一围堵标记，标于一段落的头尾，但从HTML2.0开始己不需要/P作结尾。P的常用参数：如：palign=centeralign=center可选值：right,left,center。内定值：align=left例子：原始码Hereisthetextformyparagraph.Itdoes'tmatterhowlongitis,howmanyspacearebetweenthewordsorwhenIdecidetohitthereturnkey.ItwillcreateanewparagraphonlywhenIbeginthetagwithanotherone.PHere'sthenextparagraph.显示结果Hereisthetextformyparagraph.Itdoes'tmatterhowlongitis,howmanyspacearebetweenthewordsorwhenIdecidetohitthere