美轮美奂的html5.docVIP

HTML5之美　?? 从HTML4诞生以来，整个互联网环境、硬件环境都发生了翻天覆地的变化，开发者期望标准统一、用户渴望更好体验的呼声越来越高。20年磨一剑，HTML5作为下一代Web标准，它的新特性正在每个新式浏览器的版本中快速的得到支持和体现。随着HTML5和CSS3的发展和完善，Web应用程序正在逐渐的表现出桌面应用的性能和功能，和桌面应用之间的区别将越来越模糊。未来不能用HTML5来实现的功能将越来越少，未来绘图、视频编辑、3D建模等也将从单机软件转到浏览器上通过Web应用程序来实现。 　　下文，我将结合实例，谈谈激动人心的HTML5之美。 　　1、语义之美 　　语义化很美，在合适的地方使用合适的标签，把人和机器一视同仁。书写语义化的页面就像建造符合工业标准的建筑，阅读语义化的页面像阅读一本你熟识的优美著作。 　　HTML5的语义化标签包括： section - 代表文档中的一段或者一节； nav - 用于构建导航； article - 表示文档、页面、应用程序或网站中一体化的内容； aside - 代表与页面内容相关、有别于主要内容的部分； hgroup - 代表段或者节的标题； header - 页面的页眉； footer - 页面的页脚； time - 表示日期和时间； mark - 文档中需要突出的文字。 　　和采用css+div进行页面布局的方式相比，这些新标签明确的表现了页面元素的结构和含义。下面的代码展示了这样的一个示例： !DOCTYPE html html head meta charset=utf8 titleHTML5/title link rel=stylesheet href=html5.css /head header h1Title/h1 h2Subtitle/h2 /header aside nav h2Nav1/h2 ul liLink1/li liLink2/li /ul /nav nav h2Nav2/h2 ul liLink3/li liLink4/li /ul /nav /aside article header hgroup h1HTML5 is beautiful/h1 h2Semantic, Natural, Simple and Useful/h2 /hgroup /header section h2Semantic/h2 pHTML5 is Semantic./p /section section h2Natural/h2 pHTML5 is Natural./p /section /atricle footer a href=/TR mce_href=/TRW3C/a /footer /html 　　相当简单和清晰，我可以不添加任何注释，人和机器都明白它所要构建的结构和内容。 　　目前主要浏览器的新版本都支持HTML5语义化标签（下图从左到右依次为IE、Chrome、Firefox、Opera、Safari、QQ浏览器5）。 　　2、人性之美 　　HTML5设计理念中的通用访问体现了人性化之美。通用访问包括可访问性、媒体中立和国际化支持三个概念。可访问性考虑了对残障用户的支持，媒体中立为所有的平台和终端上（例如Android和iPhone的平台上）建立统一标准；而国际化的支持体现在不同的语言和书写习惯上。 　　就像CSS3中对国际化的支持体现在padding-start, padding-end（在Chrome新版本的设置中心中可以看到它的应用）等新属性一样，HTML5引入了Ruby标签。Ruby标签允许为一个或者多个文本添加附加注释（其命名来源于Ruby字符），例如下面的代码： pHello, ruby rbHTML5/rb rp(/rp rtHyper Text Mark-up Language 5/rt rp) /rp /ruby /p 　　显示的文本如下： 　　Ruby标签在中文、韩文和日文教科书和古文中非常有用，读者们可以方便了解文本的详细读音和含义。下面的诗句很美，而HTML5更美。 　　有趣的是在IE、Firefox或Opera中复制粘贴上面的文本到编辑器中，会显示下面的文本，这是因为rp标签的特殊作用：允许在不支持Ruby标签的浏览器中优雅的降级，同时支持非格式化的复制和粘贴。 　　死生 契 (读音： qì ) 阔 (读音： kuò ) ，与子成说。执子之手，与子偕老。 　　目前主要浏览器的新版本对于Ruby标