HTML语言与网页设计ppt课件

《HTML语言与网页设计ppt课件》由会员分享，可在线阅读，更多相关《HTML语言与网页设计ppt课件（97页珍藏版）》请在金锄头文库上搜索。

1、12.HTML语言与网页设计语言与网页设计复习要点：复习要点：HTML通用标记结构、通用标记结构、HTML文档的基本结构、文档的基本结构、meta标记、超链接标记、字符标记、超链接标记、字符实体、各种表单标记实体、各种表单标记什么是什么是CSS样式表定义语法、样式表定义语法、CSS选择符选择符样式引用的基本方式样式引用的基本方式样式的优先级样式的优先级html与与xhtml的主要区别的主要区别22.HTML语言与网页设计语言与网页设计2.1HTML语言简介语言简介HTML，即超文本标记语言，是英文HyperTextMarkupLanguage的缩写，是一种独立于操作系统的网页编写语言。HTML

2、的最大特点就是用标记描述和表现信息的显示格式和内容。所谓标记就是采用一系列的指令符号来控制输出的效果，通用标记结构通用标记结构为：内容内容元素名即预定义的标记（签）属性：用来指定标记的行为确定元素内容的显示方式，如果标记有属性，则将跟在元素名后，属性之间用一个或多个制表符、空格、回车符分开，不区分出现的顺序。：把标记和标记所描述的内容区分开，一般成对出现，结束标记没有属性HTML的元素名、属性不区分大小写（xHTML区分且只能用小写），但最好用小写（有的操作系统大小敏感，如unix）HTML的源文件是纯文本文件，可以用任何一种文本编辑器来编写，但后缀应用.htm或.html。32.2 HTML

3、文档的基本结构的基本结构HTML文档包含定义文档内容的文本和定义文档结构及外观的标记，基本结构如下：容器标记：容器标记头标记，用于定义文档标题及其它可能会用于控制文档显示或访问的参数，如、等正文，包括要显示的文本和文档的控制标记：容器结束标记：容器结束标记42.3 HTML的常用元素和标记的常用元素和标记2.3.1HTML2.3.1HTML结构标记结构标记（1）标记功能：界定一个完整的HTML文档属性：dir,lang,version结束标记：包含:head_tag,body_tag,framesdir属性：内容的显示方式，用于本标记用于决定整个文档的显示方向，默认为”ltr”，用于其它标记则

4、用于决定该标记内的内容的显示方向lang属性：文档或文本的显示语言version属性：说明支持的html标准的版本，在HTML4中已弃用，并用标记来代替.例：,如yahoo5（2）标记标记功能：定义文档头区属性：dir,lang,profile结束标记：包含:head_content，如base、object、link、style、script、meta使用范围：html_tag6（3）标记标记功能：定义文档标题属性：dir,lang结束标记：包含:plain_text使用范围：head_content说明：此标记只能在head标记内出现.title的内容通常在浏览器的标题栏中显示.浏览器中收

5、藏夹内书签的名称是title的内容.title的内容可以方便搜索引擎索引页面.从搜索引擎搜索到的内容的标题往往是网页title的内容.示例：当当7标记标记功能：提供用户不可见信息，为其它应用程序和搜索引擎访问提供可用信息属性：meta属性主要分为两组属性主要分为两组name属性与属性与content属性属性name属性用于是以名称/值形式的名称描述网页,name属性的值所描述的内容(值)通过content属性表示,便于搜索引擎机器人查找,分类.其中最重要的是description,keywords和robots.http-equiv属性与属性与content属性属性http-equiv属性用于

6、提供HTTP协议的响应头报文(MIME文档头),它是以名称/值形式的名称,http-equiv属性的值所描述的内容(值)通过content属性表示,通常为网页加载前提供给浏览器等设备使用.其中最重要的是content-typecharset提供编码信息,refresh刷新与跳转页面,no-cache页面缓存,expires网页缓存过期时间.结束标记：无使用范围：head_content8标记应用：标记应用：name属性与content属性组合定义网页关键词阿里巴巴定义网页简短描述定义搜索引擎索引要求robotterms是一组使用逗号(,)分割的值，通常有如下几种取值：none，noindex，

7、nofollow，all，index和follow。sciencedirect9标记应用：标记应用：http-equiv属性与content属性组合定义文件内容类型及编码信息type的常见取值为application,audio,image,message,multipart,text,video示例：阿里巴巴Alibaba10设置网页缓存过期时间用法：说明：指定网页在缓存中的过期时间，一旦网页过期，必须到服务器上重新加载。注意：必须使用GMT的时间格式，或直接设为0(数字表示多少时间后过期)。11定义页面缓存说明:为了提高速度一些浏览器会缓存浏览者浏览过的页面,通过上面的定义,浏览器一般不会

8、缓存页面,而且浏览器无法脱机浏览.重定向:刷新与跳转页面12标记标记功能:定义基URL用于页面的链接与引用属性:href,target结束标记:单独出现使用范围:head区href属性:当前文档的完整URLtarget属性:指定目标窗口或框架网易说明:当使用相对路径定义链接时，可以使用base标记定义基URL解析所有文档中定义的相对路径的URL。OurProductsHaveyouseenourBirdCages?13其它常用其它常用head区标记区标记:在文档中声明使用外部资源阿里巴巴:声明样式,用来创建CSS属性，以控制整个文档主体内容的显示特性:在文档中使用脚本:定义浏览器输出非标准对象

9、的方法,在网页中嵌入除图片外的多媒体14标记标记功能：定义文档主体属性：控制文档外观的属性；将文档自身与其它可编程功能相联系的属性；标记和说明文档主体以供将来参考的属性结束标记：包含:body_content使用范围：html_tag15注释标记注释标记: 描述文档的各个部分要做什么解释为什么要这样编写某段代码包含不想在文件中显示的信息标示文件的禁用部分162.3.2 字符实体字符实体用于标识特殊字符：不可见字符和特殊用途字符格式格式：&#：#代表字符实体名称或者字符的ASCII码值显示方式示方式数字数字标识符符实体名称体名称对象象注注释 Tab键 回车键  空格!&

10、#33惊叹号“""引号在脚本中很有用//斜线（斜杠）>>大于号\反斜线（反斜杠）…省略号TM™商标 &位与运算符(&)©©版权®®注册商标±±加号或减号172.3.3 对象与多媒体标记对象与多媒体标记标记标记18object标记标记object标记是成对出现的,以开始，结束使用object标记可以在网页中嵌入各种多媒体或复杂外部应用即对象，例如Flash,JavaApplets,MP3,QuickTimeMovies等object标记通常配合param标记一同使用,后者用于对象初

11、始化在网页中嵌入图像，一般使用img标记object可以完全代替标准不赞成使用的applet,embed,bgsound标记19ObjectObject标记的属性标记的属性 一般属性archive-包含多个使用逗号(,)分割的Java类或外部资源，用于增强applet的功能，定义applet代码border-边框classid-关联一个应用程序，执行嵌入内容的应用程序在windows系统中的唯一id(不能改变此id，否则程序将出现异常)，例如clsid:D27CDB6E-AE6D-11cf-96B8-444553540000-Flashcodebase-为相对路径提供基URL，IE浏览器通常将

12、此属性中的内容定义为运行嵌入内容所要加载的插件，例如-Flashcodetype -嵌入内容的MIME类型，例如application/java-Javaapplication/x-shockwave-flash-Flashdeclare -声明没有实例化的嵌入对象，此对象通常在加载后，或者当嵌入对象的某些参数将使用其它嵌入对象时可以使用,即实例化以后使用.此时对象需指定iddata -嵌入内容(实例对象)的URL，可以是基于codebase属性的相对路径height-嵌入内容的高度，单位像素hspace-嵌入内容水平方向的空白，应使用CSSmargin代替standby-文档加载时显示的文本

13、信息tabindex-使用Tab键的遍历顺序usemap-定义图像点击区域vspace-嵌入内容垂直方向的空白，应使用CSSmargin代替width-嵌入内容的宽度，单位像素20param 标签标签:初始化对象初始化对象 为object标签提供嵌入内容的运行时参数的name与value对param标签是单独出现的param标签用于定义网页中嵌入内容的运行时参数param标签应使用在object或applet标签内属性id-唯一标识符name-名称，name与value属性组成一对type-嵌入内容的MIME类型value-name的对应值valuetype-指定参数类型udata-参数是一个

14、简单的字符串，默认值uref-参数是URLuobject-参数是另一个嵌入式对象声明的id21示例示例:嵌入嵌入MediaPlayer播放器播放器22示例示例:嵌入嵌入flash广东商学院23标记标记导入图像img标签是单独出现的.属性:一般属性alt-代表图像的替代文字src说明图像源(就是图像的保存地点)height-图像的高度width-图像的宽度usemap:定义图像点击区域语法语法:242.3.4 超链接标记超链接标记(1)显示的文本或图像内容常用属性name=cdata:指定锚点(目标链接)的名称id=name:指定锚点的元素标识符class=classname:指定锚点的类名hr

15、ef=uri:指定超链接的目标地址rel=link-types:指定前向链接类型rev=link-types:指定后向链接类型target = frame-target:指定目标窗口或框架:_blank,_self,_parent,_toptabindex=number:遍历链接焦点title=text:显示提示信息25(2) 图像地图标记图像地图标记功能:用于热区超链接语法:map基本属性:name,idarea基本属性:shape:指定热区形状coords:指定热区坐标,其值个数取决于shape属性href:指定热区链接目标地址target:指定热区链接显示窗口或框架26示例示例:指定位置

16、链接指定位置链接链接到页面下部链接到页面上部.more document.27示例示例2:打开指定邮件链接打开指定邮件链接 示例示例3:打开图像链接打开图像链接28示例示例4:热区链接热区链接Thisisanavigationbar.292.3.5 版式控制标记：页面布局设计版式控制标记：页面布局设计列表表格框架30列表列表1.无序列表:项目符号.列表项列表项列表项.例例:当当新浪2.有序列表:连续标号.列表项列表项列表项.如何设计列表样式？如何设计列表样式？CSS list-style-typeCSS list-style-type、list-style-imagelist-style-im

17、age、list-style-position list-style-position 属性属性 31表格：数据表、控制网页布局表格：数据表、控制网页布局属性属性：align：页面对齐方式，left,right,centerwidth:整个表格的宽度，可以是像素值或百分比height：整个表格的高度，可以是像素值或百分比，通常可省略，浏览器会自动调整border:边框的宽度，以像素为单位，缺省值为0，用于排版时通常取0值。cellpadding:单元格与边框之间的距离，以像素为单位，缺省值为0cellspacing:单元格之间的距离，以像素为单位，缺省值为232、 、 :嵌在内，表示表格体:嵌

18、在内，表示表格的一行属性：对齐方式，left,right,centeralign:行内单元格水平对齐方式，left,right,centervalign：行内单元格垂直对齐方式，top,middle,bottom:嵌在内，表示在当前行内增加一个单元格属性：align:行内单元格水平对齐方式，left,right,centervalign：行内单元格垂直对齐方式，top,middle,bottomnowrap:表示单元格内的文本段只有出现显式换行标记时才中断rowspan:指定该单元格所跨的行数colspan:指定该单元格所跨的列数:用法同标记，惟一区别在于这个元素是用来标记“头单元格”的，所谓

19、头单元格是指表格中位于第一行或第一列用来指示其余各行或各列内容的单元格33表格应用例表格应用例:佳能报价单佳能报价单佳能Canon型号像素/变焦/屏幕/存储介质本周报价IXUS60600万3X2.5SD2150IXUS65600万3X3SD2350IXUSIZOOM500万2.4X2.5SD1570EOS30D(套)800万EFS17-852.5CF134003435表作为版式工具示例表作为版式工具示例Listing3-6PageUsingTablesListingsListing3-1Listing3-2Listing3-3Listing3-4Thispagedemonstratesusin

20、gatableforpagelayout.Itisorganizedwithlocallinksontheleft,externallinksontheright,contentinthecenter,andaheaderatthetop.OrganizationsMicrosoftMicrosoftPressW3CUsefulSitesSBNWorkshopMSDNWebRWebR36表作为版式工具示例表作为版式工具示例37表作为版式工具示例表作为版式工具示例卓越亚马逊yahoo38框架 它是一个标准的HTML文件，只包括如何分割网页和文件在每个区域如何显示的信息Listing3-8/定义框

21、架页面/定义一个框架/对不支持框架的设备进行提示,或相关操作浏览器不支持框架!39框架示例框架示例40嵌套框架：多级版式Listing3-941嵌套框架示例42跨框架定位 增加导航框架（包括其它框架的链接，目标框架的定位属性）Listing3-10导航栏（框架）：GotoFrame1GotoFrame2GotoFrame343导航框架示例导航框架示例442.3.6 表单：互动表单：互动表单是网页上的一个特定区域。这个区域是由一对元素定义的。其间是各种接受用户输入的控件HTML表单是HTML页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。在HTML里，我们可以定义表单，并

22、且使表单与CGI或ASP等服务器端的表单处理程序配合。什么时候用到表单？搜索、注册、登陆、论坛、交易、调查452.3.6.1表单的基本语法结构 .action属性：用来定义表单处理程序（ASP、JSP或CGI程序）的位置(相对地址或绝对地址)。method属性定义表单结果从浏览器传送到服务器的方法，一般有两种方法：get、post。示示示示例例例例1 1，示例示例示例示例2 2，3 3462.3.6.2简单文本输入标记type=*决定控件类型，分为输入型,选择型,点击型。每个控件都应该包含type和name属性，并且大多数都包括value属性。1) 按钮：激活某个操作按钮：激活某个操作普通按钮

23、提交按钮重置按钮472) 复选框复选框(Checkbox) ：选择多个项目：选择多个项目在一个表单里的所有多选框可以有一个或多个被选中。483) 单选按钮单选按钮(RadioButton)：只能选择一项：只能选择一项一个表单里的所有变量名相同的单选框只能够有一个被选中。各个选项的各个选项的name必须一样必须一样494) 文本输入框：输入单行文本文本输入框：输入单行文本?文本框的名字*text或password*默认值或为空*长度?最大输入字符数505) 图象域：图像按钮图象域：图像按钮6) 文件域：上传文件文件域：上传文件7)7)隐藏域隐藏域input type= name=* value=

24、* 示例示例512.3.6.3 文本域文本域:多行多列的文本输入框多行多列的文本输入框.*文本域的名字*行数或列数*off,soft,hard：不换行、自动换行、强制换行522.3.6.4 下拉列表：从列表中选择一个或多个选项下拉列表：从列表中选择一个或多个选项基本语法基本语法基本语法基本语法 说明说明2 multiple：有该项说明可以选择多项示例53表单示例：代码表单示例：代码Listing4-2/由网站的jsp目录下的prc.jsp程序处理。/控件类型Thistextisnexttocheckbox1.Thistextisnexttocheckbox2./name值必须一致Thistex

25、tisnexttothefirstradiobutton.Thistextisnexttothesecondradiobutton./自动换行的文本域ThistextisinsideTEXTAREA1.Notehowlinesofcodeareautomaticallywrappedandhowlinebreaksinthecodecausebreaks.54表单示例：图示表单示例：图示文本输入框：普通文本文本输入框：密码复选框单选按钮普通按钮文件域重置按钮提交按钮图像域55文本域示例：代码文本域示例：代码Listing4-3ThistextisinsideTEXTAREA1.Notehowl

26、inesofcodeareautomaticallywrappedandhowlinebreaksinthecodecausebreaks.ThistextisinsideTEXTAREA2.Notehowlinesofcodearenotautomaticallywrappedandhowlinebreaksinthecodecausebreaks.56文本域示例：图示文本域示例：图示自动换行的文本域不自动换行的文本域57下拉列表示例：代码下拉列表示例：代码Listing4-4Selectoneitem:Textofoption1Textofoption2Textofoption3Texto

27、foption4Textofoption5Selectoneitem:Textofoption1Textofoption2Textofoption3Textofoption4Textofoption5Selectmultipleitems:Textofoption1Textofoption2Textofoption3Textofoption4Textofoption558下拉列表示例：图示下拉列表示例：图示显示选中选项，由用户打开列表定位反显选中选项且自动打开列表，用滚动条上下移动定位反显选中选项且自动打开列表，用滚动条上下移动，且可选择多个目标选项：连续选择：按shift键并连续选择目标选项

28、不连续选择：按Ctrl键单击目标选项592.4 CSS技术：数据与表现分离技术：数据与表现分离CSS（CascadingStyleSheet，层叠样式表）是一种格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。CSS是一种分离web文档内容与格式的技术，可以控制web文档的外观和版式，使用CSS可以改变：文本的大小、格式、颜色、字间距、边框、元素周围的补白，乃至网页上对象的精确位置。共享样式设定个性化的标准网页：CSS+DIV=web标准？60两个简单例子两个简单例子使用使用HTML方式方式 一级标题一级标题 .其他正文其他正文. 一级标题一级标题 H1

29、text- align:center; font-family:楷体楷体_GB2312使用使用CSS方式方式 一级标题一级标题 .其他正文其他正文. 一级标题一级标题612.4.1 样式表定义语法样式表定义语法样式表：也称样式定义，或样式规则，可包含于文档中，也可保存于.css文件中。基本结构为：Selectorproperty1:value1;property2:value2;property3:value3;Selector定义样式作用的对象，称为选择器，花括号中为样式声明块，其中property为CSS属性，value为属性对应的值，各样式声明之间用分号隔开。示例示例H1text-ali

30、gn:center;font-family:黑体选择器样式定义样式属性属性取值62常用常用Selector类型类型HTML标记符用户定义的类用户定义的ID伪类63HTML Selector不带尖括号的标记名作选择符HTML标记符是最常用的selector，它重新定义了HTML标记符的显示效果。例如：H1text-align:center;color:red使所有用H1标记符修饰的内容都居中和用红色显示body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,divmargin:0;padding:0;border:0;ul,oll

31、ist-style-type:none;64选择符应用示例基本清单选择符应用示例基本清单NewPortRichey * font-family: Verdana * font-family: Verdana TheNewPortRicheyDogShowShowDate:7/31/2001NewPortRichey,FLBestInShow:CHSarahsRazzleDazzle(YorkshireTerrier)CompleteresultsHerdingGroup:GermanShepherdDogCHSabreDawnToyGroup:YorkshireTerrierCHSarahsR

32、azzleDazzleSportingGroup:GoldenRetrieverCHChasesGoldenChanceNon-SportingGroup:TibetanTerrierCHWinstonofSunnyBrookLane65选择符应用示例基本清单代码运行页面选择符应用示例基本清单代码运行页面66标记选择符应用示例清单标记选择符应用示例清单.*font-family:Verdana td font-size: 10pt td font-size: 10pt .67标记选择符应用示例运行结果标记选择符应用示例运行结果68Selector:用户定义类用户定义类.classnamepro

33、perty:value表示任何class属性为classname的标记符都采用所定义的样式。类选择符的语法是在类名前面加一个点号（.）类是一种增强页面可管理性的出色方法，因为只需定义和修改样式表，就可以对站点的外观进行全面定义和修改。69类选择符应用示例清单类选择符应用示例清单.font-family:Verdanatdfont-size:10pt.categoryfont-weight:bold;.categoryfont-weight:bold;td.category font-style: italic td.category font-style: italic .70类选择符应用示例

34、运行结果类选择符应用示例运行结果71Selector:用户定义的用户定义的ID#idnameproperty:value表示任何ID属性为idname的标记符都采用所定义的样式。ID选择符的语法是在类名前面加一个#号（#）用户定义ID与class的作用完全相同，但ID在一个文档中应该是惟一的。72ID选择符应用示例选择符应用示例.font-family:Verdanatdfont-size:10pt.categoryfont-weight:bold;td.categoryfont-style:italic#bestinshow color: red #bestinshow color: red

35、 .73ID选择符应用示例运行结果选择符应用示例运行结果74Selector:伪类伪类伪类的语法是在原有的语法里加上一个伪类（pseudo-class）：selector:pseudo-classproperty:value（选择符:伪类属性:值）伪类和类不同，是CSS已经定义好的，不能象类选择符一样随意用别的名字，根据上面的语法可以解释为对象（选择符）在某个特殊状态下（伪类）的样式。常用的伪类:link未访问过的超链接:visited访问过的超链接:hover悬停状态的超链接:active活动超链接75伪类选择符应用示例清单伪类选择符应用示例清单.*font-family:Verdanatd

36、font-size:10pt.categoryfont-weight:bold;td.categoryfont-style:italic#bestinshowcolor:red:hover background-color: red :hover background-color: red .76伪类选择符应用示例运行结果伪类选择符应用示例运行结果77Selector:后代、子、同胞后代、子、同胞CSS不但允许根据元素名应用规则，还允许根据元素在整个文档中的位置应用规则。例如，一个规则可以只选择段落标记内的链接。继承继承：嵌套的子对象（嵌套元素）继承外部元素或父元素的格式，除非子对象另有格式定

37、义后代：空格连接子：大于号连接同胞：加号连接78层次结构关系选择符应用示例清单层次结构关系选择符应用示例清单.font-family:Verdanatdfont-size:10pt.categoryfont-weight:bold;td.categoryfont-style:italic#bestinshowcolor:redp a text-decoration: none p a text-decoration: none h4 + h4 font-style: italic h4 + h4 font-style: italic :hoverbackground-color:red.79后

38、代后代同胞同胞802.4.2 样式引用样式引用n嵌入式样式嵌入式样式：内联引用n样式表样式表 全局样式表：全局样式表：内部引用 链接的格式页：链接的格式页：外部引用81嵌入式样式使用style属性将样式应用于单个元素上，实现对特定元素的精确控制，优先于样式表控制，可以应用于任何标记，并且只影响所应用的标记style=”单个或以分号分隔的若干样式声明（声明块）”样式声明:属性：属性值Listing11-2ThistextisinaSPAN.ThistextisnotinaSPAN.82全局样式表通过将样式表嵌入标记内的标记对内实现，控制文档中相应标记的样式标记的格式样式表83Listing 11

39、-7H1font-size:16pt;font-weight:bold;color:redH2font-style:italic;font-size:24pt;color:greenSPANfont-weight:bold;font-style:italic.adivheight:52px;width:145px:hoverbackground-color:red / /本文档悬停状态的超接链的背景色为红色本文档悬停状态的超接链的背景色为红色ThistextisinaSPAN.ThistextisinanH1.ThistextisinanH2. /本块的高度为本块的高度为52px,52px,宽

40、度为宽度为145px145pxHerding Group: Toy Group: ThisismodifiedH2text./本块的高度为本块的高度为52px，宽度为，宽度为145px84全局样式表示例85链接的样式表 以.css为扩展名的包含格式定义的文本文件，可用来控制若干个网页或整web站点的样式。使用方法为在文档的区使用标记引用：nH1font-size:16pt;font-weight:bold;color:red（styles.css）nH2font-style:italic;font-size:24pt;color:greennSPANfont-weight:bold;font-

41、style:italicListing11-8ThistextisinaSPAN.ThistextisinanH1.ThistextisinanH2.ThisismodifiedH2text.import命令: 格式页包含命令，即在格式页中加载其它格式页86链接的样式表示例872.4.3 样式的优先级样式的优先级样式的优先级遵循“就近优先”的原则，也就是说，距离所修饰对象越近的样式，其优先级越高。样式如果冲突，则采用高优先级样式；如果不冲突，则采用叠加的样式效果。882.4.4 CSS+DIV：模块化、结构化设计：模块化、结构化设计l模块化设计要求相对封闭独立性、可重复性、可修改性、统一性等l

42、结构化设计的意思是你需要分析网站的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的HTML结构。l仔细分析和规划你的页面结构，你可能得到类似这样的几块：标志和站点名称主页面内容站点导航(主菜单)子菜单搜索框功能区(例如购物车、收银台)页脚(版权和有关法律声明)89我们通常采用DIV元素来将这些结构定义出来，例如：divid=“header”/divdivid=“content”/divdivid=“globalnav”/divdivid=“subnav”/divdivid=“search”/divdivid=“shop”/divdivid=“footer”/div起类似作用的

43、还有span,通常与类选择符、ID选择符一起使用例：新浪90新浪新浪DIV示例示例91新浪样式表部分规则新浪样式表部分规则:导航栏导航栏(主莱单主莱单).logonavBORDER-RIGHT:#e0e0e01pxsolid;BORDER-TOP:#e0e0e01px;BACKGROUND:url()#f9f9f9repeat-x0px-400px;MARGIN-BOTTOM:8px;OVERFLOW:hidden;BORDER-LEFT:#e0e0e01pxsolid;BORDER-BOTTOM:#e0e0e01pxsolid;POSITION:relative;HEIGHT:85px.lo

44、goLEFT:10px;WIDTH:145px;POSITION:absolute;TOP:0px;HEIGHT:52px.logoH1LEFT:13px;OVERFLOW:hidden;WIDTH:117px;POSITION:absolute;TOP:10px;HEIGHT:42px.weatherZ-INDEX:98;LEFT:6px;OVERFLOW:hidden;POSITION:absolute;TOP:57px;HEIGHT:20px.navRIGHT:0px;OVERFLOW:hidden;WIDTH:790px;POSITION:absolute;TOP:0px;HEIGHT

45、:85px.nav_2FLOAT:left;OVERFLOW:hidden;PADDING-TOP:13px;_display:inline-block.nav_3FLOAT:left;OVERFLOW:hidden;PADDING-TOP:13px;_display:inline-block.nav_2DISPLAY:inline;BACKGROUND:url()no-repeat106px-287px;MARGIN-LEFT:3px;WIDTH:107px.nav_3WIDTH:125px.navULCLEAR:both;HEIGHT:23px.navLIPADDING-RIGHT:6px

46、;PADDING-LEFT:6px;BACKGROUND:url()no-repeat0px-250px;FLOAT:left;PADDING-BOTTOM:0px;MARGIN-LEFT:-1px;LINE-HEIGHT:14px;PADDING-TOP:0px;TEXT-ALIGN:center.navACOLOR:#000;TEXT-DECORATION:none.navA:visitedCOLOR:#000;TEXT-DECORATION:none.navA:hoverCOLOR:#c00;TEXT-DECORATION:none.navA:activeCOLOR:#c00;TEXT-

47、DECORATION:none92新浪新浪导航莱单导航莱单DIV932.4.5 CSS属性属性CSS盒模式盒模式CSS视觉格式模型视觉格式模型CSS视觉效果视觉效果CSS列表列表CSS背景背景CSS字体字体CSS文本文本CSS颜色颜色CSS听觉样式听觉样式CSS表格表格CSS翻页翻页(打印打印)UI(用户接口用户接口)CSS内容内容CSS自动计数自动计数CSS引号引号94CSS list-style-type属性值属性值disc:点circle:圆圈square:正方形decimal:数字decimal-leading-zero:以一个0开头的数字e.g.,01,02,03,.,98,99lo

48、wer-roman:小写罗马文字i,ii,iii,iv,v,etc.upper-roman:大写罗马文字I,II,III,IV,V,etc.lower-greek:小写希腊文字,.lower-latin:小写拉丁文a,b,c,.zupper-latin:大写拉丁文A,B,C,.Zarmenian:亚美尼亚数字georgian:乔治亚数字an,ban,gan,.,he,tan,in,in-an,.lower-alpha:小写拉丁文a,b,c,.zupper-alpha:大写拉丁文A,B,C,.Znone:无(取消所有的list样式)inherit:继承95type 属性取值属性取值: text-

49、文字输入域(输入型)password-也是文字输入域,但是输入的文字以密码符号*显示(输入型)可以输入一个文件路径(输入型)checkbox-复选框复选框.可以选择零个或多个(选择型)radio-单选框单选框.只可以选择一个而且必须选择一个(选择型)hidden-代表隐藏域,可以传送一些隐藏的信息到服务器button-按钮(点击型)image-使用图片来显示按钮,使用src属性指定图像的位置(就像img标签的src属性)(点击型)submit-提交按钮,表单填写完毕可以提交,把信息传送到服务器.可以使用value属性來显示按鈕上的文字(点击型)reset-重置按钮,可以把表单中的信息清空(点击

50、型)962.5 html与与xhtml2.5.1什么是什么是xhtml？XHTML是EXtensibleHyperTextMarkupLanguage的英文缩写,即可扩展的超文本可扩展的超文本标记语言标记语言。XHTML语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。XHTML是用来代替HTML的,是2000年w3c公布发行的。XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。XHTML是基于XML的应用.。XHTML更简洁更严紧。972.5.2 html与与xhtml的主要区别的主要区别xhtml元素要正确嵌套；xhtml元素大小写敏感，标记名应小写；xhtml元素要关闭，独立标记也要用/结束。xhtml文档首部应有说明文档类型