HTML语言教程.ppt

1 1Html简介全写 HyperTextMark upLanguage译名 超文件注标式语言 译名之一 简释 一种为普通文件中某些字句加上标示的语言 其目的在于运用标记 tag 使文件达到预期的显示效果 HTML语言教程 标记写法 任何标记皆由 所围住 如标记名与小于号之间不能留有空白字符 某些标记要加上参数 某些则不必 如Hello参数只可加于起始标记中 在起始标记之标记名前加上符号 便是其终结标记 如标记字母大小写皆可 围堵标记与空标记 标记按型态分为围堵标记与空标记围堵标记顾名思义 它以起始标记及终结标记将文字围住 令其达到预期显示效果 例如HTMLSource CreationofWebpageismyfavourite 显示成 CreationofWebpageismyfavourite 其中便称为围堵标记 它以起始标记及终结标记标示文字Creationofwebpage 令它显示成粗体 两者失其一都会发生错误显示 2 空标记是指标记单独出现 只有起始标记没有终结标记 例如HTMLSource IloveCreationofWebpage It sawonderfulplace 显示成 IloveCreationofWebpage It sawonderfulplace 其中换行标记便属空标记 它的作用便是将标记后所有东西显示于下一行 可见终结标记于它是没意义的 但有些人会为空标记加上终结标记 这是为方便记认而己 对HTML没有影响 注 表示该标记属围堵标记 即需要关闭标记如 表示该标记属空标记 即不需要关闭标记 IE表示该标记只适用于InternetExplorer NC表示该标记只适用于NetscapeCommunicator 反对表示该标记不为W3C所赞同 通常这标记是IE或NC自订 且己为众所支持 只是HTML标准中有其它同功能或更好的选择 弃用表示该标记己为W3C所弃用 是过时的标记 但HTML具向下兼容的特性 不用担心新浏览器不支援旧标记 新表示该标记是HTML4 0中新增的 HTML标记一览 文件标记 特点解说 整份文件处于标记与之间 用以声明这是HTML文件 让浏览器认出并正确处理此HTML文件 文件分两部分 由至称为开头 至称本文 基本上两者各有适用的标记 如只可出现于开头部分 开头部分用以存载重要资讯 而只有本文部分会被显示 所以大部分标记会运用于本文部分 所标示的是文件的标题 会出现于浏览器顶部及为别人Bookmark时的名称 所以每页有不同而明确的标题是需要的 上述标记中只有具参数设定 例子 text 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 称为段落标记 作用 为字 画 表格等之间留一空白行 本来是一围堵标记 标于一段落的头尾 但从HTML2 0开始己不需要作结尾 的常用参数 如 align center 可选值 right left center 内定值 align left 例子 正确例子 错误示范 邮局可不会接受一行过的地址 称为水平线 作用 插入一条水平线 之参数修改 以 为例 align LEFT 设定线条置放位置 可选择 left right center三种设定值 size 2 设定线条厚度 以像素作单位 内定为2 width 70 设定线条长度 可以是绝对值 以像素作单位 或相对值 内定为100 color 0000FF 只适用于IE 设定线条颜色 内定为黑色 0000FF代表蓝色 亦可以采用颜色的名称 即text blue noshade设定线条为平面显示 若删去则具阴影或立体 这是内定值 例子 称为居中标记 作用 令字 画 表格等显示于中间 这标记原先是Netscape所定义 后来其它浏览器都支持它 但你会发现很多标记已有align CENTER 的参数 似乎多馀了 事实上它还是常用的标记之一 其简单易用 常用于文字上 对于己加有align CENTER 参数的标记亦要不厌其烦地加上居中标记 因有狻多浏览器不支持标记中的align CENTER 参数 例子 字体标记 实体标记与逻辑标记实体标记有固定的显示效果 逻辑标记则依不同浏览器而不同 例如逻辑标记的由于浏览器的不同它所标示的文字不一定出现斜体效果 它可能是加底线 粗体或反白等 所以这一节是以它们在IE和NC中的效果作介绍 多个实体标记亦可有效标示同一字句 逻辑标记则通常于旧浏览器不能有效显示多重的标示 例如两个逻辑标记及同时标示一字句于旧浏览器常失去作用 实体标记有 逻辑标记有 若要求真确的效果当然以实体标记为佳 这些是标题标记 由至变粗变大加宽的程度逐渐减小 每个标题标记所标示的字句将独占一行且上下留一空白行 例子 的参数设定 例子 CreationofWebpageface Arial 设定文字的字形 Arial是常用的一种 请不要使用Window内建字形以外的字形 于没有设定为Gb2312Encoding的中文网页 NetscapeNetvigator不会显示此标记所指明的任何中文字形 size 2 设定文字的大小 其值可以是绝对或相对 绝对的意思便是标记自己决定文字的大小 不受的影响 如size 5 表示其大小便是5 而html内定值为3 即size 3 和没有设定是一样的 相对的意思便是在内定值3的基础上增加或减少大小级数 如size 2 便等同绝对表示法的size 5 但若已设定则其实际大小便是n 2不再是3 2了 只有绝对表示法 color 008000 设定文字的颜色 008000表示绿色例子 清单标记 的参数设定 常用 例如 type square 只适用于非顺序清单 设定符号款式 其值有三种 如下 内定为type disc 符号是当type disc 时的列项符号 符号if width 10height 10border 0 是当type circle 时的列项符号 符号是当type square 时的列项符号 value 4 只适用于顺序清单 设定该一项的数目 其後各项将以此作为起始数目而递增 但前面各项则不受影响 其值只能是1 2 3 等整数 没有内定值 例子 type square 设定符号款式 其值有三种 如下 内定为type disc 符号是当type disc 时的列项符号 符号是当type circle 时的列项符号 符号是当type square 时的列项符号 注意 由于及都有type这个参数 两者尽可能选用其一 例子 表格标记 这三个标记是定义表格的最重要的标记 可以说只学这三个己足够 是一个容器标记 意思是说它用以声明这是表格而且其他表格标记只能在他的范围内才适用 属容器标记的还有其他 用以标示表格列 row 用以标示储存格 cell 的参数设定 常用 的参数设定 常用 例如 width 400 表格宽度 接受绝对值 如80 及相对值 如80 border 1 表格边框厚度 不同浏览器有不同的内定值 故请指明 cellspacing 2 表格格线厚度 cellpadding 2 文字与格线的距离 align CENTER 表格的摆放位置 水平 可选值为 left right center 那表格是放于中间的 为怕一些浏览器不支援 故特加上居中标记 只是多层保证而己 当然只用亦可 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 表格栏位数目 只是让浏览器在下载表格是先画出整个表格而己 例子一 例子二 例子三 的参数设定 常用 例如 align RIGHT 该一列内字画等的摆放贴位置 水平 可选值为 left center right valign MIDDLE 该一列内字画等的摆放贴位置 垂直 可选值为 top middle bottom bgcolor 0000FF 该一列底色 bordercolor FF00FF 该一列边框颜色 只适用于IE bordercolorlight 808080 该一列边框向光部分的颜色 只适用于IE bordercolordark FF0000 该一列边框背光部分的颜色 使用bordercolorlight或bordercolordark时bordercolor将会失效 只适用于IE 的参数设定 常用 例如 width 48 该一储存格宽度 接受绝对值 如80 及相对值 如80 height 400 该一储存格高度 colspan 5 该一储存格向右打通的栏数 rowspan 4 该一储存格向下打通的列数 align RIGHT 该一储存格内字画等的摆放贴位置 水平 可选值为 left center right valign BOTTOM 该一储存格内字画等的摆放贴位置 垂直 可选值为 top middle bottom bgcolor FF00FF 该一储存格底色 bordercolor 808080 该一储存格边框颜色 只适用于IE bordercolorlight FF0000 该一储存格边框向光部分的颜色 只适用于IE bordercolordark 00FF00 该一储存格边框背光部分的颜色 使用bordercolorlight或bordercolordark时bordercolor将会失效 只适用于IE background myweb gif 该一储存格纸 与bgcolor任用其一 例子四 例子五 例子六 与同样是标示一个储存格 唯一不同的是所标示的储存格中的文字是以粗体出现 通常用于表格第一列以标示栏目 它的用法是取代的位置便可以 其参数设定请参考 当然若为所标示的储存格中的文字加上粗体标记便等如的效果 例子七 的作用是为表格标示一个标题列 有如在表格上方加上一没格线的打通列 当然亦可置于下方 通常用以存放该表格的标题 的参数设定 常用 例如 align TOP 该表格标题列相对于表格的摆放贴位置 水平 可选值为 left center right top middle bottom 若align bottom 的话标题列便会出现对表格的下方 不管你的原始码中把放在中的头部或尾部 valign TOP 该表格标题列相对于表格的摆放位置 上下 可选值为 top bottom 和align TOP 或align BOTTOM 是一样的 虽然功能重复了 但如果你要标题列置于下方及向右或向左贴 那末两个参数便可一用了 当只一个参数时 请首选align 因为valign是由HTML3 0才开始的参数 例子八 表单标记 称为表单标记 用以宣告此为表单模式 属于一个容器标记 表示其它表单标记需要在它的包围中才有效 便是其中的一个 用以设定各种输入资料的方法 它是一个空标记 的参数设定 常用 例如 action 表单通常是与CGI配合使用的 参数action便是用以指明该CGI程式的位置 这样此表单所填的资料才能正确传给CGI作处理 如 ACTION mailto your 那样该表单所填的资料将会寄至此电邮地址 红色部分 method POST 传送资料给CGI的的方式 可选值为POST GET 你只需记住POST容许传送大量资料 但GET则只接受低于1K的资料 的参数设定 常用 由于其第一个参数type己有很多的选择 而不同的选择表示出不同的输入方式 且其它参数亦因此而异 故以下将独立介绍不同输入方式及其它参数设定 type Text 可选值为Text Radio Checkbox Password Submit Reset Image File Hidden Button 输入方式一 Text 单行文字盒 例如type Text 输入方式为Text 能产生一单行文字盒 上限为255字元 name age 此一单行文字盒名称 这是最重要的一个 方便CGI辨认由表单传来的资料 名称可为没空白没特别符号的英文或数字 有大小写的分别 可以写成Your Age 若有访客于此表单此一文字盒填入40的话 那末传给CGI的字串便是Your Age 40 value 20 此一单行文字盒内定值 若不填写则文字盒是空白的 等待访客亲自键入 若value 20 的话 20便会出现在文字盒中 当然访客可以修改之 align MIDDLE 可选值 top middle bottom left right texttop baseline absmiddle 没太大有处 size 2 此一单行文字盒显示的长度 若馈下是采用Big5编码的中文网页便要小心 同size的文字盒NC会显示得比IE狻长 maxlength 255 此一单行文字盒可输入字元的上限 为方便编排资料或避免错输入等 宜设定上限 例如输入电话或ICQUIN的可设为8 年龄为2等 例子 输入方式二 Radio 单一选择 例如 type Radio 输入方式为Radio 能产生一单一选择 以供点选 name gender 此一Radio名称 参考Text部分的说明 value female 内定值 每一个radio必须及仅有一个value 通常有同时采用两个或以上同name不同value的Radio输入方式 可让使用使任选其一 align MIDDLE 可选值 top middle bottom left right texttop baseline absmiddlechecked设该Radio为内定被选 同name的各个Radio中只能有一个使用 或全不使用这参数 输入方式三 Checkbox 确认盒 例如 例子 输入方式四 Password 密码输方盒 例如 例子 输入方式五 Submit 传送键 及Reset 清除键 type Submit 设定输入方式为Submit或Reset value 确定 例子 图形标记 的一般参数设定 例如src logo gif 图片来源 接受 gif jpg及 png格式 前两者通行己久 后者由96年开始发展 于未来取代前两者 若图片文件与该html文件同处一目录则只写上文件案名称 否则必须加上正确的途径 相对及绝对皆可 width 100height 100设定图片大小 此宽度 及高度一般采用pixels作单位 通常只设为图片的真实大小以免失真 若要改变图片大小最好事先使用图像编辑工具 hspace 5vspace 5设定图片边沿空白 以免