HTML语言的结构.docx

1、HTML语言的结构HTML语言的结构第一章：HTML 语言的结构html文件是标准的ASCII文件，它看起来象是加入了许多被称为链接签(tag)的特殊字符串的普遍文本文件。 从结构上讲，html文件由元素(element)组成，组成html 文件的元素有许多种，用于组织文件的内容和指导文件 的输出格式。绝大多数元素是“容器”， 即它有起始标记和结尾标记。元素的起始标记叫做起始链接签(start tag)，元素结束标记叫做结尾链接签(end tag)，在起始链接签和结尾链接签中间的部分是元素体。 每一个元素都有“名称” 和可选择的“属性”，元素的名称和属性都在起始链接签内标明。 比如体元素(bo

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

3、即文件以开始，以结尾，文件其部分都是 html的元素体。html元素的元素体由两大部分，即头元素.和体元素和一些注释组成。头元素和体元素的元素体又由其它的元素和文本及注释组成。也就是说，一个html文件应具有下面的结构：html文件开始 文件头开始文件头 文件头结束 文件体开始文件体 文件体结束 html文件结束一般来讲，html的元素有下列三种表示方法： 1)文件或超文本 2)文本成超文本3)第三种写法仅用于一些特殊的元素,比如水平线，它没有结尾链接签。html文件中，有些元素只能出现在头元素中，绝大多数元素只能出现在体元素中。在头元素中的元素表示的是该html文件的一般信息，比如文件名称，

4、是否可检索等等。这些元素书写的次序是无关紧要的，它只表明该html有还是没有该属性。与此相反，出现在体元素中的元素是次序敏感的，改变元素在html文件中的次序会改变该html文件的输出形式。第二章： 构成网页的基本元素2.1网页主题(TITLE)Title元素是文件头中出现的元素，title元素的格式为： 文件题目title标明该html文件的题目，是对文件内容的概括。一个好的题目应该能使读者从中判断出该文件的大概内容。文件的题目一般不会显示在文本窗口中，而以窗口的名称显示出来。title的长度没有限制，但过长的题目会导致折行，一般情况下它的长度不应超过64个字符。由于title的作用是标明文

5、件内容，所以太短的title也是不可取的，比如：introduction 这个题目，读者不可能根据它判断出本文介绍的是什么。一个好的例子是：An Introduction to HTML 4.0 在头元素中还可以出现其他元素，如，等等。这些元素都不是必须的，而且也不常用。 这些元素的用法和它们的含义可以参考有关文献。下面是一个最简单的html 文件简单一页This is my first html file.2.2 段落格式标题(hn) 标题元素有6种，分别为h1, h2,h6，用于表示文章中的各种标题。标题号越小，字体越大。一般情况下，浏览器对标题作如下解释：h1 黑体，特大字体，居中，上下

6、各有两行空行。h2 黑体，大字体，上下各有一到两行空行h3 黑体(斜体)，大字体，左端微缩进，上下空行h4 黑体，普通字体，比h3更多缩进，上边一空行h5 黑体(斜体)，与h4相同缩进，上边一空行h6 黑体，与正文有相同缩进，上边一空行hn可以有对齐属性，align#，#表示left 标题居左center 标题居中right 标题居右例: Chapter 2 下面给出hn的例子及其输出： Today is fine! Today is fine!Today is fine! Today is fine!Today is fine! Today is fine!Today is fine! To

7、day is fine!Today is fine! Today is fine!Today is fine! Today is fine!2.3 分段 html的浏览器是基于窗口的，用户可以随时改变显示区的大小，所以html将多个空格以及回车等效为一个空格，这是和绝大多数字处理器不同的。html的分段完全依赖于分段元素。This is a level Two Heading paragraphy one paragraph two 也可以有多种属性，比较常用的属性是：aligh#可以是left,center,right,其含义同上文。例This is a centered paragraph

8、 2.4 项目列表（清单）List 清单用于列举事实，常用的清单有2种格式，即无序清单(unordered List)，有序清单(ordered list)2.4.1 无序清单(ul)无序清单用(ul)开始，每一个清单条目用.引导，最后是。输出时每一清单条目缩进，并且以黑点标示。 例 ：源文件TodayTommorow输出为TodayTommorow2.4.2 有序清单有序清单与无序清单相比，只是在输出时清单条目用数字标示，下面是一个例子及其输出：TodayTommorow输出为：1.Today2.Tommorow2.4.4 改变条目标记1.改变无序清单条目标记无序清单输出时，每一条目前都有一

9、个黑色圆点，用户可以用type序性修改条目的标记。type可以是disc 实心圆点cirde圆圈 square实心方点ONETWOTHREE输出为：ONETWOTHREE2.改变有序清单条目标记 有序清单条目标记的缺省值是阿拉伯数字，可以用type属性修改。方法为#=A, 大写字母a, 小写字母I, 大写罗马数字i, 小写罗马数字l, 缺省,阿拉伯数字ONE-ONEONE-TWOA.ONE-ONEB.ONE-TWOONE-ONEONETWOa.ONE-ONEb.ONE-TWOONE-ONEONE-TWO.ONE-ONE.ONE-TWOONE-ONEONE-TWOi.ONE-ONEii.ONE-

10、TWOONE-ONEONE-TWO1.ONE-ONE2.ONE-TWO3.改变有序清单条目的起始数字 有序清单的条目数字在缺省情况下是从1开始的，用start属性可修改这一值。方法为 #是条目起始号ONE-ONEONE-TWOTWO-ONETWO-TWOE.ONE-ONE6.ONE-TWO10.TWO-ONExi.TWO-TWO2.7 居中很多元素都有对齐方式属性，如hn 、p等。也可以直接用居中链接签 Wonderful! This must be my dream.Wonderful!This must be my dream.第三章：超文本链接指针超链接是html最吸引人们优点之一。使用

11、超文本链接指针可以使顺序存放的文件具有一定程度上随机访问的能力，这更加符合人类的思维方式。人的思维是跳跃的、交叉的，而每一个链接指针正好代表了作者或者读者的思维跳跃。因而组织得好的链接指针不仅能使读者跳过他不感兴趣的章节(比如一些枯燥的数据)，而且有助于更好地理解作者的意图。一个超文本链接指针由两部分组成。一是被指向的目标，它可以是同一文件的另一部分，也可以是世界另一端的一个文件，还可以是动画或音乐；另一部分是指向目标的链接指针。3.1 统一资源定位器URL统一资源定位器(uuiform Resource Locator)是文件名的扩展。3.2 指向一个目标在html文件中用链接指针指向一个目

12、标。其基本格式为：字符串href属性中的统一资源定位器(url)是被指向的目标，随后的“字符串”在html文件中充当指针的角色， 它一般显示为蓝色。当读者用鼠标点这个字符串时，浏览器就会将url处的资源显示在屏幕上。例如：中央电视台用户用鼠标点取中央电视台，即可看到关于中央电视台的介绍。在这个例子中， 充当指针的是中央电视台，后面我们将看到用图象做为指针的例子。3.3 标记一个目标（锚点）上节提到的链接指针可以使读者在整个Interner网上方便地链接。但如果你编写了一个很长的html文件，从头到尾地读很浪费时间，能不能在同一文件的不同部分之间也建立起链接，使用户方便地在上下方之间跳转呢？答案

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

14、点取text跳转到标记名为name的部分了。3.4 目标窗口如果希望被指向的目标在一个新的窗口中显示，可以使用target属性来修饰链接指针元素。text 将url代表的资源显示在一个新的窗口中。3.5 图象链接指针图象也可以做为链接指针。格式为：可以看出，上例中用取代了链接指针中text的位置。是图象元素，它表明显示url代表的图象文件，参见图象一章。下面是一个简单的图象链接指针。China home page第四章： 版面风格控制4.1字体大小html有七种字号，1号最小，7号最大。缺省字号为3，可以用设置缺省字号。设置文本的字号有两种办法，一种是设置绝对字号，；另一种是设置文本的相对字号

15、；。用第二种方法时“”号表示字体变大，“”号表示字体变小。Today is fine!Today is fine!Today is fine!Today is fine!Today is fine!Today is fine!Today is fine!Today is fine!4.1.2 字体风格字体风格分为物理风格和逻辑风格。物理风格直接指定字体，物理风格的字体有黑体，斜体，下划线，逻辑风格指定文本的作用。强调 特别强调 源代码例子 键盘输入 变量 定义 引用 较小较大 上标 下标4.1.3 字体颜色字体的颜色用指定#可以是6位16进数，分别指定红、绿、兰的值，也可以是black,oli

16、ve,teal,red,blue,maroon,navy,gray,lime,fudrsia,white,green,purple,sliver,yellow,aqua 之一。4.2 水平线(hr)横线，一般用于分隔同一文体的不同部分。在窗口中划一条横线非常简单，只要写一个即可。横线的宽度用指定，width=#指n是线宽，单位是象素。例：。 hr 定横线长度，可以指定绝对线长，也可以指定横线长度占窗口宽度的百分比。例 、。横线的位置用指定。#是left成right之一，left表示左端与左边界对齐，right是右端与右边界对齐，缺省，横线出现在窗口正中。4.3使用图象使用图象使你的页面更加漂亮

17、，但是使用图象会导致网络通讯量急剧增大。使访问时间延长。所以在主页不宜采用很大的图象。如果确实需要一些大图象，最好在主页中用一个缩小的图象指向原图，并标明该图的大小。这样读者可以快速地访问您的主页，自己选择看还是不看那些图象。图象的基本格式为：或image-url是图象文件的url。目前，大部分浏览器支持 .gif 和 .jpg文件。alt属性告诉不支持图象的浏览器用text代替该图。4.3.2 图象与文本的对齐方式图象在窗口中会占据一块空间，在图象的左右可能会有空白，不加说明时，浏览器将随后的文本显示在这些空白中，显示的位置由align属性指定。用align=left,righr时，图象是一

18、个浮动图象。比如align=left，图象必须挨着左边框，它把原来占据该块空白的文本“挤走”，或挤到它右边，或挤到它上下。4.4 分行表示在此处分行。4.5 背影和文本颜色窗口背景可以用下列方法指定前者指定填充背景的图象，如果图象的大小小于窗口大小，则把背景图象重复，直到填满窗口区域。后者指定的是16进制的红、绿、兰分量。bgcolor 背景颜色Text 文本颜色Link 链接指针颜色alinik 活动的链接指针颜色vlinik 已访问过的链接指针颜色例 大红背景色.注意，此时体元素必须写完整，即用结束4.6转义字将与特殊字符html中，&有特殊含义，(前两个字符用于链接签，&用于转义)，不能

19、直接使用。使用这三个字符时，应使用它们的转义序列。& 的转义序列为 & amps 或 & #38； 的转义序列为 & gt; & #62；前者为字符转义序列，后者为数字转义序列。例如& Lt; font &Lgt;显示为若直接写为则被认为是一个链接签。需要说明的是：a. 转义序列各字符间不能有空格；b. 转义序列必须以“；”结束；c. 单独的&不被认为是转义开始。如“ & Lt； ”被解释为 “& Lt；”而不是另一个需要转义的字符是引号，它的转义序列为"或"，例如第五章：表格(Table)5.1 表格的基本形式一个表由开始，结束，表的内容由,和定义。说明表的一个行，表有多少

20、行就有多少个；说明表的列数和相应栏目的名称，有多少个栏就有多少个；则填充由和组成的表格。是否用表格线分开为部分内容用border属性说明。 5.2 有通栏的表1、有横向通栏的表用属性说明colspan表示横向栏距，#代表通栏占据的网格数，它是一个小于表的横向网格数的整数。2、有纵向通栏的表用rowspan=#属性说明。 rowspan表示纵向栏距，#表示通栏占据的网格数，应小于纵向网络数。需要说明的是有纵向通栏的表，每一行必须用明确给出一横向栏目结束,这是和表的基本形式不同的。5.3 表的大小，边框宽度，表格间距1、表的大小用width=#和height=#属性说明。前者为表宽，后者为表高，#

21、是以象素为单位的整数。2、边框宽度由border=#说明，#为宽度值，单位是象素。3、单元格间距即划分表格的线的粗细用cellspacing=#表示，#的单位是象素，将表格间距定义为10个象素，它看起来象用很粗的线划分的表格。5.4 单元格边距1、文本与表框的距离用cellpadding=#说明。2、表格的宽度大于其中的文本宽度时，文本在其中的输出位置与用align=#说明。#是 left，center和right三者之一，分别表示左对齐，居中和右对齐，align属性可修饰,和链接签。3、表格的高度大于其中文本的高度时，可以用valign=#说明文本在其中的位置。#是top,middle,bottom,baseline之一。分别表示上对齐，文本中线与表格中线对齐， 下对齐，文本基线与表格中线对齐。5.6 表格颜色表格的颜色用bgcolor=#指定。#是16进制的6位数，格式为rrggbb，分别表示红、绿、兰三色的分量。或者是16种已定义好的颜色名称，参见文本颜色。FoodDrinkAB第六章：框架 Frame6 .1 分框的基本格式分框将流览器的窗口分成多个区域，每个区域可以单独显示一个html文件，各个区域也可相关连地显示某一个内容，比如可以将索引放在一个区域，文件内容显示在另一个区域。分框的基本结构如下.中的内容显示在不支持分框的浏览器窗口中,因而这里指向一个