Web工作原理和HTML基础知识.ppt

《Web工作原理和HTML基础知识.ppt》由会员分享，可在线阅读，更多相关《Web工作原理和HTML基础知识.ppt（75页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第一章第一章 Web工作原理工作原理和和HTML基础知识基础知识本章内容本章内容l理解理解Web的工作原理的工作原理lHTML基础知识基础知识HTML概述概述HTML的基本语法的基本语法HTML文档的结构文档的结构网页中的文本网页中的文本网页中的注释和实体网页中的注释和实体 l超链接和图像超链接和图像Web是什么是什么(1/2)lWeb的名称的名称Web又称做万维网或环球网，是又称做万维网或环球网，是WWW（World Wide Web）的）的简称，简称，WWW是实质上是一个超文本信息系统是实质上是一个超文本信息系统lWeb的功能的功能发布信息发布信息搜索和浏览文本和图片信息搜索和浏览文本和图

2、片信息在线播放音、视频文件在线播放音、视频文件发表观点发表观点电子购物电子购物Web是什么是什么(2/2)lWeb的实质的实质Web是基于是基于Internet的一个多媒体信息服务系统的一个多媒体信息服务系统它基于客户它基于客户/服务器模式，服务器模式，整个系统由整个系统由Web服务器、服务器、浏览器浏览器（Browser）和通信协议等三部分组成）和通信协议等三部分组成通信协议采用的是通信协议采用的是HTTP协议协议HTTP协议是超文本传输协议（协议是超文本传输协议（Hypertext Transfer Protocol）的简）的简写写，HTTP协议处于协议处于TCP/IP协议簇的应用层协议簇

3、的应用层Web工作原理工作原理l基本原理概述基本原理概述 在在Web服务器上，服务器上，主要以网页（主要以网页（Web Page）的形式来发布多媒）的形式来发布多媒体信息体信息网页采用超文本标记语言网页采用超文本标记语言HTML（Hyper Text Markup Language）来编写）来编写当浏览器软件连接到当浏览器软件连接到Web服务器并获取网页后，服务器并获取网页后，通过对网页通过对网页HTML文档的解释执行将网页所包含的信息显示在用户的屏幕上文档的解释执行将网页所包含的信息显示在用户的屏幕上 Web组织形式组织形式lWeb的基本组织形式的基本组织形式Web是一个超文本文件的集合是一

4、个超文本文件的集合超文本文件是超文本文件是Web的基本组成单元，也称为网页或的基本组成单元，也称为网页或HTML文档、文档、Web页等，通常是以页等，通常是以.html或或.htm为后缀的文件为后缀的文件Web页之间通过超文本中的超级链接组织在一起页之间通过超文本中的超级链接组织在一起超文本超文本l什么是超文本什么是超文本是格式和存储位置均可不同的文件，通过某种方式组织在一起共是格式和存储位置均可不同的文件，通过某种方式组织在一起共同来表述一件事情的组织形式同来表述一件事情的组织形式超级链接是超文本用来串连信息的超级链接是超文本用来串连信息的“绳索绳索“，又叫做，又叫做URL超链接超链接l超文

5、本的超文本的“绳索绳索”超链接超链接超文本中除了要传达的文字图片等信息外，还包括一类很重要的超文本中除了要传达的文字图片等信息外，还包括一类很重要的信息信息-超级链接超级链接超链接指向的是一个用超链接指向的是一个用URL标识的网络资源（文件，图片，媒体标识的网络资源（文件，图片，媒体等）等）网页中有超链接的文字或图片一般有特殊的显示方式（下划线或网页中有超链接的文字或图片一般有特殊的显示方式（下划线或手形鼠标）手形鼠标）Web编程语言编程语言lWeb的编写语言的编写语言HTML（HyperText Markup Language，超文本标记，超文本标记语言）是编写语言）是编写Web页的语言页的

6、语言HTML语言使用带有尖括号的语言使用带有尖括号的“标记标记”将网页中的内容逐一标将网页中的内容逐一标识出来（被标识的部分叫做识出来（被标识的部分叫做“元素元素”），这样做可以让网页以），这样做可以让网页以字符流的方式在网络中流动，在用户端使用特殊的软件（浏览字符流的方式在网络中流动，在用户端使用特殊的软件（浏览器）对这些字符流进行翻译并按照标识的要求显示出来器）对这些字符流进行翻译并按照标识的要求显示出来第一个网页第一个网页 欢迎进入网页制作天地欢迎进入网页制作天地 HTML是一个扩展性很强的语言，可以嵌套用脚本语是一个扩展性很强的语言，可以嵌套用脚本语言编写的程序段言编写的程序段这些脚本

7、语言如：这些脚本语言如：VBScript，JavaScriptWeb信息交互方式信息交互方式lWeb信息的交互方式信息的交互方式Web中的信息（以超文本的形式）是通过一种一问一答的方式中的信息（以超文本的形式）是通过一种一问一答的方式进行交互的，这种方式叫做客户进行交互的，这种方式叫做客户/服务模式服务模式网络浏览器作为客户端提出访问某个网页的请求，网络浏览器作为客户端提出访问某个网页的请求，Web服务器作为服务器作为服务端做出应答并把这个网页发送给浏览器服务端做出应答并把这个网页发送给浏览器Web浏览器浏览器l主要主要Web浏览器产品浏览器产品Netscape通信公司的通信公司的Naviga

8、torMicrosoft公司的公司的IE（Internet Explorer）SUN公司的公司的Hot Java火狐火狐Google chromel相同的相同的html代码在不同的浏览器产品上，甚至是同一个代码在不同的浏览器产品上，甚至是同一个浏览器产品的不同版本上显示效果可能不同浏览器产品的不同版本上显示效果可能不同(跨浏览器问跨浏览器问题题)IE8以上版本以上版本Web服务器服务器(1/2)lWeb服务器的主要功能服务器的主要功能存储存储Web上的内容信息（如：上的内容信息（如：Web页文件），提供管理环境页文件），提供管理环境SNMP（Simple Network Management

9、Protocol）代理功能）代理功能响应浏览器的请求响应浏览器的请求执行服务器端程序执行服务器端程序安全功能安全功能Web服务器服务器(2/2)l主要主要Web服务器产品服务器产品微软的微软的IIS（InternetInformation Server）微软的微软的PERSONAL Web SERVERSYBASE 的的SYBASE EASERVERAPACHE Web SERVER（自由软件）（自由软件）APACHE Tomcat动态动态Webl什么是动态什么是动态Web能够动态地安排能够动态地安排Web页面元素的显示方式页面元素的显示方式Web页具有动态交互性。用户可以提交信息，服务器可以

10、根据用页具有动态交互性。用户可以提交信息，服务器可以根据用户提交的信息动态生成返回页面户提交的信息动态生成返回页面动态动态Web使得人们可以建立基于浏览器的信息系统，这是电子商使得人们可以建立基于浏览器的信息系统，这是电子商务实施的平台务实施的平台l动态动态Web技术技术客户端技术客户端技术服务器端技术服务器端技术动态动态Web开发技术开发技术l客户端技术的作用客户端技术的作用自动控制包含在网页中的自动控制包含在网页中的HTML元素，以实现一些动态效果。元素，以实现一些动态效果。（比如让文字走动）（比如让文字走动）响应用户鼠标和键盘消息响应用户鼠标和键盘消息根据用户的软硬件环境决定页面的显示（

11、比如浏览器的版本）根据用户的软硬件环境决定页面的显示（比如浏览器的版本）客户端技术客户端技术l主要的客户端技术主要的客户端技术脚本语言脚本语言VBScriptJavaScript可下载组件可下载组件ActiveXJava Applet服务器端技术服务器端技术l服务器端技术的主要作用服务器端技术的主要作用根据用户提交的请求和查询关键字访问数据库并以根据用户提交的请求和查询关键字访问数据库并以HTML页面的页面的方式返回结果方式返回结果用户信息的收集和登记用户信息的收集和登记用户访问行为的记录用户访问行为的记录服务器端技术服务器端技术l主要的服务器端技术主要的服务器端技术ASP（Active Se

12、rver Page）微软公司，微软公司，VB语法语法PHP（Hypertext Preprocessor）Rasmus Lerdorf，可以使用，可以使用C/C+进行程序扩展进行程序扩展JSP（Java Server Page）Sun公司，公司，Java语法语法HTML概述概述lHTML语言的起源与发展语言的起源与发展lHTML的特点的特点lHTML语言与语言与W3C组织组织l有关术语有关术语HTML语言的起源语言的起源lHTML是一种标记语言，起源于是一种标记语言，起源于SGML（Standard Generalized Markup Language）标准通用标记语言）标准通用标记语言SG

13、ML是定义电子文档结构和描述其内容的国际标准语言是定义电子文档结构和描述其内容的国际标准语言SGML在在Web发明之前就存在发明之前就存在HTML是是SGML的子集的子集lHTML由由Tim Berners-Lee和同事和同事Naniel W.Connolly在在瑞士日内瓦的欧洲粒子实验室发明，伴随着瑞士日内瓦的欧洲粒子实验室发明，伴随着WEB一起诞一起诞生生HTML的管理机构的管理机构:万维网组织万维网组织lW3C（World Wide Web Consortium）是一个非营利）是一个非营利性的负责为性的负责为HTML制定标准的机构制定标准的机构,负责关于万维网的标负责关于万维网的标准的制

14、定准的制定,可以通过访问网址了解更多关于可以通过访问网址了解更多关于W3C的内容的内容HTML相关术语相关术语l标记标记标记是用尖括号标记是用尖括号包围的单词包围的单词,很多标记是成对的，一个是开始很多标记是成对的，一个是开始标记标记,一个是结束标记（单词前加一个是结束标记（单词前加/）l元素元素每一对尖括号包围的部分每一对尖括号包围的部分比如由比如由xxx包围的部分就叫做包围的部分就叫做body元素元素元素通常由三个部分组成元素通常由三个部分组成开始标记开始标记内容内容结束标记结束标记l属性属性用来修饰元素用来修饰元素每个属性都有值每个属性都有值属性放在开始标记中属性放在开始标记中Oracl

15、e开始标记开始标记属性属性结束标记结束标记元素元素HTML元素元素l块级元素块级元素指一些元素可以在浏览器中用一个矩形框（块）来表示，即使不指一些元素可以在浏览器中用一个矩形框（块）来表示，即使不显示任何内容也可以用这样一个空白矩形来作为占位符显示任何内容也可以用这样一个空白矩形来作为占位符如如p、body、div元素等元素等l内联元素内联元素指在文档中插入到块元素中的那部分元素指在文档中插入到块元素中的那部分元素作用：可以控制在块元素内进行如强调、引用、斜体等特殊格式作用：可以控制在块元素内进行如强调、引用、斜体等特殊格式变化变化包括包括em（加强）、（加强）、span（内联元素分组）、（内

16、联元素分组）、sub（下标）、（下标）、sup（上标）等（上标）等编辑编辑HTMLlHTML文档所有的部分都由某种标记包围着，为了版本兼文档所有的部分都由某种标记包围着，为了版本兼容，标记单词最好用小写容，标记单词最好用小写l由由HTML编写的文件以后缀编写的文件以后缀.html或或.htm保存保存以以.htm为扩展名主要是为了和某些操作系统兼容。在一些操作系为扩展名主要是为了和某些操作系统兼容。在一些操作系统中比如统中比如dos对扩展名的位数有限制对扩展名的位数有限制(3位位)lHTML语法的三种表达方式语法的三种表达方式内容内容内容内容HTML基本语法基本语法(1/4)l内容内容-封闭类型

17、标记封闭类型标记大多数标记是封闭类型的，它们成对出现，在内容的前面是一个大多数标记是封闭类型的，它们成对出现，在内容的前面是一个标记，而在内容的后面是另一个标记，第二个标记元素前带有反标记，而在内容的后面是另一个标记，第二个标记元素前带有反斜线，表明结束标记对内容的控制斜线，表明结束标记对内容的控制示例：示例：这是标题这是标题 如果一个应该封闭的标记没有被封闭，则会产生意料不到的错误如果一个应该封闭的标记没有被封闭，则会产生意料不到的错误HTML基本语法基本语法(2/4)l内容内容利用属性可以进一步设置内容某方面的属性利用属性可以进一步设置内容某方面的属性例如：例如：段落一段落一设置了标记设置

18、了标记的的title属性属性一个标记的属性可能不止一个，可以在描述完一个属性后，输入一个标记的属性可能不止一个，可以在描述完一个属性后，输入一个空格，然后继续描述其它属性一个空格，然后继续描述其它属性属性只能出现在开始标记中属性只能出现在开始标记中段落开始标记段落开始标记属性属性参数参数段落结束标记段落结束标记HTML基本语法基本语法(3/4)l（空标记）（空标记）-非封闭类型标记非封闭类型标记最常用的是换行标记最常用的是换行标记如果希望使一行文字换行（但是仍然同上面的文字属于一个段落），如果希望使一行文字换行（但是仍然同上面的文字属于一个段落），则可以在文字要换行的地方添加标记则可以在文字要

19、换行的地方添加标记，例如：，例如：此类型还有此类型还有base,link,meta标记等标记等这是一段完整的段落这是一段完整的段落中间被换行处理中间被换行处理HTML基本语法基本语法(4/4)l标记嵌套标记嵌套标记之间可以相互嵌套，形成更为复杂的语法标记之间可以相互嵌套，形成更为复杂的语法例如：例如：在嵌套标记时需要注意标记的嵌套顺序在嵌套标记时需要注意标记的嵌套顺序例如：例如：这是一段是粗斜体的文本这是一段是粗斜体的文本这是一段是粗斜体的文本这是一段是粗斜体的文本HTML文档的结构文档的结构l一个一个HTML文档可以看成由以下三个部分文档可以看成由以下三个部分构成：构成：版本信息版本信息文档

20、头文档头由由 标识标识 文档主体部分文档主体部分 由由标记标识标记标识典型的典型的HTML文档结构文档结构文件头元素文件头元素l HEAD元素包含了与当前文档相关的信息，如文档的标题、关键元素包含了与当前文档相关的信息，如文档的标题、关键字（如果该文档希望被搜索引擎搜索到，各部分信息很重要）、字（如果该文档希望被搜索引擎搜索到，各部分信息很重要）、以及一些和文档内容无关仅对文档本身进行说明的数据信息以及一些和文档内容无关仅对文档本身进行说明的数据信息文件头元素语法文件头元素语法l开始标记：开始标记：可选可选 l内容：内容：title 标题元素标题元素 base 文档基础目录元素文档基础目录元素

21、 meta 元数据元素元数据元素 script 脚本元素脚本元素 style 内部样式表的样式元素内部样式表的样式元素 link 链接元素链接元素 连接到外部样式表连接到外部样式表l结束标记：结束标记：可选可选标题元素标题元素l元素元素标题元素的内容出现在浏览器顶部标题元素的内容出现在浏览器顶部没有属性没有属性必需出现在必需出现在head元素中且只能有一个标题元素元素中且只能有一个标题元素元数据元素元数据元素l元数据元素元数据元素meta 的意思是的意思是“关于关于”它是关于某个网页的基本信息它是关于某个网页的基本信息搜索引擎对搜索引擎对meta元素中数据进行搜索可以帮助访问者找到该网页元素中

22、数据进行搜索可以帮助访问者找到该网页META的属性的属性META的属性的属性作用作用name属性属性指定特性名指定特性名content属性属性指定特性的值指定特性的值http-equiv属性属性使得使得HTTP服务器根据服务器根据http-equiv属性的属性的值获取值获取http响应信息头响应信息头,以便可以让浏览以便可以让浏览器按某种指定的方式显示页面器按某种指定的方式显示页面META的作用举例的作用举例l给网页添加说明（比如网页的作者，关键字等）给网页添加说明（比如网页的作者，关键字等）l让网页可以按关键字被搜索到让网页可以按关键字被搜索到增加关键字可以提高网页被浏览的机会增加关键字可以

23、提高网页被浏览的机会l定期刷新网页定期刷新网页比如在聊天室应用中，需要随时刷新用户的发言比如在聊天室应用中，需要随时刷新用户的发言文档主体元素文档主体元素lbody元素代表网页要显示给读者的内容，几乎所有要显示的内元素代表网页要显示给读者的内容，几乎所有要显示的内容都被包括在容都被包括在里面里面l语法：语法：l开始标记：开始标记：可选可选 l内容：内容：可以包含除了可以包含除了html、head外所有元素外所有元素l结束标记：结束标记：可选可选网页中的文本网页中的文本l网页中的信息主要是通过文本传递的，所以文本是网页中的信息主要是通过文本传递的，所以文本是Web信息的基本构成。与文本编辑有关的

24、元素，包括：信息的基本构成。与文本编辑有关的元素，包括：段落标记段落标记 换行标记换行标记、区块标记区块标记 水平线标记水平线标记、强调标记强调标记 文本标题标记文本标题标记 列表标记列表标记 定义列表标记定义列表标记段落元素的语法段落元素的语法l开始标记：开始标记：必需必需l内容：内容：嵌套其它块元素嵌套其它块元素内联元素内联元素文本文本l结束标记：结束标记：可选可选段落元素的属性段落元素的属性属性属性作用作用id,class和样式表结合使用，给文档中的某一段落赋以和样式表结合使用，给文档中的某一段落赋以唯一的标识唯一的标识title元素的标题，它的作用是设定当鼠标停留在该元素的标题，它的作

25、用是设定当鼠标停留在该元素上时，出现的高亮提示文字元素上时，出现的高亮提示文字style直接指定该元素的样式直接指定该元素的样式align对齐属性。建议不使用，因为该属性应该在样对齐属性。建议不使用，因为该属性应该在样式表中给出式表中给出段落元素应用举例段落元素应用举例段落文段落文本居中本居中段落文本段落文本居右居右段落文本段落文本居左居左换行符元素换行符元素l在网页中回车在网页中回车l开始标记：开始标记：必需必需l内容：内容：无无l结束标记：结束标记：禁用禁用使用使用和和的不同效果的不同效果l段落一段落一l段落二段落二l 这里有一个换行符这里有一个换行符l段落三段落三div块元素分组块元素分

26、组l的作用的作用为块元素提供分组的方法为块元素提供分组的方法常被用于和样式表配合使用常被用于和样式表配合使用还被用来作为层用于页面布局还被用来作为层用于页面布局块元素分组语法块元素分组语法l开始标记：开始标记：必需必需l内容：内容：嵌套其他块元素嵌套其他块元素内联元素内联元素文本文本l结束标记：结束标记：必需必需l主要属性主要属性id、class、align、style内联元素分组内联元素分组l元素的作用元素的作用span提供了一种对内联元素分组的方法提供了一种对内联元素分组的方法span 常用来和样式表配合常用来和样式表配合往往被用来设置同一行文字内的不同格式往往被用来设置同一行文字内的不同

27、格式内联元素语法内联元素语法l开始标记：开始标记：必需必需l内容：内容：嵌套其他块元素嵌套其他块元素内联元素内联元素文本文本l结束标记：结束标记：必需必需l主要属性主要属性Id、class、align、stylediv、span应用举例应用举例 好雨好雨知时节知时节当春乃发生当春乃发生随风潜入夜随风潜入夜润物细无声润物细无声水平线元素水平线元素l的作用的作用该元素可以在文档中划一条水平线，当文档比较大时常用来分割该元素可以在文档中划一条水平线，当文档比较大时常用来分割文档文档l主要属性主要属性width 宽度宽度size 高度高度noshade 该行不带阴影该行不带阴影color 线条颜色线条

28、颜色l语法语法开始标记：开始标记：必需必需内容：内容：无无结束标记：结束标记：禁用禁用水平线元素应用举例水平线元素应用举例lll加强元素和强调元素加强元素和强调元素lStrong 和和em默认效果：给字体加粗和斜体显示默认效果：给字体加粗和斜体显示开始标记：必需开始标记：必需内容：内容：内联元素内联元素文本文本结束标记：必需结束标记：必需l主要属性主要属性Id、class、align、title、style、lang等等文本标题元素文本标题元素l标题标题1-标题标题6这六个元素的作用是让文字以醒目的方式显示，往往用于文章的这六个元素的作用是让文字以醒目的方式显示，往往用于文章的标题标题标题标题

29、1 标题标题2 标题标题3 标题标题4 标题标题5 标题标题6 列表元素列表元素l列表是指将具有相似特征或者是具有先后顺序的几行文字进行对列表是指将具有相似特征或者是具有先后顺序的几行文字进行对齐排列齐排列列表分为有序列表列表分为有序列表和无序列表和无序列表两种两种列表项元素用来包含列表项元素用来包含和和两种列表的列表项，也就是两种列表的列表项，也就是列表内容列表内容无序列表元素语法无序列表元素语法lul无序列表元素无序列表元素开始标记：必需开始标记：必需内容：内容：列表项列表项结束标记：必需结束标记：必需主要属性主要属性id、class、align、title、style、langtype

30、列表符号，可取值为列表符号，可取值为 disc,square,circle有序列表元素语法有序列表元素语法lol有序列表元素有序列表元素开始标记：必需开始标记：必需内容：内容：列表项列表项结束标记：必需结束标记：必需主要属性主要属性id、class、align、title、style、langtype 列表符号，可取值为列表符号，可取值为 1,A,a,i,Istart 起始符号起始符号列表元素语法列表元素语法lli有序列表元素有序列表元素开始标记：必需开始标记：必需内容：内容：内联元素内联元素文本文本结束标记：可选结束标记：可选主要属性主要属性id、class、align、title、styl

31、e、langtype 列表符号，可取值为列表符号，可取值为 disc,square,circle，1,A,a,i,Ivalue 序列号序列号列表元素应用举例列表元素应用举例书的类型书的类型-无序列表无序列表 法律法律 文学文学 计算机计算机 英文教材英文教材学生表学生表-有序列表有序列表 张力张力 王鹏王鹏 黎明黎明 赵敏赵敏 孟经孟经定义列表，术语，定义元素定义列表，术语，定义元素l定义列表往往用于要给出一类事物的定义的情形，如名词解释、定义列表往往用于要给出一类事物的定义的情形，如名词解释、字典等字典等标记定义一个定义列表标记定义一个定义列表标记定义了定义列表中的一个术语标记定义了定义列表

32、中的一个术语标记对定义列表中的术语提供定义标记对定义列表中的术语提供定义缩写术语的解释：缩写术语的解释：HTMLHyper Text Markup LanguageASPActiveX Server PageXMLeXtensible Markup LanguageCSSCascading Style Sheet定义列表举例定义列表举例网页中的注释网页中的注释l在在HTML中使用中使用标记加入注释标记加入注释l注释以注释以”l注释有利于注释有利于HTML代码的可读性，在动态网页中还有其它代码的可读性，在动态网页中还有其它的用处的用处l给代码加上注释是一个好习惯给代码加上注释是一个好习惯注释应用

33、举例注释应用举例缩写术语的解释：缩写术语的解释：HTMLHyper Text Markup LanguageASPActiveX Server PageXMLeXtensible Markup LanguageCSSCascading Style Sheet这句话不被显示这句话不被显示网页中的实体网页中的实体l实体指实体指网页中表达一些在网页中表达一些在HTML语言中有特殊意义的字符，直接使用它语言中有特殊意义的字符，直接使用它们会带来误会们会带来误会比如比如、&、”、还有空格等、还有空格等键盘上没有的，但常常会使用键盘上没有的，但常常会使用比如：比如：版权符号：商标符号：注册符号l表示实体的

34、表示方式表示实体的表示方式一般，以一般，以”&”号开始，并以分号号开始，并以分号”;”结束结束比如：比如：©；代表版权符号；代表版权符号超级链接和超级链接和URLl超级链接超级链接IE浏览器的默认效果浏览器的默认效果文字带有下划线文字带有下划线文字为蓝色文字为蓝色访问过的文字颜色为紫色访问过的文字颜色为紫色鼠标浮在文字上方时变成手形鼠标浮在文字上方时变成手形l修改默认外观的方法修改默认外观的方法使用使用css（后面学习）（后面学习）l超级链接的作用超级链接的作用告诉浏览器使用告诉浏览器使用HTTP协议来激活一个协议来激活一个URL，当鼠标点击在超级链接，当鼠标点击在超级链接上时，该超级

35、链接的上时，该超级链接的URL就被提交给浏览器用于访问网络就被提交给浏览器用于访问网络超级链接的超级链接的构成构成l超级链接的构成超级链接的构成oracle可见的部分可见的部分比如，网页中带下划线的文字比如，网页中带下划线的文字不可见的部分不可见的部分URL-网络资源的地址网络资源的地址HTML语言使用语言使用a元素中的属性元素中的属性href来指明超级链接的来指明超级链接的URL，a元素还元素还可以控制超级链接的可见部分的外观可以控制超级链接的可见部分的外观超级链接元素超级链接元素l超级链接元素超级链接元素l语法语法开始标记：开始标记：必需必需内容：内容：内联元素（不能嵌套内联元素（不能嵌套

36、a元素）元素）文本文本 结束标记：结束标记：必需必需l主要属性主要属性href：用来说明链接资源的：用来说明链接资源的URLtarget：打开链接的窗口：打开链接的窗口name：锚点名称：锚点名称超级链接元素应用举例超级链接元素应用举例lwww.w3c.org l锚点锚点l锚点是文档中某行的一个记号锚点是文档中某行的一个记号l使用锚点可以让超级链接链接到文档中的某一行使用锚点可以让超级链接链接到文档中的某一行l定义锚点的方法如下：定义锚点的方法如下：锚点一锚点一锚点锚点二二l链接到锚点的方法链接到锚点的方法在锚点名前加上井号在锚点名前加上井号(#)例如例如到锚点一到锚点一到锚点二到锚点二相对路

37、径和绝对路径相对路径和绝对路径lURL中的路径名表示方法中的路径名表示方法相对路径相对路径指文件的位置是相对于当前文件的位置。它包括目录名，或指向一个指文件的位置是相对于当前文件的位置。它包括目录名，或指向一个可以从当前目录出发找到该文件的路径可以从当前目录出发找到该文件的路径绝对路径绝对路径指的是文件从最高级目录下开始的完整的路径，无论当前路径是什么，指的是文件从最高级目录下开始的完整的路径，无论当前路径是什么，使用绝对路径总是能找到要链接的文件使用绝对路径总是能找到要链接的文件.:表示当前路径的上一层目录表示当前路径的上一层目录l路径的选择路径的选择用相对路径：网页存储在相同位置（或相对位

38、置固定，不会改变）用相对路径：网页存储在相同位置（或相对位置固定，不会改变）用绝对路径：网页的相对位置经常变动，某些资源的绝对位置不用绝对路径：网页的相对位置经常变动，某些资源的绝对位置不变变图像文件的格式图像文件的格式lHTML支持三种格式的图像文件支持三种格式的图像文件,即即JPEG(图形图像联合专家组，图形图像联合专家组，Joint Photopraphic Experts Group)GIF(图形接口格式图形接口格式,Graphics Interface Format)PNG(可移植网络图形可移植网络图形,Portable Network Graphic)图形格式图形格式lJPEGJP

39、EG格式采用有损压缩算法，但是这种格式不会让人感到和源格式采用有损压缩算法，但是这种格式不会让人感到和源文件（未压缩）有任何的差别。而且它的压缩比也是较大的，成文件（未压缩）有任何的差别。而且它的压缩比也是较大的，成为网络上传递清晰照片的首选为网络上传递清晰照片的首选lGIFGIF格式使用格式使用256色的方法来压缩图像，如果想传递的是一幅色彩色的方法来压缩图像，如果想传递的是一幅色彩丰富的图像，尽量不要使用丰富的图像，尽量不要使用GIF格式，这样会有较大的失真，格式，这样会有较大的失真，GIF格式主要用于线条为主的图像，或者图像面幅很小的图像，另外格式主要用于线条为主的图像，或者图像面幅很小

40、的图像，另外GIF支持动画和透明图像支持动画和透明图像lPNGPNG是最新开发的一种用于是最新开发的一种用于WEB的图像格式，可以提供最好的的图像格式，可以提供最好的画面质量，压缩比也很理想，是今后画面质量，压缩比也很理想，是今后WEB上的主要图像格式，但上的主要图像格式，但目前不是所有的浏览器都能支持目前不是所有的浏览器都能支持图像元素图像元素l语法语法开始标记：开始标记：必需必需内容：内容：无无 结束标记：结束标记：禁用禁用l主要属性主要属性id,class:与样式表结合使用与样式表结合使用src:图像的图像的URLalt:简短的描述；用于纯文本浏览器。简短的描述；用于纯文本浏览器。wid

41、th：图像的宽度，用来改变图像原来的宽度图像的宽度，用来改变图像原来的宽度height：图形的高度，用来改变图像原来的高度图形的高度，用来改变图像原来的高度ALT属性的作用属性的作用lALT属性的作用是在图像不能显示的情况下，在图像位置属性的作用是在图像不能显示的情况下，在图像位置出现的提示文本，说明给图像的内容或其它信息出现的提示文本，说明给图像的内容或其它信息l图像不能显示的原因如下图像不能显示的原因如下浏览器不支持图像，或某些图像格式浏览器不支持图像，或某些图像格式浏览器被用户设定为不下载图像浏览器被用户设定为不下载图像由于网络速度图形不能立即显示，对于一些比较大的图像，往往由于网络速度

42、图形不能立即显示，对于一些比较大的图像，往往文字部分已经显示了很久之后才能下载完全文字部分已经显示了很久之后才能下载完全图像元素应用举例图像元素应用举例l如果图片删除了或其它原因图像不能显示则会在图像的如果图片删除了或其它原因图像不能显示则会在图像的位置出现以下效果位置出现以下效果图像和文本的关系图像和文本的关系l网页设计的天地网页设计的天地l底部底部顶端顶端中间中间本章总结本章总结l理解理解Web的工作原理的工作原理lHTML基础知识基础知识HTML概述概述HTML的基本语法的基本语法HTML文档的结构文档的结构网页中的文本、注释和实体网页中的文本、注释和实体 l网页中的超级链接网页中的超级链接l网页中的图像网页中的图像理解理解URL的概念的概念理解什么是相对路径和绝对路径理解什么是相对路径和绝对路径掌握超级链接元素和文档中锚点的用法掌握超级链接元素和文档中锚点的用法了解图像文件的格式了解图像文件的格式掌握图像元素掌握图像元素IMG的用法的用法