HTML语言与网页设计

《HTML语言与网页设计》由会员分享，可在线阅读，更多相关《HTML语言与网页设计（97页珍藏版）》请在装配图网上搜索。

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

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

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

4、ang属性：文档或文本的显示语言 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-type charset 提供编码信息,refresh刷新与跳转页面,no-cache 页面缓存,expires网页缓存过期时间.结束标记：无使用范围： head_content8标记应用：标记应用：name属性与content属性组合定义网页关键词 阿里巴巴定义网页简短描述 定义搜索引擎索引要求 robotterms是一组使用逗号(,)分割的值，通常有如下几种取值：none，n

7、oindex，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。 Our Products Have you seen our Bird Cages? 13其它常用其它常用head区标记区标记 :在文档中声明使用外部资源 阿里巴巴 :声明样式 ,用来创建CSS属性

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

10、:/www.w3.org/TR/html4/sgml/entities.html 显示方式显示方式数字标识符数字标识符实体名称实体名称对象对象注释注释 Tab键 回车键   空格!!惊叹号“""引号在脚本中很有用//斜线（斜杠）>>大于号\反斜线（反斜杠）…省略号TM™商标 &位与运算符(&)©©版权®®注册商标±±加号或减号172.3.3 对象与多媒体标记对象与多媒体标记 标记 标记18object标记标记 object标记是成对出现的,以开始，

11、结束 使用object标记可以在网页中嵌入各种多媒体或复杂外部应用即对象，例如Flash,Java Applets,MP3,QuickTime Movies等 object标记通常配合param 标记一同使用,后者用于对象初始化 在网页中嵌入图像，一般使用img标记 object可以完全代替标准不赞成使用的applet, embed, bgsound标记 19一般属性 archive - 包含多个使用逗号(,)分割的Java类或外部资源，用于增强applet的功能，定义applet代码 border - 边框 classid - 关联一个应用程序，执行嵌入内容的应用程序在windows系统中的

12、唯一id(不能改变此id，否则程序将出现异常)，例如 clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 - Flash codebase - 为相对路径提供基URL，IE浏览器通常将此属性中的内容定义为运行嵌入内容所要加载的插件，例如 http:/ - Flash codetype - 嵌入内容的MIME类型，例如 application/java - Java application/x-shockwave-flash - Flash declare - 声明没有实例化的嵌入对象，此对象通常在加载后，或者当嵌入对象的某些参数将使用其它嵌入对象时可以使用,即

13、实例化以后使用.此时对象需指定iddata - 嵌入内容(实例对象)的URL，可以是基于codebase属性的相对路径 height - 嵌入内容的高度，单位像素 hspace - 嵌入内容水平方向的空白，应使用CSS margin代替 standby - 文档加载时显示的文本信息 tabindex - 使用Tab键的遍历顺序 usemap - 定义图像点击区域 vspace - 嵌入内容垂直方向的空白，应使用CSS margin代替 width - 嵌入内容的宽度，单位像素 20param 标签标签:初始化对象初始化对象 为object标签提供嵌入内容的运行时参数的name与value对 p

14、aram标签是单独出现的param标签用于定义网页中嵌入内容的运行时参数 param标签应使用在object或applet标签内 属性 id - 唯一标识符 name - 名称，name与value属性组成一对type - 嵌入内容的MIME类型 value - name的对应值 valuetype - 指定参数类型 udata - 参数是一个简单的字符串，默认值 uref - 参数是URL uobject - 参数是另一个嵌入式对象声明的id21示例示例:嵌入嵌入MediaPlayer播放器播放器22示例示例:嵌入嵌入flash 广东商学院23标记标记导入图像 img标签是单独出现的. 属性

15、: 一般属性 alt - 代表图像的替代文字 src 说明图像源(就是图像的保存地点) height - 图像的高度 width - 图像的宽度 usemap:定义图像点击区域语法语法: 242.3.4 超链接标记超链接标记显示的文本或图像内容 常用属性name = cdata :指定锚点(目标链接)的名称id =name:指定锚点的元素标识符class =classname:指定锚点的类名href = uri:指定超链接的目标地址rel = link-types :指定前向链接类型rev= link-types:指定后向链接类型target = frame-target :指定目标窗口或框架

16、:_blank,_self,_parent,_toptabindex = number :遍历链接焦点title=text:显示提示信息25(2) 图像地图标记图像地图标记 功能:用于热区超链接 语法: map基本属性:name,id area基本属性: shape:指定热区形状 coords:指定热区坐标,其值个数取决于shape属性 href:指定热区链接目标地址 target:指定热区链接显示窗口或框架26示例示例:指定位置链接指定位置链接 链接到页面下部 链接到页面上部 . .more document. . 27示例示例2:打开指定邮件链接打开指定邮件链接 示例示例3:打开图像链接打

17、开图像链接28示例示例4:热区链接热区链接 This is a navigation bar. 292.3.5 版式控制标记：页面布局设计版式控制标记：页面布局设计 列表 表格 框架30列表列表1.无序列表:项目符号 .列表项列表项 列表项. 例例:当当 新浪2.有序列表:连续标号 .列表项列表项 列表项 . 如何设计列表样式？如何设计列表样式？CSS list-style-typeCSS list-style-type、list-style-imagelist-style-image、list-list-style-position style-position 属性属性 31表格：数据表、

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

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

20、格33表格应用例表格应用例:佳能报价单佳能报价单佳能 Canon型号像素/变焦/屏幕/存储介质本周报价IXUS 60600万3X2.5SD2150IXUS 65600万3X3SD2350IXUS I ZOOM500万2.4X2.5SD1570EOS 30D(套)800万EFS17-852.5CF134003435表作为版式工具示例表作为版式工具示例Listing 3-6 Page Using Tables Listings Listing 3-1 Listing 3-2 Listing 3-3 Listing 3-4 This page demonstrates using a table f

21、or page layout. It is organized with local links on the left, external links on the right, content in the center, and a header at the top. Organizations Microsoft Microsoft Press W3C Useful Sites SBN Workshop MSDN WebR WebR 36表作为版式工具示例表作为版式工具示例37表作为版式工具示例表作为版式工具示例 卓越亚马逊 yahoo38框架 它是一个标准的HTML文件，只包括如何

22、分割网页和文件在每个区域如何显示的信息Listing 3-8 /定义框架页面 /定义一个框架 /对不支持框架的设备进行提示,或相关操作 浏览器不支持框架! 39框架示例框架示例40嵌套框架：多级版式Listing 3-9 41嵌套框架示例42跨框架定位 增加导航框架（包括其它框架的链接，目标框架的定位属性）Listing 3-10 导航栏（框架）：Go to Frame 1Go to Frame 2Go to Frame 3 43导航框架示例导航框架示例442.3.6 表单：互动表单：互动表单是网页上的一个特定区域。这个区域是由一对元素定义的。其间是各种接受用户输入的控件 HTML表单是HTM

23、L页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。在HTML里，我们可以定义表单，并且使表单与CGI或ASP等服务器端的表单处理程序配合。什么时候用到表单？搜索、注册、登陆、论坛、交易、调查452.3.6.1表单的基本语法结构 . . . action属性：用来定义表单处理程序（ASP、JSP或CGI程序）的位置(相对地址或绝对地址)。method属性定义表单结果从浏览器传送到服务器的方法，一般有两种方法：get、post。 ，462.3.6.2 简单文本输入标记 type=*决定控件类型，分为输入型,选择型,点击型。每个控件都应该包含type和name属性，并且大多数

24、都包括value属性。1) 按钮：激活某个操作按钮：激活某个操作普通按钮提交按钮重置按钮472) 复选框复选框(Checkbox) ：选择多个项目：选择多个项目在一个表单里的所有多选框可以有一个或多个被选中。483) 单选按钮单选按钮(RadioButton)：只能选择一项：只能选择一项一个表单里的所有变量名相同的单选框只能够有一个被选中。各个选项的各个选项的name必须一样必须一样494) 文本输入框：输入单行文本文本输入框：输入单行文本 ? 文本框的名字* text或password* 默认值或为空* 长度? 最大输入字符数505) 图象域：图像按钮图象域：图像按钮6) 文件域：上传文件文

25、件域：上传文件7)7)隐藏域隐藏域input type=” 示例示例512.3.6.3 文本域文本域:多行多列的文本输入框多行多列的文本输入框 . * 文本域的名字 * 行数或列数 * off,soft,hard ：不换行、自动换行、强制换行522.3.6.4 下拉列表：从列表中选择一个或多个选项下拉列表：从列表中选择一个或多个选项 说明 说明2 multiple：有该项说明可以选择多项示例 53表单示例：代码表单示例：代码 Listing 4-2/由网站http:/ 的jsp目录下的prc.jsp程序处理。 /控件类型This text is next to check box 1.This

26、 text is next to check box 2./name值必须一致This text is next to the first radio button.This text is next to the second radio button./自动换行的文本域 This text is inside TEXTAREA 1. Note how lines of code are automatically wrapped and how line breaks in the code cause breaks.54表单示例：图示表单示例：图示文本输入框：普通文本文本输入框：密码复选

27、框单选按钮普通按钮文件域重置按钮提交按钮图像域55文本域示例：代码文本域示例：代码Listing 4-3 This text is inside TEXTAREA 1. Note how lines of code are automatically wrapped and how line breaks in the code cause breaks. This text is inside TEXTAREA 2. Note how lines of code are not automatically wrapped and how line breaks in the code cau

28、se breaks.56文本域示例：图示文本域示例：图示自动换行的文本域不自动换行的文本域57下拉列表示例：代码下拉列表示例：代码Listing 4-4Select one item: Text of option 1 Text of option 2 Text of option 3 Text of option 4 Text of option 5Select one item: Text of option 1 Text of option 2 Text of option 3 Text of option 4 Text of option 5Select multiple items:

29、 Text of option 1 Text of option 2 Text of option 3 Text of option 4 Text of option 558下拉列表示例：图示下拉列表示例：图示显示选中选项，由用户打开列表定位反显选中选项且自动打开列表，用滚动条上下移动定位反显选中选项且自动打开列表，用滚动条上下移动，且可选择多个目标选项：连续选择：按shift键并连续选择目标选项不连续选择：按Ctrl键单击目标选项592.4 CSS技术：数据与表现分离技术：数据与表现分离 CSS（Cascading Style Sheet，层叠样式表）是一种格式化网页的标准方式，它扩展了 H

30、TML 的功能，使网页设计者能够以更有效的方式设置网页格式。 CSS是一种分离web文档内容与格式的技术，可以控制web文档的外观和版式，使用CSS可以改变：文本的大小、格式、颜色、字间距、边框、元素周围的补白，乃至网页上对象的精确位置。 共享样式设定 个性化的标准网页：CSS+DIV=web标准60两个简单例子两个简单例子使用使用HTML方式方式 一级标题一级标题 .其他正文其他正文. 一级标题一级标题 H1text- align:center; font-family:楷体楷体_GB2312使用使用CSS方式方式 一级标题一级标题 .其他正文其他正文. 一级标题一级标题612.4.1 样式

31、表定义语法样式表定义语法样式表：也称样式定义，或样式规则，可包含于文档中，也可保存于.css文件中。基本结构为：Selectorproperty1:value1;property2:value2;property3:value3;Selector定义样式作用的对象，称为选择器，花括号中为样式声明块，其中property为CSS属性，value为属性对应的值，各样式声明之间用分号隔开。 H1 text-align:center; font-family:黑体选择器样式定义样式属性属性取值62常用常用Selector类型类型 HTML标记符 用户定义的类 用户定义的ID 伪类63HTML Sele

32、ctor不带尖括号的标记名作选择符 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,ollist-style-type:none;64选择符应用示例基本清单选择符应用示例基本清单 New Port Richey The New Port Richey Dog Sho

33、w Show Date: 7/31/2001 New Port Richey, FL Best In Show: CH Sarahs Razzle Dazzle (Yorkshire Terrier) Complete results Herding Group: German Shepherd Dog CH Sabre Dawn Toy Group: Yorkshire Terrier CH Sarahs Razzle Dazzle Sporting Group: Golden Retriever CH Chases Golden Chance Non-Sporting Group: Tib

34、etan Terrier CH Winston of Sunny Brook Lane 65选择符应用示例基本清单代码运行页面选择符应用示例基本清单代码运行页面66标记选择符应用示例清单标记选择符应用示例清单. * font-family: Verdana . 67标记选择符应用示例运行结果标记选择符应用示例运行结果68Selector:用户定义类用户定义类 .classnameproperty:value 表示任何class属性为classname的标记符都采用所定义的样式。 类选择符的语法是在类名前面加一个点号（.） 类是一种增强页面可管理性的出色方法，因为只需定义和修改样式表，就可以对站

35、点的外观进行全面定义和修改。 69类选择符应用示例清单类选择符应用示例清单. font-family: Verdana td font-size: 10pt . 70类选择符应用示例运行结果类选择符应用示例运行结果71Selector:用户定义的用户定义的ID #idnameproperty:value 表示任何ID属性为idname的标记符都采用所定义的样式。 ID选择符的语法是在类名前面加一个#号（#） 用户定义ID与class的作用完全相同，但ID 在一个文档中应该是惟一的。 72ID选择符应用示例选择符应用示例. font-family: Verdana td font-size: 1

36、0pt .category font-weight: bold; td.category font-style: italic . 73ID选择符应用示例运行结果选择符应用示例运行结果74Selector:伪类伪类伪类的语法是在原有的语法里加上一个伪类（pseudo-class）：selector:pseudo-class property: value（选择符:伪类 属性: 值）伪类和类不同，是CSS已经定义好的，不能象类选择符一样随意用别的名字，根据上面的语法可以解释为对象（选择符）在某个特殊状态下（伪类）的样式。 常用的伪类 :link 未访问过的超链接 :visited 访问过的超链接

37、 :hover 悬停状态的超链接 :active 活动超链接75伪类选择符应用示例清单伪类选择符应用示例清单. * font-family: Verdana td font-size: 10pt .category font-weight: bold; td.category font-style: italic #bestinshow color: red . 76伪类选择符应用示例运行结果伪类选择符应用示例运行结果77Selector:后代、子、同胞后代、子、同胞 CSS 不但允许根据元素名应用规则，还允许根据元素在整个文档中的位置应用规则。例如，一个规则可以只选择段落标记内的链接。 继承

38、继承：嵌套的子对象（嵌套元素）继承外部元素或父元素的格式，除非子对象另有格式定义 后代：空格连接 子：大于号连接 同胞：加号连接78层次结构关系选择符应用示例清单层次结构关系选择符应用示例清单. font-family: Verdana td font-size: 10pt .category font-weight: bold; td.category font-style: italic #bestinshow color: red :hover background-color: red . 79后代后代同胞同胞802.4.2 样式引用样式引用n嵌入式样式嵌入式样式 ：内联引用n样式表样

39、式表 全局样式表：全局样式表：内部引用 链接的格式页：链接的格式页：外部引用81嵌入式样式使用style属性将样式应用于单个元素上，实现对特定元素的精确控制，优先于样式表控制，可以应用于任何标记，并且只影响所应用的标记style=”单个或以分号分隔的若干样式声明（声明块）”样式声明:属性：属性值Listing 11-2This text is in a SPAN.This text is not in a SPAN.82全局样式表通过将样式表嵌入标记内的标记对内实现，控制文档中相应标记的样式标记的格式样式表83Listing 11-7 H1 font-size: 16pt; font-weig

40、ht: bold; color: red H2 font-style: italic; font-size: 24pt; color: green SPAN font-weight: bold; font-style: italic.adivheight:52px;width:145px :hoverbackground-color:red / /本文档悬停状态的超接链的背景色为红色本文档悬停状态的超接链的背景色为红色This text is in a SPAN.This text is in an H1.This text is in an H2. /本块的高度为本块的高度为52px,52p

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

42、ont-weight: bold; font-style: italicListing 11-8This text is in a SPAN.This text is in an H1.This text is in an H2.This is modified H2 text.import命令: 格式页包含命令，即在格式页中加载其它格式页86链接的样式表示例872.4.3 样式的优先级样式的优先级 样式的优先级遵循“就近优先”的原则，也就是说，距离所修饰对象越近的样式，其优先级越高。 样式如果冲突，则采用高优先级样式；如果不冲突，则采用叠加的样式效果。882.4.4 CSS+DIV：模块化、

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

44、”/div div id=“search”/div div id=“shop”/div div id=“footer”/div 起类似作用的还有span,通常与类选择符、ID选择符一起使用例：新浪90新浪新浪DIV示例示例 91新浪样式表部分规则新浪样式表部分规则:导航栏导航栏(主莱单主莱单).logonav BORDER-RIGHT: #e0e0e0 1px solid; BORDER-TOP: #e0e0e0 1px; BACKGROUND: url(http:/ #f9f9f9 repeat-x 0px -400px; MARGIN-BOTTOM: 8px; OVERFLOW: hidd

45、en; BORDER-LEFT: #e0e0e0 1px solid; BORDER-BOTTOM: #e0e0e0 1px solid; POSITION: relative; HEIGHT: 85px.logo LEFT: 10px; WIDTH: 145px; POSITION: absolute; TOP: 0px; HEIGHT: 52px.logo H1 LEFT: 13px; OVERFLOW: hidden; WIDTH: 117px; POSITION: absolute; TOP: 10px; HEIGHT: 42px.weather Z-INDEX: 98; LEFT:

46、6px; OVERFLOW: hidden; POSITION: absolute; TOP: 57px; HEIGHT: 20px.nav RIGHT: 0px; OVERFLOW: hidden; WIDTH: 790px; POSITION: absolute; TOP: 0px; HEIGHT: 85px.nav_2 FLOAT: left; OVERFLOW: hidden; PADDING-TOP: 13px; _display: inline-block.nav_3 FLOAT: left; OVERFLOW: hidden; PADDING-TOP: 13px; _displa

47、y: inline-block.nav_2 DISPLAY: inline; BACKGROUND: url(http:/ no-repeat 106px -287px; MARGIN-LEFT: 3px; WIDTH: 107px.nav_3 WIDTH: 125px.nav UL CLEAR: both; HEIGHT: 23px.nav LI PADDING-RIGHT: 6px; PADDING-LEFT: 6px; BACKGROUND: url(http:/ no-repeat 0px -250px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN

48、-LEFT: -1px; LINE-HEIGHT: 14px; PADDING-TOP: 0px; TEXT-ALIGN: center.nav A COLOR: #000; TEXT-DECORATION: none.nav A:visited COLOR: #000; TEXT-DECORATION: none.nav A:hover COLOR: #c00; TEXT-DECORATION: none.nav A:active COLOR: #c00; TEXT-DECORATION: none92新浪新浪导航莱单导航莱单DIV 932.4.5 CSS属性属性CSS盒模式盒模式CSS视觉

49、格式模型视觉格式模型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, 99 lower-roman: 小写罗马文字i, ii, iii, iv, v, etc. upper

50、-roman: 大写罗马文字I, II, III, IV, V, etc. lower-greek: 小写希腊文字, , , . lower-latin: 小写拉丁文a, b, c, . z upper-latin: 大写拉丁文A, B, C, . Z armenian: 亚美尼亚数字 georgian: 乔治亚数字an, ban, gan, ., he, tan, in, in-an, . lower-alpha: 小写拉丁文a, b, c, . z upper-alpha: 大写拉丁文A, B, C, . Z none: 无(取消所有的list样式) inherit:继承 95type 属

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

52、alue属性來显示按鈕上的文字(点击型) reset - 重置按钮,可以把表单中的信息清空(点击型) 962.5 html与与xhtml2.5.1什么是什么是xhtml？XHTML是EXtensible HyperText Markup Language的英文缩写,即可扩展的超文本标记语言可扩展的超文本标记语言。XHTML语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。 XHTML是用来代替HTML的, 是2000年w3c公布发行的。 XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。XHTML是基于XML的应用.。XHTML更简洁更严紧 。972.5.2 html与与xhtml的主要区别的主要区别 xhtml元素要正确嵌套； xhtml元素大小写敏感，标记名应小写； xhtml元素要关闭，独立标记也要用/结束。 xhtml文档首部应有说明文档类型