3.1 熟悉HTML_Dreamweaver+PHP+MySQL动态网站开发案例课堂-QQ阅读男生都市网

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

3.1 熟悉HTML

HTML（Hypertext Markup Language）即超文本标记语言或超文本链接标记语言，其文件后缀名为.htm或.html，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。

HTML的结构包括头部（head）、主体（body）两大部分，其中，头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

3.1.1 我的第一个HTML页面

制作HTML页面时，可以使用记事本、写字板、Word、FrontPage、Dreamweaver及其他具有文字编排功能的工具，只要把最后生成的文件以.html为后缀名保存即可。但不同的开发工具具有不同的开发效率，这里，我们向读者推荐使用Dreamweaver。

可以利用Dreamweaver提供的页面和HTML代码之间相互转换的功能。如编写出HTML代码后，通过Dreamweaver，就可以马上看到相应的页面是什么样子了，反之亦然。当看到一个漂亮的页面时，通过Dreamweaver，即可知道它的HTML代码。

下面用Dreamweaver CS6创建一个空白的HTML文件，如图3-1所示。

图3-1 新建立的HTML页面

在“标题”文本框中输入“第一个HTML网页”，单击按钮，在窗口中输入“这是我制作的第一个页面”，如图3-2所示。

图3-2 标题及输入文字说明

我们把“代码”窗口中的代码复制出来进行分析，代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>第一个HTML网页</title>
</head>
<body>
这是我制作的第一个页面
</body>
</html>

读者可以注意到，上面的代码有以下几个最基本的特点：

●在代码中，有很多用<>括起的代码，这就是HTML语言的标记符号。

●代码主要由head和body两部分组成。

●代码中有很多成对出现的标记，如出现<html>后，在后面会出现与之对应的</html>；如前面出现<head>后，在后面会出现与之对应的</head>。在成对出现的标记中，第一个表示开始，第二个表示结束。并且结束的标记要多一个斜杠。

接下来看看这些标记所代表的意义。

●html：表示被<html>及</html>所包围起来的内容是一份HTML文件代码。不过，本标记也可以省略。

●head：此标记用来注明此份文件的作者等信息，除了<title>会显示在浏览器的标题列之外，其他的内容并不会显示出来，故<meta>也可以省略。

●meta：表示一个meta变量，其作用是声明信息或向Web浏览器提供具体的指令。

●title：表示该页面的标题，这两个标记中间的字符将会显示在浏览器的标题栏上，如上面示例中的“第一个HTML网页”就会显示在浏览器的标题栏上。

●body：被此标记所围起来的部分，即表示是HTML文件的内容，会被浏览器显示在窗口中。不过，本标记也可以省略。

3.1.2 HTML元素的属性

HTML元素可以拥有属性，属性用来扩展HTML元素的能力。

比如，我们可以使用一个bgcolor属性，使得页面的背景色成为红色，代码如下：

<body bgcolor="red">

属性通常由属性名和值成对构成，形如name=“value”。例如，上面例子中的bgcolor就是name，而red就是value。属性值一般用双引号包围起来。

属性通常只附加给开始标记，而不是结束标记。

3.1.3 body属性的设置

body标记作为网页的主体部分，有很多内置属性，这些属性用于设置网页的总体风格。主要属性如表3.1所示。

表3.1 body的主要属性

在上述属性中，各个颜色属性的值有两种表示方法：一种是使用颜色名称来指定，例如红色、绿色和蓝色分别用red、green和blue来表示；另一种是使用十六进制RGB格式来表示，表示形式为color=“#RRGGBB”或color=“RRGGBB”，其中RR是红色、GG是绿色、BB是蓝色，各颜色分量的取值范围为00~FF。例如，#00FF00表示绿色，#FFFFFF表示白色。

背景图片属性值是一个相对路径的图片文件名，如<body backgroud＝“bg.gif”>中bg.gif是背景图片的名字，实际是带相对路径的图片文件名字。

比如，我们做的这个页面放在d:\myweb\，而背景图片的位置放在c:\myweb\images\，那么就需要这样写了：

<body background="images\bg.gif">

3.1.4 字体属性的应用

网页主要是由文字及图片组成的，在网页中，那些千变万化的文字效果又是由哪些常用的标签进行控制的呢？本节主要介绍文字的大小、字体、样式及颜色控制。

1．文字的大小设置

提供设置文字外观的标记是font，font还有一个属性size，通过指定size属性，就能设置字号大小，而size属性的有效值范围为1~7，其中默认值为3。可以在size属性值之前加上“+”、“-”字符，来指定相对于字号默认值的增量或减量。

【例3.1】设置网页文字大小（实例文件：ch03\3.1.html）

<html>
<head>
<title>字号大小</title>
</head>
<body>
<font size=7>这是size=7的字体</font><P>
<font size=6>这是size=6的字体</font><P>
<font size=5>这是size=5的字体</font><P>
<font size=4>这是size=4的字体</font><P>
<font size=3>这是size=3的字体</font><P>
<font size=2>这是size=2的字体</font><P>
<font size=1>这是size=1的字体</font><P>
<font size=-1>这是size=-1的字体</font><P>
</body>
</html>

预览效果如图3-3所示。

图3-3 文字不同大小的样式

2．文字的字体与样式

HTML 4.0以上的版本提供了定义字体的功能，用face属性来完成这个工作。face的属性值可以是本机上的任一字体类型，但有一点需要注意，只有对方的电脑中装有相同的字体，才可以在其浏览器中出现预先设计的风格。该属性的使用格式如下：

<font face="字体">

【例3.2】设置文字的字体（实例文件：ch03\3.2.html）

<HTML>
<HEAD>
<TITLE>字体</TITLE>
</HEAD>
<BODY>
<CENTER>
<FONT face="楷体_GB2312">欢迎光临</FONT><P>
<FONT face="宋体">欢迎光临</FONT><P>
<FONT face="仿宋_GB2312">欢迎光临</FONT><P>
<FONT face="黑体">欢迎光临</FONT><P>
<FONT face="Arial">Welcome my homepage.</FONT><P>
<FONT face="Comic Sans MS">Welcome my homepage.</FONT><P>
</CENTER>
</BODY>
</HTML>

预览效果如图3-4所示。

图3-4 设置不同字体后的效果

HTML还提供了一些文本控制标记，可以产生文字的强调加粗、斜体、加下划线等效果。现将常用的标记列举如下。

●<b>...</b>：粗体。

●<i>...</i>：斜体。

●<u>...</u>：加下划线。

●<tt>...<tt>：打字机字体。

●<big>...</big>：大型字体。

●<small>...</small>：小型字体。

●<blink>...</blink>：闪烁效果。

●<em>...</em>：表示强调，一般为斜体。

●<strong>...</strong>：表示特别强调，一般为粗体。

●<cite>...</cite>：用于引证、举例，一般为斜体。

【例3.3】设置文字的样式（实例文件：ch03\3.3.html）

<html>
<head>
<title>字体样式</title>
</head>
<body>
<B>黑体字</B>
<P> <I>斜体字</I>
<P> <U>加下划线</U>
<P> <BIG>大型字体</BIG>
<P> <SMALL>小型字体</SMALL>
<P> <BLINK>闪烁效果</BLINK>
<P><EM>Welcome</EM>
<P><STRONG>Welcome</STRONG>
<P><CITE>Welcome</CITE></P>
</body>
</html>

预览效果如图3-5所示。

图3-5 不同字体的效果

3．文字的颜色

文字颜色设置的格式如下：

<font color=color_value>...</font>

这里的颜色值可以是一个十六进制数（用#作为前缀），也可以是以下16种常用颜色名称，如表3.2所示。

表3.2 常用的颜色值

【例3.4】设置文字的颜色（实例文件：ch03\3.4.html）

<HTML>
<HEAD>
<TITLE>文字的颜色</TITLE>
</HEAD>
<BODY BGCOLOR=000080>
<CENTER>
<FONT COLOR=WHITE>七彩网络</FONT><BR>
<FONT COLOR=RED>七彩网络</FONT> <BR>
<FONT COLOR=#00FFFF>七彩网络</FONT><BR>
<FONT COLOR=#FFFF00>七彩网络</FONT><BR>
<FONT COLOR=#FFFFFF>七彩网络</FONT> <BR>
<FONT COLOR=#00FF00>七彩网络</FONT><BR>
<FONT COLOR=#C0C0C0>七彩网络</FONT><BR>
</CENTER>
</BODY>
</HTML>

预览效果如图3-6所示。

图3-6 不同的文字颜色效果

4．位置控制

通过align属性，可以选择文字或图片的对齐方式。left表示向左对齐，right表示向右对齐，center表示居中。

【例3.5】设置文字的位置（实例文件：ch03\3.5.html）

<html>
<head>
<title>位置控制</title>
</head>
<body>
<div>
   <div align="left">你好!<br>
   </div>
   <div align="center">你好!<br>
   </div>
   <div align="right">你好!<br>
   </div>
</div>
</body>
</html>

预览效果如图3-7所示。

图3-7 文字位置控制的效果

另外，align属性也常常用在其他标记中，引起其内容位置的变动。

例如：

<P ALIGN=#>
<HR ALIGN=#>    #＝left／right／center
<H1 ALIGN=#>

5．无序号列表

无序号列表使用的一对标记是<UL>...</UL>，需要在每一个列表项前使用<LI>。其结构如下所示：

<UL>
   <LI>第一项
   <LI>第二项
   <LI>第三项
</UL>

【例3.6】设置无序号列表（实例文件：ch03\3.6.html）

<html>
<head>
<title>无序列表</title>
</head>
<body>
这是一个无序列表：<P>
<UL>
   国际互联网提供的服务有：
   <LI>WWW服务
   <LI>文件传输服务
   <LI>电子邮件服务
   <LI>远程登录服务
   <LI>其他服务
</UL>
</body>
</html>

预览效果如图3-8所示。

图3-8 无序列表的文字排版效果

6．序号列表

序号列表与无序号列表的使用方法基本相同，使用标签<OL></OL>，每一个列表项前使用<LI>。每个项目都有前后顺序之分，多数用数字表示。

其结构如下所示：

<OL>
   <LI>第一项
   <LI>第二项
   <LI>第三项
</OL>

【例3.7】设置有序号列表（实例文件：ch03\3.7.html）

<html>
<head>
<title>有序列表</title>
</head>
<body>
这是一个有序列表：<P>
<OL>
   国际互联网提供的服务有：
   <LI>WWW服务
   <LI>文件传输服务
   <LI>电子邮件服务
   <LI>远程登录服务
   <LI>其他服务
</OL>
</body>
</html>

预览效果如图3-9所示。

图3-9 有序列表的效果

3.1.5 在网页中插入图像

图像可以美化网页，插入图像使用单标记<img>。img标记的属性及描述如表3.3所示。

表3.3 img标记的属性

src属性用于指定图片源文件的路径，它是img标记必不可少的属性。语法格式如下：

<img src="图片路径">

图片的路径可以是绝对路径，也可以是相对路径。下面的实例是在网页中插入图片。

【例3.8】在网页中插入图像（实例文件：ch03\3.8.html）

<html>
<head>
<title>插入图片</title>
</head>
<body>
<img src="images/01.jpg">
</body>
</html>

在IE浏览器中的预览效果如图3-10所示。

图3-10 插入图片的效果

3.1.6 表格的使用

在网页中，表格是作为搭建网页结构框架的主要工具之一，因此，掌握好表格常用的标记也是非常重要的。

1．表格的基本结构

表格主要是嵌套在<table>和</table>标记里面的，一对<table>标签表示组成一个表格。下面列出与表格相关的基本标记。

●<table>...</table>：定义表格。

●<caption>...</caption>：定义表格标题。

●<tr>：定义表行。

●<th>：定义表头。

●<td>：定义表元（表格的具体数据）。

示例：

<table border=1>
   <tr><th>姓名</th><th>性别</th><th>年龄</th>
   <tr><td>李睦芳</td><td>男</td><td>22</td>
</table>

预览效果如图3-11所示。

图3-11 表格的效果

2．表格的标题

表格标题的位置，可由align属性来设置，其位置可以在表格上方和表格下方。下面为表格标题位置的设置格式。

设置标题位于表格上方：

<caption align=top>...</caption>

设置标题位于表格下方：

<caption align=bottom>...</caption>

示例：

<table border=1>
   <caption align=top>用户</caption>
   <tr><th>姓名</th><th>性别</th><th>年龄</th>
   <tr><td>李睦芳</td><td>男</td><td>22</td>
</table>

预览效果如图3-12所示。

图3-12 表格标题的效果

3．边框尺寸设置

边框是用border属性来体现的，它表示表格的边框边厚度和框线。将border设成不同的值，有不同的效果。

（1）格间线宽度

格与格之间的线为格间线，它的宽度可以使用<table>中的cellspacing属性加以调节。格式如下：

<table cellspacing=#> #表示要取用的像素值

（2）内容与格线之间的宽度

还可以在<table>中设置cellpadding属性，用来规定内容与格线之间的宽度。格式为：

<table cellpadding=#> #表示要取用的像素值

【例3.9】创建不同边框类型的表格（实例文件：ch03\3.9.html）

<html>
<body>
<h4>普通边框</h4>
<table border="1">
   <tr>
　　  <td>First</td>
   　 <td>Row</td>
   </tr>
   <tr>
   　 <td>Second</td>
   　 <td>Row</td>
   </tr>
</table>
<h4>加粗边框</h4>
<table border="8">
   <tr>
   　 <td>First</td>
   　 <td>Row</td>
   </tr>
   <tr>
   　 <td>Second</td>
   　 <td>Row</td>
   </tr>
</table>
</body>
</html>

在IE 9.0浏览器中预览网页，效果如图3-13所示。

图3-13 程序运行结果（创建不同边框类型的表格）

4．表格内文字的对齐与布局

表格中，数据的排列方式有两种，分别是左右排列和上下排列。左右排列是以align属性来设置的，而上下排列则由valign属性来设置。其中，左右排列的位置可分为三种：居左（left）、居右（right）和居中（center）；而上下排列比较常用的有四种：上齐（top）、居中（middle）、下齐（bottom）和基线（baseline）。

【例3.10】使用align属性可以排列单元格内容（实例文件：ch03\3.10.html）

<html>
<body>
<table width="400" border="1">
  <tr>
   <th align="left">项目</th>
   <th align="right">一月</th>
   <th align="right">二月</th>
  </tr>
  <tr>
   <td align="left">衣服</td>
   <td align="right">$241.10</td>
   <td align="right">$50.20</td>
  </tr>
  <tr>
   <td align="left">化妆品</td>
   <td align="right">$30.00</td>
   <td align="right">$44.45</td>
  </tr>
  <tr>
   <td align="left">食物</td>
   <td align="right">$730.40</td>
   <td align="right">$650.00</td>
  </tr>
  <tr>
   <th align="left">总计</th>
   <th align="right">$1001.50</th>
   <th align="right">$744.65</th>
  </tr>
</table>
</body>
</html>

在IE 9.0浏览器中预览网页，效果如图3-14所示。

图3-14 程序运行结果（使用align属性排列单元格内容）

5．合并与拆分单元格

要合并与拆分单元格，只须在<th>或<td>中加入rowspan或colspan属性，这两个属性的值，表明了单元格中要跨越的行或列的个数。

（1）用colspan属性合并左右单元格

左右单元格的合并需要使用td标记的colspan属性来完成，格式如下：

<td colspan="数值">单元格内容</td>

其中，colspan属性的取值为数值型整数数据，代表几个单元格进行左右合并。

例如，下面的例子在已有表格的基础上，将A1和B1单元格合并成一个单元格。为第一行的第一个<td>标记增加colspan=“2”属性，并且将B1单元格的<td>标记删除。

【例3.11】合并左右单元格（实例文件：ch03\3.11.html）

<html>
<head>
<title>单元格左右合并</title>
</head>
<body>
<table border="1">
  <tr>
   <td colspan="2">A1 B1</td>
   <td>C1</td>
  </tr>
  <tr>
   <td>A2</td>
   <td>B2</td>
   <td>C2</td>
  </tr>
  <tr>
   <td>A3</td>
   <td>B3</td>
   <td>C3</td>
  </tr>
  <tr>
   <td>A4</td>
   <td>B4</td>
   <td>C4</td>
  </tr>
</table>
</body>
</html>

在IE 9.0浏览器中预览网页，效果如图3-15所示。

图3-15 单元格左右合并

从预览图中可以看到，A1和B1单元格合并成一个单元格，C1还在原来的位置上。

注意

合并单元格以后，相应的单元格标记就应该减少，例如，A1和B1合并后，B1单元格的<td></td>标记就应该丢掉，否则单元格就会多出一个，并且后面单元格依次向右位移。

（2）用rowspan属性合并上下单元格

上下单元格的合并需要为<td>标记增加rowspan属性，格式如下：

<td rowspan="数值">单元格内容</td>

其中，rowspan属性的取值为数值型整数数据，代表几个单元格进行上下合并。

例如，下例在已有表格的基础上，将A1和A2单元格合并成一个单元格，为第一行的第一个<td>标记增加rowspan=“2”属性，并且将A2单元格的<td>标记删除。

【例3.12】合并上下单元格（实例文件：ch03\3.12.html）：

<html>
<head>
<title>单元格上下合并</title></head>
<body>
<table border="1">
  <tr>
   <td rowspan="2">A1</td>
   <td>B1</td>
   <td>C1</td>
  </tr>
  <tr>
   <td>B2</td>
   <td>C2</td>
  </tr>
  <tr>
   <td>A3</td>
   <td>B3</td>
   <td>C3</td>
  </tr>
  <tr>
   <td>A4</td>
   <td>B4</td>
   <td>C4</td>
  </tr>
</table>
</body>
</html>

在IE 9.0浏览器中预览网页效果，如图3-16所示。

图3-16 单元格上下合并

从预览图中可以看到，A1和A2单元格合并成了一个单元格。

通过上面对左右单元格合并和上下单元格合并的操作，读者会发现，合并单元格就是“丢掉”某些单元格。对于左右合并，就是以左侧为准，将右侧要合并的单元格“丢掉”；对于上下合并，就是以上侧为准，将下侧要合并的单元格“丢掉”。如果一个单元格既要向右合并，又要向下合并，该如何实现呢？

【例3.13】向右并向下合并（实例文件：ch03\3.13.html）

<html>
<head>
<title>单元格左右合并</title>
</head>
<body>
<table border="1">
  <tr>
   <td colspan="2" rowspan="2">A1B1<br>A2B2</td>
   <td>C1</td>
  </tr>
  <tr>
   <td>C2</td>
  </tr>
  <tr>
   <td>A3</td>
   <td>B3</td>
   <td>C3</td>
  </tr>
  <tr>
   <td>A4</td>
   <td>B4</td>
   <td>C4</td>
  </tr>
</table>
</body>
</html>

在IE 9.0浏览器中预览网页，效果如图3-17所示。

图3-17 两个方向合并单元格

从上面的代码可以看到，A1单元格向右合并B1单元格，向下合并A2单元格，并且A2单元格向右合并B2单元格。

6．表格的颜色

在表格中，既可以对整个表格填入底色，也可以对任何一行、一个单元格使用背景色。

●<table bgcolor=#>：设置表格的背景色彩格式。

●<tr bgcolor=#>：设置行的背景色彩格式。

●<th bgcolor=#>或<td bgcolor=#>：设置单元格的背景色彩格式。

【例3.14】为表格添加背景颜色（实例文件：ch03\3.14.html）

<!DOCTYPE html>
<html>
<body>
<h4>背景颜色：</h4>
<table border="1" bgcolor="green">
<tr>
  <td>100</td>
  <td>200</td>
</tr>
<tr>
  <td>300</td>
  <td>400</td>
</tr>
</table>
</body>
</html>

在IE 9.0浏览器中预览网页效果，如图3-18所示。

图3-18 程序运行结果（为表格添加背景颜色）

【例3.15】为单元格添加背景颜色（实例文件：ch03\3.15.html）

<!DOCTYPE html>
<html>
<body>
<h4>单元格背景</h4>
<table border="1">
<tr>
  <td bgcolor="red">100000</td>
  <td>200000</td>
</tr>
<tr>
  <td>200000</td>
  <td>300000</td>
</tr>
</table>
</body>
</html>

在IE 9.0浏览器中预览网页，效果如图3-19所示。

图3-19 程序运行结果（为单元格添加背景颜色）

3.1.7 表单的使用

留言板就是一个表单运用很好的例子。表单通常必须配合脚本或后台程序来运行才有意义，本小节以介绍各式表单为主，在本书后面章节中将介绍如何将表单与程序结合。

以下是常用表单及属性的代码示例及显示效果，如表3.4所示。

表3.4 常用表单及属性的代码示例及显示效果

续表

3.1.8 超链接的使用

如果没有链接，WWW（万维网）将失去存在的意义。文件链接是超链接中最常用的一种情形，基本语法格式如下：

<a href="字符串" target="字符串" title="字符串'>文本</a>

其中各属性的描述如下。

●href：该属性是必选项，用于指定目标端点的URL地址。

●target：该属性是可选项，用于指定一个窗口或框架的名称，目标文档将在指定窗口或框架中打开。如果省略该属性，则在超链接所处的窗体或框架中打开目标文档。

●title：该属性也是可选项，用于指定鼠标移到超链接时所显示的标题文字。

例如，建立一个搜狐的超链接，代码如下：

<a href="http://www.sohu.com">搜狐</a>