HTML页面与表格.ppt

《HTML页面与表格.ppt》由会员分享，可在线阅读，更多相关《HTML页面与表格.ppt（34页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Version 3.0你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院第一章第一章HTML页面与表格 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院课程目标课程目标HTML文件的结构文件的结构 如何设置如何设置HTML文件的背景色及文本色文件的背景色及文本色 如何在页面上添加一个超链接如何在页面上添加一个超链接 如何在页面上添加一个表格如何在页面上添加一个表格 如何设置表格的属性如何设置表格的属性 使学生能设计并实现下列各种程序使学生能设计并实现下列各种程序 通过本章的学习要对通过本章的学习要对HTML文件有初步地了解，文件有初步地了解，并且可以灵活的

2、设置超链接以及表格的属性并且可以灵活的设置超链接以及表格的属性 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院目标目标创建一个创建一个 html页面页面表格表格超连接超连接 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院体验体验 创建使用超链接和表格的创建使用超链接和表格的HTML页面页面 本章我们首先创建一个本章我们首先创建一个HTML页面。在页面中创建一个超链页面。在页面中创建一个超链接，使超链接指向另一个显示信息的页面。在显示信息的接，使超链接指向另一个显示信息的页面。在显示信息的页面中，以表格的形式显示信息。如图页面中，以表格的形式显示信息。

3、如图1-1、1-2所示：所示：你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院网页基础知识网页基础知识万维网万维网WWW (World Wide Web)超文本传送协议超文本传送协议HTTP (HyperText Transfer Protocol)HTTP协议用经常用在传送协议用经常用在传送WEB页页网站是由若干个文件组成！网站是由若干个文件组成！你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院网页基础知识网页基础知识统一资源定位器统一资源定位器URL（Uniform Resource Locator）URL包括包括传送协议传送协议，服务器名称服务器名

4、称、文件的完整路径文件的完整路径 例如：例如：index.html 其中其中http:/是是传送协议传送协议 是是服务器名称服务器名称 index.html 是是文件的完整路径文件的完整路径服务器名称服务器名称还有其他的叫法，主机名、域名。一般大众还有其他的叫法，主机名、域名。一般大众叫法叫域名叫法叫域名.gov 等等代表服务类型。等等代表服务类型。你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院网页基础知识网页基础知识超级文本标记语言超级文本标记语言HTML它是它是WWW上通用的描述语言。上通用的描述语言。HTML语言支持多媒体（即文，图，声）语言支持多媒体（即文，图，声

5、）HTML以文件形式存放在计算机内，以文件形式存放在计算机内，HTML文件可以文件可以通过通过WWW传送给世界上所有连接传送给世界上所有连接INTERNET上的计上的计算机，使其可以浏览算机，使其可以浏览HTML里的内容。里的内容。你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院HTMLHTML是是Hypertext Markup Language（超文本标记语（超文本标记语言）的缩写，它是构成言）的缩写，它是构成Web页面（页面（Page）的主要工）的主要工具，是用来表示网上信息的符号标记语言。具，是用来表示网上信息的符号标记语言。HTML文档由文本和文档由文本和HTML

6、标记组成，通常以标记组成，通常以.html或或者者.htm为文本的扩展名（如为文本的扩展名（如index.htm）。网页浏览器负责解释网页浏览器负责解释HTML文档中的标记，并将文档中的标记，并将HTML文档显示为网页。文档显示为网页。任何有浏览器的计算机都可以显示任何有浏览器的计算机都可以显示HTML文档，不文档，不论计算机上运行的是论计算机上运行的是UNIX，Macitionish,还是还是Windwos操作系统。操作系统。你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院HTML功能功能HTML的功能：的功能：出版在线的文档，其中包含了标题、文出版在线的文档，其中包含了

7、标题、文本、表格、列表以及照片等内容。本、表格、列表以及照片等内容。通过超链接检索在线的信息。通过超链接检索在线的信息。为获取远程服务而设计表单，可用于检为获取远程服务而设计表单，可用于检索信息、定购产品等。索信息、定购产品等。在文档中直接包含电子表格、视频剪辑、在文档中直接包含电子表格、视频剪辑、声音剪辑以及其他的一些应用。声音剪辑以及其他的一些应用。你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院HTML和网页浏览器的关系HTML和网页浏览器的关系：不同的浏览器中网页的显示效果可能不同。大多数浏览器不同的浏览器中网页的显示效果可能不同。大多数浏览器不完全支持不完全支持H

8、TMLHTML的所有特性，每一种浏览器都可能会有一的所有特性，每一种浏览器都可能会有一些特有的些特有的HTMLHTML标记和属性，这些标记和属性可能不会被其标记和属性，这些标记和属性可能不会被其他的浏览器识别。这些有软件公司开发的标记和属性被称他的浏览器识别。这些有软件公司开发的标记和属性被称为为HTMLHTML扩展，而不是标记的一部分。扩展，而不是标记的一部分。你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院超文本标记语言超文本标记语言HTML HTML标记标记 基本格式基本格式 标记内可以包含一些属性标记内可以包含一些属性 文件内容文件内容 HTML中的注释：中的注释：

9、你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院HTML文档文档 HTML页面的基本结构页面的基本结构 起始标记起始标记 文件头文件头 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院HTML页面的基本结构页面的基本结构 起始标记起始标记网页标题网页标题 文件主体文件主体 网页的标题和属性网页的标题和属性文件主体文件主体基本结构基本结构 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院起始标记起始标记 标记符号标记符号标记用于标记用于HTML文档的最前面，用来标记文档的最前面，用来标记HTML文档的开始文档的开始 则是放在则是放在HT

10、ML文档的最后面，用来表示文档的最后面，用来表示HTML文档的结束文档的结束 两个标记必须一起使用两个标记必须一起使用 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院文件头文件头 结构结构文件头标记对构成文件头标记对构成HTML文档的开头部分文档的开头部分 用来描述用来描述HTML文档相关信息文档相关信息 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院文件头文件头标记对构成标记对构成HTML文档的开头部分文档的开头部分 1Title标记标记 2Base标记标记 /是一个链接基准标记是一个链接基准标记,用以改变文件中用以改变文件中 所有链接标记的参数默

11、认值所有链接标记的参数默认值 3Link标记标记 4Meta标记标记 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院页面主体格式和页面效果页面主体格式和页面效果 标记对之间的内容是标记对之间的内容是HTML文档的主要部分，文档的主要部分，在此标记对之间可包含众多的标记和信息在此标记对之间可包含众多的标记和信息 标记中还可以设置一些属性标记中还可以设置一些属性 两个标记必须一起使用两个标记必须一起使用 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院页面链接页面链接 页面链接的基本概念页面链接的基本概念 外部链接外部链接内部链接内部链接邮件链接邮件链接了

12、解路径了解路径绝对路径绝对路径 相对路径相对路径 绝对路径是指完整的描述文件位置的路径绝对路径是指完整的描述文件位置的路径 所谓相对路径，顾名思义就是自己相对与目标位置所谓相对路径，顾名思义就是自己相对与目标位置 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院外部链接外部链接 链接到外面去，可以扩充您网站的实用性及充实性，也正链接到外面去，可以扩充您网站的实用性及充实性，也正因这功能，才造就了因这功能，才造就了www五彩缤纷的世界。五彩缤纷的世界。一个超链接通常由以下一个超链接通常由以下3个部分构成：个部分构成：超链接标记超链接标记 属性属性href及其值及其值 超链接中

13、显示页面上显示链接的文字超链接中显示页面上显示链接的文字 新浪网新浪网 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院内部链接内部链接有时候，当某页的内容很多时，我们可以利用网页的有时候，当某页的内容很多时，我们可以利用网页的内部链接，以便使用者快速的找到资料内部链接，以便使用者快速的找到资料 原理：原理：在欲链接处做个记号在欲链接处做个记号 链接时就寻找个这记号链接时就寻找个这记号 内部链接就是网页中的书签内部链接就是网页中的书签 格式格式 书签内容书签内容 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院内部链接实例内部链接实例 例如，先定义一个标

14、签例如，先定义一个标签a，然后找到，然后找到“标标签名签名”这个标签，就可编写如下代码：这个标签，就可编写如下代码：书签内容书签内容单击此处监视浏览器调到单击此处监视浏览器调到“标签标签a”处处 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院邮件链接邮件链接 邮件链接可使访问者在浏览页面时，只需单击电子邮件链邮件链接可使访问者在浏览页面时，只需单击电子邮件链接就能打开默认的邮件编辑软件，向指定的地址发送邮件接就能打开默认的邮件编辑软件，向指定的地址发送邮件 格式格式IT在线在线 访问者单击电子邮件链接时，将打开默认访问者单击电子邮件链接时，将打开默认的电子邮件编辑软件的电

15、子邮件编辑软件 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院表格表格表格的基本形式表格的基本形式 有通栏的表格有通栏的表格 表的大小，边框宽度，表格间距表的大小，边框宽度，表格间距 表格中文本的输出表格中文本的输出 表格在文件中的位置定义表格在文件中的位置定义 表格颜色表格颜色 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院表格的基本形式表格的基本形式表格，一般用于对网页的内容进行排版表格，一般用于对网页的内容进行排版 一个表格由一个表格由标记开始，标记开始，结束结束 表的内容由表的内容由,和和定义定义 单元行单元行单元格单元格标记所标记的单元格的

16、文字以粗体出现，标记所标记的单元格的文字以粗体出现，通常用于表格的标题栏通常用于表格的标题栏 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院表格的例子表格的例子 编号编号名称名称价格价格(元元)001语文教材语文教材20.00 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院有通栏的表格有通栏的表格 1有横向通栏的表格用有横向通栏的表格用属性说属性说明明 2有纵向通栏的表格用有纵向通栏的表格用属性说属性说明明#代表通栏占据的网格数代表通栏占据的网格数 以像素为单位以像素为单位 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院横向通栏

17、示例横向通栏示例 图书信息图书信息编号编号名称名称价格价格(元元)你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院表的大小，边框宽度，表格间距表的大小，边框宽度，表格间距 1表的大小用表的大小用width=#和和height=#属性说明属性说明 2边框宽度由边框宽度由border=#说明说明 3表格间距即划分表格的线的粗细用表格间距即划分表格的线的粗细用cellspacing=#表示表示 宽宽 高高#是以像素为单位的整数是以像素为单位的整数 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院表格的粗细表格的粗细 编号编号名称名称价格价格(元元)001语文教

18、材语文教材20.00 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院表格中文本的输出表格中文本的输出 1文本与表框的距离用文本与表框的距离用cellpadding=#设置设置 2表格的宽度大于其中的文本宽度时，文本在其中的输出位表格的宽度大于其中的文本宽度时，文本在其中的输出位置用置用“align=#”定义定义 3表格的高度大于其中文本的高度时，可以用表格的高度大于其中文本的高度时，可以用valign=#说明说明文本在其中的位置。文本在其中的位置。#是是left，center和和right三者之一，分别表示左对三者之一，分别表示左对齐，居中和右对齐齐，居中和右对齐#是是t

19、op，middle，bottom，baseline四者之一。分别表示顶四者之一。分别表示顶端对齐、居中对齐、底部对齐、基线对齐端对齐、居中对齐、底部对齐、基线对齐#是以像素为单位的整数是以像素为单位的整数001 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院文本与表框的距离文本与表框的距离 表格中文本的输出表格中文本的输出编号编号名称名称价格价格(元元)001语文教材语文教材20.00 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院表格的高度大于其中文本的高度表格的高度大于其中文本的高度 编号编号名称名称价格价格(元元)001语文教材语文教材20.0

20、0 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院表格在文件中的位置定义表格在文件中的位置定义 表格与文件中内容对齐时，若在现在位置上不能满足其对表格与文件中内容对齐时，若在现在位置上不能满足其对齐方式，可定义其位置，以满足对齐要求齐方式，可定义其位置，以满足对齐要求 属性一般由属性一般由align=left、right或或center指定指定 编号编号名称名称价格价格(元元)001语文教材语文教材20.00 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院表格颜色表格颜色 表格的颜色用表格的颜色用bgcolor=#指定指定#是是16进制的进制的6位数，格式为位数，格式为rrggbb红红 绿绿蓝蓝编号编号名称名称价格价格(元元)001语文教材语文教材20.00