WebUnit03-HTML标记语言课件VIP

1、Web技术导论山东大学计算机科学与技术学院山东大学计算机科学与技术学院郝兴伟郝兴伟课程目录课程目录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样式表定义样式表定义n表格

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

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

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

8、 Organization for Nuclear Research）于）于1991年首先提出。年首先提出。nHTML主要版本及发布时间主要版本及发布时间 l HTML 2.0， Internet工程任务组中的工程任务组中的HTML工作组开发完成了工作组开发完成了HTML 2.0，于，于1996年年发布发布 l HTML3.2，W3C于于1997年年1月月14日将其列为推荐版本，在日将其列为推荐版本，在HTML2.0标准中添加了诸标准中添加了诸如：字体、表格、如：字体、表格、Java程序、浮动、上标、下标等特征程序、浮动、上标、下标等特征 l HTML 4.0，W3C于于1997年年12月月1

9、8日将其列为推荐版本，第二个稍作修正的日将其列为推荐版本，第二个稍作修正的HTML 4.0 版本与版本与1998年年12月月24日发布。日发布。uHTML4.0中最重要的特征是引入了样式表中最重要的特征是引入了样式表CSS技术。技术。 l HTML 4.01，W3C于于1999年年12月月24日将其列为推荐版本，是日将其列为推荐版本，是HTML 4.0的升级版本，的升级版本，它对原版本做出了部分修正。它对原版本做出了部分修正。l HTML5.0可扩展标记语言可扩展标记语言XMLn可扩展标记语言可扩展标记语言XML互联网的未来互联网的未来l XML（eXtensible Markup Langu

10、age） ，1998年年2月月10日，日，XML工作组正工作组正式向式向W3C提交了提交了XML的最终推荐标准，这就是的最终推荐标准，这就是XML 1.0标准。标准。 l 核心思想核心思想u实现数据和显示的分离实现数据和显示的分离 nXML的构成的构成l DTD、XML Schema等基本要素等基本要素l 元规范元规范n 相关规范相关规范l 可扩展样式语言可扩展样式语言XSLl XML路径语言路径语言XPathl XML查询语言查询语言Xqueryl 可扩展连接语言可扩展连接语言XLLl 及及XML文档对象模型文档对象模型DOMl 简单应用程序接口简单应用程序接口SAXl 等等 U32 超文本

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

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

13、解HTML文档结构文档结构 文档头标记文档头标记 （文档内容标记）（文档内容标记）文档头文档头文档体文档体文件头标记及子标记文件头标记及子标记n文件头及其功能文件头及其功能l标记对之间的部分称为文件头标记对之间的部分称为文件头l功能功能u告诉浏览器如何显示页面，例如字符集，有效期告诉浏览器如何显示页面，例如字符集，有效期u为搜索引擎提供支持为搜索引擎提供支持n子标记子标记l标记标记 l标记标记 l 标记标记 l标记标记 l标记标记标记标记n关于关于meta的意义的意义l meta即即“元元”的意思，的意思，meta data元数据，即关于数据的数据元数据，即关于数据的数据l 例如：一篇例如：一

14、篇paper，它的正文是文章本身的数据。但作者、出版社、，它的正文是文章本身的数据。但作者、出版社、出版日期等即可看成是出版日期等即可看成是paper的元数据的元数据n标记标记l 为单标记，没有尾标记为单标记，没有尾标记l 两类元数据描述，一类是关于两类元数据描述，一类是关于HTTP头的描述，向浏览器传回信息，头的描述，向浏览器传回信息，以正确显示网页内容；另一类是关于页面内容的描述，用于搜索引以正确显示网页内容；另一类是关于页面内容的描述，用于搜索引擎。擎。n标记的形式标记的形式l l 标记标记HTTP头头nHTTP头头l HTTP头是头是Web服务器向浏览器传回的信息，以正确显示网页内容，

15、即可以在服务器向浏览器传回的信息，以正确显示网页内容，即可以在Web服服务器的配置中设置，也可以通过网页设置。务器的配置中设置，也可以通过网页设置。l nhttp-equiv属性，即属性，即HTTP头域头域l content-type，指定页面内容及所使用的字符集。，指定页面内容及所使用的字符集。 u l expires，用于设定网页的到期时间，用于设定网页的到期时间 u l pragma，禁止浏览器从本地计算机的缓存中访问页面内容，禁止浏览器从本地计算机的缓存中访问页面内容 u ，该种设定访问者将无法使用脱机浏，该种设定访问者将无法使用脱机浏览功能览功能 l refresh，自动刷新并指向新

16、页面。，自动刷新并指向新页面。 u l window-target，显示窗口的设定，例如：强制页面在当前窗口以独立页面显示，显示窗口的设定，例如：强制页面在当前窗口以独立页面显示 u ，可以用来防止别人在框架里调用，可以用来防止别人在框架里调用自己的页面自己的页面 对于文档类型对于文档类型content-type，其值其值content可以为可以为text/xml练习一下刷新，练习一下刷新，本页刷新及刷本页刷新及刷新指向新页面。新指向新页面。要求：可以理解，读懂！要求：可以理解，读懂！简单的能写出！简单的能写出！expire expire | kspav. 期满期满, 断气断气, 呼气呼气;

17、呼出呼出pragmatic prgmtkadj. 忙碌的忙碌的, 实际的实际的, 活跃的活跃的Pragmatical adj. 独断的独断的标记标记-name属性属性nname属性属性l 主要用于描述网页，主要用于搜索引擎查找信息和分类信息用的。主要用于描述网页，主要用于搜索引擎查找信息和分类信息用的。 l nname属性参数值属性参数值l keywords，keywords用来告诉搜索引擎该网页的关键字是什么用来告诉搜索引擎该网页的关键字是什么 。 u l description（网站内容描述），（网站内容描述），description用来告诉搜索引擎网站的主要用来告诉搜索引擎网站的主要内容

18、内容 u l author（作者），标注网页的作者（作者），标注网页的作者 u l robots（机器人向导），（机器人向导），robots用来告诉搜索机器人需要索引的页面有哪用来告诉搜索机器人需要索引的页面有哪些。些。 u n标记标记注：注：教材教材P87勘误，第五行代码为勘误，第五行代码为相对路径参见相对路径参见网页设计基础与上机指导网页设计基础与上机指导（缪亮等）（缪亮等）3.2.2相对路径相对路径相对路径又分为根目录相对的路径与文档相对的路径两种。相对路径适相对路径又分为根目录相对的路径与文档相对的路径两种。相对路径适合于创建网站的内部链接，一个相对路径不包括协议和主机信息，因为合于创

19、建网站的内部链接，一个相对路径不包括协议和主机信息，因为它的路径与当前文档的访问协议和主机相同，甚至有相同的目录路径，它的路径与当前文档的访问协议和主机相同，甚至有相同的目录路径，所以通常只包含文件夹名和文件名，有时甚至只有文件名。所以通常只包含文件夹名和文件名，有时甚至只有文件名。（1）根目录相对路径：是从）根目录相对路径：是从当前站点的根目录当前站点的根目录开始的路径。站点上所有可开始的路径。站点上所有可公开的文件都存放在站点的根目录下。和根目录相对的路径使用斜杠以公开的文件都存放在站点的根目录下。和根目录相对的路径使用斜杠以告诉服务器从根目录开始。告诉服务器从根目录开始。例如，如果一个站

20、点的根目录在例如，如果一个站点的根目录在D:Program FilesApache Software FoundationTomcat 6.0webappsROOT下，下，ROOT目录下存在文件目录下存在文件31.html文件和子目录文件和子目录part3，在，在part3下存在子目录下存在子目录1，子目录，子目录1下存在下存在文件文件32.html，文件，文件32.html中有链接中有链接访问文件访问文件31.html，那么单击该文件的显示的链接就会跳转到文件，那么单击该文件的显示的链接就会跳转到文件31.html。Href，指向，超链接时会详细讲。，指向，超链接时会详细讲。注意，容易与注意

21、，容易与URL用混，看上面的勘误！用混，看上面的勘误！（2）文档相对路径：是指和当前文档所在的文件夹）文档相对路径：是指和当前文档所在的文件夹相对的路径。这种路径通常是最简单的路径，可以相对的路径。这种路径通常是最简单的路径，可以用来链接和当前文档处于同一文件夹下的文档。下用来链接和当前文档处于同一文件夹下的文档。下面举例说明。面举例说明。如果链接到同一目录下的文件如果链接到同一目录下的文件part3.html，只需要，只需要指定链接文件的名称即可指定链接文件的名称即可href=”part3.html”。 如果要链接上一级目录中的文件如果要链接上一级目录中的文件part3.html，则要，则要

22、输入输入“./”然后再输入文件名然后再输入文件名href=”./part3.html”。如果要链接上两级目录中的文件如果要链接上两级目录中的文件part3.html，则要，则要输入输入“././”然后再输入文件名然后再输入文件名href=”././part3.html”。如果链接到当前目录的下一级子目录如果链接到当前目录的下一级子目录web下的文件下的文件part3.html，则要输入目录名，则要输入目录名“web/”然后再输入然后再输入文件名文件名href=”web/part3.html”。参见例题参见例题2-242-27，练习！，练习！文档体标记文档体标记及主要属性及主要属性n标记标记l

23、在在标记对之间的部分称为标记对之间的部分称为html文档的文件体。文件体中文档的文件体。文件体中描述的是浏览器中显示的内容。描述的是浏览器中显示的内容。 l 在在标记对之间包含文档内容标记，例如：文本、图像以标记对之间包含文档内容标记，例如：文本、图像以及超链接、表格、表单等。及超链接、表格、表单等。 n标记主要属性标记主要属性l 一般属性一般属性u设置页边距，设置页面内容和上下左右四个边框的距离设置页边距，设置页面内容和上下左右四个边框的距离u设置背景颜色，背景图片设置背景颜色，背景图片u文本颜色文本颜色u超链接超链接l 事件属性事件属性u打开页面，关闭页面打开页面，关闭页面u窗口移动、改变

24、大小窗口移动、改变大小u鼠标操作鼠标操作property prp(r)t /pr-n. 财产财产, 性质性质, 所有权所有权margin mdnn. v页边的空白页边的空白; 极限极限; 边缘边缘教材教材P88，表，表3-1教材教材P88，表，表3-2事件属性的值往往是一个事件属性的值往往是一个JavaScript函数函数例题例题3-2.html文档体文档体n文本内容文本内容n图片图片n超链接超链接n表格表格n表单表单n其他标记其他标记文本内容标记文本内容标记n标题、段落标记标题、段落标记n文本格式标记文本格式标记l 字体标记字体标记 l 粗体、斜体和下划线标记粗体、斜体和下划线标记图像标记图

25、像标记n图像标记图像标记 l 单标记，用以插入图像单标记，用以插入图像 n一般属性一般属性l src：设置插入图像的设置插入图像的url地址，即插入图像的路径和文件名。地址，即插入图像的路径和文件名。l align：设置图像的对齐方式：设置图像的对齐方式 ，取值，取值left、right、center、absmiddle等等l id：指定的图片：指定的图片id号，用于对图像的程序访问号，用于对图像的程序访问l name：用于设定图像的名称，用于对图像的程序访问。用于设定图像的名称，用于对图像的程序访问。l title：属性值为一字符串，鼠标指向图片时，鼠标右下角显示标题文本。：属性值为一字符串

26、，鼠标指向图片时，鼠标右下角显示标题文本。l alt：图像的替代文字：图像的替代文字 l border：设置图片边框。：设置图片边框。 l height和和width：分别用于设置图像的高度和宽度：分别用于设置图像的高度和宽度 l hspace和和vspace：分别用于设置图像的左右边框大小和上下边框大小。：分别用于设置图像的左右边框大小和上下边框大小。 l ismap和和usemap：在应用图像地图（：在应用图像地图（map）时使用。）时使用。 n事件属性事件属性 n重点难点重点难点l src属性的值，相对路径和绝对路径问题属性的值，相对路径和绝对路径问题l title属性，文本的回车换行属

27、性，文本的回车换行“
”或或“
”，对应回车（，对应回车（r）换行（）换行（n）的）的ASCII值值13和和10。例如：。例如： title= “图片名称：图片名称：
 泰山风光泰山风光l height和和width，正确方式是使用，正确方式是使用ps压缩图，提高下载速度，例如一些网上商店的图片压缩图，提高下载速度，例如一些网上商店的图片vertical vrtkl /vt-n. 垂直线垂直线, 竖向竖向, 垂直面垂直面adj. 垂直的垂直的, 顶点的顶点的horizontal horizontal | hrzntl /hrzntln. 水平线水

28、平线, 水平面水平面adj. 地平线的地平线的; 水平的水平的例题例题3-3图像属图像属性性.htmborder bdn. 边缘边缘, 边沿边沿; 边界边界, 国界国界, 边境边境; 饰边饰边, 滚边滚边; AbsBottom 图像的下边缘与同一行中最大元素的下边缘对齐。图像的下边缘与同一行中最大元素的下边缘对齐。 AbsMiddle 图像的中间与同一行中最大元素的中间对齐。图像的中间与同一行中最大元素的中间对齐。 Baseline 图像的下边缘与第一行文本的下边缘对齐。图像的下边缘与第一行文本的下边缘对齐。 Bottom 图图像的下边缘与第一行文本的下边缘对齐。像的下边缘与第一行文本的下边缘

29、对齐。 Left 图像沿网页的左图像沿网页的左边缘对齐，文字在图像右边换行。边缘对齐，文字在图像右边换行。 Middle 图像的中间与第一行图像的中间与第一行文本的下边缘对齐。文本的下边缘对齐。 NotSet 未设定对齐方式。未设定对齐方式。 Right 图像沿网图像沿网页的右边缘对齐，文字在图像左边换行。页的右边缘对齐，文字在图像左边换行。 TextTop 图像的上边缘图像的上边缘与同一行上最高文本的上边缘对齐。与同一行上最高文本的上边缘对齐。 Top 图像的上边缘与同一行图像的上边缘与同一行上最高元素的上边缘对齐。上最高元素的上边缘对齐。图文混排图文混排align属性取值属性取值练习一下吧

30、！练习一下吧！参见例题，程参见例题，程序序2-18.html参见课件参见课件P33例题，体会例题，体会absmiddle与与middle异同！异同！举例举例n在一个网页中，插入一副图片在一个网页中，插入一副图片dog.jpg，要去当鼠标移到图片，要去当鼠标移到图片上的时候，显示另一幅图片上的时候，显示另一幅图片cat.jpg，鼠标移走后重新显示图，鼠标移走后重新显示图片片dog.jpg。 n代码清单代码清单 n问题问题改变图片文件路径到改变图片文件路径到images文件夹文件夹参见参见例题与练习例题与练习例例题题3-3图像属性图像属性.htm超链接标记超链接标记n概念及功能概念及功能n分类分类

31、l文本超链接一般形式文本超链接一般形式u字符串字符串l图片超链接一般形式图片超链接一般形式un定义书签定义书签l书签文本书签文本例题例题3-4系列；补充系列；补充下载、邮件、锚点下载、邮件、锚点等链接。等链接。超链接标记超链接标记的属性的属性nhref属性取值属性取值l 一个网址，例如一个网址，例如首页首页l 一段一段javascript代码，例如：代码，例如：下一步下一步 l 关闭关闭nonclick属性属性l 接受鼠标单击，如果返回接受鼠标单击，如果返回true,则页面跳转到则页面跳转到href指定的网页，否则，不执行指定的网页，否则，不执行href属性所属性所定义的网页。例如：定义的网页

32、。例如：l l bbb ntarget属性属性l _self（相同框架），（相同框架），_blank（新建窗口），（新建窗口），_top（整页），（整页），_parent（父窗口），（父窗口），帧名帧名ntitle属性属性nDisabledl 使（超链接）失能（灰化，不可用）使（超链接）失能（灰化，不可用）超链接标记超链接标记的重点难点的重点难点nhref和和onclick的联合使用的联合使用n显示样式的定义显示样式的定义l超链接的显示超链接的显示l活动超链接的显示活动超链接的显示l已经访问过的超链接的显示已经访问过的超链接的显示表格（表格（Table）n表格及其功能表格及其功能l 数据组织数

33、据组织l 页面布局页面布局n表格、行、单元格标记表格、行、单元格标记n表格、单元格属性表格、单元格属性n重点难点重点难点l 表格的宽度设置，百分比表格的宽度设置，百分比 or 像素值像素值l 定义行高，定义行高，height属性用于属性用于，尽量不在，尽量不在l 定义单元格宽度，只在表格第一行的定义单元格宽度，只在表格第一行的中使用中使用width属性，最后一属性，最后一个单元格不设置个单元格不设置l 表格、单元格表格线（上、下、左、右）的定义表格、单元格表格线（上、下、左、右）的定义l 单元格间距单元格间距(cellspacing)、衬距、衬距(cellpadding)问题问题l 表格的水平

34、、垂直居中，表格嵌套表格的水平、垂直居中，表格嵌套caption (图片图片)说明文说明文字，字，(电影电影)字幕字幕margin n.页边空白；差额；页边空白；差额；余地，余裕；边，边缘余地，余裕；边，边缘举例举例1-表格的嵌套表格的嵌套n单元格中定义表格单元格中定义表格n举例举例表格居中表格居中实战，体会本题表格嵌实战，体会本题表格嵌套的目的！套的目的！举例举例2单元格中图片和文字的垂直居中单元格中图片和文字的垂直居中n在表格的单元格中，如果存在文字和图片混合内容，默认的在表格的单元格中，如果存在文字和图片混合内容，默认的显示是下边对齐。设置显示是下边对齐。设置的的valign=cente

35、r,不起作用不起作用n设置设置的的align=“absmiddle”（非（非middle）即可解决）即可解决教材例题教材例题3-5举例举例3表格的表格的tbody与标签式表格与标签式表格n标签式表格标签式表格n标记标记详解此题，代码见详解此题，代码见“例题例题3-6交互式标签表格交互式标签表格.html”！Cursor krsn. 指针指针; 游标游标此题有相当难度，要求：此题有相当难度，要求：1.全面读懂，不全面读懂，不仅仅是字面的解释，明确程序的执行细节！仅仅是字面的解释，明确程序的执行细节！2.写程序实现局部功能！写程序实现局部功能！作业：模仿此题作业：模仿此题实战，内容变为实战，内容变

36、为班级同学介绍！班级同学介绍！思考：这个题可以思考：这个题可以将导航标签竖着放将导航标签竖着放吗？为什么？吗？为什么？代码代码-表格标记表格标记-1tbody.htmcursor krsn. 指针指针; 游标游标表单表单Formn表单的概念及功能表单的概念及功能l 用户输入数据用户输入数据n标记标记l 用户交互用户交互l 表单标记表单标记 n标记主要属性标记主要属性l name属性，给出表单的名称，用于脚本编程属性，给出表单的名称，用于脚本编程 l method属性，定义服务器表单处理程序从表单中获得信息的方式属性，定义服务器表单处理程序从表单中获得信息的方式u get方法将数据打包放置在环境

37、变量方法将数据打包放置在环境变量QUERY_STRING中作为中作为URL整体的一部分传递给服务器。整体的一部分传递给服务器。 u post方法，使用方法，使用HTTP实体头域发送数据到实体头域发送数据到Web服务器，没有数量限制服务器，没有数量限制l action属性，设置表单处理程序的网络路径和程序名，当用户提交表单时，服务器将属性，设置表单处理程序的网络路径和程序名，当用户提交表单时，服务器将执行执行action属性所设置的程序。属性所设置的程序。l target属性，设置属性，设置action页面输出的窗口页面输出的窗口n重点难点重点难点l 使用表格进行表单布局使用表格进行表单布局l

38、Form标记标记target属性属性教材勘误：教材勘误：p101例题例题3-7代码中，代码中，radio之之name不一致！不一致！表单输入域表单输入域n单行文本框输入单行文本框输入n密码文本框输入密码文本框输入 n多行文本框输入多行文本框输入 nbutton按钮输入按钮输入 nradio单选钮输入单选钮输入 n复选框输入复选框输入n复选列表框输入复选列表框输入nhidden隐藏元素隐藏元素 n文件上传文件上传 n表单提交按钮标记表单提交按钮标记submit/reset 表单举例表单举例1上传文件上传文件n表单输入页面表单输入页面news-add.jspn服务端处理程序页面服务端处理程序页面n

39、ews-add表单页面表单页面news-add.jsp表单处理程序表单处理程序news-add层叠样式表层叠样式表CSS技术技术nCSS样式属性样式属性CSS对网页的控制是通过对网页的控制是通过CSS属性实现的，这些属性可以分为以下几类属性实现的，这些属性可以分为以下几类l字体属性字体属性l颜色和背景属性颜色和背景属性l文本间距与文本对齐属性文本间距与文本对齐属性l容器属性容器属性l列表属性列表属性l鼠标状态属性鼠标状态属性l定位属性定位属性l滤镜属性滤镜属性nCSS样式表定义样式表定义lHTML选择符选择符l类选择符类选择符lID选择符选择符l关联选择符关联选择符l组合选择符组合选择符l伪元

40、素选择符伪元素选择符n修改标记的默认显示样式修改标记的默认显示样式l在在内定义内定义样式，嵌入式样式表样式，嵌入式样式表l使用标记内连样式使用标记内连样式style属性，缺点是内容和样式混合，难于维护。属性，缺点是内容和样式混合，难于维护。l使用标记的使用标记的class属性属性lId属性属性CSS属性属性-1字体属性字体属性CSS属性属性-2颜色和背景属性颜色和背景属性 CSS属性属性-3文本间距与文本对齐属性文本间距与文本对齐属性CSS属性属性-4容器属性容器属性n容器是指其中可以包含内部元素、对象或数据的元素，如表格、单元格容器是指其中可以包含内部元素、对象或数据的元素，如表格、单元格等

41、，页面也是容器对象。等，页面也是容器对象。CSS中对这样的对象都统一用容器属性来控制。中对这样的对象都统一用容器属性来控制。它包括以下子类：边距属性、它包括以下子类：边距属性、 衬距衬距属性、边框属性和图文混排属性。属性、边框属性和图文混排属性。 CSS属性属性-4容器属性容器属性(Cont.)CSS属性属性-5列表属性列表属性CSS属性属性-6鼠标状态属性鼠标状态属性CSS属性属性-7定位属性定位属性CSS属性属性-8滤镜属性滤镜属性n在网页显示时，常常在网页显示时，常常希望所显示的图像或希望所显示的图像或文字有一些特殊的效文字有一些特殊的效果，果，CSS中的滤镜属中的滤镜属性就可以实现这一

42、要性就可以实现这一要求。滤镜的书写格式求。滤镜的书写格式如下：如下：filter:filtername(parameters)n其中其中filtername为滤为滤镜名，镜名，parameters为为参数表，不同的滤镜，参数表，不同的滤镜，所允许使用的参数也所允许使用的参数也不同。不同。 CSS样式表定义样式表定义nCSS表定义的一般形式表定义的一般形式nCSS选择符选择符lHTML选择符选择符l类选择符类选择符lID选择符选择符l关联选择符关联选择符l组合选择符组合选择符l伪元素选择符伪元素选择符CSS样式表定义的一般形式样式表定义的一般形式n样式表定义的一般形式是：样式表定义的一般形式是：

43、nn 选择符选择符属性名属性名:属性值属性值; 属性名属性名: 属性值属性值; nHTML选择符选择符n选择符为标记名，此时样式定义将替换标记的默认选择符为标记名，此时样式定义将替换标记的默认显示，任何显示，任何HTML标记都可以作为标记都可以作为CSS选择符。选择符。n举例举例 body margin-top:20px; overflow-x:hidden; pmargin:2px 4px 类选择符类选择符n一般形式一般形式HTML标记标记. 属性属性: 属性值属性值;属性属性: 属性内值属性内值. n例子例子l .word1 color: lime; background: #ff80c0

44、 l p.warning font-weight: bold; color: red; background: white n应用应用l 警告：警告：l Please turn off the power firstID选择符选择符 n一般形式一般形式HTML标记标记# 属性属性: 属性值属性值;属性属性: 属性内值属性内值. n例子例子l #help-tablel border:1px solid #0163A2;l cellspacing:5px;l cellpadding:px;l font-family:宋体宋体;l font-size: 12px;l color:#FF0000;l

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

46、D属性将匹配所属性将匹配所有有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概念概念关联选择符是有两个或更多的单个选择符组成的串，由于关联

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

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

49、。n个性化超连接的显示，可以定义下面的样式。个性化超连接的显示，可以定义下面的样式。 a color:#0000FF;font-size:12px;text-decoration:nonea:link color:#00FF00; text-decoration:nonea:visited color:#00FF00; text-decoration:nonea:hover color:#FF0000; font-weight:bold; text-decoration:nonea:active color:#0000FF; text-decoration:none 特别说明：特别说明：在在C

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

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

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

53、化要求：u 仿宋体，仿宋体，6号字，蓝色号字，蓝色泰山泰山u 加粗加粗泰山泰山u 斜体斜体泰山泰山l 上述格式化使用了三种标记上述格式化使用了三种标记n标记内联样式标记内联样式-style属性属性l 设置内联样式设置内联样式 l style=属性名属性名: 属性值属性值; 属性名属性名: 属性值属性值; . n例如：例如： 泰山泰山n缺点缺点l 内容和显示混杂内容和显示混杂方法方法3使用自定义样式类使用自定义样式类n使用用户自定义样式类使用用户自定义样式类class属性属性l CLASS属性用于指定标记使用的样式类。样式类可以关联一个标准的标记，属性用于指定标记使用的样式类。样式类可以关联一个

54、标准的标记，也可以用于任何标记。也可以用于任何标记。 l 用户样式类的定义（用户样式类的定义（类选择符类选择符）.属性名属性名:属性值属性值;属性名属性名:属性值属性值不指定标记的样式类为全局样式类，可以为所有标记的不指定标记的样式类为全局样式类，可以为所有标记的class属性使用。指定标记属性使用。指定标记的样式类只适用于该标记。的样式类只适用于该标记。l 例如例如 .word1 color: lime; background: #ff80c0 p.warning font-weight: bolder; color: red; background: white n举例举例l Please

55、 turn off the power firstl 警告：警告：方法方法4-使用使用ID选择符选择符nid属性属性lID属性用于定义一个元素的独特的样式。属性用于定义一个元素的独特的样式。ID值可值可以关联一个标准的标记，也可以用于任何标记。以关联一个标准的标记，也可以用于任何标记。 l一般形式一般形式#属性名属性名:属性值属性值;属性名属性名:属性值属性值l例如例如#location-table border:0px; cellspacing:0px; cellpadding:0px;#help-table border-left:1px solid #0163A2; border-bot

56、tom:1px solid #0163A2; border-top:1px solid #0163A2; border-right:1px solid #0163A2; 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-heig

57、ht:150%;background-color:#d0d0cf;n举例举例上述上述id设定用于每一个页面中的当设定用于每一个页面中的当前位置、帮助信息以及版权页角前位置、帮助信息以及版权页角的设定。在每一个页面中，这是的设定。在每一个页面中，这是一样的一样的页面设计效果页面设计效果使用使用id选择符和选择符和class选择符的不同选择符的不同nclass属性值为一个用户自定义的样式类，一个用户自定义的样式类可以属性值为一个用户自定义的样式类，一个用户自定义的样式类可以在多个标记中使用在多个标记中使用nid属性，用于标识一个标记，在一个属性，用于标识一个标记，在一个HTML文档中，不能有相同的

58、文档中，不能有相同的id号。号。这就如标记的这就如标记的name属性，不能重名，这可以从属性，不能重名，这可以从DOM模型来很容易理解，模型来很容易理解，通过通过getElementById 方法可以访问方法可以访问id所识别的对象。所识别的对象。n在布局思路上，一般坚持这样的原则：在布局思路上，一般坚持这样的原则：id是先确定页面的结构和内容，是先确定页面的结构和内容，然后再为它定义样式：而然后再为它定义样式：而class相反，它先定义好一类样式，然后再页面相反，它先定义好一类样式，然后再页面中根据需要把类样式应用到不同的元素和内容上面。中根据需要把类样式应用到不同的元素和内容上面。n在实际

59、应用时，在实际应用时，class更多的被应用到文字版块以及页面修饰等方面，而更多的被应用到文字版块以及页面修饰等方面，而id更多地被用来实现宏伟布局和设计包含块，或包含框的样式。更多地被用来实现宏伟布局和设计包含块，或包含框的样式。样式（样式（.css）文件）文件n样式（样式（.css）文件）文件l 如果要将这些样式应用到其他如果要将这些样式应用到其他HTML文档中，应该使用样式文件。即，文档中，应该使用样式文件。即，将这些样式定义存储在一个扩展名为将这些样式定义存储在一个扩展名为.css的样式文件中，的样式文件中，css文件可文件可以是一个标准的以是一个标准的HTML文件，只不过文件，只不过

60、为空。为空。 n使用使用css文件文件n重点难点重点难点l 文件命名要规范，例如：通用的样式文件文件命名要规范，例如：通用的样式文件mycommon.css,关于表格关于表格的样式定义文件的样式定义文件mytable.cssl 样式名要规范，便于阅读样式名要规范，便于阅读要在文档中引用外部样式，要在文档中引用外部样式，这个（在头部）必须有！这个（在头部）必须有！将某文件连接包含进来，属性将某文件连接包含进来，属性”rel”是是“关联关联”的类型的类型举例举例1定义通用样式文件定义通用样式文件mycommon.cssn文件名文件名mycommon.cssl 包含页面中常用的标记样式类定义，包括：包含页面中常用的标记样