第1章web基础知识..ppt

第1章 Web基础知识,1.1 TCP/IP协议,1.2 Web概述,1.3 超文本标记语言HTML,1.4 可扩展标记语言XML,1.5 XHTML标记语言,1.6 Web服务器,1.1 TCP/IP协议,1.1.1 TCP/IP协议模型 TCP/IP代表一个协议集，其中最重要的是TCP协议和IP协议TCP/IP协议模型如图1.1所示，包含四个层次：应用层、传输层、网络层和物理接口层1.1.2 IP地址和DNS域名,1. IP地址 IP地址是识别Internet网络中的主机及网络设备的唯一标识每个IP地址通常分为网络地址和主机地址两部分，长度为4个字节，由4个用“.”分隔的十进制数组成，每个数不大于255，如202.119.106.253 2. DNS域名 IP地址是连网计算机的地址标识，但对大多数人来说记住很多计算机的IP地址并不是很容易的事所以TCP/IP协议中提供了域名服务系统(DNS)，允许为主机分配字符名称，即域名在网络通信时由DNS自动实现域名与IP地址的转换1.2 Web概述,Web是一个分布式的超媒体(hypermedia)信息系统，它将大量的信息分布于整个因特网上Web的任务就是向人们提供多媒体网络信息服务。

从技术层面看，Web技术核心有三点： (1) 超文本传输(HTTP)协议，实现万维网的信息传输； (2) 统一资源定位符(URL)，实现互连网信息的定位统一标识； (3) 超文本标记语言(HTML)，实现信息的表示欲存储1.2.1 HTTP协议,1. Web的客户机/服务器模型 Web客户机和Web服务器的信息传递使用HTTP协议该模型如图1.2所示HTTP定义的信息交互处理由以下四步组成： (1) 浏览器与Web服务器建立TCP连接； (2) 浏览器向Web服务器提出请求； (3) 如果请求被接受，则服务器送回响应，在响应中包括状态码和所需的文件； (4) 浏览器和Web服务器断开连接1.2.1 HTTP协议,2. 超文本和超媒体 在浏览器主窗口中显示出的Web文档称为Web页面(page)，它是一种超媒体(Hypermedia)信息超媒体信息的基础是超文本(Hypertext)信息，超文本指的是一种电子文档，其中的文字包含有可以链接到其他段落或文档的超文本链接，即超链接(Hyperlink)，利用超链接可以找到连接在因特网上的任何超文本系统，而超链接可延续，这些超文本系统分布于因特网上的众多主机上，形成庞大的分布式信息系统。

1.2.2 统一资源定位符URL,URL通过定义资源位置的抽象标识来定位网络资源，格式如下： : //: / 其中，是访问信息采用的TCP/IP应用协议，最常用的有3种，即http(超文本传输服务)、ftp(文件传输服务)和news(网络新闻服务) 是网络主机的域名或IP地址，它指出信息存放的主机 是信息服务采用的软件端口 是所访问信息的存储路径(通常为虚拟路径而非存储文件的实际路径)1.3 超文本标记语言HTML,先看一个Web页面：“学生成绩管理系统”主页面，如图1.3所示1.3.1 HTML文档的基本构成,HTML文档的基本结构如下：,1.3.2 HTML基本标记,1. 文档头标记 (1) HTML标记 … (2) 首部标记 … (3) 标题栏标记 … (4) 描述标记 (5) 正文标记,1.3.2 HTML基本标记,例如： 系统许多标记都要用到颜色属性，颜色属性的值有3种表示方法： (1) 使用颜色名称来表示 (2) 使用十六进制格式数值#RRGGBB来表示 (3) RGB(r,g,b)函数表示1.3.2 HTML基本标记,表1.1列出了16种标准颜色1.3.2 HTML基本标记,2. 设置文本格式 (1) 分段标记 (2) 换行标记 (3) 标题标记 … … … … … … (4) 对中标记 …,1.3.2 HTML基本标记,(5) 块标记 … (6) 水平线标记 (7) 字体标记 … (8) 字体标记 …粗体 …斜体 …大字体 …小字体 …固定宽度字体 (9) 样式标记 …上标 …下标 …下划线 …删除线 …删除线 (10) 原样显示标记 …,1.3.2 HTML基本标记,表1.2列出了常用特殊符号的实体名称或数字表示。

1.3.2 HTML基本标记,【例1.1】设计如图1.4所示的具有不同文字显示格式和段落控制的页面，相应的HTML文件中包含了文字显示和段落控制标记1.3.2 HTML基本标记,源代码如下(Ex1-1.htm)： 文字显示和段落控制 一级标题 这是黑体，大小为7号字，红色 这是一个段落 这是斜体这是粗体这是下划线字体 这是大字体这是小字体 这是下标字体1这是上标字体2 这些标记还可以混合使用 这是另一个段落 ,1.3.2 HTML基本标记,3. 列表标记 (1) 有序列表标记 列表项1 列表项2 …… 列表项n (2) 创建无序列表 无序列表是一种在各列表项前面显示特殊项目符号的缩排列表，可以使用无序列表标记Ul和列表项标记Li来创建 列表项1 列表项2 …… 列表项n ,1.3.2 HTML基本标记,(3) 描述性列表 … 是描述性列表标记，它与其子标记和配合使用，用来控制数据项目的显示，类似于术语及其定义的书写格式 例如： 局域网 局域网是指将小范围内的数据设备经过通信系统连接起来的计算机网络 列表描述项 列表项 列表项 …… 列表描述项 …… ,1.3.2 HTML基本标记,【例1.2】创建如图1.5所示的含有有序列表、无序列表和描述性列表的页面。

源代码所示(Ex1-2.htm)1.3.2 HTML基本标记,4. 图像标记 在网页中插入图像、在网页中播放视频文件 常用属性有： Src=图像文件的URL地址 图像可以是JPEG文件、GIF文件或PNG文件 Alt=图像的简单文本说明 在浏览器下不能显示图像或图像加载时间过长时显示该文本 Height=显示图像的高度(像素或百分比) Width=显示图像的宽度(像素或百分比) 如果给出了高度或宽度，则图像将按比例进行缩放 HSpace=与左右相邻对象的间隔(像素) VSpace=与上下相邻对象的间隔(像素) Align=图像不到显示区域大小时的对齐方式,1.3.2 HTML基本标记,当在页面中进行图文混排时，可以使用Align属性设置图像与文本在垂直方向的对齐方式，此时Align属性的取值如下： top：图像与文本顶部对齐 middle：图像与文本中央对齐 bottom：图像与文本底部对齐 也可以在图像的左右绕排文本，此时Align属性的取值如下： left：图像居左文本居右 right：图像居右文本居左1.3.2 HTML基本标记,在Img标记中，Dynsrc属性优先于Src属性。

如果计算机具有多媒体功能，并且所指定的多媒体文件存在，则播放该多媒体文件；如果计算机没有多媒体功能，或者所指定的多媒体文件不存在，则显示由Src属性指定的图像文件 Start=何时开始播放多媒体文件 其取值可以是fileopen或mouseover Loop=多媒体文件的播放次数(整数) 如果不限播放次数，则应将该属性设置为关键字infinite LoopDelay=两次播放之间的延迟(以毫秒为单位),,1.3.2 HTML基本标记,【例1.3】网页中的多媒体 源代码如下(Ex1-3.htm)： 在网页中的多媒体 ,1.3.2 HTML基本标记,运行的结果如图1.6所示1.3.2 HTML基本标记,(1) 创建文件链接 文件链接的目标端点是网页文件，该网页文件可以位于当前网页所在的服务器，常用属性如下： Href=目标端点的URL地址(可以包含一个或多个参数) Target=窗口或框架的名称 目标文档将在指定的窗口或框架中打开如果省略该属性，则目标文档将在当前窗口打开Target属性的取值既可以是窗口或框架的名称，也可以是如下保留字： _blank：未命名的新浏览器窗口 _parent：父框架页或窗门中。

_self：所在的同一框架或窗口中 _top：整个浏览器窗口中，并删除所有框架 Title=指向超链接时所显示的标题文字,1.3.2 HTML基本标记,(2) 创建锚点链接 若要创建锚点链接，首先在页面中为需要跳转的位置命名，即为该位置上放置一个A标记，并通过Name属性为该位置指定一个名称，但不要在和标记之间放置任何文字例如：在介绍自己的网页文件me.htm中介绍自己简历的位置如下设置： 我的简历： 创建锚点后，可以使用A标记来创建指向该锚点的超链接例如：要在同一个页面中跳转到名为“jl”的锚点处，可以使用以下HTML代码： 点击可见我的简历 若要在其他页面中跳转到该锚点，则使用以下HTML代码： 我的简历,1.3.2 HTML基本标记,(3) 创建邮件链接 通过邮件链接(E-mail链接)可以启动电子邮件客户端程序（如Outlook或FoxMail等），并允许访问者向指定的地址发送邮件使用A标记创建邮件链接，该标记的Href属性应由3个部分组成：第1部分是电子邮件协议名称mailto，第2部分是电子邮件地址，第3部分是可选的邮件主题，其形式为“subject=主题”第1部分与第2部分之间用冒号( : )分隔，第2部分与第3部分之间用问号(?)分隔。

例如： 这里可以给我发信,,1.3.2 HTML基本标记,6. 使用表格 表格由表头、行和单元格所组成，这些元素分别用不同的标记来定义通过Table标记来定义表格；表格中的每一行通过Tr标记来表示；行中的单元格通过Td或Th标记来定义，其中Th标记定义表格的列标题单元格；表格的标题说明通过Caption标记来定义 表格标题文字 第1列表头第2列表头…第n列表头 第1列数据第2列数据…第n列数据 第1列数据第2列数据…第n列数据 …… ,1.3.2 HTML基本标记,【例1.4】创建图1.7所示的课程表1.3.2 HTML基本标记,源代码如下(Ex1-4.htm)： 课程表 课程表 节次星期一星期二星期三 星期四星期五 1、2专业英语操作系统 网络基础专业英语数据库 3、4Java程序设计数据库 实验Java程序设计操作系统 5、6网络基础实验 实验实验数据库原理 ,1.3.2 HTML基本标记,(1) 设置表格的属性 Table标记创建表格时，可以设置下列属性： Align=行中单元格的水平对齐方式 取值如下： left：左对齐(Td默认值) center：对中(Th默认值) right：右对齐 BackGround=表格背景图片的URL地址 BgColor=表格的背景颜色 Border=表格边框的宽度(像素)，默认值为0。

BorderColor=表格边框颜色，Border≠0时起作用 BorderColorDark=3D边框的阴影颜色，Border≠0时起作用 BorderColorLight=3D边框的高亮显示颜色，Border≠0时起作用 CellPadding=单元格内数据与单元格边框之间的间距(像素) CellSpacing=单元格之间的间距(像素) Width=表格的宽度(像素或百分比),1.3.2 HTML基本标记,(2) 设置行的属性 表格中的每一行是用TR标记来定义的，可以设置下列属性： Align=行中单元格的水平对齐方式取值为left(默认值)、center或right BackGround =作为行的背景图像文件的URL BgColor =行的背景颜色 BorderColor =行的边框颜色只有当Table标记的Border≠0起作用 BorderColorDark =行的3D边框的阴影颜色只有当Table标记的Border≠0起作用 BorderColorLlight=行的3D边框的高亮颜色只有当Table标记的Border≠。