第1章 HTML语言简介课件.ppt
《第1章 HTML语言简介课件.ppt》由会员分享,可在线阅读,更多相关《第1章 HTML语言简介课件.ppt(53页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、第第1 1章章 HTML语言简介语言简介 1.1 1.1 【案例【案例1 1】第】第1 1个个HTMLHTML网页网页 1.2 1.2 【案例【案例2 2】“中国诗词佳句中国诗词佳句作者作者”网页网页 1.3 1.3 【案例【案例3 3】“鲸鱼和螃蟹鲸鱼和螃蟹”网页网页 1.4 1.4 【案例【案例4 4】“图像切换图像切换”网页网页 1.5 1.5 【案例【案例5 5】“链接技术演示链接技术演示”网页网页 1.6 1.6 【案例【案例6 6】“中国的世界文化遗产中国的世界文化遗产”网页网页 1.7 1.7 【案例【案例7 7】“FLASHFLASH技术说明技术说明”网页网页 1.8 1.8
2、【案例【案例8 8】“最新消息公告最新消息公告”网页网页 1.9 1.9 【案例【案例9 9】“水中倒影水中倒影”网页网页 1.10 1.10 【案例【案例1010】“飘动的枫叶飘动的枫叶”网页网页 1.1 1.1 【案例【案例1 1】第】第1 1个个HTMLHTML网页网页 1HTML文件特点文件特点HTML文件是标准的文件是标准的ASCII文件,它看起来像是加入了许多被称为链接签文件,它看起来像是加入了许多被称为链接签(tag)的特殊字符串的普遍文本文件。从结构上讲,)的特殊字符串的普遍文本文件。从结构上讲,HTML文件由元素文件由元素(element)组成,组成)组成,组成HTML文件的
3、元素有许多种,用于组织文件的内容和文件的元素有许多种,用于组织文件的内容和指导文件的输出格式。绝大多数元素是指导文件的输出格式。绝大多数元素是“容器容器”,即它们有起始标记和结尾,即它们有起始标记和结尾标记。元素的起始标记叫做起始链接签(标记。元素的起始标记叫做起始链接签(start tag),元素的结束标记叫做结),元素的结束标记叫做结尾链接签(尾链接签(end tag),在起始链接签和结尾链接签中的部分是元素体。每一),在起始链接签和结尾链接签中的部分是元素体。每一个元素都有名称和可选择的属性,元素的名称和属性都在起始链接签内标明。个元素都有名称和可选择的属性,元素的名称和属性都在起始链接
4、签内标明。一个元素的元素体中可以有其他的元素。一个元素的元素体中可以有其他的元素。“属性名属性名”、“= =”和和“属性值属性值”合合起来构成一个完整的属性,一个元素可以有多个属性,各个属性用空格分开。起来构成一个完整的属性,一个元素可以有多个属性,各个属性用空格分开。需要说明的是,需要说明的是,HTML是一门发展很快的语言,早期的是一门发展很快的语言,早期的HTML文件并没有如文件并没有如此严格的结构,因而现在流行的浏览器为了保持对早期此严格的结构,因而现在流行的浏览器为了保持对早期HTML文件的兼容性,文件的兼容性,也支持不按上述结构编写的也支持不按上述结构编写的HTML文件。另外,各种浏
5、览器对文件。另外,各种浏览器对HTML元素及元素及其属性的解释也不完全一样。一般来讲,其属性的解释也不完全一样。一般来讲,HTML的元素有下列的元素有下列3种表示方法。种表示方法。(1)文件或超文本文件或超文本(2)文本或超文本文本或超文本(3)第第3种写法仅用于一些特殊的元素,例如分段元素种写法仅用于一些特殊的元素,例如分段元素P,它仅仅通知,它仅仅通知WWW浏览浏览器在此处分段,因而不需要界定作用范围,所以它没有结尾链接签。器在此处分段,因而不需要界定作用范围,所以它没有结尾链接签。HTML语言的标记种类很多,图语言的标记种类很多,图1-1-2中常用的标记含义介绍如下。注意:中常用的标记含
6、义介绍如下。注意:HTML文档中的起始链接签文档中的起始链接签“”和元素名称(例如和元素名称(例如BODY)之间不能有空格。)之间不能有空格。2网页基本结构标记网页基本结构标记(1):它是:它是HTML文档中最基本的标记,不可缺少。文档中最基本的标记,不可缺少。表示表示HTML文档的开始,文档的开始,表示表示HTML文档的结束。文档的结束。(2):它是网页头部标记。可以提高网页文档的可读:它是网页头部标记。可以提高网页文档的可读性,向浏览器提供一个信息。它可以忽略,但一般不予忽略。性,向浏览器提供一个信息。它可以忽略,但一般不予忽略。(3):它是网页名称标记,是:它是网页名称标记,是标标记内唯
7、一一个必须出现的元素,有记内唯一一个必须出现的元素,有标记就一定要有标记就一定要有标记。标记。TITLE元素是文件头中的元素,它也只能出现在文件头中。元素是文件头中的元素,它也只能出现在文件头中。TITLE标明该标明该HTML文件的题目,是对文件内容的概括。一个好的题目应该能使读者从中文件的题目,是对文件内容的概括。一个好的题目应该能使读者从中判断出该文件的大概内容。文件的题目一般不会显示在文本窗口中,而以判断出该文件的大概内容。文件的题目一般不会显示在文本窗口中,而以窗口的名称显示出来。除了标识窗口外,当将某一个网页存入书签或文件时,窗口的名称显示出来。除了标识窗口外,当将某一个网页存入书签
8、或文件时,TITLE还用做书签名或缺省的文件名。还用做书签名或缺省的文件名。TITLE的长度没有限制,但过长的题的长度没有限制,但过长的题目会导致转行,一般情况下它的长度不应超过目会导致转行,一般情况下它的长度不应超过64个字符。个字符。(4):它是网页主题内容标记。其中包含了网页的正:它是网页主题内容标记。其中包含了网页的正文内容,一般不可缺少。文内容,一般不可缺少。(5):使用:使用标记中的标记中的BGCOLOR属性,可以设置网页的背景颜色。使用的格式有以下两种。属性,可以设置网页的背景颜色。使用的格式有以下两种。在第一种格式中,在第一种格式中,RR、GG、BB可以分别取值为可以分别取值为
9、00FF的十六进制数。的十六进制数。RR、GG、BB分别用来表示颜色中的红色、绿色和蓝色成分的多少,数值越大,分别用来表示颜色中的红色、绿色和蓝色成分的多少,数值越大,颜色越深。红、绿、蓝三色按一定比例混合,可以得到各种颜色。颜色越深。红、绿、蓝三色按一定比例混合,可以得到各种颜色。例如,例如,RR =FF,GG=FF,BB=00,表示为黄色。如果,表示为黄色。如果RRGGBB取值为取值为000000,则为黑色;,则为黑色;RRGGBBRRGGBB取值为取值为FFFFFFFFFFFF,则为白色;,则为白色;RRGGBBRRGGBB取值为取值为FF8888FF8888, 则为浅红色。则为浅红色。
10、第二种格式是直接使用颜色的英文名称来设定网页的背景颜色。例如:第二种格式是直接使用颜色的英文名称来设定网页的背景颜色。例如:用来设置网页的背景颜色为蓝色。:用来设置网页的背景颜色为蓝色。:用来设置网页的背景颜色为红色。:用来设置网页的背景颜色为红色。:用来设置网页的背景颜色为白色。:用来设置网页的背景颜色为白色。(6):它是图像标记。用来加载图像与:它是图像标记。用来加载图像与GIF动画。在网页中加载动画。在网页中加载GIF动画的方法与加载图像的方法一样。动画的方法与加载图像的方法一样。GIF动画文件的扩展名也是动画文件的扩展名也是.gif,文件格,文件格式是式是GIF89A格式。制作格式。制
11、作GIF动画的软件有很多,例如动画的软件有很多,例如Fireworks和和Ulead GIF Animator 5.0等。等。(7)SRC:它是依附于其他标记的一个属性,依附于:它是依附于其他标记的一个属性,依附于标记时,用来导标记时,用来导入图像与入图像与GIF动画。其格式如下:动画。其格式如下: (8):它是换行标记,表示以后的内容移到下一行。它是单向标记,:它是换行标记,表示以后的内容移到下一行。它是单向标记,没有没有。(9):它是保留文本原来格式的标记。它的作用是将其中:它是保留文本原来格式的标记。它的作用是将其中的的文本内容按照原来的格式显示。否则浏览器会自动取消文本中的空格。文本内
12、容按照原来的格式显示。否则浏览器会自动取消文本中的空格。 (10):它是粗体标记。可使其中的文字变为粗体。:它是粗体标记。可使其中的文字变为粗体。3其他常用标记其他常用标记(1):它是正文的第三级标题标记。此外,还有第一、二、三、:它是正文的第三级标题标记。此外,还有第一、二、三、四、五、六级标题标记,分别为四、五、六级标题标记,分别为、和和。级别越高,。级别越高,文字越小。文字越小。一般情况下,浏览器对标题作如下解释。一般情况下,浏览器对标题作如下解释。H1 黑体,特大字体,居中,上下各有两行空行。黑体,特大字体,居中,上下各有两行空行。H2 黑体,大字体,上下各有一到两行空行。黑体,大字体
13、,上下各有一到两行空行。H3 黑体(斜体),大字体,左端微缩进,上下空行。黑体(斜体),大字体,左端微缩进,上下空行。H4 黑体,普通字体,比黑体,普通字体,比H3缩进更多,上边一空行。缩进更多,上边一空行。H5 黑体(斜体),与黑体(斜体),与H4相同缩进,上边一空行。相同缩进,上边一空行。H6 黑体,与正文有相同缩进,上边一空行。黑体,与正文有相同缩进,上边一空行。Hn可以有对齐属性,可以有对齐属性,ALIGN#,“#”表示表示Left(标题居左)、(标题居左)、Center(标(标题居中)和题居中)和Right(标题居右)。例如:(标题居右)。例如: 标题标题2 (2):它是段落标记。它
14、的作用是将其内的文字另起一段显示。:它是段落标记。它的作用是将其内的文字另起一段显示。段与段之间有一个空行。段与段之间有一个空行。HTMLHTML的浏览器是基于窗口的,用户可以随时改变显的浏览器是基于窗口的,用户可以随时改变显 示区的大小,所以示区的大小,所以HTML将多个空格以及回车等效为一个空格,这是和绝大将多个空格以及回车等效为一个空格,这是和绝大多数字处理器不同的。段落标记也可以有多种属性,比较常用的属性是多数字处理器不同的。段落标记也可以有多种属性,比较常用的属性是Aligh#。“#”可以是可以是Left、Center或或Right,其含义同上文。,其含义同上文。4文件的路径名文件的
15、路径名(1)绝对路径:绝对路径是写出全部路径,系统按照全部路径进行文件的查)绝对路径:绝对路径是写出全部路径,系统按照全部路径进行文件的查找。绝对路径中的盘符后用找。绝对路径中的盘符后用“:”或或“:/”,各个目录名之间以及目录名与,各个目录名之间以及目录名与文件名之间,应用文件名之间,应用“”或或“/”分隔开。绝对路径名的写法及其含义如表所示。分隔开。绝对路径名的写法及其含义如表所示。(2)相对路径:相对路径是以当前文件所在路径和子目录为起始目录,进行)相对路径:相对路径是以当前文件所在路径和子目录为起始目录,进行相对的文件查找。通常都采用相对路径,这样可以保证站点中的文件整体移相对的文件查
16、找。通常都采用相对路径,这样可以保证站点中的文件整体移动后,不会产生断链现象。相对路径名的写法及其含义如表所示。动后,不会产生断链现象。相对路径名的写法及其含义如表所示。绝对路径名 含 义 HREF=“http:/ HTML0.htm在域名为的服务器中的TD目录下 HREF=“E:DRAWTDTDHTML0.htm” HTML0.htm放在E盘的DRAWTD目录下的TD子目录中 绝对路径名的写法及其含义 5URLURL(Uniform Resource Locator)即统一资源定位器,)即统一资源定位器,WWW上的地址编码,上的地址编码,是文件名的扩展。它指出了文件在是文件名的扩展。它指出了
17、文件在Internet中的位置。它存在的目的在于统一中的位置。它存在的目的在于统一WWW上的地址编码,给每一个网页指定的地址,这样就不会出现重复或由上的地址编码,给每一个网页指定的地址,这样就不会出现重复或由于编码不统一而出现无法浏览等问题。当用户查询信息资源时,只要给出于编码不统一而出现无法浏览等问题。当用户查询信息资源时,只要给出URL地址,地址,WWW服务器就可以根据它找到网络资源的位置,并将它传送给服务器就可以根据它找到网络资源的位置,并将它传送给用户的计算机。通常,当用户用鼠标单击网页中的链接点时,就将用户的计算机。通常,当用户用鼠标单击网页中的链接点时,就将URL地址地址的请求传送
18、给了的请求传送给了WWW服务器。服务器。相对路径名 含 义 HREF=“HTML0.htm” HTML0.htm是当前目录下的文件名 HREF=“DRAWTD/HTML0.htm” HTML0.htm是当前目录中“DRAWTD”目录下名字为HTML 0.htm的文件 HREF=“DRAWTD/TD/HTML0.htm” HTML0.htm是当前目录中,“DRAWTD/TD”目录下名字为HTML0.htm的文件 HREF=“./HTML0.htm” HTML0.htm是当前目录的上一级目录下名字为HTML0.htm的文件 HREF=“././HTML0.htm” HTML0.htm是当前目录的上
19、两级目录下名字为HTML0.htm的文件 在单机系统中,定位一个文件需要路径和文件名;对于遍布全球的在单机系统中,定位一个文件需要路径和文件名;对于遍布全球的Internet,显然还需要知道文件存放在哪个网络的哪台主机中才行。另外,单机系统中,显然还需要知道文件存放在哪个网络的哪台主机中才行。另外,单机系统中,所有的文件都由统一的操作系统管理,因而不必给出访问该文件的方法;而所有的文件都由统一的操作系统管理,因而不必给出访问该文件的方法;而在在Internet上,各个网络,各台主机的操作系统都不一样,因此必须指定访问上,各个网络,各台主机的操作系统都不一样,因此必须指定访问该文件的方法。该文件
20、的方法。一个完整的一个完整的URL地址通常由通信协议名(访问该资源所采用的协议,即访问地址通常由通信协议名(访问该资源所采用的协议,即访问该资源的方法)、该资源的方法)、Web服务器地址(存放该资源主机域名地址,在因特网上,服务器地址(存放该资源主机域名地址,在因特网上,主机名可以使用主机域名地址或主机名可以使用主机域名地址或IP地址,通常以字符形式出现)、文件在服地址,通常以字符形式出现)、文件在服务器中的路径和文件名四部分组成。例如务器中的路径和文件名四部分组成。例如 Transfer Protocol),),是是Web服务器地址(主机域名地址),服务器地址(主机域名地址),/DRAWTD
21、/TD/是文件在服务器中的路是文件在服务器中的路径,径,HTML0.html是文件名。是文件名。在文件名之后,可以加在文件名之后,可以加“#”号和锚点名。有时也可以在文件名之后加问号号和锚点名。有时也可以在文件名之后加问号(“?”),然后加查询字符串。),然后加查询字符串。与单机系统绝对路径和相对路径的概念类似,统一资源定位器也有绝对与单机系统绝对路径和相对路径的概念类似,统一资源定位器也有绝对URL和相对和相对URL之分。上文所述的是绝对之分。上文所述的是绝对URL。相对。相对URLURL是相对于用户最近访问是相对于用户最近访问 的的 U R L 。 比 如 现 在 观 看 一 个。 比 如
22、 现 在 观 看 一 个 U R L 为为 h t t p : / / T M L 1 . h t m l 就 是 一 个 相 对就 是 一 个 相 对 U R L , 它 的 绝 对, 它 的 绝 对 U R L 为为 1.2 1.2 【案例【案例2 2】“中国诗词佳句中国诗词佳句作者作者”网页网页1文字的字体大小和颜色文字的字体大小和颜色(1)字体大小:)字体大小:HTML文件可以有文件可以有7种字号,种字号,1号最小,号最小,7号最大。默认字号号最大。默认字号为为3,可以用,可以用设置默认字号。设置文本的字号有两种办法,设置默认字号。设置文本的字号有两种办法,一种是设置绝对字号,一种是设
23、置绝对字号,;另一种是设置文本的相对字号,;另一种是设置文本的相对字号,。用第。用第2种方法时种方法时“+”号表示字体变大,号表示字体变大,“- -”号表示字号表示字体变小。体变小。(2)字体颜色:字体的颜色用)字体颜色:字体的颜色用指定,指定,#可以是可以是6位十六进制位十六进制数,分别指定红、绿、蓝的值。也可以使用数,分别指定红、绿、蓝的值。也可以使用16种标准颜色,如表所示。种标准颜色,如表所示。色 彩 名 十六进制值 色 彩 名 十六进制值 Aqua(水蓝色) #00FFFF Navy(藏青色) #000080 Black(黑色) #000000 Olive(茶青色) #808000
24、Blue(蓝色) #0000FF Purple(紫色) #800080 Fuchsia(樱桃色) #FF00FF Red(红色) #FF0000 Green(绿色) #808080 Silver(银色) #C0C0C0 Gray(灰色) #008000 Teal(茶色) #008080 Line(石灰色) #00FF00 While(白色) #FFFFFF Maroon(褐红色) #800000 Yellow(黄色) #FFFF00 例如,例如,“字体大小和颜色字体大小和颜色”网页(网页(HTML2-2.htm)代码如下。)代码如下。 字体大小和颜色字体大小和颜色 字体大小和颜色字体大小和颜色
25、字体大小和颜字体大小和颜色色 字体大小和颜色字体大小和颜色字体大小和颜字体大小和颜色色 闪烁的文本闪烁的文本 (3)闪烁:使用)闪烁:使用BLINK标记可以使文本闪烁,闪烁频率为标记可以使文本闪烁,闪烁频率为1秒一次,举例如秒一次,举例如下。下。 闪烁的文本闪烁的文本2字体风格字体风格字体风格分为物理风格和逻辑风格。字体的物理风格直接指定字体,物理风字体风格分为物理风格和逻辑风格。字体的物理风格直接指定字体,物理风格的字体有格的字体有黑体、黑体、斜体、斜体、下画线和下画线和打字机体等,如表所示。打字机体等,如表所示。例如,例如,“各种字体风格各种字体风格”网页代码如下(网页代码如下(HTML2
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第1章 HTML语言简介课件 HTML 语言 简介 课件
限制150内