html网页制作课件

HTML基本架构：以下HTMLSourceCode便是一份HTML文件的基本架构（例子P7）HTMLHEADTITLE网页的标题/TITLE/HEADBODY网页的内容，很多标记都作用于此/BODY/HTML特点解说1.html/htmlhtml标志用于Html文档的最前边，用来标识Html文档的开始。而/html标志恰恰相反，它放在Html文档的最后边，用来标识Html文档的结束，两个标志必须一块使用。特点解说2.head/headhead和/head构成Html文档的开头部分，在此标志对之间可以使用title/title、script/script等等标志对，这些标志对都是描述Html文档相关信息的标志对，head/head标志对之间的内容是不会在浏览器的框内显示出来的。两个标志必须一块使用。特点解说body/bodybody/body是Html文档的主体部分，在此标志对之间可包含p、/p、h1、/h1、br、hr等等众多的标志，它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标志必须一块使用。属性用途示例bodybgcolor=#rrggbb设置背景颜色。bodybgcolor=red红色背景bodytext=#rrggbb设置文本颜色。bodytext=#0000ff蓝色文本bodylink=#rrggbb设置链接颜色。bodylink=blue链接为蓝色bodyvlink=#rrggbb设置已使用的链接的颜色。bodyvlink=#ff0000bodyalink=#rrggbb设置正在被击中的链接的颜色。bodyalink=yellow说明:以上各个属性可以结合使用，如bodybgcolor=redtext=#0000ff。引号内的rrggbb是用六个十六进制数表示的RGB(即红、绿、蓝三色的组合)颜色，如#ff0000对应的是红色。此外，还可以使用Html语言所给定的常量名来表示颜色：Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yellow、Lime、Agua、Fuchsia、Silver、Red、Blue和Teal，如bodytext=Blue表示body/body标志对中的文本使用蓝色显示在浏览器的框内。特点解说4.title/title要将您的网页的主题显示到浏览器的顶部其实很简单，只要在title/title标志对之间加入您要显示的文本即可。注意：title/title标志对只能放在head/head标志对之间。单标签某些标记称为”单标签”，因为它只需单独使用就能完整地表达意思，这类标记的语法是：标签名称最常用的单标签是BR,它表示换行.双标签另一类标记称为“双标签”，它由“始标签”和“尾标签”两部分构成，必须成对使用，其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标签告诉Web浏览器在这里结束该功能。始标签前加一个斜杠（/）即成为尾标记。这类标记的语法是：标签内容/标签BODY之参数设定：上述标记中只有BODY具参数设定。例子：BODYtext=#000000link=#0000FFalink=#FF0000vlink=#0000FFbackground=bg1.gifbgcolor=#FFFFFFleftmargin=2topmargin=2bgproperties=fixedBODY之参数设定：text=#000000用以设定文字颜色。#000000代表黑色，亦可以采用颜色的名称，即text=black。各种颜色的值及名称可参考P10一节。link=“#0000FF”设定一般文字链接颜色。alink=“#FF0000”设定刚按下时文字链接颜色。vlink=“#0000FF”设定链接后的颜色。（被按过）。BODY之参数设定：background=“bg1.gif“(例P10)设定背景墙纸。GIF或JPEG皆可，可以是绝对途径或相对途径。bgcolor=#FFFFFF设定背景颜色。当己设定背景墙纸时会失去作用，除非墙纸有透明部分。leftmargin=2设定整份文件显示画面的左方边沿空间，单位为像素。『只适用于IE』BODY之参数设定：topmargin=2设定整份文件显示画面的上方边沿空间。『只适用于IE』bgproperties=fixed固定背景墙纸，当卷动文字时墙纸不会跟著卷动。『只适用于IE』标记及参数之字母大小都可以。其他如onload等事件将于【JavaScript剖析】介绍。段落标记符PP称为段落标记。作用：为字、画、表格等之间留一空白行。本来P是一围堵标记，标于一段落的头尾，但从HTML2.0开始己不需要/P作结尾。P的常用参数：如：palign=centeralign=center可选值：right,left,center。内定值：align=left段落标记符P原始码Hereisthetextformyparagraph.Itdoes'tmatterhowlongitis,howmanyspacearebetweenthewordsorwhenIdecidetohitthereturnkey.ItwillcreateanewparagraphonlywhenIbeginthetagwithanotherone.PHere'sthenextparagraph.显示结果Hereisthetextformyparagraph.Itdoes'tmatterhowlongitis,howmanyspacearebetweenthewordsorwhenIdecidetohitthereturnkey.ItwillcreateanewparagraphonlywhenIbeginthetagwithanotherone.Here'sthenextparagraph.换行标记符BRBR称为换行标记。作用：令字、画、表格等显示于下一行。由于浏览器会自动忽略原始码中空白和换行的部分，这令到BR成为最常用的标记之一。因为无论你在原始码中编好了多漂亮的文章，若不适当地加上换行标记或段落标记，浏览器只会将它显示成一大段。换行标记符BR原始码566EBostonPostRDMamaroneckNY10543-9982UnitedStatesofAmerica显示结果566EBostonPostRDMamaroneckNY10543-9982UnitedStatesofAmerica错误示例：水平线标志符HRHR称为水平线。作用：插入一条水平线。HR之参数修改：例：HRalign=LEFTsize=2width=70%color=#0000FFnoshade。align=LEFT设定线条置放位置，可选择：left；right；center三种设定值。size=2设定线条厚度，以像素作单位，内定为2。width=70%设定线条长度，可以是绝对值（以像素作单位）或相对值，内定为100%。FONTFONT是应用于文件的内文部分，即BODY与/BODY之间的位置，只影响所标示的字句，是一个围堵标记。IMG的一般参数设定：例如imgsrc=logo.gifwidth=100height=100hspace=5vspace=5border=2align=topalt=LogoofPenPalsGardenlowsrc=pre_logo.gifsrc=“logo.gif”（例p43）图片来源，接受.gif,.jpg及.png格式，前两者通行己久，后者由96年开始发展，于未来取代前两者。若图片文件与该html文件同处一目录则只写上文件案名称，否则必须加上正确的途径，相对及绝对皆可。width=100height=100设定图片大小，此宽度、及高度一般采用pixels作单位。通常只设为图片的真实大小以免失真，若要改变图片大小最好事先使用图像编辑工具。超级链接A称连结标记，由A与/A所围的文字、图片等等可以成为一个连结。A的一般参数设定：例如ahref=index.htmlname=hellotarget=_tophref=index.html这参数不能与另一参数name同时使用，使用这参数才能造成可按的连结。超级链接target=_top设定连结被按後之结果所要显示的视窗。可选值为：_blank,_parent,_self,_top,框窗名称。target=框窗名称这只运用於框架中，若被设定则连结结果将显示於该“框窗名称”之框窗中，框窗名称是事先由框架标记所命名。target=_blank或target=new将连结的画面内容，开在新的浏览视窗中。target=_parent将连结的画面内容，当成文件的上一个画面。target=_self将连结的画面内容，显示在目前的视窗中。(内定值)target=_top将框架中连结的画面内容，显示在没有框架的视窗中。（即除去了框架)容器标记TABLE这三个标记是定义表格的最重要的标记，可以说只学这三个己足够。TABLE是一个容器标记，意思是说它用以声明这是表格而且其他表格标记只能在他的范围内才适用，属容器标记的还有其他。TR用以标示表格列（row）TD用以标示储存格（cell）TABLE的参数设定（常用）：例如：tablewidth=400border=1cellspacing=2cellpadding=2align=CENTERvalign=TOPbackground=myweb.gifbgcolor=#0000FFbordercolor=#FF00FFbordercolorlight=#00FF00bordercolordark=#00FFFFcols=2容器标记TABLEwidth=400表格宽度，接受绝对值（如80）及相对值（如80%）。border=1表格边框厚度，不同浏览器有不同的内定值，故请指明。cellspacing=“2”控制单元格之间的距离，那是加厚到5的格线。cellpadding=2文字与格线的距离，那是加至10的padding。align=“CENTER”表格的摆放位置（水平），可选值为：left,right,center，那表格是放于中间的，为怕一些浏览器不支持，故特加上居中标记CENTER，只是多层保证而己，当然只用CENTER亦可。容器标记TABLE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标示表格列TR的参数设定（常用）：例如：tralign=RIGHTvalign=MIDDLEbgcolor=#0000FFbordercolor=#FF00FFbordercolorlight=#808080bordercolordark=#FF0000align=