网页设计HTML.ppt

1、第第六章六章 网络编程技术网络编程技术内容提要：内容提要：6.1 HTML基础知识基础知识6.2 HTML 语言结构语言结构6.3 表格与框架表格与框架6.4 表单设计表单设计6.5 嵌入图片、声音和视频图像嵌入图片、声音和视频图像10/27/202216.1 HTML基础知识基础知识 HTML(Hyper text Markup Language)超文本标记语言超文本标记语言一一种种描描述述文文档档结结构构的的标标记记语语言言，它它使使用用一一些些约约定定的的标标记记对对WWW上上的的各各种种信信息息进进行行标标注注。当当用用户户浏浏览览WWW上上的的信信息息时时，浏浏览览器器会会自自动动解

2、解释释这这些些标标记记的的含含义义，并并按按照照一一定定的的格格式式在在屏屏幕幕上上显显示示这这些些被被标标记记的的文文件件。任任何何可可以以运运行行浏浏览览器器的的计计算算机机都都能能阅阅读读并显示并显示HTML文件，不管其操作系统是什么，显示结果相同。文件，不管其操作系统是什么，显示结果相同。HTML文件的后缀名为文件的后缀名为.htm或或.html的文件。的文件。标记：标记：组成组成HTML的的“命令命令”。在。在HTML中，标记用符号中，标记用符号“”括起来。括起来。作用：作用：标注各种元素的输出格式。标注各种元素的输出格式。10/27/20222一个一个HTML文件的例子文件的例子

3、西北工业大学西北工业大学 我的第一个主页我的第一个主页 演示演示10/27/20223 HTMLHTML标记分类：标记分类：(1)(1)单边；单边；(2)(2)双边。双边。单单边边标标记记：单单边边标标记记元元素素为为开开放放式式标标记记，不不需需要要用用结结束束标标记来包含文本。如记来包含文本。如表示回车换行。表示回车换行。双双边边标标记记：双双边边标标记记元元素素提提供供了了开开始始和和结结束束，将将文文本本包包含含在在其其中中，故故也也称称为为容容器器(container)(container)。如如与与、与与等。等。说明：说明：1.1.“”之间是标记元素名及其参数。之间是标记元素名及其

4、参数。标记元素往往都带有若干参数，用以表明元素的属性，标记元素往往都带有若干参数，用以表明元素的属性，属性是对标记更详细的规定，并具有不同的取值。属性是对标记更详细的规定，并具有不同的取值。2.2.标记元素不区分大小写。标记元素不区分大小写。格式：格式：输出内容输出内容/10/27/202246 6.2 HTML.2 HTML语言结构语言结构 HTML文件的基本结构：文件的基本结构：HTML文件开始文件开始 文件头开始文件头开始 头信息部分头信息部分 文件头结束文件头结束 文件体开始文件体开始 正文部分正文部分 文件体结束文件体结束 HTML文件结束文件结束 说说明明：HTMLHTML文文件件

5、由由头头信信息息和和正正文文两两部部分分组组成成，其其中中，用用包包围的是围的是HTMLHTML语言标记，控制网页中各种元素的显示状态。语言标记，控制网页中各种元素的显示状态。10/27/202256 6.2.1.2.1 HTML HTML文档的头信息文档的头信息 举例：举例：这是一个头文件的例子这是一个头文件的例子 正文部分正文部分 演示演示10/27/20226说明：说明：1)用用和和标记括起来的部分是网页的标题，其内标记括起来的部分是网页的标题，其内 容被显示在浏览器窗口的标题条中。容被显示在浏览器窗口的标题条中。2)在头部分还可以定义类在头部分还可以定义类(class)及嵌入程序。及嵌

6、入程序。3)title的长度没有限制，但一般情况下它的长度不应超过的长度没有限制，但一般情况下它的长度不应超过64个个 字符。字符。4)title标记只能出现在文件头中。标记只能出现在文件头中。title标记格式：标记格式：文件标题文件标题 10/27/202276 6.2.2.2.2 页面排版页面排版 1.1.标题字体标题字体 标题字体标记：标题字体标记：h1 h6表示表示6种大小标题字体。种大小标题字体。举例：举例：标题大小标题大小 这是一号标题这是一号标题 这是二号标题这是二号标题 这是三号标题这是三号标题 这是四号标题这是四号标题 这是五号标题这是五号标题 这是六号标题这是六号标题 演

7、示演示10/27/20228hnhn标记的对齐属性：标记的对齐属性：格式：格式：#：left left 文本内容为左对齐文本内容为左对齐 center center 文本内容为中间对齐文本内容为中间对齐 right right文本内容为右对齐文本内容为右对齐 举例：举例：标题对齐属性标题对齐属性 二号标题居左显示二号标题居左显示 三号标题居中显示三号标题居中显示 四号标题居右显示四号标题居右显示 演示演示10/27/20229 2.2.文字字体文字字体 字体的大小字体的大小 格式：格式：从从1 17 7共有共有7 7级字体。级字体。字体的颜色字体的颜色 格式：格式：#在在00000000000

8、0FFFFFF(FFFFFF(十六进制十六进制)之间，前两位代表之间，前两位代表红色红色(red)(red)，中间两位代表，中间两位代表绿色绿色(green)(green)，后两位代表，后两位代表蓝色蓝色(blue)(blue)，每种色彩为，每种色彩为256256级颜色，通过配比不同的红、绿、蓝三种级颜色，通过配比不同的红、绿、蓝三种颜色的分量可以得出不同的颜色。常用颜色代码如表所示。颜色的分量可以得出不同的颜色。常用颜色代码如表所示。10/27/202210 颜色颜色 RGB 颜色颜色 RGB 黑色(Black)000000 红色(Red)FF0000 白色(White)FFFFFF 粉红色

9、(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、下标标记：下标标记：大字体与小字体大字体与小字体大字体标记：大字体标记：小字体标记：小字体标记：下划线与删除线下划线与删除线下划线标记：下划线标记：删除线标记：删除线标记：或或 10/27/202212 3.3.文字效果标记文字效果标记 文字闪烁文字闪烁 文字闪烁标记：文字闪烁标记：注意：注意：IE不支持此效果，而不支持此效果，而Netscape支持。支持。背景色与背景图背景色与背景图背景色标记：背景色标记：背景图标记：背景图标记：10/27/202213举例：举例：文字字体与效果文字字体与效果 加粗字体加粗字体 斜体加下划线斜体加下划线 7号字体号字体 蓝色加删除线蓝色加删除线 上标字体上标

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

12、转行标记关闭转行标记 格式：格式：作用：关闭文字转行功能，改由滚动条控制。作用：关闭文字转行功能，改由滚动条控制。举例：举例：关闭文字转行关闭文字转行 沧海笑，滔滔两岸潮沧海笑，滔滔两岸潮 浮沉随浪，只记今朝浮沉随浪，只记今朝 苍天笑，纷纷世上潮苍天笑，纷纷世上潮 谁负谁胜出，天知晓谁负谁胜出，天知晓 江山笑，烟雨遥江山笑，烟雨遥 涛浪淘尽，红尘俗世几多娇涛浪淘尽，红尘俗世几多娇 苍生笑，不再寂寥苍生笑，不再寂寥 豪情仍在，痴痴笑笑豪情仍在，痴痴笑笑 演示演示10/27/202216分段标记分段标记 格式：格式：功能：对文本进行分段操作，且段与段之间有一空行。功能：对文本进行分段操作，且段与段

13、之间有一空行。断行标记断行标记 格式：格式：功能：通知浏览器，在输出时，对功能：通知浏览器，在输出时，对 中内容的中内容的 格式不做修改地输出。格式不做修改地输出。10/27/202217举例：举例：关于分段与断行关于分段与断行 这是文章的第一段，这里使用了段标记这是文章的第一段，这里使用了段标记 这是文章的第二段，这里使用了段标记。这是文章的第二段，这里使用了段标记。并在此使用了行标记。并在此使用了行标记。请留意，这里使用了两个行标记。请留意，这里使用了两个行标记。以下将使用预格式文本标记，请留意。以下将使用预格式文本标记，请留意。我们成功地按照所输入的文本格式得到输出。我们成功地按照所输入

14、的文本格式得到输出。请比较程序与所显示的结果。请比较程序与所显示的结果。演示演示10/27/202218水平线标记水平线标记 格式：格式：作用：分割文档。作用：分割文档。举例：举例：关于水平线标记的使用关于水平线标记的使用 星期一的课程星期一的课程 8:009:50 Data Structure 10:2012:00 Mathematk8 2:304:20 Html 星期二的课程星期二的课程 演示演示10/27/2022195.居中标记居中标记格式：格式：功能：对整段文本进行居中。功能：对整段文本进行居中。举例：举例：居中标记的应用居中标记的应用 网页浏览器是基于屏幕显示窗口大小的网页浏览器是

15、基于屏幕显示窗口大小的 可以看到，可以看到，center 标记的作用与在标记中定义对齐属性是同样有标记的作用与在标记中定义对齐属性是同样有效的效的 但是，可以控制所有在其中的标记的对齐方式为中央对齐但是，可以控制所有在其中的标记的对齐方式为中央对齐 演示演示10/27/2022206.特殊符号特殊符号举例：举例：特殊符号特殊符号"100>5"&"500<1000"都是事实都是事实 特殊符号 HTML表示法>"&演示演示10/27/2022216 6.2.3.2.3 列表格式列表格式 1.无序列表无序列表 列表格

16、式：列表格式：格式格式1：格式格式2：格式格式3：列表项标记属性：列表项标记属性：type 格式格式1：格式格式2：其中其中#表示符号名称：表示符号名称：disk 实心圆点实心圆点(默认设置默认设置)chrcle 空心圆点空心圆点 square 实心方块实心方块10/27/202222 举例：举例：无序列表无序列表 列表项列表项 列表项列表项1 列表项列表项2 列表项列表项3 演示演示10/27/202223 2.2.有序列表有序列表 列表格式：列表格式：列表项标记属性：列表项标记属性：1)type数字形式属性：用数字形式属性：用type属性选择列表项符号格式的数字。属性选择列表项符号格式的数字。数字数字 type=1 1，2，3，小写字母小写字母 type=a a，b，c，大写字母大写字母 type=A A，B，C，小写罗马字母小写罗马字母 type=，大写罗马字母大写罗马字母 type=，2)start起始数字属性：所有标号均从最小数字开始，若要改变标起始数字属性：所有标号均从最小数字开始，若要改变标号起始数字，可用号起始数字，可用start属性，其格式：属性，其格式：#代表起始数