2.1 HTML标记语言_Java Web从入门到精通（第2版）-QQ阅读男生都市网

书名：Java Web从入门到精通（第2版）
作者名：明日科技
本章字数：4983字
更新时间：2020-11-28 17:38:15

2.1 HTML标记语言

视频讲解：光盘\TM\lx\2\01 HTML标记语言．mp4

相信所有读者都有上网冲浪的习惯。在浏览器的地址栏中输入一个网址，就会查阅到相应的网页内容。在网页中包含很多内容，如文字、图片、动画，以及声音和视频等。网页的最终目的是为访问者提供有价值的信息。提到网页设计，不得不提到HTML标记语言，HTML的全称是Hypertext Markup Language，即超文本标记语言。HTML用于描述超文本中内容的显示方式。使用HTML可以实现在网页中定义一个标题、文本或者表格等。本节将详细介绍HTML标记语言。

2.1.1 创建第一个HTML文件

编写HTML文件可以通过两种方式：一种是手工编写HTML代码，另一种是借助一些开发软件，例如Adobe公司的Dreamweaver或者微软公司的Expression Web等。在Windows操作系统中，最简单的文本编辑软件就是记事本。

下面介绍应用记事本编写第一个HTML文件。HTML文件的创建方法非常简单，具体步骤如下：

（1）选择“开始”/“程序”/“附件”/“记事本”命令。

（2）在打开的“记事本”窗口中编写代码，如图2.1所示。

图2.1 在记事本中输入HTML文件内容

（3）编写完成之后，需要将其保存为HTML格式文件。具体步骤为：选择记事本菜单栏中的“文件”/“另存为”命令，在弹出的“另存为”对话框的“保存类型”下拉列表框中选择“所有文件”选项，然后在“文件名”文本框中输入一个文件名。需要注意的是，文件名的后缀应该是．htm或者．html，如图2.2所示。

图2.2 保存HTML文件

说明

如果没有修改记事本的“保存类型”，那么记事本会自动将文件保存为．txt文件，即普通的文本文件，而不是网页类型的文件。

（4）设置完成后，单击“保存”按钮，则成功保存了HTML文件。此时，双击该HTML文件，就会显示页面内容，效果如图2.3所示。

这样，就完成了第一个HTML文件的编写。尽管该文件内容简单，但是却体现了HTML文件的特点。

图2.3 运行HTML文件

技巧

在浏览器的显示页面中右击，在弹出的快捷菜单中选择“查看源代码”命令，这时会自动打开记事本程序，显示的则为HTML源文件。

2.1.2 HTML文档结构

HTML文档由4个主要标记组成，这4个标记是<html>、<head>、<title>和<body>。2.1.1节介绍的实例中就包含了这4个标记，它们构成了HTML页面最基本的元素。

1.<html>标记

<html>标记是HTML文件的开头。所有HTML文件都是以<html>标记开头，以</html>标记结束。HTML页面的所有标记都要放置在<html>与</html>标记中，<html>标记并没有实质性的功能，但却是HTML文件不可缺少的内容。

说明

HTML标记是不区分大小写的。

2.<head>标记

<head>标记是HTML文件的头标记，作用是放置HTML文件的信息。如定义CSS样式代码可放置在<head>与</head>标记中。

3.<title>标记

<title>标记为标题标记。可将网页的标题定义在<title>与</title>标记中。例如在2.1.1节中定义的网页的标题为“HTML页面”，如图2.4所示。<title>标记被定义在<head>标记中。

图2.4 <title>标记定义页面标题

4.<body>标记

<body>是HTML页面的主体标记。页面中的所有内容都定义在<body>标记中。<body>标记也是成对使用的，以<body>标记开头，以</body>标记结束。<body>标记本身也具有控制页面的一些特性，例如控制页面的背景图片和颜色等。

本节中介绍的是HTML页面最基本的结构。要深入学习HTML语言，创建更加完美的网页，必须学习HTML语言的其他标记。

2.1.3 HTML常用标记

HTML中提供了很多标记，可以用来设计页面中的文字、图片，定义超链接等。这些标记的使用可以使页面更加生动，下面介绍HTML中的常用标记。

1．换行标记

要让网页中的文字实现换行，在HTML文件中输入换行符（Enter键）是没有用的，必须用一个标记告诉浏览器在哪里要实现换行操作。在HTML语言中，换行标记为<br>。

与前面介绍的HTML标记不同，换行标记是一个单独标记，不是成对出现的。下面通过实例来介绍换行标记的使用。

【例2.1】创建HTML页面，实现在页面中输出一首古诗。（实例位置：光盘\TM\sl\2\1）

关键代码如下：

        <html>
          <head>
            <title>应用换行标记实现页面文字换行</title>
          </head>
          <body>
            <b>
              黄鹤楼送孟浩然之广陵
            </b><br>
              故人西辞黄鹤楼，烟花三月下扬州。<br>
              孤帆远影碧空尽，唯见长江天际流。
          </body>
        </html>

图2.5 在页面中输出古诗

运行本实例，结果如图2.5所示。

2．段落标记

HTML中的段落标记也是一个很重要的标记，段落标记以<p>标记开头，以</p>标记结束。段落标记在段前和段后各添加一个空行，而定义在段落标记中的内容不受该标记的影响。

3．标题标记

在Word文档中，可以很轻松地实现不同级别的标题。如果要在HTML页面中创建不同级别的标题，可以使用HTML语言中的标题标记。在HTML中设定了6个标题标记，分别为<h1>～<h6>，其中<h1>代表1级标题，<h2>代表2级标题……<h6>代表6级标题。数字越小，表示级别越高，文字的字号也就越大。

【例2.2】在HTML页面中定义文字，并通过标题标记和段落标记设置页面布局。（实例位置：光盘\TM\sl\2\2）

关键代码如下：

        <html>
            <head>
            <title>设置标题标记</title>
            </head>
            <body>
            <h1>Java开发的3个方向</h1>
            <h2>Java SE</h2>
            <p>主要用于桌面程序的开发。它是学习Java EE和Java ME的基础，也是本书的重点内容。</p>
            <h2>Java EE</h2>
            <p>主要用于网页程序的开发。随着互联网的发展，越来越多的企业使用Java语言来开发自己的官方网站，
        其中不乏世界500强企业。</p>
            <h2>Java ME</h2>
            <p>主要用于嵌入式系统程序的开发。</p>
          </body>
        </html>

运行本实例，结果如图2.6所示。

图2.6 使用标题标记和段落标记设计页面

4．居中标记

HTML页面中的内容有一定的布局方式，默认的布局方式是从左到右依次排序。如果想让页面中的内容在页面的居中位置显示，可以使用HTML中的<center>标记。<center>标记以<center>标记开头，以</center>标记结尾。标记中的内容为居中显示。

对例2.2中的代码进行修改，使用居中标记将页面内容居中。

【例2.3】使用居中标记对页面中的内容进行居中处理。（实例位置：光盘\TM\sl\2\3）

关键代码如下：

        <html>
            <head>
            <title>设置标题标记</title>
            </head>
            <body>
            <center>
            <h1>Java开发的3个方向</h1>
            <h2>Java SE</h2>
            <p>主要用于桌面程序的开发。它是学习Java EE和Java ME的基础，也是本书的重点内容。</p>
            <h2>Java EE</h2>
            <p>主要用于网页程序的开发。随着互联网的发展，越来越多的企业使用Java语言来开发自己的官方网站，
        其中不乏世界500强企业。</p>
            <h2>Java ME</h2>
            <p>主要用于嵌入式系统程序的开发。</p>
            </center>
          </body>
        </html>

将页面中的内容进行居中后的效果如图2.7所示。

图2.7 将页面中的内容进行居中处理

5．文字列表标记

HTML语言中提供了文字列表标记，文字列表标记可以将文字以列表的形式依次排列。这种形式可以更加方便网页的访问者。HTML中的列表标记主要有无序的列表和有序的列表两种。

无序列表

无序列表是在每个列表项的前面添加一个圆点符号。通过符号<ul>可以创建一组无序列表，其中每个列表项以<li>表示。下面的实例为大家演示了无序列表的应用。

【例2.4】使用无序列表对页面中的文字进行排序。（实例位置：光盘\TM\sl\2\4）

关键代码如下：

        <html>
            <head>
            <title>无序列表标记</title>
            </head>
            <body>
            编程词典有以下几个品种：
            <p>
            <ul>
              <li>Java编程词典
              <li>VB编程词典
              <li>VC编程词典
              <li>.net编程词典
              <li>C#编程词典
            </ul>
          </body>
        </html>

本实例的运行结果如图2.8所示。

图2.8 在页面中使用无序列表

有序列表

有序列表和无序列表的区别是，使用有序列表标记可以将列表项进行排号。有序列表的标记为<ol>，每一个列表项前使用<li>。有序列表中的项目是有一定顺序的。下面对例2.4进行修改，使用有序列表进行排序。

【例2.5】使用有序列表对页面中的文字进行排序。（实例位置：光盘\TM\sl\2\5）

关键代码如下：

        <html>
            <head>
            <title>有序列表标记</title>
            </head>
            <body>
            编程词典有以下几个品种：
            <p>
            <ol>
              <li>Java编程词典
              <li>VB编程词典
              <li>VC编程词典
              <li>.net编程词典
              <li>C#编程词典
            </ol>
          </body>
        </html>

运行本实例，结果如图2.9所示。

图2.9 在页面中使用有序列表

2.1.4 表格标记

表格是网页中十分重要的组成元素。表格用来存储数据，包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号<table>表示。定义表格仅使用<table>是不够的，还需要定义表格中的行、列、标题等内容。在HTML页面中定义表格，需要学会以下几个标记。

表格标记<table>

<table>…</table>标记表示整个表格。<table>标记中有很多属性，例如width属性用来设置表格的宽度，border属性用来设置表格的边框，align属性用来设置表格的对齐方式，bgcolor属性用来设置表格的背景色等。

标题标记<caption>

标题标记以<caption>开头，以</caption>结束，标题标记也有一些属性，例如align、valign等。

表头标记<th>

表头标记以<th>开头，以</th>结束，也可以通过align、background、colspan、valign等属性来设置表头。

表格行标记<tr>

表格行标记以<tr>开头，以</tr>结束，一组<tr>标记表示表格中的一行。<tr>标记要嵌套在<table>标记中使用，该标记也具有align、background等属性。

单元格标记<td>

单元格标记<td>又称为列标记，一个<tr>标记中可以嵌套若干个<td>标记。该标记也具有align、background、valign等属性。

【例2.6】在页面中定义学生成绩表。（实例位置：光盘\TM\sl\2\6）

关键代码如下：

        <body>
        <table width="318" height="167" border="1" align="center">
          <caption>学生考试成绩单</caption>
          <tr>
            <td align="center" valign="middle">姓名</td>
            <td align="center" valign="middle">语文</td>
            <td align="center" valign="middle">数学</td>
            <td align="center" valign="middle">英语</td>
          </tr>
          <tr>
            <td align="center" valign="middle">张三</td>
            <td align="center" valign="middle">89</td>
            <td align="center" valign="middle">92</td>
            <td align="center" valign="middle">87</td>
          </tr>
          <tr>
            <td align="center" valign="middle">李四</td>
            <td align="center" valign="middle">93</td>
            <td align="center" valign="middle">86</td>
            <td align="center" valign="middle">80</td>
          </tr>
          <tr>
            <td align="center" valign="middle">王五</td>
            <td align="center" valign="middle">85</td>
            <td align="center" valign="middle">86</td>
            <td align="center" valign="middle">90</td>
          </tr>
        </table>
        </body>

图2.10 在页面中定义学生成绩表

运行本实例，结果如图2.10所示。

说明

表格不仅可以用于显示数据，在实际开发中，还常常用来设计页面。在页面中创建一个表格，并设置没有边框，之后通过该表格将页面划分为几个区域，并分别对几个区域进行设计，这是一种非常方便的设计页面的方式。

2.1.5 HTML表单标记

对于经常上网的人来说，对网站中的登录等页面肯定不会感到陌生。在登录页面中，网站会提供给用户用户名文本框与密码文本框，以供访客输入信息。这里的用户名文本框与密码文本框就属于HTML中的表单元素。表单在HTML页面中起着非常重要的作用，是用户与网页交互信息的重要手段。

1.<form>…</form>表单标记

表单标记以<form>标记开头，以</form>标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。<form>标记的基本语法如下：

        <form action = "url" method = "get'|"post" name = "name" onSubmit = "" target ="">
        </form>

<form>标记的各属性说明如下。

action属性

该属性用来指定处理表单数据程序的URL地址。

method属性

该属性用来指定数据传送到服务器的方式。它有两种属性值，分别为get与post。get属性值表示将输入的数据追加在action指定的地址后面，并传送到服务器。当属性值为post时，会将输入的数据按照HTTP协议中的post传输方式传送到服务器。

name属性

该属性指定表单的名称，程序员可以自定义其值。

onSubmit属性

该属性用于指定当用户单击提交按钮时触发的事件。

target属性

该属性指定输入数据结果显示在哪个窗口中，其属性值可以设置为_blank、_self、_parent和_top。其中，blank表示在新窗口中打开目标文件；_self表示在同一个窗口中打开，该项一般不用设置；_parent表示在上一级窗口中打开，一般使用框架页时经常使用；_top表示在浏览器的整个窗口中打开，忽略任何框架。

【例2.7】创建表单，设置表单名称为form，当用户提交表单时，提交至action.html页面进行处理。定义表单元素，代码如下：

        <form id="form1" name="form" method="post" action="action.html" target="_blank">
        </form>

2.<input>表单输入标记

表单输入标记是使用最频繁的表单标记，通过这个标记可以向页面中添加单行文本、多行文本、按钮等。<input>标记的语法格式如下：

        <input type="image" disabled="disabled" checked="checked" width="digit" height="digit" maxlength="digit"
        readonly="" size="digit" src="uri" usemap="uri" alt="" name="checkbox" value="checkbox">

<input>标记的属性如表2.1所示。

表2.1 <input>标记的属性

type属性是<input>标记中非常重要的内容，决定了输入数据的类型。该属性值的可选项如表2.2所示。

表2.2 type属性的属性值

【例2.8】在该文件中首先应用<form>标记添加一个表单，将表单的action属性设置为register_deal.jsp, method属性设置为post，然后应用<input>标记添加获取用户名和E-mail的文本框、获取密码和确认密码的密码域、选择性别的单选按钮、选择爱好的复选框、提交按钮和重置按钮。（实例位置：光盘\TM\sl\2\7）

关键代码如下：

        <body><form action=""method="post"name="myform">
            用户名：<input name="username"type="text"id="UserName4"maxlength="20">
            密码：<input name="pwd1" type="password" id="PWD14" size="20" maxlength="20">
            确认密码：<input name="pwd2" type="password" id="PWD25" size="20" maxlength="20">
            性别：<input name="sex" type="radio" class="noborder" value="男" checked>
                    男&nbsp;
                    <input name="sex" type="radio" class="noborder" value="女">
                    女
            爱好：<input name="like" type="checkbox" id="like" value="体育">
                  体育
                  <input name="like" type="checkbox" id="like" value="旅游">
                  旅游
                  <input name="like" type="checkbox" id="like" value="听音乐">
                  听音乐
                  <input name="like" type="checkbox" id="like" value="看书">
                  看书
            E-mail:<input name="email" type="text" id="PWD224" size="50">
                <input name="Submit" type="submit" class="btn_grey" value="确定保存">
                <input name="Reset" type="reset" class="btn_grey" id="Reset" value="重新填写">
                <input type="image" name="imageField" src="images/btn_bg.jpg">
        </form>

在页面中添加表单元素后，即形成了网页的雏形。页面运行结果如图2.11所示。

图2.11 博客网站的注册页面

3.<select>…</select>下拉列表框标记

<select>标记可以在页面中创建下拉列表框，此时的下拉列表框是一个空的列表，要使用<option>标记向列表中添加内容。<select>标记的语法格式如下：

        <select name="name" size="digit" multiple="multiple" disabled="disabled">
        </select>

<select>标记的属性如表2.3所示。

表2.3 <select>标记的属性

【例2.9】在页面中应用<select>标记和<option>标记添加下拉列表框和多行下拉列表框。关键代码如下：

        下拉列表框：
        <select name="select">
          <option>数码相机区</option>
          <option>摄影器材</option>
          <option>MP3/MP4/MP5</option>
          <option>U盘/移动硬盘</option>
        </select>
         &nbsp；多行列表框（不可多选）：
        <select name="select2" size="2">
          <option>数码相机区</option>
          <option>摄影器材</option>
          <option>MP3/MP4/MP5</option>
          <option>U盘/移动硬盘</option>
        </select>
         &nbsp；多行列表框（可多选）：
        <select name="select3" size="3" multiple>
          <option>数码相机区</option>
          <option>摄影器材</option>
          <option>MP3/MP4/MP5</option>
          <option>U盘/移动硬盘</option>
        </select>

运行本程序，可发现在页面中添加了下拉列表框，如图2.12所示。

图2.12 在页面中添加的下拉列表框

4.<textarea>多行文本标记

<textarea>为多行文本标记，与单行文本相比，多行文本可以输入更多的内容。通常情况下，<textarea>标记出现在<form>标记的标记内容中。<textarea>标记的语法格式如下：

        <textarea cols="digit" rows="digit" name="name" disabled="disabled" readonly="readonly" wrap="value">默认值
        </textarea>

<textarea>标记的属性如表2.4所示。

表2.4 <textarea>标记的属性

表2.5 wrap属性的可选值

【例2.10】在页面中创建表单对象，并在表单中添加一个多行文本框，文本框的名称为content, 6行30列，文字换行方式为hard。关键代码如下：

        <form name="form1" method="post" action="">
            <textarea name="content" cols="30" rows="5" wrap="hard"></textarea>
        </form>

运行本实例，在页面中的多行文本框中可输入任意内容，运行结果如图2.13所示。

图2.13 在页面的多行文本框中输入内容

2.1.6 超链接与图片标记

HTML语言的标记有很多，本书由于篇幅有限，只能介绍一些常用标记。除了上面介绍的常用标记外，还有两个标记需要介绍，即超链接标记和图片标记。

1．超链接标记

超链接标记是页面中非常重要的元素，在网站中实现从一个页面跳转到另一个页面，这个功能就是通过超链接标记来完成的。超链接标记的语法非常简单。其语法格式如下：

        <a href = ""></a>

属性href用来设定链接到哪个页面中。

2．图片标记

在浏览网站时通常会看到各式各样的漂亮图片，在页面中添加的图片是通过<img>标记来实现的。<img>标记的语法格式如下：

        <img src="uri" width="value" height="value" border="value" alt="提示文字" >

<img>标记的属性如表2.6所示。

表2.6 <img>标记的属性

下面给出具体实例，为读者演示超链接和图片标记的使用。

【例2.11】在页面中添加表格，在表格中插入图片和超链接。（实例位置：光盘\TM\sl\2\8）

关键代码如下：

        <table width="409" height="523" border="1" align="center">
          <tr>
            <td width="199" height="208">
            <img src="images/ASP.NET.jpg" />
            </td>
            <td width="194">
            <img src="images/C#.jpg"/>
            </td>
          </tr>
          <tr>
            <td height="35"align="center"valign="middle"><a href="message.html">查看详情</a></td>
            <td align="center"valign="middle"><a href="message.html">查看详情</a></td>
          </tr>
          <tr>
            <td height="227"><img src="images/Java.jpg"/></td>
            <td><img src="images/VB.jpg"/></td>
          </tr>
          <tr>
            <td height="35"align="center"valign="middle"><a href="message.html">查看详情</a></td>
            <td align="center"valign="middle"><a href="message.html">查看详情</a></td>
          </tr>
        </table>

运行本实例，结果如图2.14所示。

图2.14 在页面中添加图片和超链接

页面中的“查看详情”为超链接，当用户单击该超链接后，将转发至message.html页面，如图2.15所示。

图2.15 message.html页面的运行结果