html5和css3的应用

HTML5与CSS3的应用-----微信网站页面设计使用高洛峰虽然我们现在已经普遍使用了HTML4和CSS2.1，但是我们还可以做得更好！我们可以重组我们代码的结构并能让我们的页面代码更富有语义化特性。我们可以缩减带给页面美丽外观样式代码量并让他们有更高的可扩展性。如今，HTML5和CSS3的技术和应用环境已经日趋成熟，它们将书写Web前端领域的新历史，HTML5将成为新一代的Web技术标准，必定会改变整个Web应用领域的游戏规则，它在给新的Web应用带来无限可能性的同时，还能带来更快、更好、更炫的用户体验。CSS3也将为Web开发带来革命性的影响，很多以前需要JavaScript和Ajax才能实现的复杂效果（如背景、圆角、3D动画，等等），现在使用CSS3就能简单地实现，极大地提高了程序的开发效率。HTML5和CSS3已经成为全球各大互联网巨头必争之地，Microsoft、Google、Apple、Mozilla、Opera等浏览器厂商对它们的支持犹如一场竞赛，似乎已经成为衡量它们的浏览器性能优劣的一个重要标准。1现在是用HTML5的时候近几年来，HTML5的大潮似乎是势不可挡。在桌面应用环境中，各大浏览器纷纷地朝着支持HTML5、结合HTML5的方向迈进着；在移动平台上，HTML5已经成为了iOS、WindowsPhone和Android移动互联网的唯一选择。放眼望去，仿佛四野皆充满着HTML5千秋万代一统江湖的高呼。HTML5是W3C与WHATWG合作的结果，WHATWG（WebHypertextApplicationTechnologyWorkingGroup）致力于web表单和应用程序，而W3C专注于XHTML2.0。在2006年，双方决定进行合作，来创建一个新版本的HTML。HTML5刚发布时由于各浏览器之间的标准不统一，开发者的时间都浪费在解决Web浏览器之间的兼容性上。但由于W3C和WHATWG对HTML5新版本的制定，以及近年来对HTML5的使用，再加上各大浏览器鼎力支持，已经有非常丰富的兼容性解决方案，HTML5在老版本的浏览器上也可以正常运行，正是因为保障了兼容性才能让人毫不犹豫的用HTML5开发网站。HTML5的目标是将Web带入一个成熟的应用平台，在HTML5平台上，视频、音频、图像、动画，以及同电脑的交互都被标准化。另外，HTML5内部并没有封装什么很复杂的、不切实际的功能，而是封装了简单实用的功能，HTML5内部功能不是革命性的而是发展性的，并不代表HTML4创建出来的网站必须全部要重建，只会要求各Web浏览器今后能正常运行用HTML5开发出来的功能。虽然HTML5还有一些不足，但HTML5应用已经是大势所趋，HTML5已经开始提供各种各样Web应用上的解决方案。最新版本的Safari、Chrome、Firefox以及Opera支持某些HTML5特性。IE9将支持某些HTML5特性，IE10将全面支持HTML5。IE8及以下IE版本对HTML5标签的支持是有限的，我们可以通过在网页中添加脚本的方式来解决目前IE浏览器对HTML5支持的问题。让IE（包括IE6）支持HTML5元素，我们需要在HTML头部添加以下JavaScript，Opera，FireFox等其他非IE浏览器就会忽视这段代码，也不会存在http请求。上面这段代码仅会在IE浏览器下运行，还有一点需要注意，在页面中调用html5.js文件必须添加在页面的head元素内，因为IE浏览器必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。这个html5的js文件如果觉得这样会影响你的网页打开速度，你可以把html5的js文件直接下载下来让后上传到自己的服务器单独调用。1.1HTML4+CSS2与HTML5+CSS3区别互联网发展越来越快，有些东西总会要被取代，HTML4+CSS2将渐渐退出舞台，而HTML5+CSS3将取而代之，HTML5规范是2004年新成立的WHATWG工作组创立的；2006年W3C加入HTML，并于2008年发布了HTML5工作草案，2009年，XHTML2工作组停运；2010年HTML5开始解决实际问题，渐渐的各大浏览器厂家开始升自己的产品以支持HTML5+CSS3，HTML5得到了持续的完善，2012年HTML5完成规范编写工作。HTML5以HTML4为基础，对HTML4进行了大量的修改。学习HTML5则需要掌握HTML5与HTML4在基本语法上有什么区别；了解在HTML5中新增了哪些元素和属性，删除了哪些HTML4中的元素和属性，为什么要删除这些元素，用什么元素或方法来取代这些被删除的元素和属性；还需要掌握什么是全局属性；2HTML5语法的改变HTML5的一个很大的目标就是提高浏览器之间的兼容性，需要有一个统一的标准，因些HTML5重新定义了一套在现有HTML4基础上修改而来的语法，使它运行在知浏览器都能够符合这个通用标准。2.1HTML5中的标记方法HTML5的文件扩展符号内容类型(ContentType)保持不变的，扩展符仍然为“.html”或“.htm”，内容类型仍然为“text/html”。1.HTML5的DTD的声明在编写HTML5文档时，要求指定文档类型，以确保浏览器能在HTML5的标准模式下进行渲染。在HTML5中刻意不使用版本声明，一份文档将会适用于所有版本的HTML，非常简便，HTML5中的DTD声明方法如下：!DOCTYPEhtml在HTML5中不区分大小写，引号不区分是单引号还是双引号。2.设置页面字符编码在HTML5中可以使用对meta元素直接追加charset属性的方式来指定字符编码，如下所示：metacharset=”UTF-8”从HTML5开始，对于文件的字符编码推荐使用UTF-8。2.2HTML5做到了与之前版本的兼容为了保证HTML5能与之前的HTML版本达到最大的兼容，HTML5对一些元素标记的省略、boolean值的属性，以及引号的省略这几方面进行了兼顾，确保与之前版本的HTML达到兼容。1.可以省略标记的元素元素的标记分为三种情况：不允许写结束标记的元素，可以省略结束标记的元素和开始标记结结束标记都可省略三种类型。不允许写结束标记的元素是指不允许使用开始标记和结束标记将元素括起来的形式，例如，换行标记正确的书写方式为“br/”，而“br…/br”的书写就是错误的。可以省略全部标记的元素是指该元素可以完全被省略，当然被省略的标记还是以隐式的方式存在的，例如“html”元素省略不写时还是存在的。针对这三种情况的列举清单如表1-1所示：表1-1三种情况列举清单不允许写结束标记的可以省略结束标记的可以省略全部标记的br、hr、img、input、link、meta、base、param、area、col、command、embed、keygen、source、track、wbrLi、dt、dd、p、option、thead、tbody、tr、td、th、rt、rp、optgroup、colgroup、tfootHtml、head、body、colgroup、tbody2.具有boolean值的属性在html中有一些元素的属性，当只写属性名称而不指定属性值时，表求属性值为true,如果设置该属性值为false，则不使用该属性即可。另外，要想将属性值设定true时，也可以将属性名设定为属性值，或将空字符串设定为属性值。例如input元素中的disabled与readonly就是这样的属性。3.引号使用在html中使用属性时，属性值可以使用双引号，也可以使用单引号括起来，在HTML5中做了一些改进，当属性值不包括空字符串、“”、“”、“=”、单引号、双引号等字符时，属性两边的引号是可以省略的。2.3HTML5语法改变的简单示例在这个示例中，将前面介绍的几个HTML5应用方法集成到本例中，另外，没有特别说明使用什么浏览器，本章默认使用的都是Firefox4浏览器。代码演示结果如图3-1所示：3HTML5新增的元素和废除的元素HTML5提供了一些新的元素和属性，反映典型的现代用法网站。其中有些是技术上类似div和span标签，但有一定含义，例如nav（网站导航块）和footer。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。同时为其他浏览要素提供了新的功能，通过一个标准接口，如audio和video标记。还有一些过时的HTML4标记将取消，其中包括纯粹用作显示效果的标记，如font和center，因为它们已经被CSS取代，还有一些是透过DOM的网络行为。3.1新增的结构元素曾经，网页编写经常会跟频繁使用基于table的没有任何语义的布局。不过最终还是慢慢的接受了相对更语义化的div布局替代了table布局，并且开始调用外部样式表。但不幸的是，复杂的网页设计需要大量不同的标签结构代码，我们把它叫做“div-soup”综合症。我们可以重组我们代码的结构并能让我们的页面代码更富有语义化特性。我们可以缩减带给页面美丽外观样式代码量并让他们有更高的可扩展性。现在，HTML5和CSS3正跃跃欲试的等待大家。下图是HTML4的DIV和HTML5新增标记布局的对比，如图1-1所示：图1-1DIV+CSS布局VSHTML5结构元素布局尽管这有些勉强，但上面这个实例还是可以说明使用HTML4对一个复杂的设计进行代码化后依然过于臃肿。不过值得激动的是，HTML5解决“div-soup”综合症并带给我们一套新的结构化元素。这些新的HTML5元素富有更细致的语义从而代替了那些毫无语义的div标签，并同时为CSS的调用提供了”自然”的CSS钩子。这种语义化的特性不仅提升了我们网页的质量和语义，并且大量减少了曾经代码中用于CSS必须调用的class和id属性。事实上，后面课程中介绍的CSS3也是可以忽略掉所有class和id的。结合了富有新的语义化标记的HTML5，CSS3为web设计师们的网页提供了神一般的力量。新增的结构元素及说明如下表1-2所示：表1-2新增的结构元素及说明元素名说明section表求页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分。它可以与h1、h2、h3、h4、h5、h6等元素结合起来使用，标示文档结构。article表示页面中的一块与上下文不相关的独立内容，例如博客中的一篇文章。aside表示article元素内容之外的，与article元素内容相关的辅助信息。header表示页面中一个内容区块或整个页面的标题。hgroup用于整个页面或页面中一个内容区块的标题进行组合。footer表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名，创建日期及创作者联系信息。nav表示页面中导航链接的部分figure表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元，使用figcaption元素为figure元素组添加标题。3.2HTML5表单增加的新特性在创建Web应用程序时，会用到大量的表单元素，在HTML5中关于表单给我们增加了很多诱人的属性，强化了表单元素的功能，使得关于表单的编写更快、更方便。先了解一下form的新属性，如表1-3所示：表1-3HTML5中form表单的新增属性属性名说明及示例支持浏览器from在HTML4中，表单内的从属元素必须书写在表单内部，但是在HTML5中，可以书写在页面上任何位置，只要给该元素指定一个form属性，属性值为该表单的id就可以了，这样做的好处是给页面中的元素添加样式时更方便。Opera10formaction在HTML4中，一个表单内的所有元素都只能通过表单的action属性统一提交到另一个页面，而在HTML5中可以给所有的提交按钮都增加不同的formaction属性，使得点击不同的按钮，将表单提交到不同的页面。没有浏览器支持formmethod在HTML5中可以使用formaction属性来