超文本标记语言.ppt

1、第九章 超文本标记语言 HTML,2,简介:,超文本标记语言是组织多媒体文档的一种重要语言，它不仅可以用来编写Web网页，也可以用来制作光盘上的多媒体节目。 编辑HTML多媒体文档的编辑器有很多，常用的有FrongPage、Dreamweaver、Hotdog等等。 本课程中介绍HTML的基础知识。,3,主要内容,HTML文档 HTML标签和属性 HTML中的超链接 HTML中的特殊字符 链接电子邮件程序 HTML的图形功能 音频和视频,4,主要内容,HTML文档 HTML标签和属性 HTML中的超链接 HTML中的特殊字符 链接电子邮件程序 HTML的图形功能 音频和视频,5,9.1 HTM

2、L文档,1、元素 是HTML文档的基本构件，通过使用HTML规定的标签来标识元素。 2、标签（标记，tag） （1）组成：尖括号和标签名称。 例如：, （2）标签通常成对出现，分别表示开始和结束； 开始标签和结束标签具有相同的标签名。,6,9.1 HTML文档（续）,（3）标签可以包含属性，它提供元素的附加信息。可以是颜色、字体、对齐方式等等。 属性名称和属性值放在开始标签中，属性值用双引号表示。一般语法格式为： 示例1： 举办奥运史上最成功的奥运 ,7,9.1 HTML文档（续）,（4）HTML标签中的字母不区分大小写 （5）浏览器对于不认识的标签将不予理睬，但是标签对之间的内容仍予以显示。

3、 3、HTML的文档结构 （1）没有格式，可以用任一文字编辑器来书写 （2）HTML文档主要由:文档头（header）和正文（body）两部分组成,8,主要内容,HTML文档 HTML标签和属性 (了解) HTML中的超链接 HTML中的特殊字符 链接电子邮件程序 HTML的图形功能 音频和视频,9,9.2 HTML标签和属性,1、. 告诉浏览器这两个之间的是html文档 2、 这两者之间包含的是文档名称，如果head部分不带title，其内容将直接显示在窗口首部。 3、. 这两者之间包含的是文档名称（显示在浏览器的标题栏）。,10,9.2 HTML标签和属性（续）,示例2： 王军的个人简历

4、,快速 浏览,11,4、background sound 为网页设置背景音乐。 示例3： 标签的属性： src：指示音乐文件的路径，可以使用相对路径或绝对路径 loop：指示循环次数，若该值为-1，循环播放,9.2 HTML标签和属性（续）,12,9.2 HTML标签和属性（续）,5、. 这对标签之间的内容是正文部分，将被显示在浏览器的窗口中。属性有： bgcolor (背景颜色): 以开始的十六进制数，如FFCCBB 预定义颜色Black, Olive橄榄色, Teal, Red, Blue, Maroon褐红色, Navy藏青色, Gray, Lime, Fuchsia紫红色, White

5、, Green, Purple, Silver, Yellow, Aqua浅绿色）,13,background:背景图片路径，如果同时设置了背景颜色和背景图片，将只有背景图片起作用。 text：文档中文字的颜色 link：链接文字的颜色 alink：正在访问的链接的颜色 vlink：已经访问过的链接的颜色 leftmargin：网页左边空白象素数，整数 topmargin：网页上端空白象素数,9.2 HTML标签和属性（续）,14,示例4： 登 高 唐 杜甫 风急天高猿啸哀，渚清沙白鸟飞回。 无边落木萧萧下，不尽长江滚滚来。 万里悲秋常作客，百年多病独登台。 艰难苦恨繁霜鬓，潦倒新停浊酒杯。

6、下一首 ,9.2 HTML标签和属性（续）,快速 浏览,15,6、 html中定义的6个等级标题标签，n是级别。 n越大，级别越低，标题越小。 属性： align：对齐方式，其值可以是left、right、center。,9.2 HTML标签和属性（续）,16,9.2 HTML标签和属性（续）,示例5： 级别1标题 级别2标题 级别3标题 级别4标题 级别5标题 级别6标题 ,快速 浏览,17,9.2 HTML标签和属性（续）,7、paragraph 分段标记，这对标签之间的内容为一个自然段，而不管它在html文档之中被分成多少行。 示例6： 杜甫（712-770）， 字子美，河南巩县人。 ,

7、18,9.2 HTML标签和属性（续）,8、break 强制换行，它不成对出现的： 示例7： 杜甫（712-770）， 字子美，河南巩县人。 ,19,9、 pre define 预格式化标签，网页将按照html文档中的格式显示，不再进行另外的设置。 主要用于需要保留文本中的空白时。,9.2 HTML标签和属性（续）,20,示例8： 登高 唐 杜甫 风急天高猿啸哀，渚清沙白鸟飞回。 无边落木萧萧下，不尽长江滚滚来。 万里悲秋常作客，百年多病独登台。 艰难苦恨繁霜鬓，潦倒新停浊酒杯。 ,9.2 HTML标签和属性（续）,快速 浏览,21,10、 用来设置文字的字体、大小和颜色。 属性： face：

8、字体名称，如“宋体”“隶书”等等，默认是宋体 color：字体颜色 size：字体大小，属性值为17的数字，默认值为3,9.2 HTML标签和属性（续）,22,示例9： size1隶书 size2宋体 size3楷体 size4黑体 size5幼圆 size6隶书 size7隶书,9.2 HTML标签和属性（续）,快速 浏览,23,11、物理样式标签： ：粗体 (bold) ：斜体 (italic) ：下划线 (underline) ：上标 (superscript) ：下标 (subscript) ：删除划线 (strike),9.2 HTML标签和属性（续）,24,示例10： 黑体：此曲只

9、应天上有，人间能有几回闻。 斜体：此曲只应天上有，人间能有几回闻。 下划线：此曲只应天上有，人间能有几回闻。 上标：x2+y2 下标：H2O 删除划线：此曲只应天上有，人间能有几回闻。 ,9.2 HTML标签和属性（续）,快速 浏览,25,9.2 HTML标签和属性（续）,12、编号列表标签： Un_numbered List 标签间列表项目为无编号列表 Ordered List 标签间列表为有编号列表 List Item 标签后面的内容是列表内容,26,标签有一个属性type，其取值分别为： Circle：符号为空心圆点 Disc：符号为实心圆点 Sequare：符号为方块 标签有一个属性t

10、ype，其取值分别为： 1：编号字符为 1，2，3 a ：编号字符为 a，b，c. A ：编号字符为A，B，C. i ：编号字符为，. I ：编号字符为，.,9.2 HTML标签和属性（续）,27,示例11： 李白诗歌名篇 蜀道难 梦游天姥吟留别 行路难 将进酒 ,9.2 HTML标签和属性（续）,快速 浏览,28,13、和 定义列表，列表是由描述项和解释项组成的，每一个项目前面没有符号或是编号。 ：定义一个列表，Definition List ：定义一个术语，Definition Term ：定义释义，Definition Definition,9.2 HTML标签和属性（续）,29,示例1

11、2： HTML 超文本标记语言，Hyper Text Markup Language VRML 虚拟现实建模语言，Virtual Reality Modeling Language,这是一种用来描述万维网页面上三维交互环境的文件格式。VRML的基本原理同HTML的基本原理一样简单，都是用一系列指令告诉浏览器如何显示一个文档，它们都是描述万维网页面的描述语言。它与HTML不同的是，以HTML为核心的万维网浏览器是二维世界，而以VRML为核心的万维网浏览器浏览的是三维世界。 XML 可扩展标记语言，Extensible Markup Language,是万维网协会推荐的开放标准，它构造Web上的文

12、档和数据的通用格式。 ,快速 浏览,30,14、图片 HTML中常用的图片有两种：GIF文件和JPG文件，其它的文件由于存储空间太大而不常用。 标签的属性： src：指定图片的路径 width：指定图片宽度，单位为象素或百分比 height：指定图片高度,9.2 HTML标签和属性（续）,31,border：图片边框宽度，单位是象素，默认值0 alt：替换文字，如果浏览器设置为不显示图片，将在图片位置显示这些文字 align：对齐方式，其值有7种：top、middle、bottom、left、right、absmiddle、absbottom,9.2 HTML标签和属性（续）,32,示例13：

13、 HiFi效果 HiFi就是高保真音响，其最终目的就是原汁原味的还原自然界或现实生活中的每一种声音让听众感觉到真实、身临其境。举个例子：一个人拿者一把小提琴在你面前演奏，即使他的水平不怎麽样，但这是最原汁原味的声音, 这就是衡量音响中小提琴音质、音色的标准。依次类推：大提琴、倍大提琴、中阮、大鼓、小号、钢琴和风声、流水声、雷声、动物的叫声你在现实生活中听到的所有美妙的声音都是衡量音响的标准。那麽怎样判断音响的品质呢？一般说，音响的HiFi效果可以从这几个方面分析比较：,9.2 HTML标签和属性（续）,快速 浏览,33,15、 声明一个表格，两者之间就是表格的内容。标签的属性可以设置一些表格的

14、整体参数。 属性 bgcolor：表格背景颜色 background：表格背景图片 width：表格宽度，默认状态下将按照表格内容多少自动计算。,9.2 HTML标签和属性（续）,34,border：表格边框宽度，默认值为0 bordercolor：表格边框颜色 cellspacing：单元格之间的间隙宽度，单位为象素，默认值为2 cellpadding：单元格内容与单元格边界之间的距离，默认值为2 align：表格水平对齐方式，有left、center、right三种,9.2 HTML标签和属性（续）,35,16、 这对标签用来设置表格的标题。 属性 align：标题的位置 valign：标

15、题与表格的相对位置，有top和bottom两个值，分别将标题置于表格的上方和下方,9.2 HTML标签和属性（续）,36,17、 标记一行。 属性有bgcolor、background、width、height、align、valign。 属性设置针对该行。 align属性表示单元格内容水平对齐方式 valign属性表示单元格内容在单元格中垂直对齐方式，取值有top、middle、bottom，分别表示上对齐、中间对齐和下对齐。,9.2 HTML标签和属性（续）,37,18、 标记一列（单元格）。 属性 bgcolor、background、width、height、align、valign。

16、属性设置针对该单元格。 rowspan：单元格跨越行的数量 colspan：单元格跨越列的数量,9.2 HTML标签和属性（续）,38,示例14： 唐诗名家 李白 蜀道难、行路难、将进酒 杜甫 八阵图、蜀相 诗圣 注：李白称为诗仙，王维称为诗佛,快速 浏览,39,19、 用法与标签类似，只是将单元格的内容用粗体显示，以表示一个标题栏。,9.2 HTML标签和属性（续）,40,20、 插入滚动字幕。 属性 direction：滚动方向，取值有left、right、up、down（有浏览器可能不支持up、down） behavior：滚动方式： scroll：同一方向循环滚动（默认） slide：

17、滚动一次后停止 alternate：左右交替滚动,9.2 HTML标签和属性（续）,41,bgcolor：滚动条的背景颜色 scrollamount：滚动的速度，值越大速度越快 scrolldelay：滚动延时，值越大停顿越久 width：滚动条宽度 height：滚动条高度 说明：滚动字幕中的内容还可以是图片和超链接（滚动新闻的实现）,9.2 HTML标签和属性（续）,42,示例15： 热烈欢迎访问我的个人主页! ,9.2 HTML标签和属性（续）,快速 浏览,43,21、 用于插入一条水平线。 属性有width和color。 示例16： 22、 在html源码中插入注释，浏览器对其中的内容

18、不予以显示。,9.2 HTML标签和属性（续）,44,主要内容,HTML文档 HTML标签和属性 HTML中的超链接 HTML中的特殊字符 链接电子邮件程序 HTML的图形功能 音频和视频,45,1、超链接（hyper link）的含义： 链接可以指向Web上的任何资源：文字、图像、音频文件、视频文件等等。 链接标签anchor 基本语法 ,9.3 HTML中的超链接,46,9.3 HTML中的超链接（续）,2、跳转到另外一篇文章 HTML文章的一个特色，就是在文章和 段落间任意地跳转。 可以在不同的文件之间跳转； 也可以在同一文件或不同文件的不同段落 之间跳转。 跳转到另外一篇文章的格式。

19、Link to filename ,47,9.3 HTML中的超链接（续）,href的参数就是后面要提到的URL。当它要跳转到别外一台主机时，“ ”中的格式是这样子的： Scheme:/host.domain:port/path/filename scheme可以是file、http、gopher、WAIS等等，这要视该主机提供ftp节点。http代表著另一台WWW伺服器。gopher代表目地的是gopher主机上的档案；WAIS亦同。这些都是URL(Uniform Resource Locator) 有关URL的概念见后面的描述。,48,示例16： 测试页面1 测试页面2 测试页面3 说明：

20、 文档的相对路径与绝对路径。（P404） 路径名使用标准的UNIX句法，路径名最好区分大小写（UNIX的要求）,9.3 HTML中的超链接（续）,49,3、跳转至另一个段落 A. 跳转到同一文档中编号为myname的位置 . . 为该处位置编号为myname B. 跳转到另一个文档的某个地方 . . 另一篇文章中,9.3 HTML中的超链接（续）,50,9.3 HTML中的超链接（续）,示例17：在同一文档中跳转 goto A goto B goto C A: 我是一个兵 来之老百姓，. B: 一颗小白杨 站在高岗上，. C: 军港的夜吆 静悄悄，. ,51,9.3 HTML中的超链接（续）,

21、示例18：跳转到另一文档的某个段落 跳到 示例17 的段落再见了最爱的人 部分 ,52,9.3 HTML中的超链接（续）,4、使用图像作为超链接 使用图像作为原来超链接中的文字说明部分。 示例18： 单击链接,53,5、链接外联图像 可以在页面上首先显示小图或说明文字，如果用户感兴趣的话，再点击小图/文字来下载显示大图。 示例19： 点击上图放大,9.3 HTML中的超链接（续）,54,主要内容,HTML文档 HTML标签和属性 HTML中的超链接 HTML中的特殊字符 链接电子邮件程序 HTML的图形功能 音频和视频,55,9.4 HTML中的特殊字符,1、该符号用作表示HTML标签 在AS

22、CII码中，有三个字符：大於()、小於( & 在屏幕上会是 &,56,9.4 HTML中的特殊字符（续）,2、ascii码字符集中没有定义的 (见)教材表214（P402） 如： &plassmn 或者± 显示 « 或者« 显示 ,57,主要内容,HTML文档 HTML标签和属性 HTML中的超链接 HTML中的特殊字符 链接电子邮件程序 HTML的图形功能 音频和视频,58,9.5 链接电子邮件程序,发送电子邮件的标签格式： NAME 示例19 test的信箱 ,59,主要内容,HTML文档 HTML标签和属性 HTML中的超链接 HTML中的特殊字符 链接电

23、子邮件程序 HTML的图形功能 音频和视频,60,9.6 HTML的图形功能,1、显示图形 可以直接在文件上显示 JPG、BMP或GIF格式的图形。每个图形都需要时间来显现而延长了整个文件显现的时间。同一图在文件内使用多次会比使用一次情况好些。 注意：是NCSA Mosaic 首先采用的标注，并非所有的浏览器能解译。 表示方法如下： ,61,9.6 HTML的图形功能（续）,IMG有两个重要属性：Align 和Alt Align：表示图形在屏幕的位置。参数有TOP、MIDDLE、BOTTOM、LEFT和RIGHT。 Alt：对于客户方不能看image的或把浏览器的自动调入image功能关闭的客户，可通过ALT属性显示一些文字给客户而不至于屏幕上一片空白或替代的碎图片。,62,9.6 HTML的图形功能（续）,2、调用图形 当图形很大,或是让读者选择性的看图时,可以做一个联结(link),从一段文字或一个小图跳转到另一个新的图形窗口(另一个文件)。不用花费漫长的时间在主文件中读图，可以用小的图片