复旦大学高级web技术课件04Web内容呈现技术

韩伟力内容HTML&XHTMLCSSJavaScriptAjax内容HTML&XHTMLCSSJavaScriptAjaxHTML&XHTML扩展超文本标记语言（XHTML:eXtendibleHyperTextMarkupLanguage，XHTML）是开发基于Web应用程序客户端的标准语言，属于标记语言的一种。XHTML是HTML的发展，和HTML的功能目标基本一致。标记(tag)是标记语言的基础，指用于标注文档结构或者给予文档中某些内容以一定含义的符号。标记可以根据其所处位置和功能分为开始标记、结束标记和空标记。spanHereiscontent./spanbr/标记还可以拥有一个或多个属性，属性是与元素相关的附加信息，如元素内容应该如何显示。palign=“left”Thisisaparagraph./pSGML、HTML、XML和HTML从“HelloWorld”开始01!--Thisiscomment--02html03head04titleFirstHTMLdocument/title05/head06body07HelloWorld!08/body09/html•回顾一下Java的HelloWorld！publicclassHelloWorld{publicstaticvoidmain(String[]args){System.out.println(“HelloWorld!);}}•JavacHelloWorld.java•JavaHelloWorld.class•UseHTMLtoshowhtmlheadtitleHelloWorld!/title/headbodyHelloWorld!/body/htmlHTML的基本组成结构整个文档的内容部分由若干相互嵌套的元素组成。嵌套外层的元素称为父元素，嵌套内层的元素称为子元素，包含所有元素的最外部元素称为根元素。HTML的内容部分拥有唯一的根元素html，根元素拥有两个子元素head和body，分别称为HTML的头部元素和主体元素。头部元素head中必须包含title子元素，此外还可以包含meta、style、script和link等元素。如果head中还包含其他元素，则title子元素必须排在第一个。title元素的内容对应于浏览器窗口上方标题栏中的内容。主体元素body的内容对应于浏览器窗口中显示的具体内容，我们希望显示的信息一般都放在这个部分。HTML文档的书写规则元素的开始标记包含在和之间，结束标记包含在/和之间。所有元素必须有相匹配的开始标记和结束标记。不含任何内容的元素称为空元素。空元素可以将开始标记和结束标记缩减为特殊的形式，标记包含于和/之间。注意：标记名和/之间需要有一个空格。如hr/。文档具有唯一的根元素html，它包含了其它所有元素。所有元素必须正确嵌套。如不能出现类似headbody…./head/body的情况。元素的属性表现为“名字＝值”的形式。值必须包含在单引号‘’或者双引号“”中。如不能出现类似palign=left的写法，必须写作palign=“left”。所有元素名称和属性名字都用小写。基本布局元素基本格式化元素换行元素br标题元素h1段落元素p水平线元素hr特殊字符文本格式化物理格式化和逻辑格式化物理格式化元素逻辑格式化元素块元素与行内元素表单表单是浏览器向web服务器传递数据最常见的途径表单控件称为widgets(如radiobuttons和checkboxes)当一个submit按钮被按下后，浏览器将form的数据收集后就发送到服务器中表单（续）form标签及其属性ActionMethodnameformname=“survey”action=“method=“post”form中的get和postGet和Post的不同之处GET是默认的GET:浏览器将参数附在地址后面=hwl&password=***GET也可以不通过form向服务器提交数据GET的不利之处一些服务器会限制url的长度参数的值将显示在地址栏中POST可以克服上述不利之处控件元素－widgets按钮类：包括普通按钮、提交按钮、重置按钮、图形按钮等。文本框类：普通文本框、口令文本框、隐藏文本框、文本区域等。选择类：单选钮、复选框、下拉列表、多选列表等。所有这些控件都有一些共有属性，包括id、name、value和disable等。name是传统的用法，在新的HTML标准中，推荐使用id取代nameWidgets-按钮Input标签和button标签Input中，type属性可以为：button，submit，reset，imgWidgets-按钮（续）button元素是一个非空行内元素，它将其子元素作为按钮面板内容显示出来，并通过将其type属性设为button、submit和reset来指定该按钮是普通按钮、提交按钮或是重置按钮。htmlheadtitleexampleforbuttontag/title/headbodyformname=form1action=2.21.htmlmethod=postbuttontype=submitname=submit1imgsrc=bird.gif/o!wonderful!/button/form/body/htmlWidgets-文本框类控件input,type=textpasswordhiddentextareahtmlheadtitleexamplefortexttags/title/headbodyformname=form1action=#method=postinputtype=textvalue=[Text]/br/inputtype=passwordvalue=/br/inputtype=hiddenvalue=[HiddenText]/br/textareaname=textarea1rows=3cols=15HelloWorld!/textarea/form/body/htmlWidgets-选择类控件使用input作为主标签，设置type为：radio,checkbox使用select来实现菜单代码htmlheadtitleexampleforselecttags/title/headbodyformmethod=postaction==form1inputtype=radioname=radiovalue=radio1checked=checked/radio1br/inputtype=radioname=radiovalue=radio2/radio2br/hr/inputtype=checkboxname=cb1value=1checked=checked/checkbox1br/inputtype=checkboxname=cb2value=2/checkbox2br/inputtype=checkboxname=cb3value=3checked=checked/checkbox3br/代码（续）hr/selectname=select1option-----/optionoptionitem1/optionoptionitem2/option/selecthr/selectname=select2multiple=multiplesize=“3optionitem1/optionoptionitem2/option/select/form/body/html表单元素与其它布局元素的综合使用代码htmlheadtitleexampleforloginpage/title/headbodyformname=loginaction=login.jspmethod=posttableborder=1trtdcolspan=2pPleaseinputcorrectIDandPassword/ptd/trtrtdUserID:/tdtdinputtype=textname=userid//td/tr代码(续)trtdPassword:/tdtdinputtype=passwordname=password//td/trtrtdcolspan=2palign=centerinputtype=submitvalue=submit/inputtype=reset//p/td/tr/table/form/body/htmlXHTML和HTML的区别XHTML解决HTML语言所存在的严重制约其发展的问题。HTML发展到今天存在三个主要缺点:不能适应现在越多的网络设备和应用的需要，比如手机、PDA、信息家电都不能直接显示HTML；由于HTML代码不规范、臃肿，浏览器需要足够智能和庞大才能够正确显示HTML；数据与表现混杂，这样你的页面要改变显示，就必须重新制作HTML。因此HTML需要发展才能解决这个问题，于是W3C又制定了XHTML；XML是Web发展的趋势，所以人们急切的希望加入XML的潮流中。XHTML是当前替代HTML4标记语言的标准，使用XHTML1.0，只要你小心遵守一些简单规则，就可以设计出既适合XML系统，又适合当前大部分HTML浏览器的页面。这个意思就是说，你可以立刻设计使用XML，而不需要等到人们都使用支持XML的浏览器。这个指导方针可以使Web平滑的过渡到XML；使用XHTML的另一个优势是：它非常严密。当前网络上的HTML的糟糕情况让人震惊，早期的浏览器接受私有的HTML元素，所以人们在页面设计完毕后必须使用各种浏览器来检测页面，看是否兼容，往往会有许多莫名其妙的差异，人们不得不修改设计以便适应不同的浏览器；XHTML是能与其它基于XML的标记语言、应用程序及协议进行良好的交互工作；XHTML是Web标准家族的一部分，能很好在无线设备等其它用户代理上内容HTML&XHTMLCSSJavaScriptAjax27层次样式表的起源和优点在最初版本的HTML中并不提供任何样式控制能力，它只是标明文档成分的功能，1995年晚期，W3C提出了CSS作为所有这些问题的解决方案。CascadingStylesSheet1996年提出了第一个版本，也是目前主流支持的规范1998年提出了第二个版本，可以实现XML的转换和样式化，增加了特定媒体的风格单CSS3便于对文档样式进行修改、便于维护多个文档以统一的样式、使HTML文档更简洁,更易于维护、使文档可以方便运行于不同媒体设备上等28层次样式表基本语法还可以添加注释文本，注释文本须放置在/*和*/之间。p{font-size:12pt;font-style:italic;color:green}SelectorPropertylistseparatedbysemicolonsPropertyPropertyvalueColon29XHTML与样式表结合的三种方法外部式样式表（Externalstylesh