ASP动态网页设计　教学课件 ppt 作者 邵丽萍 等 第二章

《ASP动态网页设计　教学课件 ppt 作者 邵丽萍 等 第二章》由会员分享，可在线阅读，更多相关《ASP动态网页设计　教学课件 ppt 作者 邵丽萍 等 第二章（95页珍藏版）》请在金锄头文库上搜索。

1、1,第2章 HTML语言,2.1 HTML文档基本结构标记 2.2 文本格式标记 2.3 列表标记 2.4 超链接标记 2.5 嵌入对象标记 2.6 表格标记 2.7 地址标记 2.8 框架标记 2.9 表单标记 2.10 地图标记 2.11 其他标记,2,学习目标,了解HTML语言的作用 掌握HTML文档的基本结构标记 掌握页面的超链接标记 掌握在页面上插入对象的标记 掌握页面的表格标记 掌握页面的表单标记,3,2.1 HTML文档基本结构标记,2.1.1 开始与结束标记 2.1.2 头部标记 2.1.3 标题标记 2.1.4 主体标记 2.1.5 设置HTML文档背景 2.1.6 说明信息

2、标记 2.1.7 注释标记,4,2.1.1 开始与结束标记,HTML文档的开始标记是，它告诉浏览器下面的内容是HTML文档，结束标记为标记，它告诉浏览器HTML文档结束了。 语法格式: HTML文档的所有内容 ,5,2.1.2 头部标记,HTML文档的头部标记是，它表示浏览器下面的内容是HTML文档的头部，显示在文本之前，而标记告诉浏览器头部内容结束了。 语法格式： HTML文档的头部内容 头部内容一般包括注释、META和标题。,6,2.1.3 标题标记,和标记中间所包含的文字将成为这个Web页的标题，一般写在头部标记之中。标题文字会显示在Web浏览器最上面的title（标题）栏上。浏览器用户

3、可以把标题加入收藏夹中，所以标题文字最好使用中文并且有明确的意义。 语法格式： 网页的标题,7,2.1.3 标题标记,【例2.1】2-1.html文件，头部标记和标题标记的使用。 2-1 这里显示的是标题文字 这里显示的是头部的文字 保存文件名为2-1.html。 在IE浏览器中显示的结 果如图所示。,8,2.1.4 主体标记,标记是HTML文档主体标记的开始，并对应结束符。HTML文档的主要内容都出现在和标记之中。HTML文档中只能有一个body标记，并且它只能跟在head标记后面。 语法格式： 主体内容 ,9,2.1.4 主体标记,【例2.2】2-2.html，使用HTML语言的主体标记。

4、 2-2 这里显示的是头部标记中的文字 这里显示的是主体标记中的文字 ,10,2.1.5 设置HTML文档背景,标记还具有一些属性，可以设置HTML文档的背景色，可使用图片/图像作为背景，确定链接的颜色，设置文字的颜色等。 语法格式： 文档内容 其中： bgcolor，用来指定HTML的背景颜色。,11,2.1.5 设置HTML文档背景,text，用来指定HTML文件中的文字色彩属性。 link，用来指定HTML文件中待连接的超链接对象的色彩属性。 alink，用来指定HTML文件连接中的超链接对象的色彩属性。 vlink，用来指定HTML文件中已连接的超链接对象的色彩属性。 backgrou

5、nd，用来指定作为HTML背景的平铺图像。,12,2.1.5 设置HTML文档背景,【例2.3】2-3.html，改变文字的颜色和背景的颜色。 2-3 这是使用HTML语言编写的Web页面文件 ,13,2.1.6 说明信息标记,在网页的头部还可以看到meta标记，它用来描述说明信息，说明文档使用的语言字符集信息、作者信息、文档过期时间、关键词列表、页面的自动刷新属性等。meta标记中的内容在浏览器中不显示。 语法格式： ,14,2.1.7 注释标记,为了使程序清楚、容易理解，可以添加注释标记“”或写为“”，在注释标记这对符号之间的内容不被浏览器显示。 例如： 用在HTML文档的第一行，说明文档

6、的版本信息。,15,2.2 文本格式标记,2.2.1 标题字体标记 2.2.2 字体的大小与颜色标记 2.2.3 段落标记与换行标记 2.2.4 水平线标记 2.2.5 字符格式化标记,16,2.2.1 标题字体标记,标题字体标记用来显示不同的黑体字，是通过和标记对实现的。和标记对用来设置HTML文档的大号标题字体，依次可以标注出6个层级的标题字体。 语法格式: 标题文字 (i=1,6),17,2.2.1 标题字体标记,【例2.4】2-4.html，不同的标题字体。 这是h1标题字体！ 这是h3标题字体! 这是h5标题字体! ,18,2.2.2 字体的大小与颜色标记,字体的大小与颜色标记和能够

7、改变包含的字符、单词、短语、文本的字体大小和颜色。 语法格式: 文字 文本字体大小从17，默认为3号字体。,19,2.2.2 字体的大小与颜色标记,【例2.5】2-5.html ，字体的大小和颜色。 这是7号字体！ 这是5号字体！ 这是3号字体！ 这是1号字体！ ,20,2.2.3 段落标记与换行标记,在HTML文档里输入文字会根据窗口的宽度自动换行。 是HTML语言中特有的段落标记。在文档中的，指出在这儿告一段落，下面的文字换行从头再开始。 标记用来标识一个换行动作。在HTML文件中可以用它来调整行间距。 语法格式: 文本 文本,21,2.2.3 段落标记与换行标记,【例2.6】2-6.ht

8、ml，学习如何使用段落和换行标记。 在HTML文档里不需要在意文章每行的宽度，不必担心文字是不是太长了而被截掉，它会根据窗口的宽度自动换行。（加段落标记）它会根据窗口的宽度做自动转折（加换行标记）到下一行的工作。 ,22,2.2.4 水平线标记,水平线标记，可以在HTML文档中插入一条水平线，线的宽度和高度可以设置。这个标记对于美化页面很有帮助。 语法格式: size 表示水平线宽度。 align 表示水平线位置。 width 表示水平线长度可以用满屏宽度的百分数表示，默认时为100%。,23,2.2.4 水平线标记,【例2.7】2-7.html，插入水平线。 插入水平线 ,24,2.2.5

9、字符格式化标记,个别的字或句子可以使用不同的字型，斜体使用或标记强调，黑体使用或标记着重强调，下划线使用标记，打字机字体用标记。 更多的格式标记还有： ：显示大型文本； ：标记HTML指令； ：标记定义的语句； ：标记键盘字符；,25,2.2.5 字符格式化标记,：按照原来输入的方式原样显示文字间隔、换行、空白等； ：标记给文本加上删除线； ：标记某个命令的例子； ：创建下标； ：显示小号尺寸的文本； ：创建上标； ：标记程序变量。 注意：它们的语法格式都是成对出现的。,26,2.2.5 字符格式化标记,【例2.8】2-8.html文件，使用字符格式化标记。 斜体(斜体) 黑体(黑体) 打字机

10、字体程序变量x y2 z3 HTML指令例1 使用键盘字符时a%#!()&* 用以显示大型文本 看看是怎样使文本保持原有模样的！ #!/bin/csh cd$SCR* cfsgetmysrc.f:mycfsdir/mysrc.f fc-02-omya.outmysrc.f mya.out ,27,2.3 列表标记,2.3.1 未标序的列表 2.3.2 标序列表 2.3.3 解释列表 2.3.4 综合列表,28,2.3.1 未标序的列表,未标序的列表由3个标记组成： 说明是未标序的列表，标记于各列表项之前，最后加上列表结束符。 语法格式： ,29,2.3.2 标序列表,方法与未标序的列表相似，先

11、说明种类，再加上标记于各项之前，最后加上列表结束符。在每一行列表的前面显示的是数字符号。 语法格式: ,30,2.3.3 解释列表,解释列表包括一系列名词和解释。先标记说明为解释列表，要解释的名词放在的后面，解释的内容放在后面，最后以结尾。在和间，可以包含其他的标记。 语法格式: 名词1 解释1 名词2 解释2 名词3 解释3 ,31,2.3.3 解释列表,【例2.9】2-9.html，使用未标序的列表、 标序列表和解释列表。 第一章 第二章 第三章 第一章 第二章 第三章 Web,Web是英文World Wide Web的简称，中文的意思是布满世界的蜘蛛网。 URL URL称为统一资源定位器

12、，它是Uniform Resource Locations的缩写。 ,32,2.3.4 综合列表,将以上的列表结合使用，即为综合列表。不过，使用时要注意之间的嵌套关系。 【例2.10】2-10.html，列表的嵌套使用。 第一章 第一节 Web Web是英文World Wide Web的简称，中文的意思是布满世界的蜘蛛网。,33,2.3.4 综合列表, URL URL称为统一资源定位器，它是Uniform Resource Locations的缩写。 第二节 第二章 历史 简介 ,34,2.3.4 综合列表,文件在浏览器里的显示结果如图所示。,35,2.4 超链接标记,2.4.1 链接至本机另

13、一Web页 2.4.2 链接到另外一台计算机上的Web页 2.4.3 链接到同一文章的另一个段落 2.4.4 链接到不同网页的某处,36,2.4.1 链接至本机另一Web页,语法格式: 链接到filename 下面将看到“链接到filename”会变色并加下划线出现在浏览器中，当鼠标移到上面时，箭头会变成手状，它表示在这里用鼠标单击，会链接到同一计算机同一路径的filename.html 文件上。,37,2.4.2 链接到另外一台计算机上的Web页,链接到另外一台计算机上的HTML文档，要把目的地的URL地址赋给href。例如，想连接到“首都在线”的主页，可以编写如下语句： 这里是首都在线的主

14、页 语法格式: 这里是某地方,38,2.4.2 链接到另外一台计算机上的Web页,【例2.11】2-11.html，超链接标记的应用。 例如，想链接到本机的2-10.html，请单击: “2-10.html“Web页。 链接到另外一台计算机上的HTML文档也很简单，只要把目的地的URL地址赋给href就可以了。 例如，想链接到“首都在线“的主页，可以单击： 。 返回到2-11.html，请单击: 返回“2-11.html“。 ,39,2.4.2 链接到另外一台计算机上的Web页,文件2-11.html在浏览器里的显示结果如图所示。,40,2.4.3 链接到同一文章的另一个段落,除了链接到另一个

15、网页，也可以在同一网页内随心所欲地链接。 【例2.12】2-12.html，在同一Web页中的链接。 第一章为“锚“标记。 除了链接到另一个HTML文件，也可以在一篇文章内随心所欲地链接。 这和前面两种稍有不同，需要先做出一个“锚“标记，即链接的目标地， 再做到“锚“的链接。到“锚“的链接与前面相同。 从这里可链接到“第一章”文字处 ,41,2.4.3 链接到同一文章的另一个段落,文件2-12.html在浏览器里的显示结果如图所示。,42,2.4.4 链接到不同网页的某处,如果链接到不同网页的某处，除了要定义锚标记，还要指定网页的名称。 例如，要在B1文件里建立链接到B2网页中设置锚标记“第一

16、章”处，可使用下面的标记: 链接文字,43,2.5 嵌入对象标记,2.5.1 嵌入音频和视频对象标记 2.5.2 嵌入图像对象标记 2.5.3 嵌入其他对象标记,44,2.5.1 嵌入音频和视频对象标记,在HTML文档中嵌入音频和视频对象的标记是embed标记。 语法格式： 通过参数src指定插入的音频和视频对象文件名称，通过参数wdith、height指定显示播放组件的大小。,45,2.5.2 嵌入图像对象标记,在HTML文档中嵌入一些漂亮的图像，可使页面图文并茂。嵌入图像要使用img标记。 语法格式： img标记告诉浏览器下面要插入一个图像对象，参数src指出图像文件的URL地址。 img标记的参数有： align（显示的位置） alt（显示文字） border（边框） height（高度） width（宽度）,46,2.5.2 嵌入图像对象标记,【例2.13】2-13.html，在页面中嵌入一个图像和一个音频对象。 嵌入一个图像 加框并变小的图像 单击这里可以看到一个大的图像 ,47,2.5.2 嵌入图像