HTML入门教程

-1-HTML语言入门教程第一课HTML语言基础当我们畅游Internet时，我们透过浏览器所看到的网站，是由HTML(HyperTextMarkupLanguage)语言所构成。HTML(超文件标记语言)是一种建立网页文件的语言，透过标记式的指令(Tag)，将影像、声音、图片、文字等连结显示出来。HTML标记是由和所括住的指令，主要分为:单标记指令、双标记指令(由起始标记，/结束标记所构成)。HTML网页文件可由任何文本编辑器或网页专用编辑器编辑，完成后(以.htm或.html为文件后缀保存)将HTML网页文件由浏览器打开显示，若测试没有问题则可以放到服务器(Server)上，对外发布信息。HTML文件基本架构HTML文件开始HEAD标头区开始TITLE.../TITLE标题区/HEAD标头区结束BODY本文区开始本文区内容/BODY本文区结束/HTML文件结束HTML网页文件格式。HEAD标头区:记录文件基本资料，如作者、编写时间。TITLE标题区:文件标题须使用在标头区内，可以在浏览器最上面看到标题。BODY本文区:文件资料，即在浏览器上看到的网站内容。注意事项-2-通常一份HTML网页文件包含二个部份:HEAD.../HEAD标头区、BODY.../BODY本文区。而HTML和/HTML代表网页文件格式。习惯上一个网站的首页名称通常订为index.htm或index.html这样只要浏览网站，浏览器便会自动的找出index.htm文件。第二课字体设置我们在这里将要谈的是有关文字的标记，包括字体大小、颜色、字型...等变化，适当的应用可以增加页面的美观！常用字体标记Hn.../Hn标题，设定标题字体大小，n=1(大)~6(小)会自动跳下一行。通常用在如章节、段落等标题上。如:H2标题/H2标题如:H3ALIGN=CENTER标题/H3(标题置中)标题B.../B粗体字。如:B粗体字/B粗体字I.../I斜体字。如:I斜体字/I斜体字U.../U加底线。如:U加底线/U加底线DEL.../DEL横线(表示删除)。如:DEL横线/DELTT.../TT打字体(固定宽度文字)。-3-如:TT打字体/TT打字体SUP.../SUP上标字。如:字体SUP上标字/SUP字体上标字SUB.../SUB下标字。如:字体SUB下标字/SUB字体下标字!...注解(不会显示在浏览器上)，可以多行。如:!更新日期:2000/1/1设定字体大小、颜色、字型有关设定文字的方法共有以下几种:1.设定HTML文件主体文字颜色。BODY.../BODY标记。如:BODYTEXT=RED.../BODY或BODYTEXT=#FF0000.../BODY2.设定基本字体大小、颜色、字型。BASEFONT.../BASEFONT标记。3.设定字体大小、颜色、字型。FONT.../FONT标记。BASEFONT.../BASEFONT设定基本字体，SIZE=1~7，1(最小)7(最大)。如:BASEFONTSIZE=4基本字体大小为4/BASEFONT基本字体大小为4如:BASEFONTCOLOR=#FF0000设定颜色/BASEFONT设定颜色如:BASEFONTFACE=标楷体,细明体设定字型/BASEFONT设定字型BIG.../BIG基本字体加大。-4-如:BASEFONTSIZE=4基本字体大小为4，/BASEFONTBIG加大为5/BIG基本字体大小为4，加大为5SMALL.../SMALL基本字体减小。如:BASEFONTSIZE=4基本字体大小为4，/BASEFONTSMALL减小为3/SMALL基本字体大小为4，减小为3FONT.../FONT设定字体大小、颜色、字型，SIZE=1~7，1(最小)7(最大)。如:FONTSIZE=4字体大小为4/FONT字体大小为4如:BASEFONTSIZE=4基本字体大小为4FONTSIZE=+1+1字体大小为5/FONTFONTSIZE=-2-2字体大小为2/FONT.../BASEFONT基本字体大小为4+1字体大小为5-2字体大小为2如:FONTCOLOR=#FF0000设定颜色/FONT设定颜色如:FONTFACE=标楷体,细明体设定字型/FONT设定字型注意事项1.设定字体的大小分:绝对SIZE如:FONTSIZE=4和相对SIZE如:FONTSIZE=+1(以BASEFONT设定的字体大小做加减)。2.设定字体的颜色可以是颜色名称或#RRGGBB表红绿蓝强度(00暗~FF亮)。#RRGGBB所代表的是红、绿、蓝三原色，每一色由两位十六进制的数值表示(即十进制0~255)。-5-十六进制:0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F。3.设定字体的字型会按照顺序找出显示的字型，若找不到则以系统预设字型显示第三课表格表格是HTML的一项非常重要功能，利用其多种属性能够设计出多样化的表格。使用表格可以使你的页面有很多意想不到的效果，使页面更加整齐美观。常用表格标记TABLE.../TABLE表格指令。相关属性:·ALIGN调整·BGCOLOR背景颜色·BORDER边框·HEIGHT高度·WIDTH宽度CAPTION.../CAPTION表格标题。相关属性:·ALIGN调整TR.../TR表格列(/TR可省略)。相关属性:·ALIGN调整TH.../TH表格栏标题(表头)粗体字(/TH可省略)。相关属性:·ALIGN调整·COLSPAN栏宽·ROWSPAN栏高TD.../TD表格栏资料(储存格)(/TD可省略)。相关属性:-6-·ALIGN调整·BGCOLOR背景颜色·HEIGHT高度·WIDTH宽度·COLSPAN栏宽·ROWSPAN栏高举例如:(基础型)TABLEBORDER=1ALIGN=CENTERTRTD太平洋网络学院TD太平洋网络学院TRTD太平洋网络学院TD太平洋网络学院/TABLE太平洋网络学院太平洋网络学院太平洋网络学院太平洋网络学院如:(加强型)增加背景颜色、表格标题、栏标题、跨栏宽、跨栏高。TABLEBORDER=1ALIGN=CENTERBGCOLOR=#CCCCFFCAPTION表格标题/CAPTIONTRTDTHCOLSPAN=2行标题1THCOLSPAN=2行标题2TRTHROWSPAN=2列标题1TDATDATDATDATRTDBTDBTDBTDBTRTHROWSPAN=2列标题2TDCTDCTDCTDCTRTDDTDDTDDTDD/TABLE表格标题-7-行标题1行标题2列标题1AAAABBBB列标题2CCCCDDDD看了以上的例子，应该了解表格的基本写法吧！第四课标示HTML提供许多种类的标示标记，作项目标示，而且可以作巢状式标示！常用标示标记LI标示项目。如:OLLI第一项LI第二项/OL1.第一项2.第二项OL.../OL编号标示，可标示数字或英文、罗马字母。如:OLTYPE=ILI第一项LI第二项/OLI.第一项II.第二项-8-UL.../UL符号标示，可标示数字或英文、罗马字母。如:ULLI第一项LI第二项/UL第一项第二项DT定义项目。DD定义资料。DL.../DL定义标示。如:DLDT十进制:DD0、1、2、3、4、5、6、7、8、9DT十六进制:DD0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F/DL十进制:0、1、2、3、4、5、6、7、8、9十六进制:0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F巢状式标示如:OLLI第一章OLTYPE=iLI第一节UL-9-LI第一段LI第二段/ULLI第二节/OLLI第二章LI第三章/OL1.第一章i.第一节第一段第二段ii.第二节2.第二章3.第三章其他标示标记DIR.../DIR目录式标示(自动加圆点)。如:网络学院:DIRLI新手上路LI软件教室LI设计教室LI开发教室/DIR网络学院:新手上路-10-软件教室设计教室开发教室注意事项标示项目符号也可以用FONT.../FONT标记，以符号字元(○、◆、◎、★、■...等)标示。如:FONTCOLOR=#FF0000●/FONT特殊符号:在HTML文件中，有些符号是代表特定的意义的。所以当我们要使用这些特殊符号时，便要用替代指令。符号替代指令"或"&&或&<或<>或>不可分空格 第五课区段标记一个网站不仅要内容丰富外，也要有美观简洁的版面。HTML所提供的区段标记功能，如果可以好好的利用也会有相当不错的效果。常用区段标记HR产生水平线。如:HRALING=CERTENWIDTH=90%BR跳下一行。如:太平洋网络学院，BR网上学电脑的好去处。太平洋网络学院，-11-网上学电脑的好去处。P.../P段落，跳下一行并加一行空白。(/P可省略)如:太平洋网络学院，P网上学电脑的好去处。太平洋网络学院，网上学电脑的好去处。CENTER.../CENTER置中。如:CENTER置中/CENTER置中NOBR.../NOBR不跳下一行。如:NOBR太平洋网络学院，/NOBR网上学电脑的好去处。太平洋网络学院，网上学电脑的好去处。PRE.../PRE以文件原始格式显示。如:PRE原始格式:文件/PRE原始格式:文件第六课链接链接可说是HTML中最重要的功能！因为HTML拥有链接的功能，使你能接上INTERNET、……享受多姿多彩的网络世界。基本上链接分成:外部链接——链接至网络的某个URL网址或文件，可参考考网络链接方式。内部链接——链接HTML文件的某个区段。网络链接方式网络链接方式://主机名称/路径/文件名称网址如:文件传输如:传输如:gropher://gropher.net.cn/远端登入如:telnet://bbs.net.cn/-12-文件下载如:file://data/html/file.zipNETNEWS传输如:news:talk.hinet.net.cnE-Mail如:mailto:[e-mail]常用链接标记BASE设定基本URL位置或路径，以後只要设定文件名称即会自动加上位置或路径。相关属性:·HREF链接的URL位址或文件·TARGET指定链接到的URL位址或文件显示于那一个视窗(可和FRAME视窗标记配合使用或开新的视窗)如:BASEHREF==kk.htm■/ABASEHREF==frame1A.../A链接指令。相关属性:·HREF链接的URL位址或文件·NAME名称·TARGET指定链接到的URL位