Java EE Web应用开发基础-第3章-XHTML和CSS.ppt

《Java EE Web应用开发基础-第3章-XHTML和CSS.ppt》由会员分享，可在线阅读，更多相关《Java EE Web应用开发基础-第3章-XHTML和CSS.ppt（53页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、JAVA EE WEB应用开发基础Java EE WebJava EE Web应用开发基础应用开发基础（电子工业出版社）（电子工业出版社）杭州电子科技大学杭州电子科技大学 俞东进俞东进 任祖杰任祖杰第3章：XHTML和CSSXHTML概述XHTML常用标记XHTML表单CSS思考题XHTML概述HTML是一种基本的WEB网页设计语言 XHTML是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用更多的需求 XML是一种元标记语言，它提供了一个框架，根据这个框架可以定义众多的用于特定领域的标记语言 XHTML是基于XML的HTML版本 HTML5和XHTML2的竞争HTML5目标是取代

2、1999年所制定的HTML4.01和XHTML1.0标准，旨在提高网页性能，增加页面交互。HTML5吸取了XHTML2一些建议，包括一些用来改善文档结构的功能，比如，新的HTML标签header、footer、dialog、aside、figure等的使用，将使内容创作者更加语义地创建文档，之前的开发者在这些场合是一律使用div的。W3C与WHATWG双方经过多年努力，终于在2006年达成妥协。2006年10月，Web之父、万维网联盟（W3C）主席、美国国家科学院院士蒂姆伯纳斯-李（Tim Berners-Lee）发表了一篇博客文章表示，从HTML走向XML的路是行不通的（XHTML is d

3、ead）。2009年W3C明智的放弃了改进XHTML2.0标准的计划，选择了WHATWG的成果作为基础。事实上，XHTML在2002年更新之后的数年时间里，尽管发现了众多问题，但都没有去修改过。2011年，Google工程师兼HTML5标准编辑的Ian Hickson称，HTML5将是最后一个带版本号的HTML语言。他表示，HTML语言将成为一个活的标准。XHTML概述XHTML文档结构XHTML文档由三部分组成:声明、头部、主体，其中头部和主体组成文档部分 声明部分 其中，定义了文档使用的DTD版本、类型、下载位置等。声明部分位于XHTML文档的首行。XHTML概述XHTML文档结构文档部分

4、文档部分由.定义。这是HTML文档的开始标签和结束标签，所有XHTML文档内容都应该放在这个标签之间。标签可带xmlns属性：文档头部文档头部：由.定义的部分。这部分内容主要用来定义文档的相关信息，如文档标题、说明信息、样式定义、脚本代码等。文档主体文档主体：由.定义的部分。这部分内容就是要展示给用户的部分。它可以包含文本、图片、音频、视频等各种内容。XHTML概述XHTML文档结构创建一个简单的XHTML文档示例：网页标题-示例文档显示在浏览器中的内容在浏览器中打开结果如下图所示：XHTML概述XHTML文档的基本语法元素（Element）通过标签（tag）定义标签格式：起始标签，结束标签。

5、注释 浏览器忽略注释、无法识别的标签、换行、空格和tabsXHTML 元素必须被正确地嵌套。错误举例：This text is bold。正确示例：This text is bold。XHTML概述XHTML文档的基本语法元素必须要封闭属性必须要加上双引号明确所有的属性值属性名必须小写属性不能简写特殊字符要用编码表示XHTML概述XHTML和HTML的区别：XHTML要求正确嵌套XHTML所有元素必须关闭XHTML区分大小写XHTML属性值要用双引号XHTML用id属性代替name属性XHTML特殊字符的处理XHTML所有元素必须关闭段落标记符段落标记符表示段落的换行。常用的段落标记符有：p、

6、br、pre和hr。和是配对使用的表示强制换行，没有结束标签，单独使用使用以上两个标签的示例如下：锄禾日当午 汗滴禾下土 谁知盘中餐 粒粒皆辛苦产生结果如右图所示:XHTML常用标记段落标记符（续）和 为预格式化标记，它所标识的内容按原格式显示在浏览器中标记单独使用，实现段落的换行，并绘制一条水平直线，在直线的上下两段留出一定的空白 Hr可以使用style属性设置水平线的长度和粗细，其中width设置长度，height设置粗细XHTML常用标记标题标记符（hx）hx中x的取值为1-6，其中h1是最大标题，h6是最小标题标题的样式使用【style】属性中的【title-align】样式进行设置

7、使用hx的结果示例如下图所示：XHTML常用标记有序序列标记符（ol）和定义一个有序列表，在两个标记之间不允许有文本信息。和分别表示列表中每一个条目的开始和结束。使用示例如下：有序列表项1 有序列表项2 有序列表项3XHTML常用标记有序序列标记符（续）使用【style】属性的【list-style-type】来设置整个列表的项目序号，取值：decinal：十进制；loweralpha：小写英文字母upperalpha：大写英文字母lowerroman：小写罗马数字upperroman：大写罗马数字示例图如下：XHTML常用标记无序序列标记符（ul）标记ul的用法与 ol的用法相似，只不过是在

8、XHTML中产生一个无序列表。【style】属性的【list-style-type】有三种取值：“disc”：实心圆“circle”：空心圆“square”：小方块无序列表示例图如下：XHTML常用标记图片标记（img）img的使用方式:src表明图片的位置alt简要地说明图片，当鼠标停留在图片上时会显示该说明的内容【style】属性的width和heigth可以用来设置图片的宽度和高度，单位可以是像素，也可以是父标记大小的百分比 XHTML常用标记超链接标记符（a）标记a包含了href、id、target等常用属性 href：指定链接的目标文档的URLid：定义文档内创建的锚点，在实现页面内

9、链接target：目标窗口，指定如何显示链接的文件，取值有“_blank”和“_self”_blank：链接的内容在新浏览器中显示_self：在本窗口中显示链接内容XHTML常用标记超链接标记符（续）标记a有多种链接方式：页面内链接页面间链接链接到网站链接到邮箱链接到ftp站点链接到图片文件链接到浏览器不支持的文件XHTML常用标记表格标记符（table）table的一般表示形式：定义表头 定义表的行 定义表格单元border表示表格边框的粗细，单位为像素width表示表格的宽度，单位为像素或百分比XHTML常用标记表格标记符（续）用table标记创建的表格示例如下图所示：用table标记可以

10、创建跨越多行多列的表格XHTML常用标记表单的作用是在网页上提供一个图形用户界面，以采集和提交用户输入的数据 创建表单标记为 form标记有两个关键属性action和methodaction属性使用一个URL来指定表单处理程序的位置 method属性有两种值：get（默认）和post XHTML支持多种输入控件:文本框，单选框，图像等等 XHTML表单单行文本框（text）用于接收用户输入的信息，如姓名、地址等Text的常用属性有：name，id，size，maxlength和value口令输入框（password）接收用户输入的需要隐藏的数据 password的常用属性有：name，id，s

11、ize，maxlength和valueXHTML表单单选按钮单选按钮使得用户从一组选项中选择其中一个同一组中的单选按钮都有相同的值和属性其常用属性有：name，id，checked和value复选框复选框允许用户从一组事先确定的选项中选择一项或多项 其常用属性有：name，id，checked和valueXHTML表单滚动文本框（textarea）滚动文本框接收自由式的评论、问题或描述文本 其常用属性有：name，id，cols和rows选择列表选择列表使用容器标记（与标记一起）进行设置 允许访问者从一个事先确定的选择列表中选择一项或多项其常用属性有：name，id，size和multiple

12、XHTML表单重置按钮重置按钮用于恢复用户输入前的初始状态常用属性有：name，id和value提交按钮提交按钮用于提交用户输入的数据常用属性有：name，id和valueXHTML表单使用XHTML表单的综合示例 用户真实姓名:请填写您的个人简历（150-200字）：XHTML表单使用XHTML表单的综合示例（续）选择您有意向的工作岗位：软件开发 XHTML表单使用XHTML表单的综合示例（续）互联网开发 操作系统开发 其他 XHTML表单使用XHTML表单的综合示例（续）示例代码产生的结果如下图所示：XHTML表单CSS概述 CSS是一组格式设置规则，也是一种标记语言，可用于控制Web页面

13、的外观 通过使用CSS样式设置页面的格式，可实现页面内容与表现形式的分离 使用CSS有如下优点：更多排版和页面布局控制 样式和结构分离样式可以保存文档更小可保持Web文档的一致性，以方便网站维护 CSS样式表层次以及样式说明格式 CSS有三种样式表：内联样式、内部样式和外部样式 3种样式有不同的优先级，越接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义 样式表的一般形式为：选择符“属性1:值1;属性2:值2;属性n:值n”选择符可以是XHTML中的元素，如p，body等，也可以是类选择器，ID选择器等CSS样式表层次以及样式说明格式（续）内联样式（行内样

14、式）此样式直接将代码写入网页的主体部分该样式只应用于将它作为属性的特定元素中内部样式（文档层样式）在网页的页头部分进行定义此样式指令可用于整个网页文档此样式需要将样式表放置于head元素的style子元素中外部样式外部样式存放在单独的文本文件中。网页可以在头部使用标记链接到这一文本文件。CSS样式表层次以及样式说明格式（续）三种样式表的示例说明内联样式内联样式不要迷恋哥，哥只是个传说！不要迷恋哥，哥只是个传说！结果如下图所示：CSS样式表层次以及样式说明格式（续）三种样式表的示例说明内部样式使用内嵌样式的具体示例如下：内嵌样式这是1号标题看一下1号标题的显示效果吧！CSS样式表层次以及样式说明

15、格式（续）三种样式表的示例说明内部样式示例代码结果图CSS样式表层次以及样式说明格式（续）三种样式表的示例说明外部样式 外部样式 励志名言 弱者坐待时机，强者创造机会。成功的信念在人脑中的作用就如闹钟，会在你需要时将你唤醒。没有天生的信心，只有不断培养的信心。CSS样式表层次以及样式说明格式（续）三种样式表的示例说明外部样式style.css 文件的内容如下 p.big font-size:18pt;font-style:italic;font-family:宋体;p.small font:14pt bold 楷体;h2 font-family:隶书;font-size:24pt;font-w

16、eight:bold h3 font-family:华文彩云;font-size:18ptCSS样式表层次以及样式说明格式（续）三种样式表的示例说明外部样式结果如下图所示：CSSCSS的常用选择器使用CSS选择器可以实现对XHTML页面中的元素一对一、一对多或者多对一的控制。CSS常用的选择器分为：类型选择器、后代选择器、伪类以及群组选择器CSSCSS的常用选择器（续）类型选择器类型选择器用来选择特定类型的元素，并根据三种类型进行选择：ID选择器：根据元素ID进行选择类选择器：根据类名进行选择标签选择器：根据XHTML标签进行选择后代选择器（包含选择器）用来选择特定元素或元素组的后代 CSSC

17、SS的常用选择器（续）伪类类型伪类用于向某些选择器添加特殊的效果，比如鼠标悬停等 群组选择器当几个元素样式属性一样时，可以共同设置一个样式声明，元素之间用逗号分隔 除了以上选择器，CSS还有一些不常用的选择器，如子选择器与相邻同胞选择器，属性选择器等 CSSCSS属性CSS属性分7大类，共有60个属性。7大类分别是：fontlist-stylealignment of textmarginscolorbackgroundborderCSSCSS属性（续）font属性组合了font-style，font-variant，font-weight，font-size，line-height，font

18、-family font-family：设置元素的字体系列font-size：设置文本元素的字体大小font-style：设置文本元素的字体样式font-variant：设置字体的变化 font-weight：设置字体的粗细line-height：设置文本的行高 CSSCSS属性（续）list-style属性组合了list-style-image，list-style-position和list-style-type，适用于显示属性设置为列表项目的元素 list-style-image：将图像设置为有序或无序列表中的项目符号 list-style-position：设置有序或无序列表中的项目符

19、号相对于列表项目的位置 list-style-type：设置有序或无序列表中项目符号的类型 CSSCSS属性（续）text属性组合了text-align，text-decoration，text-indent和text-transform CSSCSS属性（续）margins属性设置元素的外边距大小。它包含margin-buttom，margin-left，margin-right，margin-top，分别对应的是下、左、右、上的外边距 color属性设置元素的前景颜色 CSSCSS属性（续）background属性组合了background-color，background-image，b

20、ackground-repeat，background-attachment和background-position background-color：设置元素的背景颜色 background-image：设置元素的背景图像 background-repeat：设置背景图像在页面上的平铺方式background-attachment：设置当用户水平或垂直滚动页面时背景图像是否随着滚动 background-position：设置背景图像在页面上的位置，必须同时指定水平和垂直位置 CSSCSS属性（续）border属性组合了border-width，border-style和border-col

21、or border-width：它可分为border-buttom-width，border-top-width，border-right-width，border-left-width，用于设置元素的下、上、右、左边框的宽度 border-color：设置元素边框的颜色border-style：设置元素四周的边框类型 CSS标签和标签标签当出现属性应用于某个元素会使得范围太大时，就可以使用标签标签 可定义文档中的分区或节 用作严格的组织工具，可把文档分割为独立的、不同的部分，但不使用任何格式与其关联 是一个块级元素，它的内容自动地开始一个新行 CSS标签和标签（续）一个使用 标签和标签的示例 span.redfont-size:24pt;font-weight:bolder;font-family:Ariel;color:red 使用span的示例 Now is the best time ever!Now is the best time ever!使用div的示例:看看我的效果 CSS标签和标签（续）一个使用 标签和标签的示例结果如下图所示：CSS使用CSS给Web页面开发带来什么好处？思考题