01Web编程基础(3HTML与CSS)

齐鲁软件园华信培训中心第1页[e-mail]编程基础编程基础(3)(3)张英锋张英锋J2EEJ2EE、、OracleOracle讲师讲师Mail:[e-mail]:[e-mail]:[e-mail]:[e-mail]齐鲁软件园华信培训中心第2页[e-mail]主要内容主要内容ƒƒ1.1.概述概述ƒƒ2.HTTP2.HTTP协议协议ƒƒ3.HTML3.HTML与与CSS(CSS(选讲选讲))ƒƒ4.JavaScript4.JavaScript与与DOM(DOM(选讲选讲))齐鲁软件园华信培训中心第3页[e-mail]3HTML3HTML与与CSSCSSƒƒ3.1DHTML3.1DHTML概述概述ƒƒ3.2HTML3.2HTMLƒƒ3.3CSS3.3CSS齐鲁软件园华信培训中心第4页[e-mail]3.1DHTML3.1DHTML概述概述ƒƒDHTMLDHTML是是DynamicHTMLDynamicHTML的缩写，即的缩写，即动态动态HTMLHTML。。ƒƒDHTMLDHTML只是一组技术的泛称，与原有的只是一组技术的泛称，与原有的静态的静态的HTMLHTML相对应。相对应。这些技术主要包括：这些技术主要包括：HTMLHTML、、CSSCSS、、JavaScriptJavaScript和和DOMDOM。。他们之间是相互协作的关系，即通过组合这他们之间是相互协作的关系，即通过组合这些技术，可以提高静态些技术，可以提高静态HTMLHTML页面的表现和页面的表现和交互能力。交互能力。齐鲁软件园华信培训中心第5页[e-mail]ƒƒHTMLHTML用来定义页面元素，即用来定义页面元素，即数据数据。。ƒƒCSSCSS用来描述元素属性，如大小、颜用来描述元素属性，如大小、颜色、位置等，即色、位置等，即数据的表现数据的表现。。ƒƒDOMDOM提供一套对象模型和一组提供一套对象模型和一组APIAPI，用，用来访问操作页面元素，即来访问操作页面元素，即数据的接口数据的接口。。ƒƒJavaScriptJavaScript则提供一种基于对象的则提供一种基于对象的编程编程语言语言，用来控制以上对象。，用来控制以上对象。齐鲁软件园华信培训中心第6页[e-mail]ƒƒ示例：一个静态示例：一个静态HTMLHTML页面页面htmlheadtitle网页标题/title/headbodyspan嗨！说你呢！是不是又走神了!/span/body/html齐鲁软件园华信培训中心第7页[e-mail]ƒƒ加入加入CSSCSS：：style.Over{color:yellow;background-color:blue}.Out{color:black;background-color:white}/style齐鲁软件园华信培训中心第8页[e-mail]ƒƒ加入脚本加入脚本OnMouseOver=this.className='Over'OnMouseOut=this.className='Out'齐鲁软件园华信培训中心第9页[e-mail]ƒƒ完整的代码完整的代码htmlheadtitle网页标题/titlestyle.Over{color:yellow;background-color:blue}.Out{color:black;background-color:white}/style/headbodyspanOnMouseOver=this.className='Over'OnMouseOut=this.className='Out'嗨！说你呢！是不是又走神了!/span/body/html齐鲁软件园华信培训中心第10页[e-mail]3.2HTML3.2HTML基础基础ƒƒ超文本标记语言超文本标记语言(HyperTextMarkup(HyperTextMarkupLanguage)Language)即在文本文件的基础上，加上一系列的标记即在文本文件的基础上，加上一系列的标记符号，用以描述其格式，形成网络文件。符号，用以描述其格式，形成网络文件。““超超””体现在它还可以包含图、音和视频等多体现在它还可以包含图、音和视频等多媒体，即将文本的概念扩展到超文本。媒体，即将文本的概念扩展到超文本。齐鲁软件园华信培训中心第11页[e-mail]ƒƒ浏览器下载浏览器下载HTMLHTML文件后，就根据标记解文件后，就根据标记解释成它应有的含义，并按照一定的格式释成它应有的含义，并按照一定的格式将这些将这些HTMLHTML文件显示在浏览器窗口上。文件显示在浏览器窗口上。齐鲁软件园华信培训中心第12页[e-mail]标记格式标记格式ƒƒ大多数大多数htmlhtml表示的书写格式如下：表示的书写格式如下：标记名标记名显示内容显示内容//标记名标记名绝大多数标记符都是成对出现的，包括开始绝大多数标记符都是成对出现的，包括开始标记符和结束标记符。标记符和结束标记符。有的有的HTMLHTML元素类型没有内容，这样的空元元素类型没有内容，这样的空元素没有结束标记符。素没有结束标记符。yy例如换行符元素例如换行符元素brbrHTMLHTML标记符是不区分大小写，但建议一律标记符是不区分大小写，但建议一律小写。小写。齐鲁软件园华信培训中心第13页[e-mail]标记属性标记属性ƒƒ标记的属性放在标记内部，与标记名至标记的属性放在标记内部，与标记名至少留一个空格。少留一个空格。如如bodytext=#ff0000bodytext=#ff0000bgcolorbgcolor=#d8e4d7=#d8e4d7ƒƒ一个一个HTMLHTML标记通常有多个属性，有些属标记通常有多个属性，有些属性是可选的。性是可选的。ƒƒ属性的排列没有先后顺序。属性的排列没有先后顺序。ƒƒ同样不区分大小写。同样不区分大小写。齐鲁软件园华信培训中心第14页[e-mail]注释注释ƒƒ例如例如!!----这是一个注释这是一个注释----ƒƒ在在!!和和----之间不允许出现空格。之间不允许出现空格。ƒƒ注释内的信息不会显示在浏览器上，这注释内的信息不会显示在浏览器上，这一点有时候很有用处！一点有时候很有用处！齐鲁软件园华信培训中心第15页[e-mail]结构标记结构标记ƒƒHTMLHTML文档的结构形式如下：文档的结构形式如下：htmlhead页面概要信息的描述/headbody页面主体元素的描述/body/html齐鲁软件园华信培训中心第16页[e-mail]ƒƒhtmlhtml标记标记标明标明HTMLHTML文档的开始与结束文档的开始与结束。。ƒƒheadhead标记标记是是HTMLHTML文件头标记符，用来描述文件头标记符，用来描述HTMLHTML首首部的内容，说明文档的整体信息。部的内容，说明文档的整体信息。ƒƒbodybody标记标记定义定义HTMLHTML文档的主体。文档的主体。齐鲁软件园华信培训中心第17页[e-mail]ƒƒtitletitle标记标记一个优质网页昀重要的元素。一个优质网页昀重要的元素。用来代表该文档的一个简短文本。用来代表该文档的一个简短文本。浏览器会将其作为文件标题显示在窗口左上浏览器会将其作为文件标题显示在窗口左上角上。角上。齐鲁软件园华信培训中心第18页[e-mail]图像标记图像标记ƒƒimgimg称图像标记，主要用以插入图称图像标记，主要用以插入图片于网页中。片于网页中。从单一的文本到绚丽的图片，加入图像标记从单一的文本到绚丽的图片，加入图像标记曾经是曾经是HTMLHTML的一大飞跃。的一大飞跃。齐鲁软件园华信培训中心第19页[e-mail]链接标记链接标记ƒƒaa称链接标记，英文称链接标记，英文anchoranchor（锚）的（锚）的简写。简写。由由a/aa/a所围的文字、图片等等可以成所围的文字、图片等等可以成为一个链接。为一个链接。ahref=ahref=index.htmlindex.htmlname=helloname=hellotarget=_toptarget=_tophrefhref：：hypertextreferencehypertextreference的缩写，值为的缩写，值为所链接的资源的所链接的资源的URLURL地址或路径。地址或路径。name:name:锚点名。锚点名。target:target:打开窗口的形式。打开窗口的形式。齐鲁软件园华信培训中心第20页[e-mail]ƒƒ超链接的类型：超链接的类型：内部链接：在本地站点内的不同页面之间相内部链接：在本地站点内的不同页面之间相互联系的超链接，可以使用相对路径。互联系的超链接，可以使用相对路径。外部链接：把网页与外部链接：把网页与中的目标相联系中的目标相联系的链接，使用完整的的链接，使用完整的URLURL地址。地址。锚点链接：可以链接到网页中某个特定位置锚点链接：可以链接到网页中某个特定位置的链接，使用的链接，使用##锚点名。锚点名。齐鲁软件园华信培训中心第21页[e-mail]ƒƒ锚点链接示例：锚点链接示例：ahref=#no1/aahref=#no1/aahref=index.html#no1/aahref=index.html#no1/a及及ahref=ahref=://localhost:8088/hello/index.html#no1/aml#no1/a齐鲁软件园华信培训中心第22页[e-mail]排版标记排版标记ƒƒ段落标记段落标记ppƒƒ换行标记换行标记brbrƒƒ水平线水平线frfrƒƒ居中标记居中标记centercenter齐鲁软件园华信培训中心第23页[e-mail]标题标记标题标记h1标题1/h1h2标题2/h2h3标题3/h3h4标题4/h4h5标题5/h5h6标题6/h6齐鲁软件园华信培训中心第24页[e-mail]ƒƒ预定义格式标记预定义格式标记pre/prepre/preƒƒ示例：请将以下文字加入到网页代码示例：请将以下文字加入到网页代码1.那位同学别睡了，2.起来吧，3.吃饭了！齐鲁软件园华信培训中心第25页[e-mail]布局标记布局标记ƒƒ用来安排整个页面的布局；用来安排整个页面的布局；ƒƒ一般多结合一般多结合CSSCSS使用；使用；灵活使用这些标记的各种属性灵活使用这些标记的各种属性,,不但可以让不但可以让页面表现的丰富多彩，还可以实现数据和表页面表现的丰富多彩，还可以实现数据和表现的分离。现的分离。齐鲁软件园华信培训中心第26页[e-mail]ƒƒdivdivDIVDIV用来为用来为HTMLHTML文档内大块文档内大块(block(block--level)level)的内容提供结构和背景的元素。的内容提供结构和背景的元素。即即div.../divdiv.../div之间是一个很完整的段之间是一个很完整的段落区块。落区块。