网页制作及应用（第二版）教学课件潘明寒网页 二版 第5章

《网页制作及应用（第二版）教学课件潘明寒网页 二版 第5章》由会员分享，可在线阅读，更多相关《网页制作及应用（第二版）教学课件潘明寒网页 二版 第5章（32页珍藏版）》请在金锄头文库上搜索。

1、网页制作及应用,第五章 网页设计语言 HTML,本章学习目标,1. HTML的概念 2. HTML的语法与结构 3. HTML的各种标签及其属性 4. 用HTML制作简单网页,5.1 HTML 简介,HTML（Hypertext Markup Language）称为超文本标记语言，是制作网页的基础，它把一台计算机中的文本或图形与其他计算机中的文本或图形方便地联系在一起，形成有机的整体。 HTML文件是纯文本文件，用Windows的记事本或写字板编辑，保存时文件扩展名为 .htm或 .html。 HTML文件不需要编译，由浏览器解释执行。所有脚本需要都嵌入到HTML文件中。,1. 一个HTML举

2、例,第一步：打开Windows的记事本。 第二步：输入下面代码 HTML网页设计教程 你好! 欢迎浏览本网页！ 第三步：以sample.htm为文件名保存文件并关闭该文件。 第四步：双击sample.htm文件，浏览器会自动执行它。,5.2 HTML文档一般标签,1HTML文档以开始，和成对出现，所有其他标签和元素都放在它们之间。 2是网页的头部标签，与之间通常包括标签和标签，是整个文档的头部信息，不在浏览器屏幕显示。 3用来设置文档标题，显示在窗口标题栏上。中不能包含其他标签。 4标签是单标签，提供网页关键字、文档解码方式等信息，便于搜索引擎搜索信息。 5和之间是网页主体内容。在标签中可以规

3、定整个文档的一些基本属性，如：背景色（bgcolor）、文字颜色（text）、背景图像（background）。 6所有标签不得交叉。,5.3 文本标签,1.常用文本标签符 （1），单标签，插入回车符 。 （2），双标签，其中i是16中某个数字 ，用黑体显示标题文字。 （3），双标签，划分段落，也可以单独使用 。 （4） ，单标签，换行并在该行下面画一条水平直线。 （5），双标签，被标签括起来的内容原样显示。 （6），双标签，使文字加粗。 （7），双标签，使文字显示为斜体 。 （8），双标签，使文字带下划线 。,2.滚动字幕标签,和实现文字和图片滚动，标签有以下几个常用属性： （1）derec

4、tion属性，指定文字移动方向，属性值有：left、right、up、down。默认向左滚动。 （2）behavior属性，指定文字移动方式，属性值有：scroll、 slide、 alternate，分别表示文字一圈一圈的绕着走、只走一次、来回走动。默认scroll。 （3）loop属性，指定循环次数，若不指定循环次数，则循环不止。 （4）scrollamount属性，指定文字移动的速度。 （5）bgcolor属性，指定文字背景色。,3.文本格式控制标签,是双标签，用来定义文本的字体、字号和字的颜色，如果不使用标签，则文本将按照标签的文本属性值显示，或按默认值显示。标签有以下3个属性： （1

5、）face，定义字体，默认宋体。 （2）size，定义字大小，取值范围17，默认3，可以用加号和减号设置相对值。 （3）color，定义字颜色，默认黑色。,5.4 列表标签,列表用于条理性的显示信息，常用列表有3种格式：无序列表，有序列表和定义列表。 （1）有序列表 对网页中的内容进行编号排列。在HTML中插入有序列表通过标签和实现，标签和之间的内容是有序列表的内容，列表的每一项必须包括在标签和之间。 有序列表的语法格式如下： 列表项1 列表项2 列表项n ,（2）无序列表 无序列表是指列表内容顺序任意的排列。与有序列表不同的是，每一列表项前不是用编号开始，而用一个项目符号开始，项目符号默认是

6、一个圆点。无序列表与有序列表实现方法相似，只要将标签代替有序列表中的即可。 无序列表的语法格式如下： 列表项1 列表项2 列表项n ,（3） 定义列表 定义列表用于对清单条目进行简短说明，首标签和尾标签之间的内容是定义列表的内容，列表项目用引导，用引导说明项。一个列表项目可以对应多个说明项。 定义列表的语法格式如下： 标题项1 说明1 说明2 标题项2 说明1 说明2 ,5.5 超文本链接标签,超文本链接又称为超链接，是网页中常用的技术，实现起始端点到目标端点的跳转。浏览网页时单击定义了超链接的文字或图像，会跳转到其他网页或网站。使用超链接使得顺序存放的文件在一定程度上具有随机访问能力，更加符

7、合人类的思维方式。HTML支持文档的超连接。,1. 超链接标签 是双标签，在与之间的是超链接的起始端点，又称为源点。 标签有3个重要属性： （1）href属性，指出链接目标端点的URL。 （2）name属性，用来在文档内部创建书签 。 （3）target属性，用来指定目标端点的显示窗口 。 _blank，打开一个新窗口显示目标端点内容。 _parent，在当前文档的父框架集窗口显示目标端点内容。 _self，在当前文档显示目标端点内容，是默认值。 _top，在链接所在的完整窗口显示目标端点内容。,超链接的起始端点通常是文字或图像。 （1）用文字作起始端点的格式： 字符串。 其中的字符串定义了文

8、字型的起始端点。 （2）用图像作起始端点的格式： 。 其中的定义了图像型的起始端点。,2 超链接的起始端点,3 .不同文件间的链接,（1）链接到图像 例如：美丽风光 （2）链接到本站点的网页 例如：上一页 （3）链接到因特网上的网站 例如：网易 （4）链接到邮箱 例如：联系我们 （5）链接到音乐文件 例如：死了都要爱,4.链接路径,参照当前文档所在位置，写出文档间相对路径。例如，站点web的文件关系如图所示。,（1）当前文档index.htm，链接b.htm，相对路径为：aa/b.htm。 （2）当前文档b.htm，链接a.jpg，相对路径为：a.jpg。 （3）当前文档b.htm，链接ind

9、ex.htm，相对路径为：/ lx-3.htm。 其中“”表示父文件夹。,5.图像标签,插入图像用标签完成，是单标签。有以下常用属性。 （1）src属性，指明图像的URL。 （2）width属性，定义图像显示的宽度，单位是像素。 （3）height属性，定义图像显示的高度，单位是像素。 （4）border属性，定义图像是否有边框线和边框线的粗细，值为0时无边框线。 （5）align属性，定义图像与文字间的排列方式。 （6）alt属性，定义图像的提示性文字，当鼠标指向图像时提示文字会显示在鼠标旁。,5.6 表格标签,1标签 是定义表格的总标签，一个表格的全部内容包含在和标签之中。标签的常用属性有

10、： （1）border属性，定义边框宽度，单位是像素，不包含border属性时默认无边框。 （2）bordercolor属性，定义边框颜色。 （3）align属性，定义表格在页面的水平位置，可取值为left、right、center，分别表示表格在网页左端、右端或使表格居中。 （4）bgcolor属性，定义表格背景色。 （5）wigth属性，定义表格宽度，有百分比和像素值2种。 （6）height属性，定义表格高度。,2标签 表格的定义顺序是首先定义表格的一行，然后依此定义该行中的单元格。标签用来定义表格中的一行，是双标签，表格有几行，就有几组标签。标签的常用属性有： （1）align属性，定

11、义水平对齐方式，取值可选：left、center、right。 （2）valign属性，定义垂直对齐方式，取值可选：top、middle、bottom。 （3）bgcolor属性，定义行的背景色。 （4）bordercolor属性，定义行的边框色。,3标签和标签 标签和标签都用来定义行中单元格，用和定义单元格的表格头，单元格中的文字黑体居中。用标签和定义的单元格为普通单元格。标签和标签的常用属性有： （1）align属性，单元格内容水平对齐方式，取值可选：left、center、right。 （2）valign属性，单元格内容垂直对齐方式，取值可选：top、middle、bottom。 （3）

12、colspan属性，单元格向右打通的栏数，在行的方向合并单元格。 （4）rpwspan属性，单元格向下打通的栏数，在列的方向合并单元格。 （5）width属性，单元格的宽度，单位是像素或总宽度的百分比。 （6）height属性，单元格的高度，单位是像素或总高度的百分比。,5.7 表单标签,一个表单是由窗体和控件组成的，通常包括说明性文字、输入框、提交和重置按钮等，其中的输入框和按钮等称为控件。当用户填写信息并执行提交操作以后，表单内容就从客户端的浏览器传送到服务器上，经过服务器上的 ASP 等处理程序处理，再将用户所需信息返回给客户端的浏览器。我们把具有这样功能的网页称为交互性网页。 向表单输

13、入信息的控件有：文本框、下拉菜单、单选框、复选框等。,1 表单标签 是双标签，构建窗体，其他表单标签必须放置在与之间。标签基本语法结构如下： . 说明： （1）action属性，指定表单处理程序的URL，通常是ASP应用程序。提交表单信息后，将转去执行指定的ASP应用程序。 （2）method属性，指定表单数据的提交方式，有post和get两种。post方式可以传送大量资料，get方式只接受低于1K的资料，当get方式传送数据时，输入的数据会加在action指定的地址后面传送到服务器，保密性差。get方式主要用来从服务器中获取信息，post方式主要用来向服务器发送信息。 （3）name属性，用

14、来给表单起名，便于处理表单。 （4）target属性，用来指定表单处理结果显示的目标窗口。,2 表单输入标签,是单标签，定义用户的输入区域，标签的语法如下： ,Type属性决定输入区域的类型，有以下几种： （1）type=“text“，单行文本输入框。 （2）typet=“textarea“，多行文本输入框。 （3）type=“password“，密码输入框，输入的字符将用星号表示。 （4）type=“checkbox“，复选框，可同时选中一个或多个复选项。 （5）type=“radio“，单选项，只能选中所有单选项中的一项。多个单选项控件在一起时name属性要相同，才能产生多选一的效果。 （

15、6）type=“submit“，提交按钮，将表单中的信息送到服务器，按钮上的文字用value属性设置。例如： （7）type=“reset“，重置按钮，清除表单数据以便重新输入。按钮上的文字用value属性设置。 （8）type=“button“，普通按钮，执行用户定义的事件。按钮上的文字用value属性设置。,5.8 多媒体标签,1. 插入图像 是单标签，格式如下： 。 说明： 1src，指定图像文件的URL。 2height，指定图像的显示高度，单位是像素。 3width，指定图像的显示宽度，单位是像素。 4border，指定图像的边框粗细，单位是像素，值为0时无边框。 5alt，设置此属

16、性后，当鼠标指向图像会显示提示文字。 6align属性，指定文字与图像之间的对齐方式，取值有：top（上对齐）、middle（居中对齐）、bottom（下对齐）、right（右对齐）、left（左对齐）。,2. 插入背景音乐 是单标签，只适用于IE浏览器。格式如下： 说明： 1src属性，指定音乐文件。 2autostart属性，指定是否自动播放音乐文件，默认false（否），若选true（是），则打开网页后自动播放背景音乐。 3Loop属性，用来指定音乐文件的播放次数。Loop=3表示重复播放3次，若选infinite，则重复播放直到网页关闭。 例如：,5.9 框架标签,用HTML创建框架用两个标签：框架集标签和框架标签，它们都是双标签。例如:, 框架练习 ,1标签 和标签用来分割浏览器窗口，确定分割后各窗口的大小。框架子窗口的排列顺序为：从上到下，从左到右。,（1）cols属性，定义框架集各框