html简介及php网页程序设计

《html简介及php网页程序设计》由会员分享，可在线阅读，更多相关《html简介及php网页程序设计（88页珍藏版）》请在金锄头文库上搜索。

1、HTML简介与 PHP网页程序设计,教学内容,HTML网页设计技术基础 HTML中多种元素的引用 PHP语言概述 PHP的数据与运算 顺序结构程序设计 选择结构程序设计 循环结构程序设计,7.1 HTML网页设计技术基础,HTML（Hyper Text Markup Language）即超文本标记语言，是用来描述因特网上网页内容和外观的标准语言。超文本指的是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本，超文本中还可以包含图像、音频、视频等非文本的多媒体元素。,HTML即超文本标记语言，是用来描述因特网上网页内容和外观的标准语言。 HTML标记：HTML文档中使用标记来定义并描述

2、HTML元素。所有的HTML标记都用一对尖括号括起来，如、等。 HTML标记的属性：在HTML文档中，定义并描述HTML元素的许多标记都有相应的属性，例如。 HTML源文件：使用.htm或.html作为文件扩展名,HTML网页设计技术基础,下面以记事本为例说明HTML文档的创建与调试过程。 打开记事本。 编辑：在记事本编辑区编辑HTML源代码。 保存：单击记事本窗口的菜单栏的“文件|保存”命令，并在“保存类型”下拉列表中选择“所有文件”。 浏览：要查看某个网页的浏览效果，可以直接双击该文件。也可以在浏览器中用“文件|打开”命令打开。 调试：如果在浏览器窗口显示的页面效果不理想，可以返回到步骤(

3、2)，反复修改测试直到满意为止。,HTML的基本语法结构,一个完整的HTML文档包含头部和主体两部分，一般由三对标记定义HTML文档的框架结构。 1. HTML的基本结构, 网页标题 文档主体内容 ,和 明确文档开始和结束； 和 定义文档的头部； 和 定义文档主体； 和 定义网页标题。 和 划分段落标记 段内换行标记，单标记 和 定义字体标记 可设置size 、color、 face 等属性 和 定义超链接,HTML的常用标记,在HTML源代码中，使用和定义表单 定义表单的基本结构如下： ,HTML中的表单,表单控件,表单通常包含两类元素，一类是只能供用户浏览的文字、图像、表格等普通元素，另一

4、类是用于用户与服务器之间交互的文本框、单选框、复选框等表单控件。 表单中使用标记定义表单中的输入控件，标记的type属性指定输入控件的类型。 name属性用于定义输入控件的名称，当表单发回服务器时，在表单数据中的每个值都与这个名称成对出现，这样，才能分析每个值的意义。value属性用于设置输入控件的初始值，单选按钮的该属性是必须设定的。,type属性用于指定表单输入控件类型，常用属性值有： text指定输入控件为单行文本框。 password指定输入控件为密码框。 checkbox指定输入控件为复选框。 radio指定输入控件为单选按钮。 submit指定输入控件为提交按钮。 reset指定输

5、入控件为重置按钮。,HTML中的表单, 网页制作 春雪 韩愈 新年都未有芳华，二月初惊见草芽。 白雪却嫌春色晚，故穿庭树作飞花。 新浪 姓名 ,7.1.1 HTML概述,（一）HTML的概念 HTML标记：HTML文档中使用标记来定义并描述HTML元素，HTML语言语法规定了一系列用于定义和描述HTML元素的符号，这些符号统称为HTML标记。所有的HTML标记都用一对尖括号括起来，如、等。多数标记是成对出现的（例如和），分别表示标记所定义范围的开始和结束；少数标记（例如）是单标记。 HTML标记的属性：在HTML文档中，定义并描述HTML元素的许多标记都有相应的属性，例如。所有属性都应该包含在

6、HTML的起始标记中，属性名与标记之间至少一个空格分隔，属性值要用英文半角的双引号括起来，有的属性值不括起来也可以。当属性值需要用双重引号时，其中一重用单引号。 HTML源文件：用HTML编写的超文本文档称为HTML源文件，可以使用任何文本编辑器编辑HTML源文件，存盘时使用.htm或.html作为文件扩展名即可。一个HTML文档对应一个网页，主页文件名默认为index.htm 或 index.html。 浏览器按顺序阅读HTML文档内容，然后根据标记及其属性的功能解释和显示所标记的元素。对书写错误的标记不做任何处理，且不停止也不影响其解释执行过程，设计者只能通过网页显示效果来分析出错原因和出

7、错位置。,下面以记事本为例说明HTML文档的创建与调试过程。 打开记事本。 编辑：在记事本编辑区编辑HTML源代码。 保存：单击记事本窗口的菜单栏的“文件|保存”命令，并在“保存类型”下拉列表中选择“所有文件”。 浏览：要查看某个网页的浏览效果，可以直接双击该文件。也可以在浏览器中用“文件|打开”命令打开。 调试：如果在浏览器窗口显示的页面效果不理想，可以返回到步骤(2)，反复修改测试直到满意为止。,（二）HTML的基本语法结构,一个完整的HTML文档包含头部和主体两部分，一般由三对标记定义HTML文档的框架结构。 1. HTML的基本结构, 网页标题 文档主体内容 ,2. 相关标记简介,和

8、明确文档开始和结束； 和 定义文档的头部； 和 定义文档主体； 和 定义网页标题。,7.1.2 HTML文档头部设计,HTML文档的头部（head）提供关于网页的标题、作者、搜索关键字等信息。其一般格式如下： 网页标题 ,【例7-1】网页头部设计示例。 HTML头部设计示例 在标记 之间定义的网页标题“HTML头部设计示例”，将显示在浏览器窗口的标题栏。 标记用于定义网页相关信息，该标记有多个属性，用于指定网页设计者、搜索关键字、网页刷新等信息。上例中定义了搜索引擎的搜索关键词为“大学之道，在明明德”。,7.1.3 HTML主体设计,在网页设计时，需要在浏览器窗口中显示的网页页面的所有内容（文

9、本、图像、音频、视频以及表格、表单元素等），都必须在HTML代码的主体标记与之间定义。,7.1.3 HTML主体设计,在网页设计时，需要在浏览器窗口中显示的网页页面的所有内容（文本、图像、音频、视频以及表格、表单元素等），都必须在HTML代码的主体标记与之间定义。 如何定义和描述这些元素，就是HTML主体设计部分要解决的问题。,7.1.3 HTML主体设计,（一）页面布局与基本标记 （二）HTML的文字格式设置 （三）文字列表 （四）文本的超链接,（一）页面布局与基本标记,1. 页面布局 (1) 网页背景 (2) 网页前景色 (3)网页页边距 2. 基本标记 （1）设置正文标题 （2）设置文字

10、段落标记 （3）设置文字换行标记 （4）设置文字不换行标记 （5）设置水平线标记 （6）设置代码注释标记,（1）设置正文标题,HTML源代码主体部分最基础的工作，是如何处理标题、段落、换行等问题，HTML是通过在源代码中设置相应的标记实现这些功能的。 在HTML源文件里定义正文标题，比较典型的是用标记定义（其中n=1,2,3,4,5,6），定义的字体由大到小，每个正文标题自成一段。也可以使用加以定义，其中m可以取值为1,2,3,4,5,6,7中的任意一个。,【例7-2】网页标题与正文标题示例。 网页标题与正文标题 态度决定一切 细节决定成败 知识成就未来 性格决定命运 乐观 坚强 阳光 进取！

11、 ,（二）HTML的文字格式设置,1. 设置文字属性 2. 设置文字格式 3. 插入字符实体,（三）文字列表,1.无序列表 2. 有序列表 3. 列表嵌套 （四）文本的超链接,7.2 HTML中多种元素的引用,7.2.1 HTML中多媒体元素的引用 7.2.2 HTML中的表格 7.2.3 HTML中的表单 7.2.4 HTML中的框架,7.2.1 HTML中多媒体元素的引用,（一） HTML图像标记及属性 （二）图像的超级链接,HTML支持的图像超链接包括普通图像链接和图像映射等。普通图像超链接是指以整个图像作为链接源的超级链接，当点击图像的任何部分时，都会打开同一个链接目标。图像映射也称之

12、为热点地图，是指以图像上的某些位置区域为链接源而建立的超级链接，点击链接源区域会打开相应的目标链接。在此，只讲述整幅图像为链接源的超级链接的建立方法。,定义格式如下： 【例7-4】图像及其超连接示例。 图像及其超连接 ,7.2.2 HTML中的表格,表格也是网页中常用的组成元素。利用表格可以将页面元素按行列排布，使版式更规整，有助于条理清晰地展示页面内容。 （一）建立表格 （二）表格属性行高、列宽及边框 （三）表格对齐,【例7-5】表格及其属性示例 表格示例 课程表 时间星期一星期二星期三星期四星期五 1-2节高等数学大学英语计算机基础人文修养军事理论 3-4节思修大学物理高等数学体育大学英语

13、 午间休息 5-6节大学英语人文修养军事理论计算机基础艺术欣赏 7-8节公选课体育思修高等数学 ,7.2.3 HTML中的表单,7.2.3 HTML中的表单,（一）创建表单在HTML源代码中，使用标记定义表单，在和之间定义组成表单的具体元素。 定义表单的基本结构如下： ,（二）表单控件及其制作,表单通常包含两类元素，一类是只能供用户浏览的文字、图像、表格等普通元素，另一类是用于用户与服务器之间交互的文本框、单选框、复选框等表单控件。 表单中使用标记定义表单中的输入控件，标记的type属性指定输入控件的类型。 name属性用于定义输入控件的名称，当表单发回服务器时，在表单数据中的每个值都与这个名

14、称成对出现，这样，才能分析每个值的意义。value属性用于设置输入控件的初始值，单选按钮的该属性是必须设定的。,（二）表单控件及其制作（续）,其一般格式如下： type属性用于指定表单输入控件类型，常用属性值有： text指定输入控件为单行文本框。 password指定输入控件为密码框。 checkbox指定输入控件为复选框。 radio指定输入控件为单选按钮。 submit指定输入控件为提交按钮。 reset指定输入控件为重置按钮。,（二）表单控件及其制作（续）,(1) 单行文本框和密码框 若希望访问者输入字符、数字、密码或者其他一些信息时，就会用到表单中的文本框和密码框。用标记定义单行文本

15、框和密码框。 例如： 此例创建了名称为“姓名”的文本框，宽度为12，最多可输入20个字符，type的属性值text表示是文本框，该文本框的初始信息为“请输入姓名”。 图7-9 单行文本框和密码框 例如： 此例创建了文本框的名称为“密码”、宽度为12，最多可输入16个字符，文本框的初始信息为“请输入密码”。因为 type属性值为password，所以文本显示为一串”*”或”，浏览效果如图7-9所示。,(2)复选框和单选按钮 在表单的一组复选框中，可以选择一个或多个复选框。在表单的一组单选按钮中，只能选择其中的一个。例如： 兴趣爱好：文学 艺术 旅游 性别：男 图7-10复选框与单选按钮的创建 t

16、ype属性值“checkbox”定义复选框，type属性值“radio”定义单选按钮。 通常情况下，需要为一组复选框、单选框指定一个内部名称（由name属性指定），同一组复选框、单选框中的name属性值必须相同；还可以使用checked为复选框或单选框预设一个初始选择项，而用户输入的选择项作为当前值。浏览效果如图7-10所示。,(3) 命令按钮 当用户完成了表单信息填写后，需要提交表单信息；如果填写失误，希望回复到表单填写前的状态，则需要重置；除此以外，有时还处理特定的响应事件。在HTML源代码中，通过定义相应的命令按钮，就可以实现上述的功能。常用的命令按钮有：提交（submit）按钮、重置（reset）按钮、自定义（button）按钮等。例如： 图7-11 命令按钮 上述代码创建了三个命令按钮，其中，type属性值为“submit”指定创建一个发送功能的提交按钮，值为“reset”指定创建一个重置按钮，值为“button” 表示创建自定义按钮；value属性值指定按钮