【MySQL学习笔记】第17章 PHP脚本和HTML标签-CFANZ编程社区

本章学习HTML的相关知识以及通过Web页面发送数据和接收数据的方法。

17.1 HTML源代码

HTML文件是按照HTML规则制作的文本文件。浏览器只会按照从web服务器发来的HTML文件的命令来配置图片文件等命令。

对于Chrome、Internet等浏览器，在页面上右键选择“查看网页源代码”即可让Web网页的源代码显示出来。

显示出来的源代码其实是一个HTML文件，这个文件由<html>或<a ~ /a>等用“<>”括起来的字符组成。用“<>”括起来的对象称为标签（tag），表示在这里显示XX内容、在这里显示XX的图片文件等命令。

17.2 制作Web页面的两种方法

17.2.1 制作静态Web页面

HTML文件由文本组成。只要理解了语法规则，就可以在记事本等编辑器中进行编写制作。制作静态Web页面有两种方式，“在编辑器中直接输入标签”和“使用软件制作标签”，通过这两种方式制作的Web页面的内容不会发生改变，Web也只会显示标签指定的内容。例如，对于一个为“晚上好”的Web页面，任何人在任何时候访问该页面，它都仅会显示“晚上好”。这样的Web页面就是静态Web页面。

17.2.2 制作动态Web页面

对于下面的脚本

<?php
if(date("G")<=6){
  print"不困吗？";
}elseif (date("G")<=9) {
  print"早上好！";
}elseif (date("G")<=18) {
  print"你好！";
}else {
  print"晚上好！";
}

执行以上脚本PHP会根据“时间”这个条件输出不同的内容。这种通过PHP脚本等程序间接地输出显示内容，而且内容会根据条件发生改变的Web页面称为动态Web页面。

17.2.3 浏览器不区分静态页面与动态页面

静态页面通过编辑器或网页制作软件来输入标签，从而生成HTML文件。第2中方法通过PHP等程序间接地、动态制作HTML文件。

对浏览器而言，这两种方法并没有什么区别，因为客户端显示的是完全相同的内容。

我们的目标是将于MySQL交互的成果制作成Web页面并将其发送回客户端。交互的结果并不总是一样的，一般需要使用PHP脚本操作MySQL，然后通过PHP脚本接收MySQL发送的结果，动态制作Web页面。

17.3 HTML的规则

HTML文件的扩展名为“.html”，如果包含PHP脚本则为“.php”
标签的写法

HTML通过编写<html>之类的标签来制作Web页面。大多数标签会像下面这样包含“开始标签”和“结束标签”，加上2者之间夹杂的字符串之后，整个部分称为元素。

<a>标签示例，也称为a元素：

与上面的href一样，“开始标签”中可以包含一些具体信息，这些信息称为属性。

很多标签不需要用到结束标签，如<br>。

HTML文件的结构

格式：

第1行是文档类型声明，之后使用<html>和</html>将整个文档括起来，并在其中编写head和body元素。

HTML文件的示例

代码（tag.html）：

<!DOCTYPE html>                      头文件
<html>                               HTML主体开始 
<head>                               标题链接开始
<title>SQL咖啡厅的页面</title>       标题和链接
</head>                              标题链接结束

<body>                               页面主体开始
欢迎光临SQL咖啡厅！                  显示在页面的主体
</body>                              页面主体结束
</html>                              HTML主体结束

在浏览器中打开URL：http://localhost/tag.html

注：如果显示出来的是乱码，则需要更改字符编码。

用" "和' '将属性括起来

现在设置链接https://www.csdn.net/ 跳转到CSDN首页，这时就可以使用<a>标签按照下面的方式进行编写：

<a href="https://www.csdn.net/">跳转到CSDN首页</a>

<a>和</a>之间编写的是作为链接显示的字符串；

链接地址在<a>标签的href属性中指定，a和href之间一定要加一个半角空格；

href= 设置的是属性值，属性值需要用" "或' '括起来。

17.4 使用PHP脚本输出HTML文件

练习使用PHP脚本编写一个点击链接后可以跳转到CSDN首页的Web页面。

PHP中使用print或echo动态编写HTML标签。

代码：

link.php

<?php
print"<!DOCTYPE html>";
print"<html>";
print"<head>";
print"<title>";
print"转到CSDN首页的链接";
print"</title>";
print"</head>";

print"<body>";
print"<a href='https://www.csdn.net/'>转到CSDN首页</a>";
print"</body>";
print"</html>";
?>

执行：

点击Web上的链接实现跳转：

17.5 需要记住的标签

<br>标签

<br>标签用于换行：

<hr>标签

<hr>标签最初用于创建水平线，但是在HTML5中它用于分隔段落。不过现在的浏览器一般都会生成水平线：

<img>标签

<img>标签用于显示图片，命令格式：<img src="图片中的URL" alt="替代文字">；

alt属性用于指定当不能显示图片时显示的文本内容。

这里注意，图片文件应储存在程序所在文件夹下。

<meta>标签

设置Web页面字符编码的方法：

一般来说，浏览器会自动识别发送过来的Web页面的字符编码，但有时也会出现错误发生乱码。这种情况下可以使用<meta>标签告诉浏览器应该使用是么样的编码。

格式：<meta charset="字符编码">；

17.6 使用CSS指定颜色和字体大小

17.6.1 指定背景的颜色

命令格式：

属性和属性值之间要用冒号（：）进行分隔。上面的命令是将背景设置成浅绿色的示例。

代码：

<?php
print"<body style='background-color:aqua'>";
?>

执行结果：

17.6.2 指定字符的大小和颜色

<div>或<p>

这两个标签指定style属性来设置整个段落的字体颜色和字体大小，<div>和<p>都用于将括起来的范围定义为块，不过二者的区别是，在<p>的情况下块的前后可以空出一行，而<div>不可以。

在需要设置多个属性的情况下，使用分好将属性隔开。

练习：使用<div>将字符串“这是SQL咖啡厅的公告板哦”设置为蓝色35号字。

<?php
print"<div style='color:blue;font-size:35pt'>";
print"这是SQL咖啡厅的公告板哦";
print"</div>";
?>

我们可以使用<span>标签的style属性来对同一行的一部分字符串进行设置：

<?php
print"这是SQL咖啡厅的<span style='font-size:50pt'>公告板</span>哦";
?>

17.7 Here Document 和 nl2br 函数

17.7.1 什么是Here Document

在17.4节学习的用于编写Web页面的脚本，输出HTML时需要多次输入print" "，Here Document能够将“<<< 表示结束的字符”到“表示结束的字符”之间的内容作为一连串的字符串进行处理。

格式（Here Document）：

<<<表示结束的字符
字符串
表示结束的字符;

使用Here Document编写17.4节的脚本：

<?php
$mozi=<<<eot   //(1)
<!DOCTYPE html>
<html>
<head>
<title>转到CSDN首页的链接</title>
</head>

<body>
<a href='https://www.csdn.net/'>转到CSDN首页</a>
</body>
</html>
eot;
print $mozi;  //(2)
?>

(1)的部分表示$mozi。在此范围内无须在意是否需要输入" "。

(2)的部分输出了$mozi。

也就是说，“$mozi=<<<eot”和“eot”之间的部分只写HTML的标签即可。

17.7.2 什么是nl2br函数

代码：

<?php
$str=<<<eot
你好
晚上好
eot;
print $str;
?>

上述代码的执行结果如下：

“你好”“晚上好”这两个字符串作为Here Document赋给了变量str，最后通过print输出，最后显示在一行中。

虽然在代码中上面两个字符串用2行表示，但是执行结果显示在一行中。

nl2br函数具有在字符串中的每个新行之前插入换行符（<br>）的功能。

执行下面的代码：

<?php
$str=<<<eot
你好
晚上好
eot;
print nl2br($str);
?>

执行结果：

17.8 使用PHP从浏览器发送和接收数据

17.8.1 浏览器和PHP文件之间的数据交换

当从浏览器操作MySQL时，数据的交换步骤：

（1）用户从浏览器显示的Web页面上发送请求；

（2）Web服务器上的PHP文件接收请求；

（3）php脚本与MySQL数据库进行交互；

（4）PHP脚本输出包含结果的Web页面，并将其发回浏览器；

（5）浏览器接收结果。

17.8.2 制作一个用于发送数据的Web页面send.html

建立如下机制：点击按钮，文本框输入的数据就会发送出去。

需要用到的组件有2个，即“按钮”和“文本框”。

当创建某种发送机制时，一般需要创建一个表单，然后在其中设置文本框和按钮等组件。

创建如下代码文件，命名为send.html保存在发布的问价夹中：

<form method="POST" action="receive.php">
<input type="text" name="a">
<div>
<input type="submit" value="发送">
</div>
</form>

<form>标签

<form>标签用于创建表单：

<form>标签中设置的重要属性
属性	内容
method	指定发送数据的方法，有POST和GET两种
action	指定发送数据的目标地址，即指定接收和处理数据的程序

<input>标签

通过在<form xx>和</form>之间编写<input>标签，我们可以设置用于输入发送数据的文本框，以及发送按钮等组件：

<input>标签中可以设置的重要属性
属性	内容
type	编写用于指定组件种类的字符串
name	设置要附加到组件的元素名称，该名称用于识别数据
size	设置文本框的宽度
value	当字符串显示在按钮等地方时，设置字符串内容

type属性的设置
描述	可设置的组件种类
type="submit"	可以发送数据的按钮
type="button"	按钮
type="text"	文本框
type="checkbox"	复选框
type="radio"	单选按钮
type="hidden"	隐藏（仅发送数据）

使用<input>标签的示例

（1）创建一个元素名称为a1且大小为50的文本框

<input type="text" name="a1" size="50">

（2）创建一个显示为“点击”的按钮

<input type="submit" value="点击">

（3）创建一个元素名为r1，发送的值为bad的单选按钮

<input type="radio" name="r1" value="bad">

确认创建的表单

<form method="POST" action="receive.php">
<input type="text" name="a">
<div>
<input type="submit" value="发送">
</div>
</form>

上述代码中：

（1）<form method="POST" action="receive.php">

<form>标签中添加了action="receive.php"，因此，点击发送按钮，就会将数据发送给名为receive.php的PHP脚本；

因为method属性指定了“POST”，所以会采用POST方法发送数据。

（2）<input type="text" name="a">

因为type属性为text，所以会创建一个文本框。name属性为a，因此接收数据的PHP脚本receive.php会以a这个名字来识别数据。

（3）<input type="submit" value="发送">

因为type属性为submit，所以设置的是可以发送数据的按钮，此外，value属性为“发送”,因此按钮属性上会显示发送这个词。

执行创建的表单：

17.8.3 创建receive.php以接收和显示数据

receive.php用于接收在send.html的文本框中输入的数据。

采用POST方法发送的数据会被变量$_POST接收，变量$_POST的格式如下：

$_POST["用于识别数据的元素名称"]

$_POST是PHP中预定义的变量名。POST发送的数据会作为数组保存在这个变量中，数组下标指定用于识别数据的元素名称。

这里文本框中附加了a这个用于识别数据的元素名称（name="a"）。因此，在receive.php中，如果指定"a"作为关联数组的下标，那么只要将变量写为$_POST["a"]，就可以接收发送过来的数据了。

创建将send.html发送过来的数据直接输出的receive.php：

<?php
print $_POST["a"];
?>

17.8.4 发送和接收数据

运行send.html，在文本框中输入要发送的字符串，点击发送按钮：

（1）运行send.html,输入“帆布”

（2）点击发送

17.9 通过POST和GET发送数据

17.9.1 发送和接收数据

POST

数据不在URL中
可以发送文本或二进制格式的数据

GET

将数据添加到URL中发送（数据可见，可能会发送非法数据）
只可以发送文本格式的数据
如果没有进行任何声明，将使用GET方法（默认）

17.9.2 使用GET方法发送数据

首先将上一节中的send.html和receive.php的发送方法改为GET：

get_send.html中的method="POST"改为method="GET"，由于接收方的receive.php名改为了get_receive.php，所以将action="receive.php"改为action="get_receive.php"。

<form method="GET" action="get_receive.php">
<input type="text" name="a">
<div>
<input type="submit" value="发送">
</div>
</form>

在get_receive.php中，将原receive.php中的$_POST改为$_GET。

<?php
print $_GET["a"];
?>

执行：

17.9.3 GET和POS

使用GET发送数据和显示结果与使用POST的情况如下：

当使用GET方法发送数据时，URL后面会显示?a=........之类的内容，而使用POST方法发送数据时，地址栏只会显示http://localhost/get_receive.php?

故，在使用GET方法的情况下，数据是作为URL的一部分发送的。

当使用GET方法时地址栏上显示的内容：

格式：URL?数据名称=数据

“数据名称”是name=“a”等附加在文本框上的“用于识别数据的元素名称”。如果发送的是中文等需要占2个字节的数据，会先将其转换为其他代码，然后发送。

17.9.4 试着用GET方法将值添加在URL上发送

练习：使用get_send.html发送数据“12345”.

在地址栏输入：http://localhost/get_receive.php?a=12345

执行：