JavaWeb 第2章 HTML基础V10.docx

《JavaWeb 第2章 HTML基础V10.docx》由会员分享，可在线阅读，更多相关《JavaWeb 第2章 HTML基础V10.docx（57页珍藏版）》请在冰豆网上搜索。

JavaWeb第2章HTML基础V10

第2章HTML基础

2.1起源及基本架构

2.1.1发展历史

HTML的是HyperTextMarkedLanguage的英文缩写，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。

用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如Linux、Solaris、WINDOWS等）。

因为它独立于平台的格式、结构化设计，特别是超文本链接，使得它成为万维网（WorldWideWeb）较好的一种文档格式。

HTML作为定义万维网的基本规则之一，最初由于1989年在CERN（ConseilEuropeenpourlaRechercheNucleaire）研制出来。

HTML的设计者是这样考虑的：

即使人们使用的计算机差别很大，但是HTML格式将允许人们透明地共享网络上的信息。

因此，这种格式必须具备如下几个特点：

（1）独立于平台，即独立于计算机硬件和操作系统。

这个特性是至关重要的，因为在这个特性中，文档可以在具有不同性能（即字体、图形和颜色差异）的计算机上以相似的形式显示文档内容。

（2）超文本。

允许文档中的任何文字或词组参照另一文档，这个特性将允许用户在不同计算机中的文档之间及文档内部漫游。

（3）精确的结构化文档。

该特性将允许某些高级应用，如HTML文档和其他格式文档间互相转换以及搜索文本数据库。

TimBerners-Lee选择使用标准通用标记语言（SGML，standardgeneralizedmarkuplanguage）作为HTML的开发模版。

作为一种当时正在出现的国际标准，标准通用标记语言具有结构化和独立于平台的优点。

SGML的标准化水平也确保了它长久的生命力，这意味着采用SGML格式的文档在相当长的时间里不需要重新构建。

SGML的一大优点是它的灵活性。

SGML本身并不是一种格式，而是定义其他格式的一种规范，用户可以创建新格式来编码某类文件（如技术手册、电话号码薄等）的所有结构，只需先阅读定义，任何能使用SGML的软件都能读懂它。

人们已经为普通文档和十分专业化的文档建立了许多的文档类型定义（documenttypedefinitions，DTD）。

HTML只是一种DTD，或SGML的一种应用。

自1989年以来，HTML及万维网的使用和发展有了巨大的变化。

当NCSA（nationalcenterforsupercomputingapplications，国家超级计算机应用中心）在1993年初首次构建Mosaic浏览器时，NCSA的专家们把自己需要的特性添加到HTML中，包括直接插入图形。

当允许人们把位图、照片和图表放入到文档中以后，万维网的规模和使用出现了爆炸性的增长，第二年，HTML的发展很快。

HTML的新标记不时地被一个又一个的浏览器引入，有一些新标记流行起来，而有一些又消失了。

有些增加部分设计得很糟，很多甚至不遵从SGML规范。

到了1994年年中，HTML几乎以失控的状态发展。

在IETF（Internetengineeringtaskforce）主持下，1995年11月在瑞士日内瓦举行的第一次WWW会议上成立了一个HTML工作小组。

它的主要任务是把HTML形式化成为一种SGMLDTD，称之为HTMLLevel2（HTML2.0，由TimBerners-Lee最初设计的HTML被定义为Level1）。

标准化之后，HTML就可以被安全地扩展到将来的各个级别的版本，从而利用了SGML的实质性能和它的格式化结构。

尽管有关的各方从来没有取得完全一致的共识，但万维网联盟HTML工作组（worldwidewebconsortium'sHTMLworkinggroup）还是集中了1996年的万维网发展的成果，产生了HTML3.2版本。

自1990年以来HTML就一直被用作WorldWideWeb的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage的连结信息。

使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。

HTML4.0同样也加入了很多特定浏览器的元素和属性，但是同时也开始“清理”这个标准，把一些元素和属性标记为过时的，建议不再使用它们。

2.1.2基本结构

超文本标记语言的“超文本”，因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。

所谓标记，就是它采用了一系列的指令符号来控制输出的效果，这些指令符号用“<标签名字　属性>”来表示。

标签和属性也是HTML文档的最基本的组成元素。

超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。

例如：

头部信息

文档主体

　　其中在最外层，表示这对标记间的内容是HTML文档。

我们还会看到一些页面代码省略标记，因为.html或.htm文件被Web浏览器默认为是HTML文档。

之间包括文档的头部信息，如文档总标题等，若不需头部信息则可省略此标记。

标记一般不省略，表示正文内容的开始。

下面是一个最基本的超文本的源代码：

在IE浏览器中显示的效果如图2-1所示：

图2-1

2.1.3标签及属性

　　刚刚接触超文本，遇到的最大的障碍就是一些用<和>括起来的句子，我们称它为标签，是用来分割和标记文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。

HTML中的标签分为两类：

单标签和双标签。

（1）单标签：

某些标签只需单独使用就能完整地表达意思，这类标记的语法是：

　　<标签名称>

　　最常用的单标签是
,它表示换行。

（2）双标签：

由“始标签”和“尾标签”两部分构成，必须成对使用，其中“始标签”告诉Web浏览器从此处开始执行该标记所表示的功能，而“尾标签”告诉Web浏览器在这里结束该功能。

“始标签”前加一个斜杠（/）即成为尾标记。

这类标记的语法是：

　　<标签>内容

　　其中“内容”部分就是要被这对标记施加作用的部分。

例如你想突出对某段文字的显示，就将此段文字放在一标记中：

第一：

　　许多单标签和双标签的始标签内可以包含一些属性，其语法是：

<标签名字属性1=”值1”属性2=”值2”属性3=”值3”…>

　　各属性之间无先后次序，属性也可省略（即取默认值），例如单标签

带一些属性：

　　其中SIZE属性定义线的粗细，属性值取整数，缺省值为1；ALIGN属性表示对齐方式，可取LEFT（左对齐，缺省值），CENTER（居中），RIGHT（右对齐）；WIDTH属性定义线的长度，可取相对值，（由一对""号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的个数，如WIDTH="300"），缺省值是"100%"。

2.2页面布局与文字设计

2.2.1标题

一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签,其中n为标题的等级，HTML总共提供六个等级的标题，n越小，标题字号就越大，以下列出几个等级的标题：

一级标题

四级标题

六级标题

在页面中的显示效果如图2-2所示

图2-2

2.2.2换行

　　在编写HTML文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会被浏览器切掉。

因为，在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。

所以，我们对于自己需要断行的地方，应加上
标签。

请看下面的例子：

您可以做以下几项工作
1：

整理电脑磁盘中的多余文件
2：

删除系统还原的备份文件
3：

进行磁盘碎片整理。

在页面中的显示效果如图2-3所示

图2-3

2.2.3段落标签

　　为了排列的整齐、清晰，文字段落之间，我们常用

段落的开始由

来标记，段落的结束由

的开始就意味着上一个

的结束。

标签还有一个属性align，它用来指名字符显示时的对齐方式，一般值有center、left、right三种。

请看下面的例子：

天气预报

今天：

温度8℃-24℃。

白天：

晴间多云，夜间：

多云。

明天：

温度13℃-24℃。

白天：

多云，夜间：

晴间多云。

在页面中的显示效果如图2-4所示

图2-4

2.2.4水平线段

这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分。

表2-1

属性

描述

size

水平线的宽度

width

水平线的长，用占屏幕宽度的百分比或象素值来表示

align

水平线的对齐方式，有left、right、center三种

noshade

线段无阴影属性，为实心线段

　　我们可以用几个例子来说明这线段的用法：

实例1：

线段粗细的设定

这是第一条线段，无size设定，取内定值SIZE=1来显示

这是第二条线段，SIZE=5

这是第三条线段，SIZE=10

在页面中的显示效果如图2-5所示

图2-5

实例2：

线段长度的设定

这是第一条线段，无WIDTH设定，取WIDTH内定值100%来显示

这是第二条线段，WIDTH=50（点数方式）

这是第三条线段，WIDTH=50%（百分比方式）

在页面中的显示效果如图2-6所示

图2-6

实例3：

线段排列的设定

这是第一条线段，无ALIGN设定，（取内定值CENTER显示）

这是第二条线段，向左对齐BR>

这是第三条线段，向右对齐

在页面中的显示效果如图2-7所示

图2-7

2.2.5文字大小设置

　　提供设置字号大小的是标签，FONT有一个属性SIZE，通过指定SIZE属性就能设置字号大小，而SIZE属性的有效值范围为1~7，其中缺省值为3。

我们可以SIZE属性值之前加上“+”、“-”字符，来指定相对于字号初始值的增量或减量。

实例：

这是size=8的字体

这是size=7的字体

这是size=5的字体

这是size=3的字体

这是size=1的字体

这是size=-2的字体

这是size=-3的字体

在页面中的显示效果如图2-8所示

图2-8

2.2.6特殊字符

有些字符在HTML里有特别的含义，比如“<”号就表示HTML标签的开始，这个“<”号是不显示在我们最终看到的网页里的。

那如果我们希望在网页中显示一个小于号，该怎么办呢？

这就要说到HTML字符实体了。

一个字符实体分成三部分：

第一部分是一个&符号；第二部分是实体名字或者是“#“号加上实体编号；第三部分是一个分号。

比如，要显示“<”号，就可以写<或者<。

用实体名字的好处是比较好理解，一看lt，大概就猜出是小于（lessthan）的意思，但是其劣势在于并不是所有的浏览器都支持最新的实体名字。

而实体编号，各种浏览器都能处理。

但需要注意的是：

字符实体是区分大小写的。

通常情况下，HTML会自动截去多余的空格。

不管你加多少空格，都被看做一个空格。

比如你在两个字之间加了10个空格，HTML会截去9个空格，只保留一个。

为了在网页中增加空格，你可以使用 表示空格。

表2-2最常用的字符实体

显示结果

说明

实体名字

实体编号

空格

显示一个空格

<

小于

<

<

>

大于

>

>

&

&符号

&

&

"

双引号

"

"

2.2.7字体与样式

　　HTML提供了定义字体的功能，用FACE属性来完成这个工作。

FACE的属性值可以是本机上的任一字体类型，但有一点麻烦的是，只有用户端的电脑中装有相同的字体才可以在他的浏览器中出现你预先设计的风格。

实例：

在页面中的显示效果如图2-9所示

图2-9

　　为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果，现将常用的标签列举实例来看看效果如下：