HTML简介与PHP网页程序设计
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
（一）HTML的概念 HTML标记：HTML文档中使用标记来定义并描述HTML元素，HTML语言语
法规定了一系列用于定义和描述HTML元素的符号，这些符号统称为HTML标 记。所有的HTML标记都用一对尖括号括起来，如<html>、<br>等。多数标 记是成对出现的（例如<head>和</head>），分别表示标记所定义范围的开 始和结束；少数标记（例如<br>）是单标记。 HTML标记的属性：在HTML文档中，定义并描述HTML元素的许多标记都有 相应的属性，例如<body bgcolor="blue">。所有属性都应该包含在HTML的 起始标记中，属性名与标记之间至少一个空格分隔，属性值要用英文半角的双 引号括起来，有的属性值不括起来也可以。当属性值需要用双重引号时，其中 一重用单引号。 HTML源文件：用HTML编写的超文本文档称为HTML源文件，可以使用任何 文本编辑器编辑HTML源文件，存盘时使用.htm或.html作为文件扩展名即可。 一个HTML文档对应一个网页，主页文件名默认为index.htm 或 index.html。 浏览器按顺序阅读HTML文档内容，然后根据标记及其属性的功能解释和显示 所标记的元素。对书写错误的标记不做任何处理，且不停止也不影响其解释执 行过程，设计者只能通过网页显示效果来分析出错原因和出错位置。
7.2.1 HTML中多媒体元素的引用
（一） HTML图像标记及属性 （二）图像的超级链接
HTML支持的图像超链接包括普通图像链接和图像映 射等。普通图像超链接是指以整个图像作为链接源的超 级链接，当点击图像的任何部分时，都会打开同一个链 接目标。图像映射也称之为热点地图，是指以图像上的 某些位置区域为链接源而建立的超级链接，点击链接源 区域会打开相应的目标链接。在此，只讲述整幅图像为 链接源的超级链接的建立方法。
HTML文档的头部（head）提供关于网页的标题、作者 、搜索关键字等信息。其一般格式如下：
<head> <title> 网页标题</title>
<meta> </head>
【例7-1】网页头部设计示例。 <html> <head>
<title>HTML头部设计示例</title> <meta name="keywords" content="大学之道，在明明德"> </head> </html>
在标记<title> </title>之间定义的网页标题“HTML头部设计 示例”，将显示在浏览器窗口的标题栏。
<meta>标记用于定义网页相关信息，该标记有多个属性，用 于指定网页设计者、搜索关键字、网页刷新等信息。上例中定 义了搜索引擎的搜索关键词为“大学之道，在明明德”。
7.1.3 HTML主体设计
※ <br>
段内换行标记，单标记
※ <font>和</font> 定义字体标记
※可设置size 、color、 face 等属性
※ <a>和</a>
定义超链接
HTML中的表单
在HTML源代码中，使用<form>和</form>定义表单 定义表单的基本结构如下： <form >
<input type=控件类型 value=控件选项值 name=控件选项名称 >
【例7-5】表格及其属性示例
<html> <head>
<title>表格示例</title> </head> <body> <font size="6" color="red"><b> <table height="300" width="400" align="center" border="1" bordercolor="green"
（1）设置正文标题
HTML源代码主体部分最基础的工作，是如何处理标 题、段落、换行等问题，HTML是通过在源代码中设 置相应的标记实现这些功能的。
在HTML源文件里定义正文标题，比较典型的是用 <hn> 标 记 定 义 （ 其 中 n=1,2,3,4,5,6 ） ， 定 义 的 字 体由大到小，每个正文标题自成一段。也可以使用 <font size=m> 加 以 定 义 ， 其 中 m 可 以 取 值 为 1,2,3,4,5,6,7中的任意一个。
调试：如果在浏览器窗口显示的页面效果不理想，可 以返回到步骤(2)，反复修改测试直到满意为止。
（二）HTML的基本语法结构
一个完整的HTML文档包含头部和主体两部分，一般由三 对标记定义HTML文档的框架结构。
1. HTML的基本结构
<html> <head>
<title>网页标题</title> </head> <body>
如何定义和描述这些元素，就是HTML主体设 计部分要解决的问题。
7.1.3 HTML主体设计
（一）页面布局与基本标记 （二）HTML的文字格式设置 （三）文字列表 （四）文本的超链接
（一）页面布局与基本标记
1. 页面布局
(1) 网页背景 (2) 网页前景色 (3)网页页边距 2. 基本标记 （1）设置正文标题 （2）设置文字段落标记 （3）设置文字换行标记 （4）设置文字不换行标记 （5）设置水平线标记 （6）设置代码注释标记
height="280" border="2" align="center" align= "middle"> </a> </body> </html>
7.2.2 HTML中的表格
表格也是网页中常用的组成元素。利用表格可以将页面元 素按行列排布，使版式更规整，有助于条理清晰地展示 页面内容。
（一）建立表格 （二）表格属性——行高、列宽及边框 （三）表格对齐
下面以记事本为例说明HTML文档的创建与调试过程。
打开记事本。
编辑：在记事本编辑区编辑HTML源代码。
保存：单击记事本窗口的菜单栏的“文件|保存”命令 ，并在“保存类型”下拉列表中选择“所有文件”。
浏览：要查看某个网页的浏览效果，可以直接双击该 文件。也可以在浏览器中用“文件|打开”命令打开。
【例7-2】网页标题与正文标题示例。
<html> <head> <title> 网页标题与正文标题</title> </head> <body>
<h1>态度决定一切 </h1> <h2>细节决定成败</h2> <h3>知识成就未来</h3> <h4>性格决定命运</h4> <h5>乐观 坚强 </h5> <h6>阳光 进取！</h6> </body> </html>
➢ HTML源文件：使用.htm或.html作为文件扩展名
下面以记事本为例说明HTML文档的创建与调试过程。
打开记事本。
编辑：在记事本编辑区编辑HTML源代码。
保存：单击记事本窗口的菜单栏的“文件|保存”命令 ，并在“保存类型”下拉列表中选择“所有文件”。
浏览：要查看某个网页的浏览效果，可以直接双击该 文件。也可以在浏览器中用“文件|打开”命令打开。
文档主体内容 </body> </html>
2. 相关标记简介
<html>和</html> 明确文档开始和结束； <head>和</head> 定义文档的头部； <body>和</body> 定义文档主体； <title>和</title> 定义网页标题。
7.1.2 HTML文档头部设计
定义格式如下： <a href=" 超 链 接 的 目 标 地 址 "><img src=" 链 接 源 图 片 名 "
></a> 【例7-4】图像及其超连接示例。
<html> <head> <title>图像及其超连接</title> </head> <body> <a href=""> <img src=" 母 亲 .jpg" alt=" 母 亲 是 一 所 大 学 " width="300"
HTML中的表单
type属性用于指定表单输入控件类型，常用属性值有： text——指定输入控件为单行文本框。 password——指定输入控件为密码框。 checkbox——指定输入控件为复选框。 radio——指定输入控件为单选按钮。 submit——指定输入控件为提交按钮。 reset——指定输入控件为重置按钮。
<p> <form> <font size=5 color=green face="宋体">姓名</font> <input type=text name="xm" > <input type=submit value="提交" > </form> </p> </body> </html>
7.1.1 HTML概述
HTML PHP网页程序设计
教学内容
➢ HTML网页设计技术基础 ➢ HTML中多种元素的引用 ➢ PHP语言概述 ➢ PHP的数据与运算 ➢ 顺序结构程序设计 ➢ 选择结构程序设计 ➢ 循环结构程序设计
7.1 HTML网页设计技术基础
HTML（Hyper Text Markup Language）即超文本 标记语言，是用来描述因特网上网页内容和外 观的标准语言。超文本指的是用超链接的方法 ，将各种不同空间的文字信息组织在一起的网 状文本，超文本中还可以包含图像、音频、视 频等非文本的多媒体元素。
在网页设计时，需要在浏览器窗口中显示的网页 页面的所有内容（文本、图像、音频、视频以及 表格、表单元素等），都必须在HTML代码的主 体标记<body>与</body>之间定义。
7.1.3 HTML主体设计
在网页设计时，需要在浏源自文库器窗口中显示的网 页页面的所有内容（文本、图像、音频、视频 以及表格、表单元素等），都必须在HTML代 码的主体标记<body>与</body>之间定义。
文档主体内容 </body> </html>
HTML的常用标记
※ <html>和</html> 明确文档开始和结束；
※ <head>和</head> 定义文档的头部；
※ <body>和</body> 定义文档主体；
※ <title>和</title> 定义网页标题。
※ <p>和</p>
划分段落标记
</form >
表单控件
表单通常包含两类元素，一类是只能供用户浏览的文字、图 像、表格等普通元素，另一类是用于用户与服务器之间交互 的文本框、单选框、复选框等表单控件。
表单中使用<input>标记定义表单中的输入控件，<input> 标记的type属性指定输入控件的类型。
name属性用于定义输入控件的名称，当表单发回服务器时， 在表单数据中的每个值都与这个名称成对出现，这样，才能 分析每个值的意义。value属性用于设置输入控件的初始值 ，单选按钮的该属性是必须设定的。
（二）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中的框架
HTML网页设计技术基 础
➢ HTML即超文本标记语言，是用来描述因特网 上网页内容和外观的标准语言。
➢ HTML标记：HTML文档中使用标记来定义并描述HTML 元素。所有的HTML标记都用一对尖括号括起来，如 <html>、<br>等。
➢ HTML标记的属性：在HTML文档中，定义并描述HTML 元 素 的 许 多 标 记 都 有 相 应 的 属 性 ， 例 如 <body bgcolor="blue">。
调试：如果在浏览器窗口显示的页面效果不理想，可 以返回到步骤(2)，反复修改测试直到满意为止。
HTML的基本语法结构
一个完整的HTML文档包含头部和主体两部分，一般 由三对标记定义HTML文档的框架结构。
1. HTML的基本结构
<html> <head>
<title>网页标题</title> </head> <body>
<html><head><title> 网页制作</title></head> <body> <p align =center><font size=6 color=red face="隶书">春雪 </font></p> <p align =center>韩愈</p> <p align =center>新年都未有芳华，二月初惊见草芽。<br> 白雪却嫌春色晚，故穿庭树作飞花。</p> <br><br> <p align =center><a href=""><font size=6>新浪 </font></a></p>
法规定了一系列用于定义和描述HTML元素的符号，这些符号统称为HTML标 记。所有的HTML标记都用一对尖括号括起来，如<html>、<br>等。多数标 记是成对出现的（例如<head>和</head>），分别表示标记所定义范围的开 始和结束；少数标记（例如<br>）是单标记。 HTML标记的属性：在HTML文档中，定义并描述HTML元素的许多标记都有 相应的属性，例如<body bgcolor="blue">。所有属性都应该包含在HTML的 起始标记中，属性名与标记之间至少一个空格分隔，属性值要用英文半角的双 引号括起来，有的属性值不括起来也可以。当属性值需要用双重引号时，其中 一重用单引号。 HTML源文件：用HTML编写的超文本文档称为HTML源文件，可以使用任何 文本编辑器编辑HTML源文件，存盘时使用.htm或.html作为文件扩展名即可。 一个HTML文档对应一个网页，主页文件名默认为index.htm 或 index.html。 浏览器按顺序阅读HTML文档内容，然后根据标记及其属性的功能解释和显示 所标记的元素。对书写错误的标记不做任何处理，且不停止也不影响其解释执 行过程，设计者只能通过网页显示效果来分析出错原因和出错位置。
7.2.1 HTML中多媒体元素的引用
（一） HTML图像标记及属性 （二）图像的超级链接
HTML支持的图像超链接包括普通图像链接和图像映 射等。普通图像超链接是指以整个图像作为链接源的超 级链接，当点击图像的任何部分时，都会打开同一个链 接目标。图像映射也称之为热点地图，是指以图像上的 某些位置区域为链接源而建立的超级链接，点击链接源 区域会打开相应的目标链接。在此，只讲述整幅图像为 链接源的超级链接的建立方法。
HTML文档的头部（head）提供关于网页的标题、作者 、搜索关键字等信息。其一般格式如下：
<head> <title> 网页标题</title>
<meta> </head>
【例7-1】网页头部设计示例。 <html> <head>
<title>HTML头部设计示例</title> <meta name="keywords" content="大学之道，在明明德"> </head> </html>
在标记<title> </title>之间定义的网页标题“HTML头部设计 示例”，将显示在浏览器窗口的标题栏。
<meta>标记用于定义网页相关信息，该标记有多个属性，用 于指定网页设计者、搜索关键字、网页刷新等信息。上例中定 义了搜索引擎的搜索关键词为“大学之道，在明明德”。
7.1.3 HTML主体设计
※ <br>
段内换行标记，单标记
※ <font>和</font> 定义字体标记
※可设置size 、color、 face 等属性
※ <a>和</a>
定义超链接
HTML中的表单
在HTML源代码中，使用<form>和</form>定义表单 定义表单的基本结构如下： <form >
<input type=控件类型 value=控件选项值 name=控件选项名称 >
【例7-5】表格及其属性示例
<html> <head>
<title>表格示例</title> </head> <body> <font size="6" color="red"><b> <table height="300" width="400" align="center" border="1" bordercolor="green"
（1）设置正文标题
HTML源代码主体部分最基础的工作，是如何处理标 题、段落、换行等问题，HTML是通过在源代码中设 置相应的标记实现这些功能的。
在HTML源文件里定义正文标题，比较典型的是用 <hn> 标 记 定 义 （ 其 中 n=1,2,3,4,5,6 ） ， 定 义 的 字 体由大到小，每个正文标题自成一段。也可以使用 <font size=m> 加 以 定 义 ， 其 中 m 可 以 取 值 为 1,2,3,4,5,6,7中的任意一个。
调试：如果在浏览器窗口显示的页面效果不理想，可 以返回到步骤(2)，反复修改测试直到满意为止。
（二）HTML的基本语法结构
一个完整的HTML文档包含头部和主体两部分，一般由三 对标记定义HTML文档的框架结构。
1. HTML的基本结构
<html> <head>
<title>网页标题</title> </head> <body>
如何定义和描述这些元素，就是HTML主体设 计部分要解决的问题。
7.1.3 HTML主体设计
（一）页面布局与基本标记 （二）HTML的文字格式设置 （三）文字列表 （四）文本的超链接
（一）页面布局与基本标记
1. 页面布局
(1) 网页背景 (2) 网页前景色 (3)网页页边距 2. 基本标记 （1）设置正文标题 （2）设置文字段落标记 （3）设置文字换行标记 （4）设置文字不换行标记 （5）设置水平线标记 （6）设置代码注释标记
height="280" border="2" align="center" align= "middle"> </a> </body> </html>
7.2.2 HTML中的表格
表格也是网页中常用的组成元素。利用表格可以将页面元 素按行列排布，使版式更规整，有助于条理清晰地展示 页面内容。
（一）建立表格 （二）表格属性——行高、列宽及边框 （三）表格对齐
下面以记事本为例说明HTML文档的创建与调试过程。
打开记事本。
编辑：在记事本编辑区编辑HTML源代码。
保存：单击记事本窗口的菜单栏的“文件|保存”命令 ，并在“保存类型”下拉列表中选择“所有文件”。
浏览：要查看某个网页的浏览效果，可以直接双击该 文件。也可以在浏览器中用“文件|打开”命令打开。
【例7-2】网页标题与正文标题示例。
<html> <head> <title> 网页标题与正文标题</title> </head> <body>
<h1>态度决定一切 </h1> <h2>细节决定成败</h2> <h3>知识成就未来</h3> <h4>性格决定命运</h4> <h5>乐观 坚强 </h5> <h6>阳光 进取！</h6> </body> </html>
➢ HTML源文件：使用.htm或.html作为文件扩展名
下面以记事本为例说明HTML文档的创建与调试过程。
打开记事本。
编辑：在记事本编辑区编辑HTML源代码。
保存：单击记事本窗口的菜单栏的“文件|保存”命令 ，并在“保存类型”下拉列表中选择“所有文件”。
浏览：要查看某个网页的浏览效果，可以直接双击该 文件。也可以在浏览器中用“文件|打开”命令打开。
文档主体内容 </body> </html>
2. 相关标记简介
<html>和</html> 明确文档开始和结束； <head>和</head> 定义文档的头部； <body>和</body> 定义文档主体； <title>和</title> 定义网页标题。
7.1.2 HTML文档头部设计
定义格式如下： <a href=" 超 链 接 的 目 标 地 址 "><img src=" 链 接 源 图 片 名 "
></a> 【例7-4】图像及其超连接示例。
<html> <head> <title>图像及其超连接</title> </head> <body> <a href=""> <img src=" 母 亲 .jpg" alt=" 母 亲 是 一 所 大 学 " width="300"
HTML中的表单
type属性用于指定表单输入控件类型，常用属性值有： text——指定输入控件为单行文本框。 password——指定输入控件为密码框。 checkbox——指定输入控件为复选框。 radio——指定输入控件为单选按钮。 submit——指定输入控件为提交按钮。 reset——指定输入控件为重置按钮。
<p> <form> <font size=5 color=green face="宋体">姓名</font> <input type=text name="xm" > <input type=submit value="提交" > </form> </p> </body> </html>
7.1.1 HTML概述
HTML PHP网页程序设计
教学内容
➢ HTML网页设计技术基础 ➢ HTML中多种元素的引用 ➢ PHP语言概述 ➢ PHP的数据与运算 ➢ 顺序结构程序设计 ➢ 选择结构程序设计 ➢ 循环结构程序设计
7.1 HTML网页设计技术基础
HTML（Hyper Text Markup Language）即超文本 标记语言，是用来描述因特网上网页内容和外 观的标准语言。超文本指的是用超链接的方法 ，将各种不同空间的文字信息组织在一起的网 状文本，超文本中还可以包含图像、音频、视 频等非文本的多媒体元素。
在网页设计时，需要在浏览器窗口中显示的网页 页面的所有内容（文本、图像、音频、视频以及 表格、表单元素等），都必须在HTML代码的主 体标记<body>与</body>之间定义。
7.1.3 HTML主体设计
在网页设计时，需要在浏源自文库器窗口中显示的网 页页面的所有内容（文本、图像、音频、视频 以及表格、表单元素等），都必须在HTML代 码的主体标记<body>与</body>之间定义。
文档主体内容 </body> </html>
HTML的常用标记
※ <html>和</html> 明确文档开始和结束；
※ <head>和</head> 定义文档的头部；
※ <body>和</body> 定义文档主体；
※ <title>和</title> 定义网页标题。
※ <p>和</p>
划分段落标记
</form >
表单控件
表单通常包含两类元素，一类是只能供用户浏览的文字、图 像、表格等普通元素，另一类是用于用户与服务器之间交互 的文本框、单选框、复选框等表单控件。
表单中使用<input>标记定义表单中的输入控件，<input> 标记的type属性指定输入控件的类型。
name属性用于定义输入控件的名称，当表单发回服务器时， 在表单数据中的每个值都与这个名称成对出现，这样，才能 分析每个值的意义。value属性用于设置输入控件的初始值 ，单选按钮的该属性是必须设定的。
（二）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中的框架
HTML网页设计技术基 础
➢ HTML即超文本标记语言，是用来描述因特网 上网页内容和外观的标准语言。
➢ HTML标记：HTML文档中使用标记来定义并描述HTML 元素。所有的HTML标记都用一对尖括号括起来，如 <html>、<br>等。
➢ HTML标记的属性：在HTML文档中，定义并描述HTML 元 素 的 许 多 标 记 都 有 相 应 的 属 性 ， 例 如 <body bgcolor="blue">。
调试：如果在浏览器窗口显示的页面效果不理想，可 以返回到步骤(2)，反复修改测试直到满意为止。
HTML的基本语法结构
一个完整的HTML文档包含头部和主体两部分，一般 由三对标记定义HTML文档的框架结构。
1. HTML的基本结构
<html> <head>
<title>网页标题</title> </head> <body>
<html><head><title> 网页制作</title></head> <body> <p align =center><font size=6 color=red face="隶书">春雪 </font></p> <p align =center>韩愈</p> <p align =center>新年都未有芳华，二月初惊见草芽。<br> 白雪却嫌春色晚，故穿庭树作飞花。</p> <br><br> <p align =center><a href=""><font size=6>新浪 </font></a></p>