HTML5之美分析和总结.docxVIP

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