HTML语言认识入门.ppt

《HTML语言认识入门.ppt》由会员分享，可在线阅读，更多相关《HTML语言认识入门.ppt（40页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、第一章第一章HTML页面与表格页面与表格 课程目标课程目标通过本章学习，将掌握：HTML文件的结构 如何设置HTML文件的背景色及文本色 如何在页面上添加一个超链接 如何在页面上添加一个表格 如何设置表格的属性 课程定位课程定位相关的术语相关的术语网站网站当当我我们们在在浏浏览览器器中中输输入入一一个个已已知知网网址址后后，即即可可打打开开一一个个页页面面，让让我我们们了了解解有有关关这这个个网网址址的的一一些信息和内容，这个网址就是我们常说的网站。些信息和内容，这个网址就是我们常说的网站。网网站站实实际际上上对对应应的的是是物物理理的的磁磁盘盘目目录录，同同时时对对应一个应一个 IP IP

2、地址。地址。常常说说的的虚虚拟拟主主机机实实际际上上是是一一个个网网站站及及其其它它功功能能的组合（邮件、数据库等）。的组合（邮件、数据库等）。相关的术语相关的术语网页网页又又称称WebWeb页页面面，是是可可以以被被浏浏览览器器访访问问的的单单个个HTMLHTML超超文文本本文文件件,它它由由文文字字、表表格格、图图片片、声声音音、视视频以及各种功能按钮等组成。频以及各种功能按钮等组成。而而打打开开网网络络由由网网址址进进入入时时第第一一个个看看到到的的页页面面，我们通常把它称为首页（我们通常把它称为首页（home pagehome page）或主页。）或主页。由首页所延伸下去的页面，就是一

3、个个网页。由首页所延伸下去的页面，就是一个个网页。打个比方打个比方网页如同 word 一样，是一种文件形式，有自己的格式：Word 的文件格式是微软定义的，很复杂，office 2007 则是 xml 格式了。网页的格式是国际标准组织定义的，叫做 w3c，具体标准是 html 标记语言格式。网页设计就是按照 html 语言格式来编写文本文件而已。相关的术语相关的术语 服务器（服务器（Server）服服务务器器是是局局域域网网的的核核心心设设备备,它它管管理理着着局局域域网网中中的的各各种种资资源源,它它的的基基本本功功能能是是网网络络通通信信服服务务、管管理理和和提提供供网网络络共共享享资资源

4、源，以以及及进进行行网网络络管管理理。服服务务器器实实质质是是一一台台配配置置较较高高的的计计算算机机。不不同同的的电电脑脑操操作作系系统统，有有不不同同的的适适用用服服务务器器软软件件，如如：微微软软视视窗窗windows XP Professional操操作作系系统统适适用用的的服服务务器器软软件件IIS5.1浏览器（浏览器（Browser）用用于于查查看看Web站站点点的的软软件件被被称称作作浏浏览览器器。它它是是WWW的的窗窗口口,用用户户可可以以利利用用浏浏览览器器从从一一个个文文档档跳跳转转到到另另一一个个文文档档实实现现对对整整个个网网站站的的浏浏览览,也也可可以以下下载载并并解

5、解释释HTML文文档档中中所所描描述述的的动动画画、声声音音、文文本本、图图形形、图图像像，并并能能实实现现电电子子邮邮件件查查看看、下下载载文文件、件、FTD等功能。等功能。远程站点远程站点(Remote Site)远远程程站站点点是是指指服服务务器器上上组组成成的的Web站站点点。本本地地站站点点是指与远程站点上的文件对应的本地磁盘上的文件。是指与远程站点上的文件对应的本地磁盘上的文件。本地站点（本地站点（Local Site）在制作网页时，首先要定义一个本地站点。作为一个在制作网页时，首先要定义一个本地站点。作为一个网站，里面有很多网页文件、图片、网站，里面有很多网页文件、图片、Flas

6、h动画等，动画等，如果不进行管理归档，分散在硬盘的各个地方如果不进行管理归档，分散在硬盘的各个地方,就无法就无法方便地进行网页发布。方便地进行网页发布。定义本地站点，就是在硬盘上建立一个目录，将所有定义本地站点，就是在硬盘上建立一个目录，将所有的网页和相关的文件都放在里面，以便进行网页的制的网页和相关的文件都放在里面，以便进行网页的制作和管理。作和管理。相关的术语相关的术语 统一资源定位器统一资源定位器URL URL即即Uniform Resource Locator（统一资源定（统一资源定位器）的缩写。位器）的缩写。用来指明主机或文件在用来指明主机或文件在Internet上的位置，一个上的位

7、置，一个URL就是一个资源在就是一个资源在Internet上的具体位置，上的具体位置，URL由由Internet资源类型、服务器地址、端口及路径组成，资源类型、服务器地址、端口及路径组成，如：就是一个典型的如：就是一个典型的URL。它的作用在于提供一个标。它的作用在于提供一个标准方法，以便能够在准方法，以便能够在Internet上找到任何东西。上找到任何东西。无论是单一的页面，还是庞大复杂的网站，甚至是一无论是单一的页面，还是庞大复杂的网站，甚至是一个小小的图片，所有的网络资源都能通过个小小的图片，所有的网络资源都能通过URL系统访系统访问到。问到。相关的术语相关的术语文字文字文文字字是是网网

8、页页最最基基本本的的构构成成要要素素，一一个个网网页页上上大大部部分分是是由由文文字字构构成成的的，由由于于文文字字所所表表达达内内容容比比较较清清楚楚、直直接接,而而且且相相对对占占用用网网页页版版面面面面积积较较小小，使使网网页页所所表表达达的的信信息息量量加加大大，所所以以网网上上用用来来表表达达内内容容或或链链接接的的大部分是文字。大部分是文字。文文字字也也称称文文本本，网网页页有有90左左右右是是由由文文本本组组成成。首首页上的文本基本上都是用来链接用的。页上的文本基本上都是用来链接用的。网页界面的构成要素网页界面的构成要素图形图像图形图像 图图形形和和图图像像也也是是网网页页主主要

9、要的的构构成成要要素素，它它有有动动态态和和静静态态之之分分，和和文文字字的的功功能能一一样样，也也是是基基本本上上用用来来链链接接用用的的，它它比比文文字字看看上上去去更更加加直观，更让人容易理解内容。直观，更让人容易理解内容。Web图图形形的的文文件件标标准准格格式式是是JPG、GIF和和PNG，对对颜颜色色具具有有平平滑滑渐渐变变的的图图像像使使用用JPG格格式式，如如大大多多数数照照片片；对对于于以以单单一一颜颜色色为为主主的图像，使用的图像，使用GIF格式。格式。网页界面的构成要素网页界面的构成要素网页界面的构成要素网页界面的构成要素 超（级）链接超（级）链接超（级）链接超（级）链接

10、超链接由两个端点及一个方向构成。通常开始的位置称为源端点，目超链接由两个端点及一个方向构成。通常开始的位置称为源端点，目标位置称作目标端点。标位置称作目标端点。链接就是由源端点指向目标端点的一种跳转。目标端点可以是一个页链接就是由源端点指向目标端点的一种跳转。目标端点可以是一个页面、一幅图像、一段声音、或者是页面中的某个位置。利用超链接可面、一幅图像、一段声音、或者是页面中的某个位置。利用超链接可以实现文档间或文档中的跳转。以实现文档间或文档中的跳转。根据源端点的不同，可以将超链接分为两种：根据源端点的不同，可以将超链接分为两种：超文本（超文本（Hypertext）和超链接（）和超链接（Hyp

11、erlink）。超文本就是源端点的）。超文本就是源端点的文本的链接。而超链接是利用文本以外的对象作为源端点所创建的链文本的链接。而超链接是利用文本以外的对象作为源端点所创建的链接，如图像、表单等。接，如图像、表单等。超级链接是网页之间相互调用的主要方式之一。超级链接是网页之间相互调用的主要方式之一。超级链接超级链接网页界面的构成要素网页界面的构成要素交互功能交互功能交互功能交互功能交互功能，即网上提供交互功能，即网上提供的聊天、论坛、留言本、的聊天、论坛、留言本、邮件发送及接收的互动邮件发送及接收的互动功能。功能。这也是互连网的一大优这也是互连网的一大优势所在，它给人提供了势所在，它给人提供了

12、一个快捷交流的平台，一个快捷交流的平台，给人的生活带来了许多给人的生活带来了许多便利。便利。交互功能常常是通过表交互功能常常是通过表单（单（form）标记实现）标记实现的。的。网页界面的构成要素网页界面的构成要素 多媒体（多媒体（Multimedia）多媒体就是指各种各样的信息载体在计算机中的应用，多媒体就是指各种各样的信息载体在计算机中的应用，是一种文字、声音、图像、动画和视频影像成分的交是一种文字、声音、图像、动画和视频影像成分的交互组合。互组合。网页中的多媒体主要指采用音频和视频功能的软硬件网页中的多媒体主要指采用音频和视频功能的软硬件技术，包括数字音响、全动态图像、超媒体连接等，技术，

13、包括数字音响、全动态图像、超媒体连接等，主要是对声音、图像具有编辑处理的功能，即网页上主要是对声音、图像具有编辑处理的功能，即网页上提供的音频和视频下载及播放功能，包括提供的音频和视频下载及播放功能，包括Flash动画、动画、声音与影片文件的播放。声音与影片文件的播放。它必须通过网络媒体播放器来实现，有多种网络媒体它必须通过网络媒体播放器来实现，有多种网络媒体播放器。如常用的有播放器。如常用的有Windows Media Player和和 Realone Player等播放器。等播放器。超文本标记语言超文本标记语言HTML是网页设计的核心语言，是一切网页的基础描述语言任何网页都是基于这种语言描

14、述出来的Html 语言描述语言描述的内容的内容浏览器解释显示浏览器解释显示后的网页后的网页超文本标记语言超文本标记语言HTML 为了全世界有一个统一的“世界语”，出现了 HTML 语言，从而统一了网页的格式HTML标记 基本格式：文件内容基本属性：如同如同 word 一样，也有自己的文件格式，只不过比较复一样，也有自己的文件格式，只不过比较复杂，没有人去编写，而是通过使用杂，没有人去编写，而是通过使用 word 来编写来编写 word 文件是一个意思。最常见的、最简单的文件格式就是文件是一个意思。最常见的、最简单的文件格式就是文本文件了！文本文件了！HTML文档文档 用 HTML 语言编写的文

15、档就是 HTML 文档，也常被称为“静态网页”文件.html.htmHTML页面的基本结构 起始标记(html)文件头(head)文件体（body）HTML 文档的 HTML 标记大多是“成对儿”的，即：开始，结束HTML 标记大多是英文单词或其缩写，如：Table，表示表格Tr（table row）,表示表的一行HTML 的国际规范标准见：HTML页面的基本结构页面的基本结构 起始标记起始标记网页标题网页标题 文件主体文件主体 网页的标题和属性网页的标题和属性文件主体文件主体基本结构基本结构起始标记起始标记 标记符号标记符号标记用于标记用于HTML文档的最前面，用来标记文档的最前面，用来标记

16、HTML文文档的开始档的开始 则是放在则是放在HTML文档的最后面，用来表示文档的最后面，用来表示HTML文档的结束文档的结束 两个标记必须一起使用两个标记必须一起使用 文件头文件头 结构结构文件头标记对构成文件头标记对构成HTML文档的开头部分文档的开头部分 用来描述用来描述HTML文档相关信息文档相关信息 文件头文件头标记对构成HTML文档的开头部分 1Title标记标记 2Base标记标记 3Link标记标记 4Meta标记标记 页面主体格式和页面效果页面主体格式和页面效果 标记对之间的内容是HTML文档的主要部分，在此标记对之间可包含众多的标记和信息 标记中还可以设置一些属性 两个标记

17、必须一起使用两个标记必须一起使用 页面链接页面链接 页面链接的基本概念 外部链接内部链接邮件链接了解路径了解路径绝对路径绝对路径 相对路径相对路径 绝对路径是指完整的描述文件位置的路径绝对路径是指完整的描述文件位置的路径 所谓相对路径，顾名思义就是自己相对与目标位置所谓相对路径，顾名思义就是自己相对与目标位置 外部链接外部链接 链接到外面网页去，可以扩充您网站的实用性及充实性，也正因这功能，才造就了www五彩缤纷的世界。一个超链接通常由以下3个部分构成：超链接标记超链接标记 属性属性href及其值及其值 超链接中显示页面上显示链接的文字超链接中显示页面上显示链接的文字 新浪网新浪网 内部链接内

18、部链接有时候，当某页的内容很多时，我们可以利用网页的内部链接，以便使用者快速的找到资料 原理：在欲链接处做个记号在欲链接处做个记号 链接时就寻找个这记号链接时就寻找个这记号 内部链接就是网页中的书签内部链接就是网页中的书签 格式格式 书签内容书签内容 内部链接实例内部链接实例 例如，先定义一个标签例如，先定义一个标签a，然后找到，然后找到“标签名标签名”这个标签，就可编写如下代码：这个标签，就可编写如下代码：书签内容书签内容单击此处监视浏览器调到单击此处监视浏览器调到“标签标签a”处处邮件链接邮件链接 邮件链接可使访问者在浏览页面时，只需单击电子邮件链接就能打开默认的邮件编辑软件，向指定的地址

19、发送邮件 格式清华清华IT在线在线 访问者单击电子邮件链接时，将打开默认访问者单击电子邮件链接时，将打开默认的电子邮件编辑软件的电子邮件编辑软件 表格表格表格的基本形式 有通栏的表格 表的大小，边框宽度，表格间距 表格中文本的输出 表格在文件中的位置定义 表格颜色 表格的基本形式表格的基本形式表格，一般用于对网页的内容进行排版 一个表格由标记开始，结束 表的内容由,和定义 单元行单元行单元格单元格标记所标记的单元格的文字以粗体出现，通常用于表格标记所标记的单元格的文字以粗体出现，通常用于表格的标题栏的标题栏 表格的例子表格的例子 编号编号名称名称价格价格(元元)001语文教材语文教材20.00

20、有通栏的表格有通栏的表格 1有横向通栏的表格用属性说明 2有纵向通栏的表格用属性说明#代表通栏占据的网格数代表通栏占据的网格数 以像素为单位以像素为单位横向通栏示例横向通栏示例 图书信息图书信息编号编号名称名称价格价格(元元)表的大小，边框宽度，表格间距表的大小，边框宽度，表格间距 1表的大小用width=#和height=#属性说明 2边框宽度由border=#说明 3表格间距即划分表格的线的粗细用cellspacing=#表示 宽宽 高高#是以像素为单位的整数是以像素为单位的整数 表格的粗细表格的粗细 编号编号名称名称价格价格(元元)001语文教材语文教材20.00表格中文本的输出表格中文

21、本的输出 1文本与表框的距离用cellpadding=#设置 2表格的宽度大于其中的文本宽度时，文本在其中的输出位置用“align=#”定义 3表格的高度大于其中文本的高度时，可以用valign=#说明文本在其中的位置。#是是left，center和和right三者之一，分别表示左对三者之一，分别表示左对齐，居中和右对齐齐，居中和右对齐#是是top，middle，bottom，baseline四者之一。分别表示顶四者之一。分别表示顶端对齐、居中对齐、底部对齐、基线对齐端对齐、居中对齐、底部对齐、基线对齐#是以像素为单位的整数是以像素为单位的整数001 文本与表框的距离文本与表框的距离 表格中文

22、本的输出表格中文本的输出编号编号名称名称价格价格(元元)001语文教材语文教材20.00表格的高度大于其中文本的高度表格的高度大于其中文本的高度 编号编号名称名称价格价格(元元)001语文教材语文教材20.00 表格在文件中的位置定义表格在文件中的位置定义 表格与文件中内容对齐时，若在现在位置上不能满足其对齐方式，可定义其位置，以满足对齐要求 属性一般由align=left、right或center指定 编号编号名称名称价格价格(元元)001语文教材语文教材20.00表格颜色表格颜色 表格的颜色用bgcolor=#指定#是是16进制的进制的6位数，格式为位数，格式为rrggbb红红 绿绿蓝蓝编号编号名称名称价格价格(元元)001语文教材语文教材20.00动手实践动手实践 创建使用超链接和表格的HTML页面 本章我们首先创建一个HTML页面。在页面中创建一个超链接，使超链接指向另一个显示信息的页面。在显示信息的页面中，以表格的形式显示信息。如图1-1、1-2所示：