WebUnit03-HTML标记语言.ppt

《WebUnit03-HTML标记语言.ppt》由会员分享，可在线阅读，更多相关《WebUnit03-HTML标记语言.ppt（89页珍藏版）》请在金锄头文库上搜索。

1、WebWeb技术导论技术导论山东大学计算机科学与技术学院山东大学计算机科学与技术学院郝兴伟郝兴伟课程目录课程目录nWeb基础基础nWeb服务器的架设和管理服务器的架设和管理nHTML和和XML标记语言标记语言n网页设计与制作网页设计与制作n客户端编程客户端编程n服务端编程服务端编程Unit 1 Web基础基础第第3章章 HTML与与XML标记语言标记语言目录目录n教学目标教学目标n知识点知识点n重点难点重点难点n问题思考问题思考教学目标教学目标n了解标记语言的概念，各种标记语言的关系。了解标记语言的概念，各种标记语言的关系。n深刻理解深刻理解HTML标记语言的文档结构、标记、标记属性的概标记语

2、言的文档结构、标记、标记属性的概念念n熟悉常用的熟悉常用的HTML标记的功能及属性标记的功能及属性n理解理解CSS的概念，掌握样式表定义、选择符的概念及其应用的概念，掌握样式表定义、选择符的概念及其应用n理解理解、标记的概念及应用标记的概念及应用n理解理解XML的数据表达核心思想的数据表达核心思想n了解了解XML文档的基本结构文档的基本结构n了解了解XML和和HTML之间的关系之间的关系知识单元与知识点知识单元与知识点序号序号知识单元知识单元知识点知识点U31标记语言的产生与发展标记语言的产生与发展通用标记语言，通用标记语言，HTML，XMLU32超文本标记语言超文本标记语言HTMLHTML文

3、档结构，标记及标记属性文档结构，标记及标记属性文字格式标记，图片标记，超链接标记文字格式标记，图片标记，超链接标记表格标记，表单标记，表格标记，表单标记，CSS样式表，样式表，CSS选择符，选择符，标记，标记，标记标记对象和脚本程序标记，帧，对象和脚本程序标记，帧，iframeU33扩展标记语言扩展标记语言XML基础基础xml简介，简介，xml文档结构文档结构U34XML文档类型定义文档类型定义简单元素，复杂元素，外部简单元素，复杂元素，外部DTDU35XML架构架构XML Schema内置数据类型，预定义元素内置数据类型，预定义元素简单数据类型定义，复杂数据类型定义，声明元素，简单数据类型定

4、义，复杂数据类型定义，声明元素，声明元素类型声明元素类型U36XML相关技术相关技术XML数据处理，文档对象模型数据处理，文档对象模型DOM可扩展样式语言可扩展样式语言XSLXML路径语言路径语言XPathXML查询语言查询语言XQuery，可扩展连接语言，可扩展连接语言XLLU37XML开发环境开发环境XMLSpyDYD文档的创建，文档的创建，Schema文档的创建，实例文档，文档的创建，实例文档，数据有效性验证数据有效性验证重点难点重点难点重点重点nHTML和和XML标记语言的本质区别标记语言的本质区别n标记的概念标记的概念n标记及其属性标记及其属性n标记及其属性标记及其属性n样式表定义样

5、式表定义n表格标记表格标记nCSS样式表，样式表，CSS选择符的分类选择符的分类n和和标记标记nXML的和核心思想的和核心思想nXML相关技术标准的功能及关系相关技术标准的功能及关系nXML和和HTML的关系的关系难点难点nCSS样式，样式表样式，样式表ndiv和和span标记标记nXML SchemaU31标记语言的产生与发展标记语言的产生与发展n标准通用标记语言标准通用标记语言SGML n超文本标记语言超文本标记语言HTMLn可扩展标记语言可扩展标记语言XML标记语言的概念标记语言的概念n标记语言的概念标记语言的概念 l广义上，标记语言可以理解为对内容进行描述的规范或标准。广义上，标记语言

6、可以理解为对内容进行描述的规范或标准。l例如，在例如，在出版印刷出版印刷行业，编辑人员在进行文档内容编辑时对内容所做行业，编辑人员在进行文档内容编辑时对内容所做的标记的标记u北大方正电子照排，华光照排，显示标记北大方正电子照排，华光照排，显示标记uWord，所见即所得，不显示格式化标记，所见即所得，不显示格式化标记n标准通用标记语言标准通用标记语言SGMLlSGML（StandardGeneralizedMarkupLanguage，SGML）是一）是一个用来定义在电子表格中如何对文件的结构和内容进行描述的国际个用来定义在电子表格中如何对文件的结构和内容进行描述的国际标准（标准（ISO-887

7、9），1969年，年，IBMlSGML设计的非常复杂，设计的非常复杂，SGML的正式规范达的正式规范达500多页多页l意义意义uSGML定义了标记语言的基本概念，奠定了标记语言的技术基础定义了标记语言的基本概念，奠定了标记语言的技术基础超文本标记语言超文本标记语言HTMLnHTML 的诞生的诞生互联网发展历史上的第一个里程碑技术互联网发展历史上的第一个里程碑技术l超文本标记语言超文本标记语言HTML起源于通用标准标记语言起源于通用标准标记语言SGMLl由世界上最大的粒子物理研究实验室欧洲核子研究中心由世界上最大的粒子物理研究实验室欧洲核子研究中心CERN（theEuropeanOrganiza

8、tionforNuclearResearch）于）于1991年首先提出。年首先提出。nHTML主要版本及发布时间主要版本及发布时间 lHTML2.0，Internet工程任务组中的工程任务组中的HTML工作组开发完成了工作组开发完成了HTML2.0，于，于1996年年发布发布lHTML3.2，W3C于于1997年年1月月14日将其列为推荐版本，在日将其列为推荐版本，在HTML2.0标准中添加了诸如：标准中添加了诸如：字体、表格、字体、表格、Java程序、浮动、上标、下标等特征程序、浮动、上标、下标等特征lHTML4.0，W3C于于1997年年12月月18日将其列为推荐版本，第二个稍作修正的日将

9、其列为推荐版本，第二个稍作修正的HTML4.0版本与版本与1998年年12月月24日发布。日发布。uHTML4.0中最重要的特征是引入了样式表中最重要的特征是引入了样式表CSS技术。技术。lHTML4.01，W3C于于1999年年12月月24日将其列为推荐版本，是日将其列为推荐版本，是HTML4.0的升级版本，的升级版本，它对原版本做出了部分修正。它对原版本做出了部分修正。lHTML5.0可扩展标记语言可扩展标记语言XMLn可扩展标记语言可扩展标记语言XML互联网的未来互联网的未来lXML（eXtensibleMarkupLanguage），1998年年2月月10日，日，XML工作组正工作组正

10、式向式向W3C提交了提交了XML的最终推荐标准，这就是的最终推荐标准，这就是XML1.0标准。标准。l核心思想核心思想u实现数据和显示的分离实现数据和显示的分离nXML的构成的构成lDTD、XMLSchema等基本要素等基本要素l元规范元规范n 相关规范相关规范l可扩展样式语言可扩展样式语言XSLlXML路径语言路径语言XPathlXML查询语言查询语言Xqueryl可扩展连接语言可扩展连接语言XLLl及及XML文档对象模型文档对象模型DOMl简单应用程序接口简单应用程序接口SAXl等等U32超文本标记语言超文本标记语言HTMLnHTML文档结构和标记语法文档结构和标记语法n文件头标记及子标记

11、文件头标记及子标记n文档体标记文档体标记n文档内容常用标记文档内容常用标记l文本格式标记文本格式标记l图片标记图片标记l超链接标记超链接标记n表格（表格（table）n表单（表单（form）nspan标记和标记和div标记标记n层叠样式表层叠样式表CSS技术技术 n对象和脚本程序标记对象和脚本程序标记n帧（帧（frame） HTML标记的概念及认知标记的概念及认知标记的语法标记的语法n什么是什么是HTML标记标记l标记是对内容的标记标记是对内容的标记l标记内容在浏览器中的现实样式。例如，要文字标记内容在浏览器中的现实样式。例如，要文字“您好您好”红色显示，在红色显示，在HTML中可标中可标记为

12、：记为：您好您好nHTML标记语法标记语法l标记由封装在小于号（标记由封装在小于号（）构成的一对尖括号之中）构成的一对尖括号之中l一般形式：一般形式：文档内容文档内容n标记类型标记类型l单标记单标记，不标记任何内容，例如，不标记任何内容，例如，l双标记，首标记，开启某种形式的显示，未标记，结束某种形式的显示双标记，首标记，开启某种形式的显示，未标记，结束某种形式的显示n标记属性标记属性l分类：一般属性，事件属性分类：一般属性，事件属性ll例如：例如：以下通过例以下通过例题讲解题讲解HTML文档结构文档结构 文档头标记文档头标记 （文档内容标记）（文档内容标记）文档头文档头文档体文档体文件头标记

13、及子标记文件头标记及子标记n文件头及其功能文件头及其功能l标记对之间的部分称为文件头标记对之间的部分称为文件头l功能功能u告诉浏览器如何显示页面，例如字符集，有效期告诉浏览器如何显示页面，例如字符集，有效期u为搜索引擎提供支持为搜索引擎提供支持n子标记子标记l标记标记l标记标记l标记标记l标记标记l标记标记标记标记n关于关于meta的意义的意义lmeta即即“元元”的意思，的意思，metadata元数据，即关于数据的数据元数据，即关于数据的数据l例如：一篇例如：一篇paper，它的正文是文章本身的数据。但作者、出版社、，它的正文是文章本身的数据。但作者、出版社、出版日期等即可看成是出版日期等即

14、可看成是paper的元数据的元数据n标记标记l为单标记，没有尾标记为单标记，没有尾标记l两类元数据描述，一类是关于两类元数据描述，一类是关于HTTP头的描述，向浏览器传回信息，头的描述，向浏览器传回信息，以正确显示网页内容；另一类是关于页面内容的描述，用于搜索引以正确显示网页内容；另一类是关于页面内容的描述，用于搜索引擎。擎。n标记的形式标记的形式ll标记标记HTTP头头nHTTP头头lHTTP头是头是Web服务器向浏览器传回的信息，以正确显示网页内容，即可以在服务器向浏览器传回的信息，以正确显示网页内容，即可以在Web服服务器的配置中设置，也可以通过网页设置。务器的配置中设置，也可以通过网页

15、设置。lnhttp-equiv属性，即属性，即HTTP头域头域lcontent-type，指定页面内容及所使用的字符集。，指定页面内容及所使用的字符集。ulexpires，用于设定网页的到期时间，用于设定网页的到期时间ulpragma，禁止浏览器从本地计算机的缓存中访问页面内容，禁止浏览器从本地计算机的缓存中访问页面内容u，该种设定访问者将无法使用脱机浏，该种设定访问者将无法使用脱机浏览功能览功能lrefresh，自动刷新并指向新页面。，自动刷新并指向新页面。ulwindow-target，显示窗口的设定，例如：强制页面在当前窗口以独立页面显示，显示窗口的设定，例如：强制页面在当前窗口以独立页

16、面显示u，可以用来防止别人在框架里调用自，可以用来防止别人在框架里调用自己的页面己的页面对于文档类型对于文档类型content-type，其值其值content可以为可以为text/xml练习一下刷新，练习一下刷新，本页刷新及刷本页刷新及刷新指向新页面。新指向新页面。要求：可以理解，读懂！要求：可以理解，读懂！简单的能写出！简单的能写出！expireexpire|kspav.期满期满,断气断气,呼气呼气;呼出呼出pragmaticprgmtkadj.忙碌的忙碌的,实际的实际的,活跃的活跃的Pragmaticaladj.独断的独断的标记标记-name属性属性nname属性属性l主要用于描述网页，

17、主要用于搜索引擎查找信息和分类信息用的。主要用于描述网页，主要用于搜索引擎查找信息和分类信息用的。lnname属性参数值属性参数值lkeywords，keywords用来告诉搜索引擎该网页的关键字是什么用来告诉搜索引擎该网页的关键字是什么。uldescription（网站内容描述），（网站内容描述），description用来告诉搜索引擎网站的主要用来告诉搜索引擎网站的主要内容内容ulauthor（作者），标注网页的作者（作者），标注网页的作者ulrobots（机器人向导），（机器人向导），robots用来告诉搜索机器人需要索引的页面有哪些。用来告诉搜索机器人需要索引的页面有哪些。un标记标记

18、注：注：教材教材P87勘误，第五行代码为勘误，第五行代码为相对路径参见相对路径参见网页设计基础与上机指导网页设计基础与上机指导（缪亮等）（缪亮等）3.2.2相对路径相对路径相对路径又分为根目录相对的路径与文档相对的路径两种。相对路径适相对路径又分为根目录相对的路径与文档相对的路径两种。相对路径适合于创建网站的内部链接，一个相对路径不包括协议和主机信息，因为合于创建网站的内部链接，一个相对路径不包括协议和主机信息，因为它的路径与当前文档的访问协议和主机相同，甚至有相同的目录路径，它的路径与当前文档的访问协议和主机相同，甚至有相同的目录路径，所以通常只包含文件夹名和文件名，有时甚至只有文件名。所以

19、通常只包含文件夹名和文件名，有时甚至只有文件名。（1）根目录相对路径：是从）根目录相对路径：是从当前站点的根目录当前站点的根目录开始的路径。站点上所有可开始的路径。站点上所有可公开的文件都存放在站点的根目录下。和根目录相对的路径使用斜杠以公开的文件都存放在站点的根目录下。和根目录相对的路径使用斜杠以告诉服务器从根目录开始。告诉服务器从根目录开始。例如，如果一个站点的根目录在例如，如果一个站点的根目录在D:ProgramFilesApacheSoftwareFoundationTomcat6.0webappsROOT下，下，ROOT目录下存在文件目录下存在文件31.html文件和子目录文件和子目

20、录part3，在，在part3下存在子目录下存在子目录1，子目录，子目录1下存在文下存在文件件32.html，文件，文件32.html中有链接中有链接访问文件访问文件31.html，那么单击该文件的显示的链接就会跳转到文件，那么单击该文件的显示的链接就会跳转到文件31.html。Href，指向，超链接时会详细讲。，指向，超链接时会详细讲。注意，容易与注意，容易与URL用混，看上面的勘误！用混，看上面的勘误！（2）文档相对路径：是指和当前文档所在的文件夹）文档相对路径：是指和当前文档所在的文件夹相对的路径。这种路径通常是最简单的路径，可以相对的路径。这种路径通常是最简单的路径，可以用来链接和当前

21、文档处于同一文件夹下的文档。下用来链接和当前文档处于同一文件夹下的文档。下面举例说明。面举例说明。如果链接到同一目录下的文件如果链接到同一目录下的文件part3.html，只需要，只需要指定链接文件的名称即可指定链接文件的名称即可href=”part3.html”。如果要链接上一级目录中的文件如果要链接上一级目录中的文件part3.html，则要，则要输入输入“./”然后再输入文件名然后再输入文件名href=”./part3.html”。如果要链接上两级目录中的文件如果要链接上两级目录中的文件part3.html，则要，则要输入输入“././”然后再输入文件名然后再输入文件名href=”./.

22、/part3.html”。如果链接到当前目录的下一级子目录如果链接到当前目录的下一级子目录web下的文件下的文件part3.html，则要输入目录名，则要输入目录名“web/”然后再输入然后再输入文件名文件名href=”web/part3.html”。参见例题参见例题2-242-27，练习！，练习！文档体标记文档体标记及主要属性及主要属性n标记标记l在在标记对之间的部分称为标记对之间的部分称为html文档的文件体。文件体中文档的文件体。文件体中描述的是浏览器中显示的内容。描述的是浏览器中显示的内容。l在在标记对之间包含文档内容标记，例如：文本、图像以标记对之间包含文档内容标记，例如：文本、图像

23、以及超链接、表格、表单等。及超链接、表格、表单等。n标记主要属性标记主要属性l一般属性一般属性u设置页边距，设置页面内容和上下左右四个边框的距离设置页边距，设置页面内容和上下左右四个边框的距离u设置背景颜色，背景图片设置背景颜色，背景图片u文本颜色文本颜色u超链接超链接l事件属性事件属性u打开页面，关闭页面打开页面，关闭页面u窗口移动、改变大小窗口移动、改变大小u鼠标操作鼠标操作propertyprp(r)t/pr-n.财产财产,性质性质,所有权所有权marginmdnn.v页边的空白页边的空白;极限极限;边缘边缘教材教材P88，表，表3-1教材教材P88，表，表3-2事件属性的值往往是一个事

24、件属性的值往往是一个JavaScript函数函数例题例题3-2.html文档体文档体n文本内容文本内容n图片图片n超链接超链接n表格表格n表单表单n其他标记其他标记文本内容标记文本内容标记n标题、段落标记标题、段落标记n文本格式标记文本格式标记l字体标记字体标记l粗体、斜体和下划线标记粗体、斜体和下划线标记图像标记图像标记n图像标记图像标记 l单标记，用以插入图像单标记，用以插入图像n一般属性一般属性lsrc：设置插入图像的设置插入图像的url地址，即插入图像的路径和文件名。地址，即插入图像的路径和文件名。lalign：设置图像的对齐方式：设置图像的对齐方式，取值，取值left、right、c

25、enter、absmiddle等等lid：指定的图片：指定的图片id号，用于对图像的程序访问号，用于对图像的程序访问lname：用于设定图像的名称，用于对图像的程序访问。用于设定图像的名称，用于对图像的程序访问。ltitle：属性值为一字符串，鼠标指向图片时，鼠标右下角显示标题文本。：属性值为一字符串，鼠标指向图片时，鼠标右下角显示标题文本。lalt：图像的替代文字：图像的替代文字lborder：设置图片边框。：设置图片边框。lheight和和width：分别用于设置图像的高度和宽度：分别用于设置图像的高度和宽度lhspace和和vspace：分别用于设置图像的左右边框大小和上下边框大小。：分

26、别用于设置图像的左右边框大小和上下边框大小。lismap和和usemap：在应用图像地图（：在应用图像地图（map）时使用。）时使用。n事件属性事件属性 n重点难点重点难点lsrc属性的值，相对路径和绝对路径问题属性的值，相对路径和绝对路径问题ltitle属性，文本的回车换行属性，文本的回车换行“ ”或或“ ”，对应回车（，对应回车（r）换行（）换行（n）的）的ASCII值值13和和10。例如：。例如：title=“图片名称：图片名称： 泰山风光泰山风光lheight和和width，正确方式是使用，正确方式是使用ps压缩图，提高下载速度，例如一些网上商店的图片压缩图，提

27、高下载速度，例如一些网上商店的图片verticalvrtkl/vt-n.垂直线垂直线,竖向竖向,垂直面垂直面adj.垂直的垂直的,顶点的顶点的horizontalhorizontal|hrzntl/hrzntln.水平线水平线,水平面水平面adj.地平线的地平线的;水平的水平的例题例题3-3图像属图像属性性.htmborderbdn.边缘边缘,边沿边沿;边界边界,国界国界,边境边境;饰边饰边,滚滚边边;AbsBottom 图像的下边缘与同一行中最大元素的下边缘对齐。图像的下边缘与同一行中最大元素的下边缘对齐。 AbsMiddle 图像的中间与同一行中最大元素的中间对齐。图像的中间与同一行中最大

28、元素的中间对齐。 Baseline 图像的下边缘与第一行文本的下边缘对齐。图像的下边缘与第一行文本的下边缘对齐。 Bottom 图图像的下边缘与第一行文本的下边缘对齐。像的下边缘与第一行文本的下边缘对齐。 Left 图像沿网页的左边图像沿网页的左边缘对齐，文字在图像右边换行。缘对齐，文字在图像右边换行。 Middle 图像的中间与第一行文图像的中间与第一行文本的下边缘对齐。本的下边缘对齐。 NotSet 未设定对齐方式。未设定对齐方式。 Right 图像沿网页的图像沿网页的右边缘对齐，文字在图像左边换行。右边缘对齐，文字在图像左边换行。 TextTop 图像的上边缘与同图像的上边缘与同一行上最

29、高文本的上边缘对齐。一行上最高文本的上边缘对齐。 Top 图像的上边缘与同一行上最图像的上边缘与同一行上最高元素的上边缘对齐。高元素的上边缘对齐。图文混排图文混排align属性取值属性取值练习一下吧！练习一下吧！参见例题，程参见例题，程序序2-18.html参见课件参见课件P33例题，体会例题，体会absmiddle与与middle异同！异同！举例举例n在一个网页中，插入一副图片在一个网页中，插入一副图片dog.jpg，要去当鼠标移到图片，要去当鼠标移到图片上的时候，显示另一幅图片上的时候，显示另一幅图片cat.jpg，鼠标移走后重新显示图，鼠标移走后重新显示图片片dog.jpg。 n代码清单

30、代码清单n问题问题改变图片文件路径到改变图片文件路径到images文件夹文件夹参见参见例题与练习例题与练习例例题题3-3图像属性图像属性.htm超链接标记超链接标记n概念及功能概念及功能n分类分类l文本超链接一般形式文本超链接一般形式u字符串字符串l图片超链接一般形式图片超链接一般形式un定义书签定义书签l书签文本书签文本例题例题3-4系列；补充系列；补充下载、邮件、锚点下载、邮件、锚点等链接。等链接。超链接标记超链接标记的属性的属性nhref属性取值属性取值l一个网址，例如一个网址，例如首页首页l一段一段javascript代码，例如：代码，例如：下一步下一步l关闭关闭nonclick属性属

31、性l接受鼠标单击，如果返回接受鼠标单击，如果返回true,则页面跳转到则页面跳转到href指定的网页，否则，不执行指定的网页，否则，不执行href属性所定属性所定义的网页。例如：义的网页。例如：llbbbntarget属性属性l_self（相同框架），（相同框架），_blank（新建窗口），（新建窗口），_top（整页），（整页），_parent（父窗口），（父窗口），帧名帧名ntitle属性属性nDisabledl使（超链接）失能（灰化，不可用）使（超链接）失能（灰化，不可用）超链接标记超链接标记的重点难点的重点难点nhref和和onclick的联合使用的联合使用n显示样式的定义显示样式的定

32、义l超链接的显示超链接的显示l活动超链接的显示活动超链接的显示l已经访问过的超链接的显示已经访问过的超链接的显示表格（表格（Table）n表格及其功能表格及其功能l数据组织数据组织l页面布局页面布局n表格、行、单元格标记表格、行、单元格标记n表格、单元格属性表格、单元格属性n重点难点重点难点l表格的宽度设置，百分比表格的宽度设置，百分比or像素值像素值l定义行高，定义行高，height属性用于属性用于，尽量不在，尽量不在l定义单元格宽度，只在表格第一行的定义单元格宽度，只在表格第一行的中使用中使用width属性，最后一属性，最后一个单元格不设置个单元格不设置l表格、单元格表格线（上、下、左、右

33、）的定义表格、单元格表格线（上、下、左、右）的定义l单元格间距单元格间距(cellspacing)、衬距、衬距(cellpadding)问题问题l表格的水平、垂直居中，表格嵌套表格的水平、垂直居中，表格嵌套caption(图片图片)说明文说明文字，字，(电影电影)字幕字幕marginn.页边空白；差额；页边空白；差额；余地，余裕；边，边缘余地，余裕；边，边缘举例举例1-表格的嵌套表格的嵌套n单元格中定义表格单元格中定义表格n举例举例表格居中表格居中实战，体会本题表格嵌实战，体会本题表格嵌套的目的！套的目的！举例举例2单元格中图片和文字的垂直居中单元格中图片和文字的垂直居中n在表格的单元格中，如

34、果存在文字和图片混合内容，默认的在表格的单元格中，如果存在文字和图片混合内容，默认的显示是下边对齐。设置显示是下边对齐。设置的的valign=center,不起作用不起作用n设置设置的的align=“absmiddle”（非（非middle）即可解决）即可解决教材例题教材例题3-5举例举例3表格的表格的tbody与标签式表格与标签式表格n标签式表格标签式表格n标记标记详解此题，代码见详解此题，代码见“例题例题3-6交互式标签表格交互式标签表格.html”！Cursorkrsn.指针指针;游标游标此题有相当难度，要求：此题有相当难度，要求：1.全面读懂，不全面读懂，不仅仅是字面的解释，明确程序的

35、执行细节！仅仅是字面的解释，明确程序的执行细节！2.写程序实现局部功能！写程序实现局部功能！作业：模仿此题作业：模仿此题实战，内容变为实战，内容变为班级同学介绍！班级同学介绍！思考：这个题可以思考：这个题可以将导航标签竖着放将导航标签竖着放吗？为什么？吗？为什么？代码代码-表格标记表格标记-1tbody.htmcursorkrsn.指针指针;游标游标表单表单Formn表单的概念及功能表单的概念及功能l用户输入数据用户输入数据n标记标记l用户交互用户交互l表单标记表单标记n标记主要属性标记主要属性lname属性，给出表单的名称，用于脚本编程属性，给出表单的名称，用于脚本编程lmethod属性，定

36、义服务器表单处理程序从表单中获得信息的方式属性，定义服务器表单处理程序从表单中获得信息的方式uget方法将数据打包放置在环境变量方法将数据打包放置在环境变量QUERY_STRING中作为中作为URL整体的一部分传递给服务器。整体的一部分传递给服务器。upost方法，使用方法，使用HTTP实体头域发送数据到实体头域发送数据到Web服务器，没有数量限制服务器，没有数量限制laction属性，设置表单处理程序的网络路径和程序名，当用户提交表单时，服务器将属性，设置表单处理程序的网络路径和程序名，当用户提交表单时，服务器将执行执行action属性所设置的程序。属性所设置的程序。ltarget属性，设置

37、属性，设置action页面输出的窗口页面输出的窗口n重点难点重点难点l使用表格进行表单布局使用表格进行表单布局lForm标记标记target属性属性教材勘误：教材勘误：p101例题例题3-7代码中，代码中，radio之之name不一致！不一致！表单输入域表单输入域n单行文本框输入单行文本框输入n密码文本框输入密码文本框输入 n多行文本框输入多行文本框输入 nbutton按钮输入按钮输入 nradio单选钮输入单选钮输入 n复选框输入复选框输入n复选列表框输入复选列表框输入nhidden隐藏元素隐藏元素 n文件上传文件上传 n表单提交按钮标记表单提交按钮标记submit/reset 表单举例表单

38、举例1上传文件上传文件n表单输入页面表单输入页面news-add.jspn服务端处理程序页面服务端处理程序页面news-addfilesave.jsp表单页面表单页面news-add.jsp表单处理程序表单处理程序news-addfilesave.jsp层叠样式表层叠样式表CSS技术技术nCSS样式属性样式属性CSS对网页的控制是通过对网页的控制是通过CSS属性实现的，这些属性可以分为以下几类属性实现的，这些属性可以分为以下几类l字体属性字体属性l颜色和背景属性颜色和背景属性l文本间距与文本对齐属性文本间距与文本对齐属性l容器属性容器属性l列表属性列表属性l鼠标状态属性鼠标状态属性l定位属性定

39、位属性l滤镜属性滤镜属性nCSS样式表定义样式表定义lHTML选择符选择符l类选择符类选择符lID选择符选择符l关联选择符关联选择符l组合选择符组合选择符l伪元素选择符伪元素选择符n修改标记的默认显示样式修改标记的默认显示样式l在在内定义内定义样式，嵌入式样式表样式，嵌入式样式表l使用标记内连样式使用标记内连样式style属性，缺点是内容和样式混合，难于维护。属性，缺点是内容和样式混合，难于维护。l使用标记的使用标记的class属性属性lId属性属性CSS属性属性-1字体属性字体属性CSS属性属性-2颜色和背景属性颜色和背景属性CSS属性属性-3文本间距与文本对齐属性文本间距与文本对齐属性CS

40、S属性属性-4容器属性容器属性n容器是指其中可以包含内部元素、对象或数据的元素，如表格、单元格容器是指其中可以包含内部元素、对象或数据的元素，如表格、单元格等，页面也是容器对象。等，页面也是容器对象。CSS中对这样的对象都统一用容器属性来控制。中对这样的对象都统一用容器属性来控制。它包括以下子类：边距属性、它包括以下子类：边距属性、 衬距衬距属性、边框属性和图文混排属性。属性、边框属性和图文混排属性。 CSS属性属性-4容器属性容器属性(Cont.)CSS属性属性-5列表属性列表属性CSS属性属性-6鼠标状态属性鼠标状态属性CSS属性属性-7定位属性定位属性CSS属性属性-8滤镜属性滤镜属性n

41、在网页显示时，常常在网页显示时，常常希望所显示的图像或希望所显示的图像或文字有一些特殊的效文字有一些特殊的效果，果，CSS中的滤镜属中的滤镜属性就可以实现这一要性就可以实现这一要求。滤镜的书写格式求。滤镜的书写格式如下：如下：filter:filtername(parameters)n其中其中filtername为滤为滤镜名，镜名，parameters为为参数表，不同的滤镜，参数表，不同的滤镜，所允许使用的参数也所允许使用的参数也不同。不同。 CSS样式表定义样式表定义nCSS表定义的一般形式表定义的一般形式nCSS选择符选择符lHTML选择符选择符l类选择符类选择符lID选择符选择符l关联选

42、择符关联选择符l组合选择符组合选择符l伪元素选择符伪元素选择符CSS样式表定义的一般形式样式表定义的一般形式n样式表定义的一般形式是：样式表定义的一般形式是：nn 选择符选择符属性名属性名:属性值属性值; 属性名属性名: 属性值属性值; nHTML选择符选择符n选择符为标记名，此时样式定义将替换标记的默认选择符为标记名，此时样式定义将替换标记的默认显示，任何显示，任何HTML标记都可以作为标记都可以作为CSS选择符。选择符。n举例举例bodymargin-top:20px;overflow-x:hidden;pmargin:2px4px类选择符类选择符n一般形式一般形式HTML标记标记.属性属

43、性:属性值属性值;属性属性:属性内值属性内值.n例子例子l.word1color:lime;background:#ff80c0lp.warningfont-weight:bold;color:red;background:whiten应用应用l警告：警告：lPleaseturnoffthepowerfirstID选择符选择符n一般形式一般形式HTML标记标记#属性属性:属性值属性值;属性属性:属性内值属性内值.n例子例子l#help-tablelborder:1pxsolid#0163A2;lcellspacing:5px;lcellpadding:px;lfont-family:宋体宋体;

44、lfont-size:12px;lcolor:#FF0000;lline-height:150%;ln应用应用在在HTML页面中页面中ID参数指定了某个单一元素，参数指定了某个单一元素，ID选择符是用来对这个选择符是用来对这个单一元素定义单独的样式。单一元素定义单独的样式。ID选择符的应用和类选择符类似，只要把选择符的应用和类选择符类似，只要把CLASS换成换成ID即可。将上即可。将上例中的类用例中的类用ID代替：代替：这个段落左对齐这个段落左对齐定义定义ID选择符要在选择符要在ID名称前面加上一个名称前面加上一个“#”号。和类选择符相同，号。和类选择符相同，定义定义ID选择符的属性也有两种方

45、法。下面这个例子，选择符的属性也有两种方法。下面这个例子，ID属性将匹配所属性将匹配所有有id=“left”的元素：的元素：#leftfont-size:100%;font-weight:bold;color:Purple;background-color:transparent下面这个例子，下面这个例子，ID属性只匹配属性只匹配id=“left”的段落元素：的段落元素：p#leftfont-size:100%;font-weight:bold;color:Purple;background-color:transparent关联关联（包含）（包含）选择符选择符n概念概念关联选择符是有两个或更

46、多的单个选择符组成的串，由于关联选择符是有两个或更多的单个选择符组成的串，由于层叠顺序的关系，关联选择符的优先权更大。关联选择层叠顺序的关系，关联选择符的优先权更大。关联选择符只对选择符的最内层元素起作用，对单独的外层元素符只对选择符的最内层元素起作用，对单独的外层元素无定义。定义关联选择符时，单独的选择符之间用空格无定义。定义关联选择符时，单独的选择符之间用空格分开。分开。n例子例子tableacolor:red他他定定义义了了内内的的超超链链接接标标记记的的样样式式，对对于于标记本身，以及标记本身，以及标记外的标记外的没有影响。没有影响。组合选择符组合选择符n概念概念将多个选择符共用一个样

47、式表定义，避免样式表定义的重将多个选择符共用一个样式表定义，避免样式表定义的重复，这就是组合选择符。定义组合选择符，单个选择符复，这就是组合选择符。定义组合选择符，单个选择符之间用西文的之间用西文的“,”分割。分割。n例子例子lh1,h2color:redl则则和和标记定义为红色字。标记定义为红色字。伪伪（类）（类）元素选择符元素选择符n概念概念主要定义超链接标记主要定义超链接标记，目的是定义不同状态下同一个，目的是定义不同状态下同一个HTML元素的形态。例如，点击前、点击后、光标移动到超链元素的形态。例如，点击前、点击后、光标移动到超链接文本上时，这些不同的状态超链接显示不同。接文本上时，这

48、些不同的状态超链接显示不同。n个性化超连接的显示，可以定义下面的样式。个性化超连接的显示，可以定义下面的样式。 acolor:#0000FF;font-size:12px;text-decoration:nonea:linkcolor:#00FF00;text-decoration:nonea:visitedcolor:#00FF00;text-decoration:nonea:hovercolor:#FF0000;font-weight:bold;text-decoration:nonea:activecolor:#0000FF;text-decoration:none特别说明：特别说明：在

49、在CSS 定义中，定义中，a:hover 必须位于必须位于 a:link 和和 a:visited 之后，才能生效；之后，才能生效；a:active 必须位于必须位于a:hover 之后，才能生效。之后，才能生效。hoverhv(r)v.盘旋盘旋,徘徊徘徊,翱翔翱翔修改标记的默认显示样式修改标记的默认显示样式n在文档头部定义在文档头部定义标记，定义标记的显示样标记，定义标记的显示样式（嵌入式）式（嵌入式）n在标记中使用在标记中使用style属性（内联样式）属性（内联样式）n在标记中使用在标记中使用class属性（自定义样式类）属性（自定义样式类）nclass属性和属性和id属性的不同属性的不同

50、此部分参见此部分参见“CSS样式讲稿样式讲稿.doc”方法方法1修改默认显示修改默认显示n在文档头部定义在文档头部定义标记，定义标记的显示样式标记，定义标记的显示样式标记标记属性名属性名:属性值属性值;属性名属性名:属性值属性值;.n例如：例如：bodymargin-top:30px;color:black;background:white;acolor:#0000FF;text-decoration:none;font-size:14pxa:linkcolor:#00FF00;text-decoration:nonea:visitedcolor:#00FF00;text-decoration

51、:nonea:hovercolor:#FF0000;text-decoration:none;font-weight:bolda:activecolor:#0000FF;text-decoration:none特别说明：特别说明：a:hover 必须位于必须位于 a:link 和和 a:visited 之后，才能生效；之后，才能生效；a:active 必须位于必须位于a:hover 之后，才能生效。之后，才能生效。 方法方法2使用内联样式使用内联样式n使用内联样式使用内联样式style属性属性l我们看下面的文字格式化要求：我们看下面的文字格式化要求：u仿宋体，仿宋体，6号字，蓝色号字，蓝色泰山

52、泰山u加粗加粗泰山泰山u斜体斜体泰山泰山l上述格式化使用了三种标记上述格式化使用了三种标记n标记内联样式标记内联样式-style属性属性l设置内联样式设置内联样式lstyle=属性名属性名:属性值属性值;属性名属性名:属性值属性值;.n例如：例如：泰山泰山n缺点缺点l内容和显示混杂内容和显示混杂方法方法3使用自定义样式类使用自定义样式类n使用用户自定义样式类使用用户自定义样式类class属性属性lCLASS属性用于指定标记使用的样式类。样式类可以关联一个标准的标记，属性用于指定标记使用的样式类。样式类可以关联一个标准的标记，也可以用于任何标记。也可以用于任何标记。l用户样式类的定义（用户样式类

53、的定义（类选择符类选择符）.属性名属性名:属性值属性值;属性名属性名:属性值属性值不指定标记的样式类为全局样式类，可以为所有标记的不指定标记的样式类为全局样式类，可以为所有标记的class属性使用。指定标记的属性使用。指定标记的样式类只适用于该标记。样式类只适用于该标记。l例如例如.word1color:lime;background:#ff80c0p.warningfont-weight:bolder;color:red;background:whiten举例举例lPleaseturnoffthepowerfirstl警告：警告：方法方法4-使用使用ID选择符选择符nid属性属性lID属性用

54、于定义一个元素的独特的样式。属性用于定义一个元素的独特的样式。ID值可值可以关联一个标准的标记，也可以用于任何标记。以关联一个标准的标记，也可以用于任何标记。l一般形式一般形式#属性名属性名:属性值属性值;属性名属性名:属性值属性值l例如例如#location-tableborder:0px;cellspacing:0px;cellpadding:0px;#help-tableborder-left:1pxsolid#0163A2;border-bottom:1pxsolid#0163A2;border-top:1pxsolid#0163A2;border-right:1pxsolid#016

55、3A2;cellspacing:5px;cellpadding:px;font-family:宋体宋体;font-size:12px;color:#FF0000;line-height:150%;#foot-tablemargin-top:15px;height:65px;font-family:宋体宋体;font-size:12px;color:#FFFFFF;text-align:center;line-height:150%;background-color:#d0d0cf;n举例举例上述上述id设定用于每一个页面中的当设定用于每一个页面中的当前位置、帮助信息以及版权页角前位置、帮助信息

56、以及版权页角的设定。在每一个页面中，这是的设定。在每一个页面中，这是一样的一样的页面设计效果页面设计效果使用使用id选择符和选择符和class选择符的不同选择符的不同nclass属性值为一个用户自定义的样式类，一个用户自定义的样式类可以属性值为一个用户自定义的样式类，一个用户自定义的样式类可以在多个标记中使用在多个标记中使用nid属性，用于标识一个标记，在一个属性，用于标识一个标记，在一个HTML文档中，不能有相同的文档中，不能有相同的id号。号。这就如标记的这就如标记的name属性，不能重名，这可以从属性，不能重名，这可以从DOM模型来很容易理解，模型来很容易理解，通过通过getElemen

57、tById 方法可以访问方法可以访问id所识别的对象。所识别的对象。n在布局思路上，一般坚持这样的原则：在布局思路上，一般坚持这样的原则：id是先确定页面的结构和内容，是先确定页面的结构和内容，然后再为它定义样式：而然后再为它定义样式：而class相反，它先定义好一类样式，然后再页面相反，它先定义好一类样式，然后再页面中根据需要把类样式应用到不同的元素和内容上面。中根据需要把类样式应用到不同的元素和内容上面。n在实际应用时，在实际应用时，class更多的被应用到文字版块以及页面修饰等方面，而更多的被应用到文字版块以及页面修饰等方面，而id更多地被用来实现宏伟布局和设计包含块，或包含框的样式。更

58、多地被用来实现宏伟布局和设计包含块，或包含框的样式。样式（样式（.css）文件）文件n样式（样式（.css）文件）文件l如果要将这些样式应用到其他如果要将这些样式应用到其他HTML文档中，应该使用样式文件。即，文档中，应该使用样式文件。即，将这些样式定义存储在一个扩展名为将这些样式定义存储在一个扩展名为.css的样式文件中，的样式文件中，css文件可文件可以是一个标准的以是一个标准的HTML文件，只不过文件，只不过为空。为空。n使用使用css文件文件n重点难点重点难点l文件命名要规范，例如：通用的样式文件文件命名要规范，例如：通用的样式文件mycommon.css,关于表格关于表格的样式定义文

59、件的样式定义文件mytable.cssl样式名要规范，便于阅读样式名要规范，便于阅读要在文档中引用外部样式，要在文档中引用外部样式，这个（在头部）必须有！这个（在头部）必须有！将某文件连接包含进来，属性将某文件连接包含进来，属性”rel”是是“关联关联”的类型的类型举例举例1定义通用样式文件定义通用样式文件mycommon.cssn文件名文件名mycommon.cssl包含页面中常用的标记样式类定义，包括：包含页面中常用的标记样式类定义，包括：标记、各种文本样式定义标记、各种文本样式定义n网页文件网页文件llllllll使用使用CSS样式类的好处：样式类的好处：l（1）内容与显示的分离）内容与

60、显示的分离ll举例举例2定义关于定义关于table的样式文件的样式文件mytable.cssn文件名文件名mytable.cssl包含在表格中包含在表格中使用的表格标使用的表格标记、单元格标记、单元格标记、单元格内记、单元格内容、单元格文容、单元格文本等各类样式本等各类样式表格样式的使用表格样式的使用span标记标记nspan元素不同于一般的元素不同于一般的HTML元素，它没有自己的显示内容元素，它没有自己的显示内容和显示特性。和显示特性。引入引入标记的目的是：标记的目的是：定义一个行内区定义一个行内区域，可以给这个区域一个域，可以给这个区域一个id属性，结合属性，结合CSS，对该区域设定，对

61、该区域设定特定的样式，以得到需要的显示效果。也可以使特定的样式，以得到需要的显示效果。也可以使span标记的标记的区域响应鼠标或键盘事件，制作菜单、树形结构目录、列表区域响应鼠标或键盘事件，制作菜单、树形结构目录、列表框及下拉列表框项目。框及下拉列表框项目。n在行内定义一个区域，也就是一行内可以被在行内定义一个区域，也就是一行内可以被划划分成好几个区域，从而实现某种特定效果。和分成好几个区域，从而实现某种特定效果。和标记相标记相比，比，在在CSS定义中属于一个行内元素，而定义中属于一个行内元素，而是块是块级元素级元素span举例举例span标记区的访问方法标记区的访问方法nnnnnfuncti

62、on setspan(spid,flag)nn if(flag=1)n n / 使用函数参数访问使用函数参数访问span对象对象n document.all.item(spid).innerHTML=Hao;n /直接使用直接使用标记的标记的id号访问对象号访问对象n sp2.style.display=inline; n sp3.style.display=none; n n if(flag=2)n n document.all.item(spid).innerHTML=Jiang;n sp2.style.display=none; n sp3.style.display=inline; n

63、 nnnnnMr.HaonMiss.Jiangn亲爱的亲爱的xxx先生先生女士女士nnspan举例举例常见应用常见应用n在页面内容见留出空白在页面内容见留出空白ln定义区域，接受鼠标事件定义区域，接受鼠标事件ln块级元素的相对定位块级元素的相对定位问题：问题：margin-left:-4px是什么意思？是什么意思？块级元素的相对定位块级元素的相对定位p.pos_leftposition:relative;left:-20px段落的正常输出位置段落的正常输出位置段落在输出时相对于其正常位置向左移动段落在输出时相对于其正常位置向左移动相对定位会按照元素的原始位置对该元素进行移动。相对定位会按照元素

64、的原始位置对该元素进行移动。图层标记图层标记divn层次块标记层次块标记divl层次块标记层次块标记用于定义网页上的一个矩形块，中间可以包含引用于定义网页上的一个矩形块，中间可以包含引起行中断的标记，如起行中断的标记，如标记等。标记等。l层次块标记的一般形式是：层次块标记的一般形式是：n标记属性标记属性lid，属性，用于标记一个，属性，用于标记一个块，以便引用该块。块，以便引用该块。lstyle属性，属性，u和和没有默认的显示样式没有默认的显示样式，必须使用，必须使用style属性和属性和class样式类定义图层块样式类定义图层块的位置、大小、显示属性等。的位置、大小、显示属性等。l图层内容超

65、过图层图层内容超过图层height和和width时，出现滚动条，如何不显示滚动条？时，出现滚动条，如何不显示滚动条？l例如：例如：ustyle=“border:solid1px#0163A2;padding:5px;display:none”,可以显示图层的可以显示图层的边框边框ustyle=width:100px;height:100px;overflow-x:hidden;overflow-y:hidden;举例举例图层的显示和隐藏图层的显示和隐藏n页面设计效果页面设计效果代码代码nnnnnnnfunction showorhide_div(menu)nn if (document.all

66、.item(menu).style.display=none)n n document.all.item(menu).style.display = block;n n elsen n document.all.item(menu).style.display = none;n nnn代码（续代码（续1）nnnn您的位置：教学计划管理您的位置：教学计划管理教学计划列表教学计划列表nnnn 添加班级添加班级 | n 添加单个学生添加单个学生nnn代码（续代码（续2）nnnn 系统帮助：系统帮助：n n rn nnn 一项教学计划对应一个教学班，教学班可以包括多个不同的物理班；对于选修课，一个教学

67、计划的教一项教学计划对应一个教学班，教学班可以包括多个不同的物理班；对于选修课，一个教学计划的教学班，可以是某些班的部分同学。每一个教学计划都有一个唯一的教学计划号，教学计划号学班，可以是某些班的部分同学。每一个教学计划都有一个唯一的教学计划号，教学计划号=课程代码课程代码+课程顺序号。课程顺序号。n nnnnn使用帧使用帧n帧（帧（Frame）l帧（帧（Frame）可以用来将浏览器窗口划分为多个区域（子）可以用来将浏览器窗口划分为多个区域（子窗口），每个子窗口中装载一个窗口），每个子窗口中装载一个HTML文件。文件。n一般形式一般形式帧的应用帧的应用页面设计页面设计代码代码index.htm

68、nnnnWelcome to Lavenders classnnnn n n n n n n n n n nn代码代码-scrollleft.html浮动帧浮动帧标记标记n浮动帧浮动帧n单元格内部单元格内部背景色背景色n浮动帧周边浮动帧周边为什么没有为什么没有全部遮挡所全部遮挡所在的单元格在的单元格背景？背景？代码代码-myiframe.htm（1）nnnnnbodymargin:0 auto; font-size:12px; text-align:center; background:#CCCCCC; font-family:宋体宋体, Helvetica, sans-serif; back

69、ground-image:url(./images/bg.gif);n#leftmenunborder-top:1px solid #CCCCCC;nborder-bottom:1px solid #CCCCCC;nborder-right:1px solid #CCCCCC;nheight:550px;nbackground:#FF0000;npadding-left:0px;nn#centernborder-top:1px solid #CCCCCC;nborder-bottom:1px solid #CCCCCC;nheight:550px;ntext-align:center;nver

70、tical-align:middle;nbackground:#E9A75D;nn#rightnborder-top:1px solid #CCCCCC;nborder-bottom:1px solid #CCCCCC;ntext-align:left;nvertical-align:top;nbackground:url(./images/right_bg.jpg);nn代码代码-myiframe.htm（2）nnfunction switchSysBar()nn if (switchPoint.innerText=关闭左侧菜单栏关闭左侧菜单栏)n n switchPoint.innerTe

71、xt=打开左侧菜单栏打开左侧菜单栏;n /document.all(leftmenu).style.display=none;n /document.all.item(leftmenu).style.display=none;n leftmenu.style.display=none;n n elsen n switchPoint.innerText=关闭左侧菜单栏关闭左侧菜单栏n document.all(leftmenu).style.display=n nnif(self!=top)nn top.location=self.location;nnn重点：访问一个用重点：访问一个用id号号

72、标识的对象的三种方法标识的对象的三种方法代码代码-myiframe.htm（3）nnnn nnn n n n n 关闭左侧菜单栏关闭左侧菜单栏n n n n nnn Copyright; nnnnif(window.screen.width1024)nn switchSysBar();nnnn问题思考问题思考n在在HTML规范中，有哪几个属性是大部分标记都有规范中，有哪几个属性是大部分标记都有的？为什么？的？为什么？n对于对于标记，为什么在有时侯伪元素选择符样式标记，为什么在有时侯伪元素选择符样式定义不起作用？定义不起作用？n在在、等标记中等标记中margin-left等设置一个负等设置一个负数是什么意思？数是什么意思？lUnit 1 Web基础基础谢谢大家谢谢大家