Web技术应用基础.pptx

15.1 XMLXML的产生的产生 HTML遇遇到到一一些些瓶瓶颈颈问问题题，促促使使可可扩扩展展性性标标记记语语言言XML（eXtendable Markup Language）的的诞诞生生。1996年年7月月XML工工作作小小组组在在W3C（World Wide Web Consortium）的的赞赞助助下下成成立立，于于1998.1.10正正式式通通过过XML1.0规规范范。由由于于XML具具有有可可扩扩展展性性、结结构构性性、自自我我描描述述性性的的特特点点，并并采采用用数数据据和和样样式式分分离离原原则则，使其在数据的管理、交换上拥有极为卓越的性能。使其在数据的管理、交换上拥有极为卓越的性能。2XML与与HTML的比较的比较XMLXML的的开开发发并并不不是是取取代代HTMLHTML的的，而而是是弥弥补补其其不不足足的的。具具体有以下差异：体有以下差异：1.XML1.XML文件可以自定义标记和属性，文件可以自定义标记和属性，HTMLHTML则不能。则不能。2.XML2.XML是是属属于于一一般般用用途途的的标标记记语语言言，而而HTMLHTML则则是是一一种特殊用途的标记语言。种特殊用途的标记语言。3.XML3.XML着着重重于于文文件件的的结结构构，而而HTMLHTML则则擅擅长长于于文文件件的的表现。表现。4.XML4.XML文文件件可可以以有有选选择择地地利利用用DTDDTD或或XMLXML纲纲要要（XML XML SchemaSchema）来确认文件的有效性，）来确认文件的有效性，HTMLHTML则不可以。则不可以。3XML文档的类型文档的类型两种类型：两种类型：良构的良构的XML文档文档有效的有效的XML文档文档4良构的良构的XML文档文档范例范例Michael GuoMale1966.7Computer Graphics,Data mining,Teacher5良构的良构的XML文档必须符合以下规则文档必须符合以下规则所有的所有的XML文档都要有一个包含所有其他元素的根元文档都要有一个包含所有其他元素的根元素素所有的元素必须有开始标记和结束标记所有的元素必须有开始标记和结束标记标记必须正确嵌套，不能交叉标记必须正确嵌套，不能交叉大小写敏感大小写敏感空白不能随便放置空白不能随便放置所有的属性值必须用引号（英文状态的半角字符）括所有的属性值必须用引号（英文状态的半角字符）括起来起来更详细的规则，可参考更详细的规则，可参考W3C网站或相关书籍网站或相关书籍6 有效的有效的XML文档文档有效的有效的XML文档是遵照文档是遵照XML语法规则和文档类型定义语法规则和文档类型定义（DTD)规则构造的一种文档。规则构造的一种文档。DTD（Document Type Definition）是一段关于该）是一段关于该文档中数据的组织存放结构的说明。文档中数据的组织存放结构的说明。定义了某项数据应该在哪出现定义了某项数据应该在哪出现规定了各种数据项之间的关系规定了各种数据项之间的关系7内部内部DTD范例范例resum-in.xml!DOCTYPE!DOCTYPE resumeresume Michael GuoMichael GuoMaleMale1966.71966.7Computer Graphics,Data mining,TeacherComputer Graphics,Data mining,Teacher定义定义resume文档文档空格空格8外部外部DTD预先定义好预先定义好DTD文档文档resume.dtd9使用外部型使用外部型DTDDTD声明的声明的XMLXML文档文档Resume-ex.xmlResume-ex.xmlMichael GuoMichael GuoMaleMale1966.71966.7Computer Graphics,Data Computer Graphics,Data mining,Teachermining,Teacher10XML文档的浏览文档的浏览在浏览器中直接浏览在浏览器中直接浏览如良构的如良构的XML文档文档运用运用CSS技术显示技术显示XML文档文档文档中引用的文档中引用的css文件文件mycss.cssname background-color:#cccc99;font-size:22pt;width:100%;sex font-family:Arial;font-size:16pt;color:blue;birthday font-family:Arial;font-size:16pt;color:red;skill font-family:Arial;font-size:14pt;color:green;11xml-css.xmlMichael GuoMale1966.7Computer Graphics,Data mining,Teaching12CSS5.1 CSS简介简介5.1.1 CSS5.1.1 CSS作用作用 网页展现的样式从网页中独立出来集中管理网页展现的样式从网页中独立出来集中管理,它通它通过设置过设置CSSCSS属性元素获得各种不同效果。属性元素获得各种不同效果。13过程与步骤：过程与步骤：1.1.通过依次单击任务栏上的通过依次单击任务栏上的【开始开始】【程序程序】【附件附件】【记事本记事本】菜单命令打开记事本。菜单命令打开记事本。2 2在记事本的编辑面板中输入以下代码，创建了使用样在记事本的编辑面板中输入以下代码，创建了使用样式的页面式的页面css1.htmcss1.htm：样式表举例样式表举例 !-这段文字将显示为红色这段文字将显示为红色 这段这段文字的背景色为文字的背景色为黄色黄色 p style=font-family:;font-size:24px这段这段文字将以黑体显示文字将以黑体显示 今天学习样式表的相关知识。今天学习样式表的相关知识。css1.htm15什么是什么是CSS CSS(Cascading Style Sheet,CSS(Cascading Style Sheet,层叠样式表层叠样式表)技术上一种技术上一种格式化网页的标准方式，它扩展了格式化网页的标准方式，它扩展了HTMLHTML的功能，使网页设的功能，使网页设计者能够以更有效的方式设置网页格式。计者能够以更有效的方式设置网页格式。特点：特点：可以实现网页结构与格式分离；可以实现网页结构与格式分离；对网页布局、字体、背景和其它图文效果实现更加精对网页布局、字体、背景和其它图文效果实现更加精确的控制；确的控制；更好的易用性和扩展性，可以单独以一个文件的形式更好的易用性和扩展性，可以单独以一个文件的形式出现。出现。16CSS样式表的使用结构样式表的使用结构 多个网页文件共享样式文件多个网页文件共享样式文件 多个样式文件套用在一个网页文件上多个样式文件套用在一个网页文件上 HTML文件1HTML文件NCSS样式文件样式文件HTMLCSS样式文件样式文件NCSS样式文件样式文件1172.CSS样式表定义样式表定义 CSS样样式式表表由由样样式式规规则则组组成成，告告诉诉浏浏览览器器如如何何去去显显示示一一个个文文档档。样样式式规规则则一一般般由由选选择择符符与与属属性性组组成成。常常用用的的选选择择符符有有HTML标标签签、用户自定义类和用户自定义用户自定义类和用户自定义ID等。等。18CSS样式语法规则样式语法规则选择符选择符规则规则例如：例如：h1color:blue;h1color:blue;选择符（选择符（selectorselector）：表示要定义样式的类型，选择：表示要定义样式的类型，选择符可以包括符可以包括HTMLHTML标签符、用户自主义类标签符、用户自主义类classclass或用户自或用户自定义定义IDID。规则（规则（rulerule）：“属性属性(attributes)”(attributes)”表示由表示由CSSCSS标准标准定义的样式属性，定义的样式属性，“属性值属性值(values)”(values)”为样式属性的为样式属性的值。值。19CSS样式语法规则样式语法规则关于样式表的语法，要注意以下几个问题。关于样式表的语法，要注意以下几个问题。属性必须要包含在属性必须要包含在号之中。号之中。属性和属性值之间用属性和属性值之间用“:”分隔。分隔。当有多个属性时，用当有多个属性时，用“;”进行区分。进行区分。在书写属性时属性之间使用空格换行等，并不影在书写属性时属性之间使用空格换行等，并不影响属性的显示。响属性的显示。如果一个属性有几个值，则每个属性值之间用空如果一个属性有几个值，则每个属性值之间用空格分隔开。格分隔开。2021用户自定义类作为选择符用户自定义类作为选择符 定义格式：选择符定义格式：选择符.类名类名selector.classname selector.classname attributes1:values1;attributes2:values2;attributes1:values1;attributes2:values2;，例：，例：span.bluecolor:#0000FFspan.bluecolor:#0000FF span.redcolor:red span.redcolor:red应用样式时在对应的应用样式时在对应的HTMLHTML标签中加入标签中加入classclass属性，属性，属性值为样式表的类名。例：属性值为样式表的类名。例：这是一个引用两个不同这是一个引用两个不同spanspan样式的例子，样式的例子，蓝色蓝色spanspan与与span class=red红色红色spanspan22CSS样式定义样式定义选择选择符为符为HTML标记标记利用用户自定义类可以实现所有的利用用户自定义类可以实现所有的HTML标签的样标签的样式选择，当要达到复杂的样式效果时（比如，你想式选择，当要达到复杂的样式效果时（比如，你想让主体文字的让主体文字的1段用绿色显示，第段用绿色显示，第2段用紫色显示，段用紫色显示，而第而第3段用灰色显示），可以采用样式分类的方法段用灰色显示），可以采用样式分类的方法实现。实现。23CSS样式定义样式定义选择选择符为符为HTML标记：示例标记：示例P.first color:green P.second color:purple P.third color:gray HTML代码如下：代码如下：The first paragraph,with a class name of first.The second paragraph,with a class name of second.The third paragraph,with a class name of third.24CSS样式定义样式定义用户自定义用户自定义ID作为选择符作为选择符 用户自定义用户自定义ID与用户自定义类的功能相同，其区别与用户自定义类的功能相同，其区别仅为定义语法与引用方法不同。仅为定义语法与引用方法不同。定义格式如下：定义格式如下：#ID名名 attributes1:values1;attributes2:values2;示例：示例：id_selectors.html#yellowcolor:yellow其引用如下所示：其引用如下所示：本段为黄色本段为黄色 25CSS样式定义样式定义ID样式符与类样式符对比：样式符与类样式符对比：类选择符可以重复使用，且可以用在任意元类选择符可以重复使用，且可以用在任意元素上，使用任意次。素上，使用任意次。HTML内内id属性是唯一的，拥有属性是唯一的，拥有id的元素才的元素才会应用该样式。会应用该样式。ID选择符的优先权高于类选择符。选择符的优先权高于类选择符。提示：提示：使用使用.classname和使用和使用#IDname这两种方式在效果上这两种方式在效果上并没有区别，但最好只使用其中之一，以免造成混淆。并没有区别，但最好只使用其中之一，以免造成混淆。26CSS样式定义样式定义CSS虚类选择器：虚类选择器：专用于控制链接的显示效果，共专用于控制链接的显示效果，共4种选择器：种选择器：a:link（没有接触过的链接）（没有接触过的链接）,用于定义了链接的用于定义了链接的常规状态。常规状态。a:visited（访问过的链接）（访问过的链接）,用于阅读文章，能用于阅读文章，能清楚的判断已经访问过的链接。清楚的判断已经访问过的链接。a:hover（鼠标放在链接上的状态）（鼠标放在链接上的状态）,用于产生视用于产生视觉效果。觉效果。a:active（在链接上按下鼠标时的状态）（在链接上按下鼠标时的状态）,用于用于表现鼠标按下时的链接状态。表现鼠标按下时的链接状态。27CSS样式定义样式定义CSS样式选择器：样式选择器：几点说明：几点说明：a:link链接状态是基本的，推荐至少要定义这种链接状态是基本的，推荐至少要定义这种链接。链接。推荐推荐“a:hover”链接颜色使用红色，能产生极链接颜色使用红色，能产生极好的视觉效果好的视觉效果 以上以上4种选择器第种选择器第4种较少使用，在定义选择器种较少使用，在定义选择器时，必须严格按时，必须严格按a:link、a:visited、a:hover、a:active顺序定义，否则可能会无效。顺序定义，否则可能会无效。28CSS样式引用样式引用 直接定义直接定义style属性属性 内联式样式内联式样式 嵌入样式表嵌入样式表 外部样式表外部样式表29CSS1.1.直接定义直接定义stylestyle属性属性html标签中以标签中以style属性引用样式属性引用样式 示例：示例：这是一个直接书写样式的段落这是一个直接书写样式的段落。30例例5.2 直接定义直接定义HTML标记中的标记中的style属性属性 用四种方式将样式表功能应用到用四种方式将样式表功能应用到Web页面中页面中 ex5-231CSS2.定义内部样式表定义内部样式表 头部标签嵌套头部标签嵌套引用引用 网页网页之间插入样式表代码：之间插入样式表代码：32 定义内部样式表定义内部样式表 /*定义样式定义样式*/用四种方式将样式表功能应用到用四种方式将样式表功能应用到Web页面中页面中 第一段文字默认对齐第一段文字默认对齐第二段文字居中对齐第二段文字居中对齐Ex5-333CSS3.3.嵌入外部样式表嵌入外部样式表 style1.css style1.css 保存文字的其它保存文字的其它样式样式 h1 text-align:center;font-style:italic;font-family:隶书隶书;font-size:x-large;style2.css.css 保存文字的颜色保存文字的颜色 h1 color:green;34CSS嵌入外部样式表嵌入外部样式表 /*/*定义样式定义样式*/!-用四种方式将样式表功能应用到用四种方式将样式表功能应用到WebWeb页面中页面中例例5.435CSS4.4.链接外部样式表链接外部样式表 之间通过之间通过link引用外部文件：引用外部文件：文章标题文章标题 36链接外部样式表链接外部样式表 用四种方式将样式表功能应用到用四种方式将样式表功能应用到Web页面中页面中例例5.537综合范例综合范例以下代码是以下代码是sheet1.css/*CSS Document*/h1 font-size:36px;font-family:隶书隶书;font-weight:bold;color:#993366;h2 b color:blue .water font-family:隶书隶书;font-size:24px;text-align:right/*类选择器类选择器*/h3.hello font-family:隶书隶书;text-align:center;font-size:36px/*指定的类选择器指定的类选择器*/38以下代码是以下代码是sheet2.css/*CSS Document*/#danger color:#990000;font-family:华文彩云华文彩云;font-size:24px/*ID选择器选择器*/*以下是虚类的定义以下是虚类的定义*/a:link color:red;text-decoration:none;/*未访问的链接未访问的链接*/a:visited color:blue;text-decoration:none;/*已访问的链接已访问的链接*/39 a:hover color:#990000;text-decoration:underline /*鼠标指针移到上面链接的颜色鼠标指针移到上面链接的颜色*/a:active color:yellow;text-decoration:none;/*活动链接活动链接*/h2 b color:green/*重新定义了上下文选择器重新定义了上下文选择器*/40以下代码是以下代码是ss4.htmss4.htm 导入外部样式表导入外部样式表 41 标题标题1的使用。的使用。测试上下选择器（没有上下文）测试上下选择器（没有上下文）测试上下选择器（具有上下文）测试上下选择器（具有上下文）这是黄河的水这是黄河的水 黄河水黄河水 天上来天上来 这句话没有使用类这句话没有使用类“hello”的效果。的效果。这句话才使用了类这句话才使用了类“hello”的效果。的效果。这里危险。这里危险。测试链接的颜色，使用了虚类，实测试链接的颜色，使用了虚类，实际做的过程中读者自行体会。际做的过程中读者自行体会。ss4.htm42CSS属性属性HTML元素中的属性元素中的属性文本文本背景背景内外填充属性内外填充属性边框属性边框属性定位与显示属性定位与显示属性43CSS属性属性属性单位属性单位单位单位意义意义单位单位意义意义cmcm厘米厘米InIn英寸，英寸，1in=2.54cm1in=2.54cmmmmm毫米毫米PtPt点，点，1pt=1/72in1pt=1/72in pxpx像素像素pc pc 皮卡，皮卡，1pc=12pt1pc=12pt44文本属性文本属性 文本属性是文本属性是CSS属性中的一大类，用来设置文字属性中的一大类，用来设置文字的显示效果。其中部分属性设置效果可以通过文字的的显示效果。其中部分属性设置效果可以通过文字的标记实现。标记实现。45CSS样式样式文本属性文本属性 属性名属性名作用与含义作用与含义取值取值font-family字体字体本机具有的字体本机具有的字体font-size大小大小像素值（像素值（*px）font-weight粗细粗细normal bold bolder lighterfont-style倾斜样式倾斜样式normal italic obliqueline-height行高行高normal或像素或像素值text-decoration修饰修饰blink underline line-through（可多（可多选）letter-spacing字母间隔字母间隔像素值像素值word-spacing单词间隔单词间隔像素值像素值text-indent段落首行缩进段落首行缩进像素值像素值text-align文字对齐文字对齐left right center46h3 font-family:timesh3 font-family:timesp font-family:courierp font-family:courierp.sansserif font-family:sans-serifp.sansserif font-family:sans-serif h1 font-style:italich1 font-style:italich2 font-style:normalh2 font-style:normalp font-style:obliquep font-style:oblique 47背景属性背景属性 背景属性设定对象的背景颜色或背景图像。背景属性设定对象的背景颜色或背景图像。CSS样式背景属性样式背景属性 属性名属性名作用与含义作用与含义取值取值background-color背景颜色背景颜色颜色值颜色值background-image背景图像背景图像URL(图像地址像地址)background-attachment背景是否随页背景是否随页面滚动面滚动scroll fixedbackground-repeat是否重复是否重复repeat repeat-x repeat-y no-repeat48bodybody background-image:background-image:url(images/eg_background3url(images/eg_background3.jpg);.jpg);background-repeat:repeatbackground-repeat:repeat bodybody background:#00ff00 background:#00ff00 url(images/eg_background3.jpg)no-url(images/eg_background3.jpg)no-repeat fixed center;repeat fixed center;49内外填充属性内外填充属性 一些一些Web元素如表格、图像等可以看作是一个容元素如表格、图像等可以看作是一个容器，容器中放置了呈现内容。所谓的内外填充，可以器，容器中放置了呈现内容。所谓的内外填充，可以认为是容器内外侧的衬垫。认为是容器内外侧的衬垫。50CSS样式样式填充属性填充属性 属性名属性名作用与含义作用与含义取值取值margin统一定义外部填充统一定义外部填充像素值像素值margin-top分别定义外部各边填充分别定义外部各边填充margin-bottommargin-leftmargin-rightpadding统一定义内部填充统一定义内部填充像素值像素值padding-top分别定义内部各边填充分别定义内部各边填充padding-bottompadding-leftpadding-right51p.margin margin:2cm 4cm 3cm 4cmp.margin margin:2cm 4cm 3cm 4cm td.test1 padding:1.5cmtd.test1 padding:1.5cmtd.test2 padding:0.5cm 2.5cmtd.test2 padding:0.5cm 2.5cm 52边框属性边框属性 边框属性用来设置对象的边框颜色、类型以及粗细边框属性用来设置对象的边框颜色、类型以及粗细。CSSCSS样式边框属性样式边框属性样式边框属性样式边框属性属性名属性名作用与含义作用与含义取值取值border复合属性复合属性border-color统一定义边框颜统一定义边框颜色色颜色值颜色值border-top-color分别定义各边框分别定义各边框颜色颜色border-bottom-colorborder-left-colorborder-right-color53CSS样式样式边框属性边框属性(续表续表)属性名属性名作用与含义作用与含义取值取值border-style统一定义边框类型统一定义边框类型dotted dashed solid doublegroove ridge inset outsetborder-top-style分别定义各边框类型分别定义各边框类型border-bottom-styleborder-left-styleborder-right-styleborder-width统一定义边框粗细统一定义边框粗细medium thin thick或像或像素素值border-top-width分别定义各边框粗细分别定义各边框粗细border-bottom-widthborder-left-widthborder-right-width54定位与显示属性定位与显示属性 内外填充属性站在容器的角度，设定了页面的排内外填充属性站在容器的角度，设定了页面的排版。从容器内容的角度来说，也可以设置内容相对于版。从容器内容的角度来说，也可以设置内容相对于容器的定位以及内容的尺寸。容器的定位以及内容的尺寸。55CSS样式样式定位与显示属性定位与显示属性 属性名属性名作用与含义作用与含义取值取值position元素的定位方式元素的定位方式static absolute fixed relativetop bottom left right距容器各边缘距离距容器各边缘距离像素值像素值z-index显示层次显示层次数值数值height元素高度元素高度像素值像素值width元素宽度元素宽度像素值像素值overflow溢出处理溢出处理visible hidden scroll autovisibility可见性可见性visible hiddenfloat绕排绕排left rightcolor元素颜色元素颜色颜色值颜色值56.s1position:absolute;top:20px;left:30px;z-index:1;width:400;font-size:40pt;color:blue .s2position:absolute;top:23px;left:33px;z-index:2;width:450;font-size:40pt;color:yellow .s3position:absolute;top:26px;left:36px;z-index:3;width:400;font-size:40pt;color:red 57CSS定位技术的应用定位技术的应用 定位属性范例定位属性范例58Web技术应用基础技术应用基础 Web技术应用基础技术应用基础Web技术应用基础技术应用基础欢迎学习欢迎学习欢迎学习欢迎学习例例5.659教学内容教学内容 样式符样式符样式符样式符 属性：值属性：值属性：值属性：值 CSSCSS定义定义定义定义 CSSCSS引用引用引用引用CSSCSS属性属性属性属性 内部、外部两种内部、外部两种引用方式引用方式CSS属性值较多，本章详细介属性值较多，本章详细介绍边框、颜色、定位等常用绍边框、颜色、定位等常用属性属性