2.1 HTML_Java Web程序设计（慕课版）-QQ阅读男生科幻网

上QQ阅读APP看书，第一时间看更新

2.1 HTML

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

什么是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所示。

图2-3　运行HTML文件

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

说明

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

2.1.2 HTML文档结构

HTML文档结构

HTML文档由4个主要标记组成，这4个标记主要有<html>、<head>、<title>、<body>。上节中为大家介绍的实例中，就包含了这4个标记，这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中提供了很多标记，可以用来设计页面中的文字、图片，定义超链接等。这些标记的使用可以使页面更加生动。下面为大家介绍HTML中的文本标记。

1. 换行标记

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

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

【例2-1】创建HTML页面，实现在页面中输出一首古诗。

　　<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页面中定义文字，并通过标题标记和段落标记设置页面布局。

　　<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】使用居中标记对页面中的内容进行居中处理。

　　<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>
　　      <center>
　　      <p>主要用于网页程序的开发。随着互联网的发展，越来越多的企业使用Java语言来开发自己的官方网站，
其中不乏世界500强企业。</p>
　　      </center>
　　      <h2>Java ME</h2>
　　      <center>
　　      <p>主要用于嵌入式系统程序的开发。</p>
　　      </center>
　　   </body>
　　</html>

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

5. 文字列表标记

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

图2-7　将页面中的内容进行居中处理

（1）无序列表

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

【例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　在页面中使用无序列表

（2）有序列表

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

【例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　在页面中插入有序列的列表

6. 区域标记

<span>标签是用来组合文档中的行内元素。它本身是没有固定的格式的，对它应用样式时，它将会对划好的区域进行渲染。

<div>标签与<span>标签类似，但两者的区别是：<span>标签是行内元素，而<div>则是块元素，<div>的作用范围比<span>更大。

【例2-6】使用<span>和<div>标签为指定区域添加样式。

　　<html>
　　<head>
　　</head>
　　<style>
　　#right {
　　     float: right;
　　        color: blue;
　　}
　　#center {
　　     font-family: 宋体;
　　     font-size: 24px;
　　     color: red;
　　}
　　</style>
　　<body>
　　     <a><span id="right">span效果</span></a>
　　     <div id="center">
　　     <a>div效果1</a><br /> <a>div效果2</a>
　　     </div>
　　</body>
　　</html>

运行本实例，结果如图2-10所示。

图2-10　<span>标签和<div>标签的使用效果

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-7】在页面中定义学生成绩表。

　　<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-11所示。

图2-11　在页面中定义学生成绩表

说明

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

2.1.5 HTML表单标记

<form>…<form>表单标记

经常上网的人对网站中的登录等页面肯定不会感到陌生。在登录页面中，网站会提供给用户用户名文本框与密码文本框以供访客输入信息。这里的用户名文本框与密码文本框就属于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属性：onSubmit属性用于指定当用户单击提交按钮时触发的事件。

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

下面的例子为创建表单，设置表单名称为form，当用户提交表单时，提交至action.html页面进行处理，代码如下。

【例2-8】定义表单元素，代码如下：

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

2. <input>表单输入标记

<input type="image" disabled="disabled" checked="checked" width="digit" <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-9】在该文件中首先应用<form>标记添加一个表单，将表单的action属性设置为register_deal.jsp，method属性设置为post，然后应用<input>标记添加获取用户名和E-mail的文本框、获取密码和确认密码的密码域、选择性别的单选按钮、选择爱好的复选按钮、提交按钮、重置按钮。关键代码如下：

　　<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-12所示。

图2-12　博客网站的注册页面

3. <select>…</select>下拉菜单标记

<select>…<select>下拉菜单标记

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

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

<select>标记的属性说明见表2-3。

表2-3　<select>标记的属性

【例2-10】在页面中应用<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-13所示。

图2-13　在页面中添加的下拉列表

4. <textarea>多行文本标记

<textarea>多行文本标记

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

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

<textarea>标记的属性说明见表2-4。

表2-4　<textarea>标记属性说明

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

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

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

图2-14　在页面的多行文本框中输入内容

2.1.6 超链接与图片标记

超链接与图片标记

HTML的标记有很多，本书由于篇幅有限不能一一为大家介绍，只能介绍一些文本标记。除了上面介绍的文本标记外，还有两个标记必须向大家介绍，超链接标记与图片标记。

1. 超链接标记<a>

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

　　<a href = ""></a>

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

2. 图像标记

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

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

这里的url是以当前项目的WebContent目录作为默认的根目录，例如，WebContent文件夹下有一个子文件夹images，其中有一个显示成功的图片，该图片访问路径就是“images/success.jpg”。

<img>标记的属性说明见表2-5。

表2-5　<img>标记的常用属性

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

【例2-12】在页面中添加表格，在表格中插入图片和超链接。

　　<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-15所示。

图2-15　页面中添加图片和超链接

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

图2-16　message.html页面的运行结果

本周热推：

给产品经理讲技术 Python数据可视化之matplotlib实践三维图形化C++趣味编程 WebAssembly原理与核心技术 SSM轻量级框架应用实战

2.1 HTML

2.1.1 创建第一个HTML文件

2.1.2 HTML文档结构

2.1.3 HTML文本标记

【例2-1】 创建HTML页面，实现在页面中输出一首古诗。

【例2-2】 在HTML页面中定义文字，并通过标题标记和段落标记设置页面布局。

【例2-3】 使用居中标记对页面中的内容进行居中处理。

【例2-4】 使用无序列表对页面中的文字进行排序。

【例2-5】 使用有序列表对页面中的文字进行排序。

【例2-6】 使用<span>和<div>标签为指定区域添加样式。