我收集的常用网页制作HTML代码.docx

1、我收集的常用网页制作HTML代码网页制作HTML代码关于网页制作的相关代码我在此总结如下，希望给各位广大的网页制作爱好者带来方便。第一章：HTML 语言的结构 html文件是标准的ASCII文件，它看起来象是加入了许多被称为标注(tag)的特殊字符串的普遍文本文件。从结构上讲，html文件由元素(element)组成，组成html文件的元素有许多种，用于组织文件的内容和指导文件的输出格式。绝大多数元素是“容器”， 即它有起始标记和结尾标记。元素的起始标记叫做起始标注(start tag)，元素结束标记叫做结尾标注(end tag)，在起始标注和结尾标注中向的部分是元素体。 每一个元素都有名称和

2、可选择的属性，元素的名称和属性都在起始标注内标明。 比如体元素(body) demo This is my first html file. 第一行是体元素的起始标注，它标明体元素从此开始。因为所有的标注都具有相同的结构，所以我们将仔细分析这个标注的各个部分，以便读者对标注的写法有一大概了解。 起始标注开始 body 元素名称，由于元素和标注一一对应，所以元素名也叫标注名。需要注意的是起始链接链结束。 第二行和第三行是body元素的元素体，最后一行是body元素的结尾标注。结尾标注用。 从上面的例子中，我们可以看出，一个元素的元素体中可以有另外的元素。(上例中第二行的标题元素和第三行的分段元素

3、。实际上，html文件仅由一个html元素组成， 即文件以开始，以结尾，文件其部分都是 html的元素体。html元素的元素体由两大部分，即头元素.和体元素和一些注释组成。头元素和体元素的元素体又由其它的元素和文本及注释组成。也就是说，一个html文件应具有下面的结构： html文件开始 文件头开始 文件头 文件头结束 文件体开始 文件体 文件体结束 html文件结束 需要说明的是，html是一门发展很快的语言，早期的html文件并没有如此严格的结构，因而现在流行的浏览器(如Netscape,Mosaic等)为保持对早期html文件的兼容性,也支持不按上述结构编写的html文件。还需要说明的是

4、，各种浏览器对html元素及其属性的解释也不完全一样，本书中所讲的元素，元素的属性及其输出是以Netscape2.0 浏览器为准的，作者将尽量给出别的浏览器对某一元素的解释。 一般来讲，html的元素有下列三种表示方法： 1)文件或超文本 2)文本成超文本 3) 第三种写法仅用于一些特殊的元素,比如分段元素P，它仅仅通知www浏览器在此处分段，因而不需要界定作用范围， 所以它没有结尾标注。htlm3.0标准中，也定义了 标注，它用于需要界定作用范围的段落，比如增加对齐方式属性的段落。 注意: HTML并非大小写敏感. 和或者是一样的. html文件中，有些元素只能出现在头元素中，绝大多数元素只

5、能出现在体元素中。在头元素中的元素表示的是该html文件的一般信息，比如文件名称，是否可检索等等。这些元素书写的次序是无关紧要的，它只表明该html有还是没有该属性。与此相反，出现在体元素中的元素是次序敏感的，改变元素在html文件中的次序会改变该html文件的输出形式。第二章： 构成网页的基本元素 2.1标题(TITLE) Title元素是文件头中唯一一个必须出现的元素，它也只能出现在文件头中。title元素的格式为： 文件标题 title标明该html文件的标题，是对文件内容的概括。一个好的标题应该能使读者从中判断出该文件的大概内容。文件的标题一般不会显示在文本窗口中，而以窗口的名称显示出

6、来。除了标识窗口外，当将某一 homepage 存入书签或文件时，title还用作书签名或缺省的文件名。 title的长度没有限制，但过长的标题会导致折行，一般情况下它的长度不应超过64个字符。由于title的作用是标明文件内容，所以太短的title也是不可取的，比如：introduction 这个标题，读者不可能根据它判断出本文介绍的是什么。一个好的例子是： An Introduction to HTML 在头元素中还可以出现其他元素，如，等等。这些元素都不是必须的，而且也不常用。 这些元素的用法和它们的含义可以参考有关文献。下面是一个最简单的html 文件the simplest html

7、 fileThis is my first html file. 2.2 标题(hn) 标题元素有6种，分别为h1, h2,h6，用于表示文章中的各种标题。标题号越小，字体越大。一般情况下，浏览器对标题作如下解释： h1 黑体，特大字体，居中，上下各有两行空行。 h2 黑体，大字体，上下各有一到两行空行 h3 黑体(斜体)，大字体，左端微缩进，上下空行 h4 黑体，普通字体，比h3更多缩进，上边一空行 h5 黑体(斜体)，与h4相同缩进，上边一空行 h6 黑体，与正文有相同缩进，上边一空行 Netscape 对hn的解释为，一律黑体，字体越来越小。 hn可以有对齐属性，align#， #表示l

8、eft标题居左center 标题居中right 标题居右 例: Chapter 2 标题元素！ 标题元素！标题元素！ 标题元素！标题元素！ 标题元素！标题元素！ 标题元素！标题元素！ 标题元素！标题元素！ 标题元素！ 2.3 分段 html的浏览器是基于窗口的，用户可以随时改变显示区的大小，所以html将多个空格以及回车等效为一个空格，这是和绝大多数字处理器不同的。html的分段完全依赖于分段元素。比如下面两段源文件有相同的输出。This is a level Two Heading paragraph one paragraph two This Is a Level Two Heading

9、paragraph one paragraph Two 也可以有多种属性，比较常用的属性是： aligh#， #可以是left,center,right,其含义同上文。 例This is a centered paragraph 当 html文件中有图形，图形可能占据了窗口的一端，图形的周围可能还有较大的空白区。这时，不带clear属性的可能会使文章的内容显示在该空白区内。为确保下一段内容显示在图形的下方，可使用clear属性。clear属性的含义为：clear=left 下一段显示在左边界处空白的区域clear=right 下一段显示在右边界处空白的区域clear=all 下一段的左右两边都

10、不许有别的内容 2.4 列表List 列表用于列举事实，常用的列表有3种格式，即无序列表(unordered List)，有序列表(ordered list)和定义列表(definition list) 2.4.1 无序列表(ul) 无序列表用(ul)开始，每一个列表条目用引导，最后是，注意列表条目不需要结尾标注。输出时每一列表条目缩进，并且以黑点标示。例 ： Today Tommorow 输出为 Today Tommorow 2.4.2 有序列表 有序列表与无序列表相比，只是在输出时列表条目用数字标示，下面是一个例子及其输出： 例： Today Tommorow 输出为： 1.Today 2

11、.Tommorow 2.4.3 定义列表 定义列表用于对列表条目进行简短说明的场合，用开始，列表条目用引导，列表条目的说明用引导。Item 1The definition of item 1Item 2Definition or explaination of item 2输出为：Item 1 The definition of item 1Item 2 Definiton or explaination of item 2 2.4.4 改变条目标记 1.改变无序列表条目标记 无序列表输出时，每一条目前都有一个黑色圆点，用户可以用type序性修改条目的标记。type可以是disc 实心圆点ci

12、rde圆圈 square实心方点ONETWOTHREE输出为：ONETWOTHREE 2.改变有序列表条目标记 有序列表条目标记的缺省值是阿拉伯数字，可以用type属性修改。方法为：Li= A, 大写字母a, 小写字母I, 大写罗马数字i, 小写罗马数字l, 缺省,阿拉伯数字ONE-ONEONE-TWO输出为：A.ONE-ONEB.ONE-TWOONE-ONEONETWO输出为：a.ONE-ONEb.ONE-TWOONE-ONEONE=TWO输出为：.ONE-ONE.ONE-TWOONE-ONEONE-TWO输出为：i.ONE-ONEii.ONE-TWOONE-ONEONE-TWO输出为：1.

13、ONE-ONE2.ONE-TWO 3.改变有序列表条目的起始数字 有序列表的条目数字在缺省情况下是从1开始的，用start属性可修改这一值。方法为 #是条目起始号ONE-ONEONE-TWOTWO-ONETWO-ONE输出为：E.ONE-ONEF.ONE-TWO10.TWO-ONExi.TWO-TWO 2.4.5 列表的嵌套 各种列表可以相互嵌套，每一个列表条目都可以是一个单独的列表。每嵌套一层，列表条目的输出就会有更大的缩进。请参照上面的例子。 2.5 预格式化文本 html的输出是基于窗口的，因而html文件在输出时都是要重新格式化的，若确实不需要重新格式化的内容，可以用通知浏览器。浏览器

14、在输出时，对这部分内容几乎不做修改地输出，输出的字体电传打字机字体。早期的html规范规定在预格式化区内不能出现格式化输出的元素。如hn等，Netscape在遇到预格式化元素时，允许其中有其他元素。please use your card.VISA MasterHere is an order form.FaxAir Mail 输出为：please use your cardVISA MasterHere is an order form.FaxAir Mail 2.6 块引用 块引用用标注，使屏幕显示单独的一块。大多数的浏览器采用缩进编排的方式，使这一块和其他部分的文本区分开来，上下各有一空

15、行。 块引用(Blockquote) .Her Song:When I was young, I listened to the radio waiting for my favorite songs. Her Song: When I was young, I listened to the radio waiting for my favorite songs. 2.7 居中 很多元素都有对齐方式属性，如hn 、p等。也可以直接用居中标注Wonderful!This must be my dream.输出为：Wonderful!This must be my dream.第三章：超文本链接

16、指针 超文本链接指针是html最吸引人们优点之一。链接指针可以使读者在整个Internet网上方便地链接。使用超文本链接指针可以使顺序存放的文件具有一定程度上随机访问的能力，而每一个链接指针正好代表了作者或者读者的思维跳跃，这更加符合人类的思维方式。因而组织得好的链接指针有助于理解作者的意图。 一个超文本链接指针由两部分组成。一是被指向的目标，它可以是同一文件的另一部分，也可以是世界另一端的一个文件，还可以是动画或音乐；另一部分是指向目标的链接指针。 3.1 统一资源定位器URL 统一资源定位器(uuiform Resource Locator)是文件名的扩展。在单机系统中，定位一个文件需要路

17、径和文件名，对于遍布全球的Internet网，显然还需要知道文件存放在哪个网络的哪台主机中才行。与单机系统不一样的是在单机系统中，所有的文件都由统一的操作系统管理，因而不必给出访问该文件的方法；而在Internet上，各个网络，各台主机的操作系统都不一样，因此必须指定访问该文件的方法。一个URL包括了以上所有的信息。它的构成为： protocol:/ machine.name:portdirectoryfilename 其中protocol是访问该资源所采用的协议，即访问该资源的方法，它可以是：http 超文本传输协议，该资源是html文件file 文件传输协议,用ftp访问该资源ftp 文件

18、传输协议,用ftp访问该资源gopher gopher协议,该资源是gopher文件news 表明该资源是网络新闻 madcine.name 是存放该资源主机的IP 地址,通常以字符形式出现,如 port端口号，是服务器在该主机所使用的端口号。一般情况下端口号不需要指定。 只有当服务器所使用的端口号不是缺省的端口号时才指定。 directory和filename是该资源的路径和文件名。 一个典型的URL为: 它表示中科院高能所WWW服务器上的起始html文件。(文件具体存放的路径及文件名取决于该WWW服务器的配置情况)。 与单机系统绝对路径，相对路径的概念类似，统一资源定位器也有绝对URL和相

19、对URL之分。上文所述的是绝对URL。相对URL是相对于你最近访问的URL。比如你正在观看一个URL为 3.2 指向一个目标 在html文件中用链接指针指向一个目标。其基本格式为： 字符串 href属性中的统一资源定位器(url)是被指向的目标，随后的“字符串”在html文件中充当指针的角色， 它一般显示为蓝色。当读者用鼠标点这个字符串时，浏览器就会将url处的资源显示在屏幕上。例如： IHEP CHINA homepage 用户用鼠标点取IHEP china homepage，即可看到高能所编写的关于中国情况的介绍。在这个例子中， 充当指针的是IHEP china homepage，下面我们

20、将看到用图象做为指针的例子。 在编写html文件时，需要知道目标的url。如何才能得到目标的url呢？对于自己主机内的文件，它的url 可以根据该文件的实际情况决定。对于Interner上的资源， 我们在用浏览器观看时，它的url会在浏览器的Location一栏中显示出来，把它抄下来写到你的html文件中即可。 在编写html文件时，对有能确定关系的一组资源(比如在同一个目录中)应采用相对url， 这不仅简化你的html文件，而且便于维护。比如当你需要将某个目录整个搬到另外一个地方或把某一主机的资源移到另一台主机时，用相对url写的html文件用不看更新其中的url(只要它们的相对关系没有改变

21、)。但如果你用绝对url编写html，你就不得不逐字修改每个链接指针中的url，这是一件很乏味也很容易出错的工作。对于各个资源之间没有固定的关系，比如你的html文件是介绍各大学情况的，它所指向的目标分布在全球的主机中，这时你就只能用绝对url了。 在本章的末尾，作者给出一个完整的html文件，该文件使用了前三章介绍的全部元素，以便于读者理解。 3.3 标记一个书签 上节提到的链接指针可以使读者在整个Interner网上方便地链接。但如果你编写了一个很长的html文件，从头到尾地读很浪费时间，能不能在同一文件的不同部分之间也建立起链接，使用户方便地在上下方之间跳转呢？答案是肯定的。前面曾提到过

22、一个超文本链接指针包括两个部分，一个指向目标的链接指针，另一个是被指向的目标。对于一个完整的文件，我们可以用它的url来唯一地标识它， 但对于同一文件的不同部分，我们怎样来标识呢？下面的内容将介绍链接指针元素的另外的一个用途，标识书签。 标识一个书签的方法为： textname属性将放置该标记的地方标记为“name”，name是一个全文唯一的标记串，text部分可有可无。这样，我们就把放置标记的地方做了一个叫做“name”的标记。 做好标记后，可以用下列方法来指向它， text url是放置标记的html文件的url name是标记名，对于同一个文件，可以写为 text 这时就可以点取text

23、跳转到标记名为name的部分了。 3.4 目标窗口 如果希望被指向的目标在一个新的窗口中显示，可以使用target属性来修饰链接指针元素。 text 将url代表的资源显示在一个新的窗口中，该窗口的名字叫window-name。 3.5 图象链接指针 图象也可以做为链接指针。格式为： 可以看出，上例中用取代了链接指针中text的位置。 是图象元素，它表明显示url代表的图象文件，参见图象一章。 下面是一个简单的图象链接指针: China home page 边框 #=value3.6 图象地图(image map) 上一节介绍的图象链接指针每幅图只能指向一个地点，而图象地图可以把图象分成多个区

24、域，每个区域指向不同的地点。你可以用图象地图编出很漂亮的html文件。 使用图象地图稍微复杂一点。图象地图不仅需要在html文件中说明，它还需要一个后缀为.map的文件，用来说明图象分区及其指向的url的信息。 在.map文件中说明分区信息的格式如下： rect url 左上角坐标，右下角坐标 poly url 各顶点坐标 circle url 直径两端点坐标 default url rect指定一个矩形区域，该区域的位置由左上角坐标和右下角坐标说明。poly 指定一多边形区域， 该区域的位置由各顶点坐标说明。circle 指定一圆形区域， 该区域的位置由垂直通过圆心的直径与该圆的交点坐标说明。default 指定图象地图其它部分的url。坐标的写法为：x,y ，各点坐标之间用空格分开。下面是一个完整的说明文件， default rect 140,20 280,60 poly 180,80 200,140 circle 80,140 80,100 图象地图需要一个特殊的处理程序 imagemap，imagemap放在/cgi-bin 中。在html 文件中引用图象地图的 格式为：