PHP网络编程学习笔记
上QQ阅读APP看本书，新人免费读10天
设备和账号都新为新人
上一章目录下一章

1.2 HTML基础

HTML（Hypertext Markup Language）超文本标记语言是一种网页设计的描述语言，它是一种结构化的文档，包括标题、正文、字体、对齐方式等信息。HTML定义了一系列的标记符号，网页设计者使用这些标记即可创建效果丰富的页面，本节将重点讲解HTML语言的常用标记的使用方法。

1.2.1 HTML标记语言

网页浏览者每天都在和HTML打交道，我们看到许多网站的页面都以html后缀结尾，HTML页面表示静态页面，它不和数据库服务器交互，只是用于描述页面的展现，后面我们讲解的以php为后缀的页面表示动态页面，主要用于处理程序的逻辑、存取数据的方法。

HTML文件都是以＜html＞标记开头，以＜/html＞标记结束。＜head＞…＜/head＞用于描述文件的头部信息，＜title＞…＜/title＞间的内容描述HTML文档的标题，而且它的内容将显示在浏览器的标题栏。＜body＞…＜/body＞之间代码是HTML文档的主体，它由许多标记嵌套而成，这些标记有不同的使用方法，表1-1列举了一些常用的HTML标记。

表1-1 HTML常用标记的含义

下面通过一段简单的HTML语言的代码，来说明HTML语言的基本结构和各元素的功能。为了更直观地表现HTML中各元素的功能，代码中标注的序号①②③④与图1-8中序号相互对应。

范例程序，HTML标记的结构：

图1-7描述了上述HTML文档的结构关系。

图1-7 HTML文档结构的解析树

浏览器中的运行效果如图1-8所示。

图1-8 HTML示例文档效果图

1.2.2 JavaScript语言基础

在讲解form表单前，需要对JavaScript有一定的了解，JavaScript是一种客户端脚本语言，JavaScript可以被嵌入到HTML的页面中，实现对用户触发事件的响应，如form表单的验证。当用户提交数据后，JavaScript实现的响应不会通过网络传输数据，而直接由客户端的应用程序处理。运行JavaScript脚本不需要额外环境，只要运行浏览器即可。

JavaScript语法格式：

    ＜script language="JavaScript"＞
                  ……
            ＜/script＞

下面给出一个简单的例子，输出字符串“Hello World!”，范例程序js.html：

            ＜html＞
            ＜body＞
              ＜script language="JavaScript"＞
              document.write("Hello World!")
              ＜/script＞
            ＜br＞
            ＜/body＞
            ＜/html＞

下面给出一个更复杂的例子，这个例子定义了一个脚本函数，用于输出一个对话框。当单击页面上的按钮后将弹出一个对话框，通过这个例子读者可以更清楚地认识到JavaScript脚本的响应过程，范例程序js2.html：

onBlur事件表示失去焦点事件,this.value表示当前input对象的输入值。js2.html效果如图1-9所示。

图1-9 JavaScript的事件响应

注意：

在＜script＞标签中使用了＜!-- … //--＞，这些标记是必需的，由于有些浏览器无法识别JavaScript脚本，使用这些标记可以避免程序出错。

JavaScript提供了丰富的事件处理事件,表1-2列出了常用事件的含义:

表1-2 JavaScript常用事件的含义

注意：

不同的事件适应的浏览器版本有所不同，读者使用IE6.0以上版本就不会存在事件不兼容的问题。

1.2.3 HTML Form表单

表单（form）是实现静态页面和服务器脚本进行交互的一个标签，它主要用于获得用户输入的信息，并将用户输入的数据送到服务器端的程序 (比如PHP)，服务器端程序可以根据表单传过来的数据，把相应的处理结果反馈给用户浏览器。

通过HTML表单对象，用户可以输入文字、密码，还可以在下拉框中进行选择，常用的HTML表单对象如表1-3所示。

表1-3 常见的表单对象

下面这段代码实现了用户名和密码表单样式的展现，范例程序form.html：

下面这个例子结合JavaScript脚本讲解checkbox标签的使用。如果复选框选中，单击按钮后，复选框的状态为未选中；如果复选框未选中，则单击按钮后，复选框的状态为选中。范例程序checkbox.html：

下面这个例子实现了下拉框的添加删除操作，范例程序select.html：

                  ＜option value=3＞orange＜/option＞
                ＜/select＞
                ＜form id="form1" name="form1" method=""＞
                  ＜input type="button" value="add" onclick="addOption('fruit',4)"＞
                  ＜input type="button" value="del" onclick="delOption(0);"＞
                ＜/form＞
              ＜/body＞
              ＜/html＞

当单击“add”按钮后，下拉框中将添加一个项目“fruit”，该项目的实际值为4。当单击“del”按钮后，下拉框中的第一个值将被删除。

注意：

form表单有两种提交方法，get方法和post方法，这两种方式与1.1.3节所介绍的get请求和post请求对应。

1.2.4 CSS样式表

CSS是Cascading Style Sheets的简称，译成中文是“层叠样式表”，它是一种设计网页样式的工具。CSS可以有效地对页面的布局、字体、颜色、背景等进行控制，借助它的强大功能可以设计出精美的网页。

在网页中应用CSS样式表有三种方法。

1 直接将样式写在HTML的标记中，该样式只对所在的标记起作用；

2 采用内联的方式，把网页的样式嵌套到HTML页面的＜head＞标签中，样式表使用＜style＞标签，该样式表只对样式所在的网页有效；

3 采用外联的方式，将样式写在一个以.css为后缀的文件中，在需要用到这些样式的网页里引用这个CSS文件。如果要改变样式，只要对一处CSS规则进行更新，这样所有的网页都可以共享这个CSS文件。

层叠样式表的基本语法：

HTML标志 { 标志属性：属性值；标志属性：属性值；标志属性：属性值；…… }

下面给出三段代码，分别采用上述三种调用CSS文件的方式，读者可以比较出它们之间的异同。

采用直接嵌入HTML页面的方式编写样式表，范例程序css1.html：

          ＜tr＞
            ＜td＞＜h2 align="center"＞CSS＜/h2＞＜/td＞
            ＜td＞＜h2 align="center"＞HTML＜/h2＞＜/td＞
            ＜td＞＜h2 align="center"＞PHP＜/h2＞＜/td＞
          ＜/tr＞
          ＜/table＞
          ＜/body＞
          ＜/html＞

采用内联方式编写样式表，范例程序css2.html：

                  ＜td＞＜h2 class="style2"＞CSS＜/h2＞＜/td＞
                  ＜td＞＜h2 class="style2"＞HTML＜/h2＞＜/td＞
                  ＜td＞＜h2 class="style2"＞PHP＜/h2＞＜/td＞
                ＜/tr＞
                ＜/table＞
                ＜/body＞
                ＜/html＞

css3.html页面对应的样式表文件css3.css如下所示：

    table.style1{border-width:thin;border:dashed;color:red;font-size:10pt;}
    h2.style2{text-align:center;}

上面三种调用CSS样式文件的方式将产生同样的效果，如图1-10所示。

图1-10 调用CSS样式表的效果图

第三种调用方式是我们开发中常用的方式，把CSS样式单独放在一个文件中便于代码的维护，同时使HTML页面更加清晰。

上一章目录下一章