JavaEEWeb应用开发基础-第3章-XHTML和CSS.ppt

HTML5和XHTML2的竞争 　HTML5目标是取代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 dead）。2009年W3C明智的放弃了改进XHTML2.0标准的计划，选择了WHATWG的成果作为基础。事实上，XHTML在2002年更新之后的数年时间里，尽管发现了众多问题，但都没有去修改过。 　　2011年，Google工程师兼HTML5标准编辑的Ian Hickson称，HTML5将是最后一个带版本号的HTML语言。他表示，HTML语言将成为一个活的标准。 重置按钮 重置按钮用于恢复用户输入前的初始状态 常用属性有：name，id和value 提交按钮 提交按钮用于提交用户输入的数据 常用属性有：name，id和value XHTML表单 使用XHTML表单的综合示例 form action= method=get div label 用户真实姓名: input type=text name=username size=20 / /label br / label 请填写您的个人简历（150-200字）： XHTML表单 使用XHTML表单的综合示例（续） br / textarea name=resume rows=15 cols=60/textarea /label br / 选择您有意向的工作岗位： label input type=checkbox name=IT value=software 软件开发 /label XHTML表单 使用XHTML表单的综合示例（续） labelinput type=checkbox name=IT value=Web 互联网开发 /label labelinput type=checkbox name=IT value=OS 操作系统开发 /label labelinput type=checkbox name=IT value=other 其他 /label br /br / input type=submit name=doit value=提交个人简历 / /div/form XHTML表单 使用XHTML表单的综合示例（续） 示例代码产生的结果如下图所示： XHTML表单 CSS概述 CSS是一组格式设置规则，也是一种标记语言，可用于控制Web页面的外观 通过使用CSS样式设置页面的格式，可实现页面内容与表现形式的分离 使用CSS有如下优点： 更多排版和页面布局控制 样式和结构分离 样式可以保存 文档更小 可保持Web文档的一致性，以方便网站维护 CSS 样式表层次以及样式说明格式 CSS有三种样式表：内联样式、内部样式和外部样式 3种样式有不同的优先级，越接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义 样式表的一般形式为： 选择符{ “属性1: 值1; 属性2: 值2; … 属性n: 值n”} 选择符可以是XHTML中的元素，如p，body等，也可以是类选择器，ID选择器等 CSS 样式表层次以及样式说明格式（续） 内联样式（行内样式） 此样式直接将代码写入网页的主体部分 该样式只应用于将它作为属性的特定元素中 内部样式（文档层样式） 在网页的页头部分进行定义 此样式指令可用于整个网页文档 此样式需要将样式表放置于head元素的style子元素中 外部样式 外部样式存放在单独的文本文件中。网页可以在头部使用link /标记链接到这一文本文件。 CSS 样式表层次以及样式说明格式（续） 三种样式表的示例说明 内联样式 htmlheadtitle内联样式/title/head body h2 style=font-family: 宋体;font-size: 20pt; font-weight: bold不要迷恋哥，哥只是个传说！/h2 h3 style=font-family: 仿宋; f