HTML语言简易入门教程

第一课基础Html是英文HyperTextMarkupLanguage的缩写，中文意思是“超文本标志语言”，用它编写的文件(文档)的扩展名是.html或.htm，它们是可供浏览器解释浏览的文件格式。您可以使用记事本、写字板或FrontPageEditor等编辑工具来编写Html文件。Html语言使用标志对的方法编写文件，既简单又方便，它通常使用标志名/标志名来表示标志的开始和结束(例如html/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本文区:文件资料，即在浏览器上看到的网站内容。注意事项通常一份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斜体字del.../del横线(表示删除)。如:del横线/deltt.../tt打字体(固定宽度文字)。如:tt打字体/tt打字体sup.../sup上标字。如:字体sup上标字/sup字体上标字sub.../sub下标字。如:字体sub下标字/sub字体下标字!...注解(不会显示在浏览器上)，可以多行。如:!更新日期:2000/1/1第三课表格表格是html的一项非常重要功能，利用其多种属性能够设计出多样化的表格。使用表格可以使你的页面有很多意想不到的效果，使页面更加整齐美观。常用表格标记table.../table表格指令。相关属性:·align调整·bgcolor背景颜色·border边框·height高度·width宽度caption.../caption表格标题。相关属性:·align调整tr.../tr表格列(/tr可省略)。相关属性:·align调整th.../th表格栏标题(表头)粗体字(/th可省略)。相关属性:·align调整·colspan栏宽·rowspan栏高td.../td表格栏资料(储存格)(/td可省略)。相关属性:·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表格标题行标题1行标题2列标题1aaaabbbb列标题2ccccdddd第四课标示html提供许多种类的标示标记，作项目标示，而且可以作巢状式标示！常用标示标记li标示项目。如:olli第一项li第二项/ol1.第一项2.第二项ol.../ol编号标示，可标示数字或英文、罗马字母。如:oltype=ili第一项li第二项/oli.第一项ii.第二项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第一节ulli第一段li第二段/ulli第二节/olli第二章li第三章/ol1.第一章i.第一节第一段第二段ii.第二节2.第二章3.第三章其他标示标记dir.../dir目录式标示(自动加圆点)。如:网络学院:dirli新手上路li软件教室li设计教室li开发教室/dir网络学院:新手上路软件教室设计教室开发教室注意事项标示项目符号也可以用font.../font标记，以符号字元(○、◆、◎、★、■...等)标示。如:fontcolor=#ff0000●/font特殊符号:在html文件中，有些符号是代表特定的意义的。所以当我们要使用这些特殊符号时，便要用替代指令。符号替代指令"或"&&或&<或<>或>不可分空格 第五课区段标记一个网站不仅要内容丰富外，也要有美观简洁的版面。html所提供的区段标记功能，如果可以好好的利用也会有相当不错的效果。常用区段标记hr产生水平线。如:hraling=certenwidth=90%br跳下一行。如:太平洋网络学院，br网上学电脑的好去处。太平洋网络学院，网上学电脑的好去处。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/文件下载如: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位址或文件显示于那一个视窗(可和frame视窗标记配合使用或开新的视窗)如:外部链接ahref=■/aahref==frame1■/a内部链接·ch1.htm文件ahref=#a■/a(欲链接至html文件a点)aname=a■/a(html文件a点)·ch2.htm文件ahref=ch1.htm#a■/a(欲链接至ch1.htm文件a点)■表示链接点，可以是文字或图案。(即游标移到时，会变成手指形状的地方)link链接指令(用于head区，设定css文件)。meta储存应用资讯，可设定时间载入网页(用于head区)。相关属性:·charset设定·content回应表头资料内容,若是数字表示秒数·http-equiv回应表头,若设定为refresh载入url设定·urlhtml位置如:·设定中文自动跳行。metahttp-equiv=content-typecontent=text/html;charset=gb2312·设定十秒回到首页。(若不设定html文件位置则再载入原html文件)metahttp-equiv=refreshcontent=10url=index.htm设定链接、未链接部份颜色设定链接、未链接部份颜色，用body.../body标记。相关属性:·alink按下链接部份未放开时颜色·link未看过的链接部份颜色·vlink已看过的链接部份颜色如:bodylink=#0000ffalink=#ff0000vlink=#00ff00第八课设置图片图片增加了网站版面的美观，不过也不要放了大量的图片，而拖慢网站传输的效率有关设定图片的方法共有以下几种:1.设定html文件背景图片、背景颜色。body.../body标记。如:bodybackground=a.gif.../body或bodybgcolor=#000000.../body2.设定图片。img标记。3.设定地图。map.../map标记。常用图片标记img指令相关属性:·align调整·alt提示字·border边框·height高度·src文件或url位址·usem