html语言剖析目录一、html简介二、html标记一览三、文件标记四、清单标记五、排版标记六、字体标记七、清单标记八、表格标记九、表单标记十、图形标记十一、链接标记十二、排版标记十三、多媒体标记十四、其他标记十五、特殊字符十六、调色原理html语言剖析html简介全写:hypertextmark-uplanguage译名:超文件注标式语言(译名之一)简释:一种为普通文件中某些字句加上标示的语言,其目的在于运用标记(tag)使文件达到预期的显示效果。html是在sgml定义下的一个描述性语言,或可说html是sgml的一个应用程式,html不是程式语言,如c++和java之类,它只是标示语言,基本上你只要明白了各种标记的用法便算学懂了html,html的格式非常简单,只是由文字及标记组合而成,于编辑方面,任何文字编辑器都可以,只要能将文件另存成ascii纯文字格式即可,当然以专业的网页编辑软件为佳。■阅读须知:这一篇【html剖析】偏重于标记的介绍,考虑到易懂及每节的篇幅问题,我并不按w3c的html分类,这可令你更易选择有兴趣的标记,其中只有【文件标记】是必读的,其余可任意选择。这一篇不会提及任何网页编辑软件,只要掌握了html,任何网页编辑工具都可以变成一把利器。■标记写法:任何标记皆由及所围住,如p标记名与小于号之间不能留有空白字符。某些标记要加上参数,某些则不必。如fontsize=+2hello/font参数只可加于起始标记中。在起始标记之标记名前加上符号/便是其终结标记,如/font标记字母大小写皆可。■围堵标记与空标记:标记按型态分为围堵标记与空标记1.围堵标记顾名思义,它以起始标记及终结标记将文字围住,令其达到预期显示效果。例如htmlsource:bcreationofwebpage/bismyfavourite.显示成:creationofwebpageismyfavourite.其中b/b便称为围堵标记。它以起始标记b及终结标记/b标示文字creationofwebpage,令它显示成粗体,两者失其一都会发生错误显示。2.空标记是指标记单独出现,只有起始标记没有终结标记。例如htmlsource:ilovecreationofwebpage.brit'sawonderfulplace.显示成:ilovecreationofwebpage.it'sawonderfulplace.其中换行标记br便属空标记。它的作用便是将标记后所有东西显示于下一行,可见终结标记于它是没意义的,但有些人会为空标记加上终结标记,这是为方便记认而己,对html没有影响。html语言剖析▲tophtml标记一览标记类型译名或意义作用备注文件标记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中新增的。html语言剖析▲top文件标记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』标记及参数之字母大小都可以。其他如onload等事件将于【javascript剖析】介绍。html语言剖析▲top排版标记!--注解--;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,howmanyspacearebetweenthewordsorwhenidecidetohitthereturnkey.itwillcreateanewparagraphonlywhenibeginthetagwithanotherone.here's