Web技术应用基础

上传人：1*** IP属地：浙江上传时间：2023-09-02 格式：PPTX 页数：59 大小：791.52KB 积分：19.9 举报 版权申诉

已阅读5页，还剩54页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

15.1XMLXML的产生

HTML遇到一些瓶颈问题，促使可扩展性标记语言XML（eXtendableMarkupLanguage）的诞生。1996年7月XML工作小组在W3C（World

WideWebConsortium）的赞助下成立，于1998.1.10正式通过XML1.0规范。由于XML具有可扩展性、结构性、自我描述性的特点，并采用数据和样式分离原则，使其在数据的管理、交换上拥有极为卓越的性能。2XML与HTML的比较

XML的开发并不是取代HTML的，而是弥补其不足的。具体有以下差异：1.XML文件可以自定义标记和属性，HTML则不能。2.XML是属于一般用途的标记语言，而HTML则是一种特殊用途的标记语言。3.XML着重于文件的结构，而HTML则擅长于文件的表现。4.XML文件可以有选择地利用DTD或XML纲要（XMLSchema）来确认文件的有效性，HTML则不可以。3XML文档的类型两种类型：良构的XML文档有效的XML文档4良构的XML文档范例<?xmlversion="1.0"encoding="GB2312"?><resume><name>MichaelGuo</name><sex>Male</sex><birthday>1966.7</birthday><skill>ComputerGraphics,Datamining,Teacher</skill></resume>5良构的XML文档必须符合以下规则

所有的XML文档都要有一个包含所有其他元素的根元素所有的元素必须有开始标记和结束标记标记必须正确嵌套，不能交叉大小写敏感空白不能随便放置所有的属性值必须用引号（英文状态的半角字符）括起来更详细的规则，可参考W3C网站或相关书籍6

有效的XML文档有效的XML文档是遵照XML语法规则和文档类型定义（DTD)规则构造的一种文档。DTD（DocumentTypeDefinition）是一段关于该文档中数据的组织存放结构的说明。定义了某项数据应该在哪出现规定了各种数据项之间的关系7内部DTD范例resum-in.xml<?xmlversion="1.0"encoding="GB2312"?><!DOCTYPEresume[<!ELEMENTresume(name,sex,birthday,skill)><!ELEMENTname(#PCDATA)><!ELEMENTsex(#PCDATA)><!ELEMENTbirthday(#PCDATA)><!ELEMENTskill(#PCDATA)>]><resume><name>MichaelGuo</name><sex>Male</sex><birthday>1966.7</birthday><skill>ComputerGraphics,Datamining,Teacher</skill></resume>定义resume文档空格8外部DTD预先定义好DTD文档resume.dtd<!ELEMENTresume(name,sex,birthday,skill)><!ELEMENTname(#PCDATA)><!ELEMENTsex(#PCDATA)><!ELEMENTbirthday(#PCDATA)><!ELEMENTskill(#PCDATA)>9使用外部型DTD声明的XML文档Resume-ex.xml<?xmlversion="1.0"encoding="GB2312"?><!DOCTYPEresumeSYSTEM"resume.dtd"><resume><name>MichaelGuo</name><sex>Male</sex><birthday>1966.7</birthday><skill>ComputerGraphics,Datamining,Teacher</skill></resume>10XML文档的浏览在浏览器中直接浏览如良构的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.xml<?xmlversion="1.0"encoding="GB2312"?><?xml-stylesheettype="text/css"href="mycss.css"?><resume><name>MichaelGuo</name><sex>Male</sex><birthday>1966.7</birthday><skill>ComputerGraphics,Datamining,Teaching</skill></resume>12CSS5.1CSS简介5.1.1CSS作用

网页展现的样式从网页中独立出来集中管理,它通过设置CSS属性元素获得各种不同效果。13过程与步骤：1.通过依次单击任务栏上的【开始】→【程序】→【附件】→【记事本】菜单命令打开记事本。2．在记事本的编辑面板中输入以下代码，创建了使用样式的页面css1.htm：

<html><head><title>样式表举例</title><styletype="text/css"><!--h1{ font-size:36px; font-family:"隶书";14

font-weight:bold; color:#993366;}--></style></head><body><pstyle="color:#ff0000">这段文字将显示为红色</p><pstyle="color:#000000;background-color:yellow;">这段文字的背景色为<I>黄色</I></p><pstyle="font-family:'华文彩云';font-size:24px">这段文字将以黑体显示</p><p><h1align="center">今天学习样式表的相关知识。</h1></p></body></html>css1.htm15什么是CSS

CSS(CascadingStyleSheet,层叠样式表)技术上一种格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。特点：

可以实现网页结构与格式分离；对网页布局、字体、背景和其它图文效果实现更加精确的控制；更好的易用性和扩展性，可以单独以一个文件的形式出现。16CSS样式表的使用结构

多个网页文件共享样式文件

多个样式文件套用在一个网页文件上

HTML文件1HTML文件NCSS样式文件HTMLCSS样式文件NCSS样式文件1172.CSS样式表定义

CSS样式表由样式规则组成，告诉浏览器如何去显示一个文档。样式规则一般由选择符与属性组成。常用的选择符有HTML标签、用户自定义类和用户自定义ID等。18CSS样式语法规则选择符{规则}例如：h1{{color:blue;}选择符（selector）：表示要定义样式的类型，选择符可以包括HTML标签符、用户自主义类class或用户自定义ID。规则（rule）：“属性(attributes)”表示由CSS标准定义的样式属性，“属性值(values)”为样式属性的值。19CSS样式语法规则关于样式表的语法，要注意以下几个问题。属性必须要包含在{}号之中。属性和属性值之间用“:”分隔。当有多个属性时，用“;”进行区分。在书写属性时属性之间使用空格换行等，并不影响属性的显示。如果一个属性有几个值，则每个属性值之间用空格分隔开。2021用户自定义类作为选择符

定义格式：选择符.类名selector.classname{attributes1:values1;attributes2:values2;…}，例：span.blue{color:#0000FF}span.red{color:red}应用样式时在对应的HTML标签中加入class属性，属性值为样式表的类名。例：<p>这是一个引用两个不同span样式的例子，<spanclass="blue">蓝色span</span>与<spanclass="red">红色span</span></p>22CSS样式定义选择符为HTML标记利用用户自定义类可以实现所有的HTML标签的样式选择，当要达到复杂的样式效果时（比如，你想让主体文字的1段用绿色显示，第2段用紫色显示，而第3段用灰色显示），可以采用样式分类的方法实现。23CSS样式定义选择符为HTML标记：示例P.first{color:green}P.second{color:purple}P.third{color:gray}

HTML代码如下：<PCLASS="first">Thefirstparagraph,withaclassnameof"first."</P><PCLASS="second">Thesecondparagraph,withaclassnameof"second."</P><PCLASS="third">Thethirdparagraph,withaclassnameof"third."</P>24CSS样式定义用户自定义ID作为选择符用户自定义ID与用户自定义类的功能相同，其区别仅为定义语法与引用方法不同。定义格式如下：#ID名{attributes1:values1;attributes2:values2;…}示例：id_selectors.html#yellow{color:yellow}其引用如下所示：<pID="yellow">本段为黄色</p>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.直接定义style属性html标签中以style属性引用样式

示例：<Pstyle="text-indent:1cm;background:yellow;font-family:courier">

这是一个直接书写样式的段落</p>。30例5.2<html><head><title>直接定义HTML标记中的style属性</title></head><body><h1style="color:green;text-align:center;font-style:italic;font-family:隶书;font-size:x-large;">

用四种方式将样式表功能应用到Web页面中</h1></body></html>

ex5-231CSS2.定义内部样式表

头部标签嵌套<style></style>引用网页<head></head>之间插入样式表代码：<STYLETYPE="text/css"></STYLE>32<html><head><title>定义内部样式表</title><styletype="text/css">/*定义样式*/<!--h1{color:green;text-align:center;font-style:italic;font-family:隶书;font-size:x-large;}P{text-indent:1cm;background:yellow;font-family:courier}

--></style></head><body><h1>用四种方式将样式表功能应用到Web页面中</h1><p>第一段文字默认对齐</p><palign=center>第二段文字居中对齐</p></body></html>Ex5-333CSS3.嵌入外部样式表

style1.css保存文字的其它样式

h1{text-align:center;font-style:italic;font-family:隶书;font-size:x-large;}

style2.css保存文字的颜色

h1{color:green;}34CSS<html><head><title>嵌入外部样式表</title><styletype="text/css">/*定义样式*/</style></head><body><h1>用四种方式将样式表功能应用到Web页面中</h1></body></html>例5.435CSS4.链接外部样式表

<head></head>之间通过link引用外部文件：<head><title>文章标题</title>

<linkhref="css/style.css"rel="stylesheet"type="text/css"/></head>36<html><head><title>链接外部样式表</title><linkrel="stylesheet"type="text/css"href="style1.css"><linkrel="stylesheet"type="text/css"href="style2.css"></head><body><h1>用四种方式将样式表功能应用到Web页面中</h1></body></html>例5.537综合范例―――――――以下代码是sheet1.css―――――――

/*CSSDocument*/

h1{ font-size:36px; font-family:"隶书"; font-weight:bold; color:#993366;}h2b{color:blue}.water{font-family:"隶书";font-size:24px;text-align:right}/*类选择器*/h3.hello{font-family:"隶书";text-align:center;font-size:36px}/*指定的类选择器*/38――――――以下代码是sheet2.css―――――――/*CSSDocument*/

#danger{color:#990000;font-family:"华文彩云";font-size:24px}/*ID选择器*//*以下是虚类的定义*/a:link{ color:red; text-decoration:none;}/*未访问的链接*/a:visited{ color:blue; text-decoration:none;}/*已访问的链接*/

a:hover{color:#990000;text-decoration:underline}/*鼠标指针移到上面链接的颜色*/a:active{color:yellow; text-decoration:none;}/*活动链接*/h2b{color:green}/*重新定义了上下文选择器*/40――――――――以下代码是ss4.htm―――――<html><head><title>导入外部样式表</title><styletype="text/css"></style> <linkrel="stylesheet"href="sheet2.css"type="text/css"></head>41<body><h1>标题1的使用。</h1> <b>测试上下选择器（没有上下文）</b><br> <h2><b>测试上下选择器（具有上下文）</b></h2> <pclass="water">这是黄河的水</p>

<preclass="water">黄河水天上来</pre> <pclass="hello">这句话没有使用类“hello”的效果。</p> <h3class="hello">这句话才使用了类“hello”的效果。</h3> <pid="danger">这里危险。</p> <ahref="css2.htm">测试链接的颜色，使用了虚类，实际做的过程中读者自行体会。</a></body></html>ss4.htm42CSS属性HTML元素中的属性文本背景内外填充属性边框属性定位与显示属性43CSS属性属性单位单位意义单位意义cm厘米In英寸，1in=2.54cmmm毫米Pt点，1pt=1/72in

px像素pc皮卡，1pc=12pt44文本属性

文本属性是CSS属性中的一大类，用来设置文字的显示效果。其中部分属性设置效果可以通过文字的<font>标记实现。

45CSS样式文本属性属性名作用与含义取值font-family字体本机具有的字体font-size大小像素值（*px）font-weight粗细normalboldbolderlighterfont-style倾斜样式normalitalicobliqueline-height行高normal或像素值text-decoration修饰blinkunderlineline-through（可多选）letter-spacing字母间隔像素值word-spacing单词间隔像素值text-indent段落首行缩进像素值text-align文字对齐leftrightcenter46<styletype="text/css">h3{font-family:times}p{font-family:courier}p.sansserif{font-family:sans-serif}</style><styletype="text/css">h1{font-style:italic}h2{font-style:normal}p{font-style:oblique}</style>47背景属性

背景属性设定对象的背景颜色或背景图像。CSS样式背景属性

属性名作用与含义取值background-color背景颜色颜色值background-image背景图像URL(图像地址)background-attachment背景是否随页面滚动scrollfixedbackground-repeat是否重复repeatrepeat-xrepeat-yno-repeat48<styletype="text/css">body{background-image:url(images/eg_background3.jpg);background-repeat:repeat}</style>body{background:#00ff00url(images/eg_background3.jpg)no-repeatfixedcenter;}</style>49内外填充属性

一些Web元素如表格、图像等可以看作是一个容器，容器中放置了呈现内容。所谓的内外填充，可以认为是容器内外侧的衬垫。50CSS样式填充属性

属性名作用与含义取值margin统一定义外部填充像素值margin-top分别定义外部各边填充margin-bottommargin-leftmargin-rightpadding统一定义内部填充像素值padding-top分别定义内部各边填充padding-bottompadding-leftpadding-right51<styletype="text/css">p.margin{margin:2cm4cm3cm4cm}</style><styletype="text/css">td.test1{padding:1.5cm}td.test2{padding:0.5cm2.5cm}</style>52边框属性

边框属性用来设置对象的边框颜色、类型以及粗细。CSS样式边框属性属性名作用与含义取值border复合属性border-color统一定义边框颜色颜色值border-top-color分别定义各边框颜色border-bottom-colorborder-left-colorborder-right-color53CSS样式边框属性(续表)属性名作用与含义取值border-style统一定义边框类型dotteddashedsoliddouble

grooveridgeinsetoutsetborder-top-style分别定义各边框类型border-bottom-styleborder-left-styleborder-right-styleborder-width统一定义边框粗细mediumthinthick或像素值border-top-width分别定义各边框粗细border-bottom-widthborder-left-widthborder-right-width54定位与显示属性

内外填充属性站在容器的角度，设定了页面的排版。从容器内容的角度来说，也可以设置内容相对于容器的定位以及内容的尺寸。55CSS样式定位与显示属性

属性名作用与含义取值position元素的定位方式staticabsolutefixedrelativetopbottomleftright距容器各边缘距离像素值z-index显示层次数值height元素高度像

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

Web技术应用基础

文档简介

温馨提示

最新文档

评论

Web技术应用基础

文档简介

温馨提示

最新文档

评论

相关文档