1、WWW技术简介,WWW技术简介,WWW的概念WWW是World Wide Web的缩写，简称为Web（万维网）。WWW起源于1989年3月，是由欧洲量子物理实验室CERN开发的主从结构分布式（“客户机/服务器”模式）超文本系统。,WWW的特点和结构,WWW是一个全球性的信息系统，使计算机能够在Internet上相互传送基于超媒体的数据信息。 WWW也可以用来建立Intranet(企业内部网)的信息系统。 WWW具有三个要素： 统一的资源命名方式：URL(统一资源定位符，即网址) 统一的资源访问方式：HTTP(超文本传输协议) 统一的信息组织方式：HTML(超文本标记语言),WWW的特点和结构,
2、WWW具有以下特点： 分布式的信息资源 统一的用户界面 支持各种信息资源和各种媒体的演播 广泛的用途,WWW的特点和结构,WWW采用“客户机/服务器”模式，客户机与服务器的通信过程如下： 用户打开浏览器窗口； 在地址栏输入网址，按下回车键或单击浏览器窗口中的“转到”按钮，HTTP请求被发送到网站的服务器上； 服务器将用户请求的网页返回，浏览器对网页进行解释，将结果显示在窗口中。,Web服务器的概念,Web服务器是根据Web浏览器的请求提供文件服务的软件。,步骤1：Web浏览器请求静态网页,步骤2：Web服务器查找网页,步骤3：Web服务器将网页发送到请求浏览器,常见的Web服务器,常见的 We
3、b 服务器包括： Microsoft Internet Information Server(IIS) Microsoft Personal Web Server(PWS) Apache HTTP Server Netscape Enterprise Server Sun ONE Web Server,HTML基础,2.什么是标记？ 标记是网页文档中的一些有特定意义的符号，这些符号指明如何显示文档中的内容。 标记总是放在三角括号中，大多数标记都成对出现（有开始标记和结束标记）。结束标记和开始标记所用的字符相同，只是前面加一个斜杠。例如： 用于标记一个自然段。 标记可以具有相应属性即各种参数，如
4、size、color、 text、 width和noshade等。 例如：Hello 标记可以嵌套使用。 例如：Dreamweaver,HTML基础,3.什么是超文本、超媒体和超链接？ 超文本是网页上具有链接功能的文字。例如：新浪网 武汉大学 百度 超媒体是网页上具有链接功能的多媒体。 超链接是超文本和超媒体的统称，分为文字和图像（包括动画）两种。网页中的一段文字、一幅图像或图像的某一部分等都可以定义为超链接。,HTML基础,二、如何编写和浏览HTML网页文档 1.如何编写HTML网页文档？ 启动记事本程序，利用HTML语言编写源代码。输入完毕后，选择“文件”菜单中的“保存”或“另存为”命令，
5、打开“另存为”对话框，指定合适的存储路径和文件名（注意在“保存类型”下拉列表框中选择“所有文件”选项）。 启动Dreamweaver，选择“文件”“新建”，打开“新建文档”对话框：选择“常规”选项卡，在“类别”列表中选择“基本页”选项，在“基本页”列表里选择“HTML”选项，单击“创建”按钮。单击“文档”工具栏上的“代码”按钮，在编辑区中编写源代码。输入完毕后，选择“文件”菜单中的“保存”或“另存为”命令，打开“另存为”对话框，指定合适的存储路径和文件名。,HTML基础,二、如何编写和浏览HTML网页文档 2.如何浏览HTML网页文档？ 启动IE，在浏览器窗口的地址栏输入网页文档的URL。 启
6、动Dreamweaver，选择“文件”“打开”，打开要浏览的网页文档，单击“文档”工具栏上的“在浏览器中预览/调试”按钮，在弹出菜单中选择“预览在IExplore 6.0”选项；或者直接按下F12快捷键。,HTML基础,三、HTML的常用标记 1.文档结构标记用来指明一个HTML文档的基本结构。 （1）文档标记： 整个HTML文档内容均在此标记之中。 （2）头部标记： 凡是在此标记之内的内容，例如标题等，均属于头部信息。头部信息不显示在Web页中。,HTML基础,（3）标题标记： 此标记之间的内容将作为文档标题显示在浏览器的标题栏中。注意： 标记只能放在标记之间。 （4）主体标记： 主体是We
7、b页的主要部分，在标记之间的内容将显示在Web页中。,HTML基础,结构标记示例斜体字文本,HTML基础,2.格式标记 （1）段落标记：此标记用来创建一个段落，在此标记之间的文本将按照段落的格式显示。 （2）换行标记：此标记没有结束标记，用来创建一个换行。 （3）两边缩进标记：在此标记之间的文本将按照两边缩进的方式显示。,HTML基础,（4）项目列表标记：、 用来创建项目列表 用来创建列表中的上层项目 用来创建列表中的下层项目和都必须放在标记之间。例 创建一个项目列表：,HTML基础,该网页的HTML源文件如下：项目列表示例中国城市北京上海广州美国城市华盛顿芝加哥纽约,HTML基础,（5）有/
8、无序号列表标记：、 标记用来创建有序号列表标记用来创建无序号列表标记只能在或标记之间使用，用来创建列表项。若放在之间，则每个列表项前有一个数字；若放在之间，则每个列表项前有一个圆点。,HTML基础,例创建有序号列表和无序号列表：,HTML基础,该网页的HTML源文件如下：有/无序号列表标记示例中国城市北京上海广州美国城市华盛顿芝加哥纽约,HTML基础,（6）区隔标记：此标记主要用来设定HTML文档中文字、图形、表格等元素的显示位置。 例如：表示标记中的文本水平居中显示。 align属性用来说明水平对齐方式，取值可以是left(左对齐)、center(居中)或right(右对齐) 。,HTML基
9、础,3. 文本标记 （1）标题标记： (n的范围为16)是最大的标题，则是最小的标题。被标示的文字将以粗体的方式显示在页面中。 （2）字体标记：、之间的文本以黑体字的形式输出之间的文本以斜体字的形式输出之间的文本以加下划线的形式输出,HTML基础,（3）斜体和加重标记：、用来输出需要强调的文本(通常是斜体)则用来输出加重文本(通常是黑体) （4）字型标记： 此标记通常用来控制文字的字型、大小与颜色。它主要有三个属性face、size和color。face属性用来指定文字的字型，如果指定的字型不存在于系统中，将使用默认字型。size属性用来指定文字的大小，可以取值+1+6、-1-6、17，7为最
10、大字体。,HTML基础,color属性用来指定文字的颜色，颜色的取值可以是预设的颜色名称或者十六进制的RGB颜色码。 例如：网页设计教程例如： 网页设计实验指导书十六进制的RGB颜色码是用六位十六进制数字表示的红、绿、蓝三原色的组合颜色。,HTML基础,例 文本标记的综合示例,HTML基础,该网页的HTML源文件如下：文本标记的综合示例最大的标题 使用h3的标题 最小的标题 黑体字文本 斜体字文本 加下划线文本 强调文本 加重文本 size取值“5“、 color取值“red“时的文本,HTML基础,4. 链接标记 （1）href属性用来指定链接的目标地址，可使用URL。在标记之间可指定作为超
11、链接的文本或图像。例如：武汉大学,HTML基础,href属性的值也可以是“mailto:Email地址”的形式。 例如： 联系我当在网页中单击这个超链接时，将调用系统默认的客户端电子邮件软件，建立一个空白的电子邮件发送给指定的邮件地址。,HTML基础,标记还具有target属性，此属性用来指明链接网页显示的目标窗口，可取_self、_blank、_parent或_top四个值中的任何一个，_self为默认值。 例如：新浪网,HTML基础,（2）锚点链接：此标记用来在网页中创建一个锚点(书签)，以实现同一网页内不同部分之间的跳转。例如：在页面顶端创建一个锚点：页首要找到锚点所标示的位置，就必须使
12、用标记。例如：回到页首,HTML基础,例 链接标记的综合示例链接标记的综合示例创建锚点处欢迎想要学习网页制作的同学访问网站武汉大学,HTML基础,本网站的主要内容 在新窗口中显示 欢迎给我来信，我的E-Mail是：点击此处回到锚点处,5.图像标记和多媒体标记 （1）图像标记：此标记用于将图像文件加载到网页文档中显示。例如，网页文档与图像文件whu.jpg在同一个目录下，则图像标记写成：假如图像文件放在网页文档所在目录的一个子目录(images)下，则图像标记写成：假如图像文件放在网页文档所在目录的上层目录下，则图像标记写成：。,HTML基础,此外，标记还有如下一些常用属性： alt：当浏览器不
13、能显示指定图像时，则以指定给alt属性的字符串替代图像。 align：对齐方式。 border：设定图像的边框，如果值为0就表示不显示边框。 width：设定图像宽度，单位为像素或百分比。 height：设定高度高度，单位为像素或百分比。,HTML基础,例 图像标记示例,HTML基础,（2）多媒体标记 设置音乐和影像文件的超链接在HTML中，可播放的音乐文件格式包括au、mid和wav等，可播放的影像文件格式包括mov、mpg和avi等。若要提供音乐或影像文件供浏览者播放，可建立指向音乐或影像文件的超链接。例如：Do I have to cry for you绝对巨星 直接将音乐或影像嵌入网页
14、利用标记可在网页中插入各种媒体，格式可以是 mid、wav、au、avi等。,HTML基础,播放背景音乐利用标记可在网页中播放背景音乐，即：若“播放次数”设为infinite，音乐将循环播放， 直到网页关闭为止。例如：,HTML基础,6. 表格标记 （1）HTML中主要通过四个标记完成表格的创建： 标记用于创建表格； 标记用于创建表格中的行； 标记用于创建表格中的单元格； 标记用于创建表格的标题单元格，此单元格中的文字将以粗体的方式显示。 （2）可以在表格的单元格中创建新的表格，即嵌套表格。,HTML基础,例 表格标记示例,HTML基础,表格标记示例球队 基本资料所属国家国际排名,HTML基础,皇家马德里西班牙1切尔西英格兰2AC米兰意大利3拜仁慕尼黑德国4,HTML基础,
