网页制作HTML代码全攻略

网页制作HTML代码全攻略第一章：HTML语言的结构html文件是标准的ASCII文件，它看起来象是加入了许多被称为标注(tag)的特殊字符串的普遍文本文件。从结构上讲，html文件由元素(element)组成，组成html文件的元素有许多种，用于组织文件的内容和指导文件的输出格式。绝大多数元素是“容器”，即它有起始标记和结尾标记。元素的起始标记叫做起始标注(starttag)，元素结束标记叫做结尾标注(endtag)，在起始标注和结尾标注中向的部分是元素体。每一个元素都有名称和可选择的属性，元素的名称和属性都在起始标注内标明。比如体元素(body)bodybackgroud＝back-ground.gifh2demo/h2Thisismyfirsthtmlfile.p/body第一行是体元素的起始标注，它标明体元素从此开始。因为所有的标注都具有相同的结构，所以我们将仔细分析这个标注的各个部分，以便读者对标注的写法有一大概了解。起始标注开始body元素名称，由于元素和标注一一对应，所以元素名也叫标注名。需要注意的是和body之间不能有空格。元素名称不分大小写。background属性名。一个元素可以有多个属性，属性及其属性值不分大小写。本属性指明用什么方法来填充背景。＝指明属性值“background.gif”属性值，表示用background.gif文件来填充背景。属性名,＝,属性值合起来构成一个完整的属性，一个元素可以有多个属性，各个属性用空格分开。起始链接链结束。第二行和第三行是body元素的元素体，最后一行是body元素的结尾标注。结尾标注用/开始，随后是元素名，然后是大于号。从上面的例子中，我们可以看出，一个元素的元素体中可以有另外的元素。(上例中第二行的标题元素h2…/h2和第三行的分段元素p。实际上，html文件仅由一个html元素组成，即文件以html开始，以/html结尾，文件其部分都是html的元素体。html元素的元素体由两大部分，即头元素head../head和体元素body…/body和一些注释组成。头元素和体元素的元素体又由其它的元素和文本及注释组成。也就是说，一个html文件应具有下面的结构：htmlhtml文件开始head文件头开始文件头/head文件头结束body文件体开始文件体/body文件体结束/htmlhtml文件结束需要说明的是，html是一门发展很快的语言，早期的html文件并没有如此严格的结构，因而现在流行的浏览器(如Netscape,Mosaic等)为保持对早期html文件的兼容性,也支持不按上述结构编写的html文件。还需要说明的是，各种浏览器对html元素及其属性的解释也不完全一样，本书中所讲的元素，元素的属性及其输出是以Netscape2.0浏览器为准的，作者将尽量给出别的浏览器对某一元素的解释。一般来讲，html的元素有下列三种表示方法：1)元素名文件或超文本／元素名2)元素名属性名＝“属性值…文本成超文本／元素名3)元素名第三种写法仅用于一些特殊的元素,比如分段元素P，它仅仅通知浏览器在此处分段，因而不需要界定作用范围，所以它没有结尾标注。htlm3.0标准中，也定义了/p标注，它用于需要界定作用范围的段落，比如增加对齐方式属性的段落。注意:HTML并非大小写敏感.title和TITLE或者TiTlE是一样的.html文件中，有些元素只能出现在头元素中，绝大多数元素只能出现在体元素中。在头元素中的元素表示的是该html文件的一般信息，比如文件名称，是否可检索等等。这些元素书写的次序是无关紧要的，它只表明该html有还是没有该属性。与此相反，出现在体元素中的元素是次序敏感的，改变元素在html文件中的次序会改变该html文件的输出形式。第二章：构成网页的基本元素2.1标题(TITLE)Title元素是文件头中唯一一个必须出现的元素，它也只能出现在文件头中。title元素的格式为：title文件标题/titletitle标明该html文件的标题，是对文件内容的概括。一个好的标题应该能使读者从中判断出该文件的大概内容。文件的标题一般不会显示在文本窗口中，而以窗口的名称显示出来。除了标识窗口外，当将某一homepage存入书签或文件时，title还用作书签名或缺省的文件名。title的长度没有限制，但过长的标题会导致折行，一般情况下它的长度不应超过64个字符。由于title的作用是标明文件内容，所以太短的title也是不可取的，比如：introduction这个标题，读者不可能根据它判断出本文介绍的是什么。一个好的例子是：titleAnIntroductiontoHTML/title在头元素中还可以出现其他元素，如isindex，meta等等。这些元素都不是必须的，而且也不常用。这些元素的用法和它们的含义可以参考有关文献。下面是一个最简单的html文件htmltitlethesimplesthtmlfile/titleThisismyfirsthtmlfile./html§2.2标题(hn)标题元素有6种，分别为h1,h2,…h6，用于表示文章中的各种标题。标题号越小，字体越大。一般情况下，浏览器对标题作如下解释：h1黑体，特大字体，居中，上下各有两行空行。h2黑体，大字体，上下各有一到两行空行h3黑体(斜体)，大字体，左端微缩进，上下空行h4黑体，普通字体，比h3更多缩进，上边一空行h5黑体(斜体)，与h4相同缩进，上边一空行h6黑体，与正文有相同缩进，上边一空行Netscape对hn的解释为，一律黑体，字体越来越小。hn可以有对齐属性，align＝#，#表示left标题居左center标题居中right标题居右例:h2align=centerChapter2/h2h1标题元素！/h1标题元素！h2标题元素！/h2标题元素！h3标题元素！/h3标题元素！h4标题元素！/h4标题元素！h5标题元素！/h5标题元素！h6标题元素！/h6标题元素！§2.3分段Phtml的浏览器是基于窗口的，用户可以随时改变显示区的大小，所以html将多个空格以及回车等效为一个空格，这是和绝大多数字处理器不同的。html的分段完全依赖于分段元素P。比如下面两段源文件有相同的输出。h2ThisisalevelTwoHeading/h2paragraphonepparagraphtwop…………………………h2ThisIsaLevelTwoHeading/h2paragraphonepparagraphTwopp也可以有多种属性，比较常用的属性是：aligh＝#，#可以是left,center,right,其含义同上文。例palign=centerThisisacenteredparagraph／p当html文件中有图形，图形可能占据了窗口的一端，图形的周围可能还有较大的空白区。这时，不带clear属性的p可能会使文章的内容显示在该空白区内。为确保下一段内容显示在图形的下方，可使用clear属性。clear属性的含义为：clear=left下一段显示在左边界处空白的区域clear=right下一段显示在右边界处空白的区域clear=all下一段的左右两边都不许有别的内容§2.4列表List列表用于列举事实，常用的列表有3种格式，即无序列表(unorderedList)，有序列表(orderedlist)和定义列表(definitionlist)2.4.1无序列表(ul)无序列表用(ul)开始，每一个列表条目用li引导，最后是/ul，注意列表条目不需要结尾标注/Li。输出时每一列表条目缩进，并且以黑点标示。例：ulliTodayliTommorow/ul输出为●Today●Tommorow2.4.2有序列表ol有序列表与无序列表相比，只是在输出时列表条目用数字标示，下面是一个例子及其输出：例：olliTodayliTommorow/ol输出为：1.Today2.Tommorow2.4.3定义列表dl定义列表用于对列表条目进行简短说明的场合，用dl开始，列表条目用dt引导，列表条目的说明用dd引导。dldtItem1ddThedefinitionofitem1dtItem2ddDefinitionorexplainationofitem2/dl输出为：Item1Thedefinitionofitem1Item2Definitonorexplainationofitem22.4.4改变条目标记1.改变无序列表条目标记无序列表输出时，每一条目前都有一个黑色圆点，用户可以用type序性修改条目的标记。type可以是disc实心圆点cirde圆圈square实心方点ullitype=discONElitype=circleTWOlitype=squareTHREE/ul输出为：●ONE○TWO■THREE2.改变有序列表条目标记有序列表条目标记的缺省值是阿拉伯数字，可以用type属性修改。方法为：litype=#Li=A,大写字母a,小写字母I,大写罗马数字i,小写罗马数字l,缺省,阿拉伯数字ollitype=AONE-ONEliONE-TWO/ol输出为：A.ONE-ONEB.ONE-TWOollitype=aONE-ONEliONE－TWO/ol输出为：a.ONE-ONEb.ONE-TWOollitype=IONE-ONEliONE=TWO／ol输出为：Ⅰ.ONE-ONEⅡ.ONE-TWOollitype=iONE-ONEliONE-TWO／ol输出为：i.ONE-ONEii.ONE-TWOollitype=1ONE-ONEliONE-TWO/ol输出为：1.ONE-ONE2.ONE-TWO3.改变有序列表条目的起始数字有序列表的条目数字在缺省情况下是从1开始的，用start属性可修改这一值。方法为olstart=##是条目起始号olstart=5litype=AONE-ONEliONE-TWOolstart=10liTWO-ONElitype=iTWO-ONE/ol/ol输出为：E.ONE-ONEF.ONE-TWO10.TWO-ONExi.TWO-TWO2.4.5列表的嵌套各种列表可以相互嵌套，每一个列表条目都可以是一个单独的列表。每嵌套一层，列表条目的输出就会有更大的缩进。请参照上面的例子。§2.5预格式化文本prehtml的输出是基于窗口的，因而html文件在输出时都是要重新格式化的，若确实不需要重新格式化的内容，可以用pre…／pre通知浏览器。浏览器在输出时，对这部分内容几乎不做修改地输出，输出的字体电传打字机字体。早期的html规范规定在预格式化区内不能出现格式化输出的元素。如hn等，Netscape在遇到预格式化元素时，允许其中有其他元素。prepleaseuseyourcard.VISAMasterbHereisanorderform./bulliFaxliAirMail/ul/pre输出为：pleaseuseyourcardVISAMasterHereisanorderform.●Fax●AirMail§2.6块引用BLOCKQUOTE块引用用BLOCKQUOTE标注，使屏幕显示单独的一块。大多数的浏览器采用缩进编排的方式，使这一块和其他部分的文本区分开来，上下各有一空行。块引用(Blockquote)blockquot