贯通Java Web开发三剑客
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

1.4 HTML

HTTP 协议规定了如何在客户机浏览器和服务器 Web 应用之间交换信息和传送数据,但是并没有定义交换数据的格式以及浏览器在获取数据后如何按照数据创建者的意愿有效地显示数据。假如所有交换的数据都只是二进制数的文件,那么HTTP就和文件传输没什么区别了,而且现在的Web也就不会如此绚丽多彩了。正是HTML的出现,才使得Web逐渐发展得像现在这样的丰富多彩。

HTML的全称是HyperText Markup Language,即超文本标记语言。它是一种规范,这个规范定义了一系列标记以及这些标记的结构。浏览器可以将任何符合该规范的文档(通常为HTML或HTML文档)进行解析并且按照HTML文档的结构进行格式化展示。客户机浏览器和Web服务器可以通过互相交换HTML文档实现具有丰富格式信息的数据传送。如下是一个HTML文档的简单框架:

示例1.1

    <html>
    <head>
        <title>这是HTML标题</title>
    </head>
    <body>
        这是HTML内容
        </body>
    </html>

HTML 文档使用一系列标签将文本组织成特定的结构,并且可以通过特定的标签使得文档在浏览器中展示时可以引入丰富的颜色、图片、字体等信息。HTML 文档的结构是由标签包含关系标示的一种层次结构,顶层标签是<html>。

读者可以将编写的HTML文档保存到本地硬盘(后缀名为.htm或者.html),然后使用浏览器打开就可以看到HTML展示出来的效果。对于示例1.1中所示的HTML文档,读者可以将其保存为test.htm,然后用浏览器打开该文件,就可以看到如图1.6所示的效果:

图1.6 test.htm页面效果

1.4.1 标签和属性

HTML文档的内容通过一系列标签进行格式化,如示例1.1所示,<html>、<head>、</head>、</body>等都是HTML标签。HTML标签分为开始标签和结束标签,开始标签由一对尖括号括起来,尖括号中的文字是标签的名称,结束标签与开始标签有相同的名称,并且在左尖括号和标签名称之间加了一个/ ;HTML 中的大部分标签都是成对的,例如<html>和</html>、<head>和</head>;一对标签之间可以包含文字也可以包含其他标签。另外,有一种特殊的写法<tag/>,就是将 / 写在右尖括号的前面,这是<tag></tag>的简写形式,它表示<tag>标签中不包含任何内容。

HTML标签除了可以组织内容之外,大多数的HTML标签还可以定义一系列的属性用于补充说明标签的一些附加信息,属性都写在开始标签中,例如:

    <body bgcolor="red">
              ...
    </body>

表示将该HTML页面的背景色设置为红色。

1.4.2 常用标签

HTML 规范中定义了许多标签以及标签所能够定义的属性,有些标签用于说明一种格式信息,比如<br>、<p>等;有些标签用于说明一定的动作信息,比如<a>等;另一些标签用于插入指定的对象,比如<img>等。下面将对HTML中一些常用的标签及其常用的属性进行介绍。

1.页面标签

示例1.1给出了一个HTML文档的基本结构,其中用<html>、<head>、<title>和<body>规定了文档的整体结构,<head>标签中是头部信息,其中可以定义一些辅助信息,这些信息不会显示在浏览器页面的正文中,例如<title>定义了页面的标题,它显示在浏览器的标题栏上。<body>标签中的内容是HTML文档的主体,需要显示在浏览器页面正文中的内容全部写在该标签中。

<head>中除了可以包含<title>外,还可以包含其他的标签,其中常见的有以下两种。

● link:可以用于链接一些其他文档,最常见的是使用该标签链接样式表(Style Sheet),例如:

    <link rel="stylesheet" type="text/css" href="theme.css" />

● 表示链接theme.css,用它定义的样式作为本页的格式。样式表中定义了一系列文档中使用的样式格式,例如文字的颜色、字体、大小,页面的宽度等。

● meta:用于定义页面的一些元数据信息,最常见的是使用该标签定义页面的媒体格式和字符编码方式,例如:

    <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">

表示该页面的类型是text/html,字符编码格式是ISO—8859—1。

<body>标签的内容包含了html文档所要显示的绝大多数内容,所有需要在浏览器页面正文中显示的内容都必须定义在该标签中;而且,<body>标签的属性也可以用于规定整个页面的展示方式。<body>标签常见的属性如表1.1所示。

表1.1 body标签属性

2.格式标签

在HTML文件中文字的位置、文字之间的回车换行和空格等都不会被最终显示到浏览器上,要控制HTML文档中的文字最终如何在浏览器中布局,需要使用HTML的格式标签。HTML定义了丰富的用于定义格式的标签,例如,<p>、<br>等。

(1)文字的控制

文字有很多属性可以设置,例如大小、颜色、字体、是否加粗、是否斜体等。HTML 中提供了一个通用的标签用于设置文字的属性,即<font>,也有一些标签可以方便地设置文字的一种属性,例如<hx>(一系列标签<h1>、<h2>、<h3>、…的总称)可以方便地定义不同大小的文字。

<font>标签是一个用于设置文字字体的通用方法,它通过不同属性来设置文字的不同方面:size属性用于设置文字的大小、face属性用于设置字体、color属性用于设置文字的颜色;

<hx>标签是一组标签的总称,x可以是1、2、3、…它们都表示页面的标题,不同的x表示的标题级别不一样,x越大级别越低,所包含文字的字体也会越小;每个标题占一行。

<b>和<strong>标签表示将文字加粗;

<i>和<em>标签表示将文字变成斜体;

<u>标签表示给文字加下画线;

<s>和<strike>标签都表示给文字加一个中画线;

<sup>标签表示将文字作为上角标;

<sub>标签表示将文字作为下角标。

各种控制文字的标签示例如表1.2所示。

表1.2 各种控制文字的标签示例

(2)行的控制

<p>表示在该标签中的文字形成一个单独的段落,通常段落与段落之间有一个空行;

<br>表示换行,即该标签之前是一行,该标签之后是另外一行,如表1.3所示

表1.3 控制行的标签示例

(3)布局的控制

假如只能控制行,那得到的页面将只能像文本文件一样非常枯燥,HTML 提供了更多的标签以及标签的属性用于定义丰富的布局格式。

align 属性通常用于规定标签内容的对齐方式,<hx>、<p>、<div>标签都有该属性,可以通过将该属性的值指定为center、left或right以用于将内容居中、居左或居右对齐。

列表是一种经常使用的布局方式,HTML的<ul>标签用于定义无序的列表,<ol>标签用于定义有序的列表。<li>表示列表的一项,而且可以通过定义<li>标签的start属性指定有序列表的起始序号,定义<li> 标签的type属性指定序号的形状。

除此之外,HTML还有一个标签<pre>可以定义预格式化的文本,即该标签内的文字将不按HTML规范进行解析,而是将其中的内容原封不动、保持格式显示在浏览器中,如表1.4所示。

表1.4 控制布局的标签示例

3.表格

表格是HTML中使用最多也是最重要的一种技巧,通常大部分网页设计师用表格控制页面内容在整个页面中的分布,并且可以通过使用嵌套的表格将页面进行任意的划分。表格都用顶层标签<table>进行定义,<th>标签用于定义表头,<tr>标签用于定义一行,<td>标签用于定义一行中的一列,如表1.5所示。

表1.5 控制表格的标签示例

4.表单

表单在HTML中是非常重要的,它提供了一系列可以展现在浏览器中并且能够提供交互的功能组件,例如:文本框、密码框、文本域、按钮等。可以使用表格来组织表单中的组件,如表1.6所示。

表1.6 表单示例

Form 标签的 action 属性指向一个链接,当表单被提交时就会链接到该链接所指向的地址。button类型、reset类型和submit类型的input组件都是按钮,button按钮是普通的按钮,reset按钮可以将表单中的内容清空,submit按钮可以提交表单。

5.其他

除了以上介绍的这些标签外,HTML还有许多很重要和很常用的标签,例如:

<a>标签主要用于定义一个超链接,其href属性用于指定超链接的地址;

<img>标签用于在网页中以链接的方式加入一个图片,其src属性用于指定待链接图片的位置;

<hr>标签可以在页面上加一个水平的分隔线,如表1.7所示。

表1.7 其他标签示例

HTML有很多的标签,大部分标签也都定义了很多的属性,熟悉掌握它们对于Web应用开发是非常重要的。本章由于篇幅有限只能介绍非常有限的内容,希望读者在学习完本节后自己再收集一些资料自行学习。