网页设计HTML.ppt

网页设计HTML.ppt

《网页设计HTML.ppt》由会员分享，可在线阅读，更多相关《网页设计HTML.ppt（51页珍藏版）》请在冰豆网上搜索。

第第六章六章网络编程技术网络编程技术内容提要：

内容提要：

6.1HTML基础知识基础知识6.2HTML语言结构语言结构6.3表格与框架表格与框架6.4表单设计表单设计6.5嵌入图片、声音和视频图像嵌入图片、声音和视频图像10/27/202216.1HTML基础知识基础知识HTML（HypertextMarkupLanguage）超文本标记语言超文本标记语言一一种种描描述述文文档档结结构构的的标标记记语语言言，它它使使用用一一些些约约定定的的标标记记对对WWW上上的的各各种种信信息息进进行行标标注注。

当当用用户户浏浏览览WWW上上的的信信息息时时，浏浏览览器器会会自自动动解解释释这这些些标标记记的的含含义义，并并按按照照一一定定的的格格式式在在屏屏幕幕上上显显示示这这些些被被标标记记的的文文件件。

任任何何可可以以运运行行浏浏览览器器的的计计算算机机都都能能阅阅读读并显示并显示HTML文件，不管其操作系统是什么，显示结果相同。

文件，不管其操作系统是什么，显示结果相同。

HTML文件的后缀名为文件的后缀名为.htm或或.html的文件。

的文件。

标记：

标记：

组成组成HTML的的“命令命令”。

在。

在HTML中，标记用符号中，标记用符号“”括起来。

括起来。

作用：

作用：

标注各种元素的输出格式。

标注各种元素的输出格式。

10/27/20222一个一个HTML文件的例子文件的例子西北工业大学西北工业大学我的第一个主页我的第一个主页演示演示10/27/20223HTMLHTML标记分类：

标记分类：

（1）

（1）单边；单边；

（2）

（2）双边。

双边。

单单边边标标记记：

单单边边标标记记元元素素为为开开放放式式标标记记，不不需需要要用用结结束束标标记来包含文本。

如记来包含文本。

如表示回车换行。

表示回车换行。

双双边边标标记记：

双双边边标标记记元元素素提提供供了了开开始始和和结结束束，将将文文本本包包含含在在其其中中，故故也也称称为为容容器器（container）（container）。

如如与与、与与等。

等。

说明：

说明：

1.1.“”之间是标记元素名及其参数。

之间是标记元素名及其参数。

标记元素往往都带有若干参数，用以表明元素的属性，标记元素往往都带有若干参数，用以表明元素的属性，属性是对标记更详细的规定，并具有不同的取值。

属性是对标记更详细的规定，并具有不同的取值。

2.2.标记元素不区分大小写。

标记元素不区分大小写。

格式：

格式：

输出内容输出内容/10/27/2022466.2HTML.2HTML语言结构语言结构HTML文件的基本结构：

文件的基本结构：

HTML文件开始文件开始文件头开始文件头开始头信息部分头信息部分文件头结束文件头结束文件体开始文件体开始正文部分正文部分文件体结束文件体结束HTML文件结束文件结束说说明明：

HTMLHTML文文件件由由头头信信息息和和正正文文两两部部分分组组成成，其其中中，用用包包围的是围的是HTMLHTML语言标记，控制网页中各种元素的显示状态。

语言标记，控制网页中各种元素的显示状态。

10/27/2022566.2.1.2.1HTMLHTML文档的头信息文档的头信息举例：

举例：

这是一个头文件的例子这是一个头文件的例子正文部分正文部分演示演示10/27/20226说明：

说明：

1）用用和和标记括起来的部分是网页的标题，其内标记括起来的部分是网页的标题，其内容被显示在浏览器窗口的标题条中。

容被显示在浏览器窗口的标题条中。

2）在头部分还可以定义类在头部分还可以定义类（class）及嵌入程序。

及嵌入程序。

3）title的长度没有限制，但一般情况下它的长度不应超过的长度没有限制，但一般情况下它的长度不应超过64个个字符。

字符。

4）title标记只能出现在文件头中。

标记只能出现在文件头中。

title标记格式：

标记格式：

文件标题文件标题10/27/2022766.2.2.2.2页面排版页面排版1.1.标题字体标题字体标题字体标记：

标题字体标记：

h1h6表示表示6种大小标题字体。

种大小标题字体。

举例：

举例：

标题大小标题大小这是一号标题这是一号标题这是二号标题这是二号标题这是三号标题这是三号标题这是四号标题这是四号标题这是五号标题这是五号标题这是六号标题这是六号标题演示演示10/27/20228hnhn标记的对齐属性：

标记的对齐属性：

格式：

格式：

#：

leftleft文本内容为左对齐文本内容为左对齐centercenter文本内容为中间对齐文本内容为中间对齐rightright文本内容为右对齐文本内容为右对齐举例：

举例：

标题对齐属性标题对齐属性二号标题居左显示二号标题居左显示三号标题居中显示三号标题居中显示四号标题居右显示四号标题居右显示演示演示10/27/202292.2.文字字体文字字体字体的大小字体的大小格式：

格式：

从从1177共有共有77级字体。

级字体。

字体的颜色字体的颜色格式：

格式：

#在在000000000000FFFFFF（FFFFFF（十六进制十六进制）之间，前两位代表之间，前两位代表红色红色（red）（red），中间两位代表，中间两位代表绿色绿色（green）（green），后两位代表，后两位代表蓝色蓝色（blue）（blue），每种色彩为，每种色彩为256256级颜色，通过配比不同的红、绿、蓝三种级颜色，通过配比不同的红、绿、蓝三种颜色的分量可以得出不同的颜色。

常用颜色代码如表所示。

颜色的分量可以得出不同的颜色。

常用颜色代码如表所示。

10/27/202210颜色颜色RGB颜色颜色RGB黑色（Black）000000红色（Red）FF0000白色（White）FFFFFF粉红色（Fuchsia）FF00FF灰色（Gray）808080茶色（Maroon）800000银色（Silver）C0C0C0紫色（Purple）800080深蓝色（Navy）000080蓝绿色（Teal）008080蓝色（Blue）0000FF绿色（Green）008000浅蓝色（Aqua）00FFFF橄榄色（Olive）808000浅绿色（Lime）00FF00黄色（Yellow）FFFF00颜色代码表颜色代码表10/27/202211字体样式字体样式粗体与斜体粗体与斜体粗体标记：

粗体标记：

或或斜体标记：

斜体标记：

或或或或上标与下标上标与下标上标标记：

上标标记：

下标标记：

下标标记：

大字体与小字体大字体与小字体大字体标记：

大字体标记：

小字体标记：

小字体标记：

下划线与删除线下划线与删除线下划线标记：

下划线标记：

删除线标记：

删除线标记：

或或10/27/2022123.3.文字效果标记文字效果标记文字闪烁文字闪烁文字闪烁标记：

文字闪烁标记：

注意：

注意：

IE不支持此效果，而不支持此效果，而Netscape支持。

支持。

背景色与背景图背景色与背景图背景色标记：

背景色标记：

背景图标记：

背景图标记：

10/27/202213举例：

举例：

文字字体与效果文字字体与效果加粗字体加粗字体斜体加下划线斜体加下划线7号字体号字体蓝色加删除线蓝色加删除线上标字体上标字体E=mc2下标字体下标字体H2O演示演示10/27/2022144.4.转行标记转行标记格式：

格式：

作用：

作用：

强迫文字转行。

强迫文字转行。

举例：

举例：

文字转行文字转行沧海笑，滔滔两岸潮沧海笑，滔滔两岸潮浮沉随浪，只记今朝浮沉随浪，只记今朝苍天笑，纷纷世上潮苍天笑，纷纷世上潮谁负谁胜出，天知晓谁负谁胜出，天知晓江山笑，烟雨遥江山笑，烟雨遥涛浪淘尽，红尘俗世几多娇涛浪淘尽，红尘俗世几多娇清风笑，竟惹寂寥清风笑，竟惹寂寥豪情还胜了一襟晚照豪情还胜了一襟晚照苍生笑，不再寂寥苍生笑，不再寂寥豪情仍在，痴痴笑笑豪情仍在，痴痴笑笑演示演示10/27/202215关闭转行标记关闭转行标记格式：

格式：

作用：

关闭文字转行功能，改由滚动条控制。

作用：

关闭文字转行功能，改由滚动条控制。

举例：

举例：

关闭文字转行关闭文字转行沧海笑，滔滔两岸潮沧海笑，滔滔两岸潮浮沉随浪，只记今朝浮沉随浪，只记今朝苍天笑，纷纷世上潮苍天笑，纷纷世上潮谁负谁胜出，天知晓谁负谁胜出，天知晓江山笑，烟雨遥江山笑，烟雨遥涛浪淘尽，红尘俗世几多娇涛浪淘尽，红尘俗世几多娇苍生笑，不再寂寥苍生笑，不再寂寥豪情仍在，痴痴笑笑豪情仍在，痴痴笑笑演示演示10/27/202216分段标记分段标记格式：

格式：

功能：

对文本进行分段操作，且段与段之间有一空行。

功能：

对文本进行分段操作，且段与段之间有一空行。

断行标记断行标记格式：

格式：

功能：

通知浏览器，在输出时，对功能：

通知浏览器，在输出时，对中内容的中内容的格式不做修改地输出。

格式不做修改地输出。

10/27/202217举例：

举例：

关于分段与断行关于分段与断行这是文章的第一段，这里使用了段标记这是文章的第一段，这里使用了段标记这是文章的第二段，这里使用了段标记。

这是文章的第二段，这里使用了段标记。

并在此使用了行标记。

并在此使用了行标记。

请留意，这里使用了两个行标记。

请留意，这里使用了两个行标记。

以下将使用预格式文本标记，请留意。

以下将使用预格式文本标记，请留意。

我们成功地按照所输入的文本格式得到输出。

我们成功地按照所输入的文本格式得到输出。

请比较程序与所显示的结果。

请比较程序与所显示的结果。

演示演示10/27/202218水平线标记水平线标记格式：

格式：

作用：

分割文档。

作用：

分割文档。

举例：

举例：

关于水平线标记的使用关于水平线标记的使用星期一的课程星期一的课程8:

009:

50DataStructure10:

2012:

00Mathematk82:

304:

20Html星期二的课程星期二的课程演示演示10/27/2022195.居中标记居中标记格式：

格式：

功能：

对整段文本进行居中。

功能：

对整段文本进行居中。

举例：

举例：

居中标记的应用居中标记的应用网页浏览器是基于屏幕显示窗口大小的网页浏览器是基于屏幕显示窗口大小的可以看到，可以看到，center标记的作用与在标记中定义对齐属性是同样有标记的作用与在标记中定义对齐属性是同样有效的效的但是，可以控制所有在其中的标记的对齐方式为中央对齐但是，可以控制所有在其中的标记的对齐方式为中央对齐演示演示10/27/2022206.特殊符号特殊符号举例：

举例：

特殊符号特殊符号"100>5"&"500<1000"都是事实都是事实特殊符号HTML表示法>"&演示演示10/27/20222166.2.3.2.3列表格式列表格式1.无序列表无序列表列表格式：

列表格式：

格式格式1：

格式格式2：

格式格式3：

列表项标记属性：

列表项标记属性：

type格式格式1：

格式格式2：

其中其中#表示符号名称：

表示符号名称：

disk实心圆点实心圆点（默认设置默认设置）chrcle空心圆点空心圆点square实心方块实心方块10/27/202222举例：

举例：

无序列表无序列表列表项列表项列表项列表项1列表项列表项2列表项列表项3演示演示10/27/2022232.2.有序列表有序列表列表格式：

列表格式：

列表项标记属性：

列表项标记属性：

1）type数字形式属性：

用数字形式属性：

用type属性选择列表项符号格式的数字。

属性选择列表项符号格式的数字。

数字数字type=11，2，3，小写字母小写字母type=aa，b，c，大写字母大写字母type=AA，B，C，小写罗马字母小写罗马字母type=，大写罗马字母大写罗马字母type=，2）start起始数字属性：

所有标号均从最小数字开始，若要改变标起始数字属性：

所有标号均从最小数字开始，若要改变标号起始数字，可用号起始数字，可用start属性，其格式：

属性，其格式：

#代表起始数