TA的每日心情 | 开心 2021-3-12 23:18 |
---|
签到天数: 2 天 [LV.1]初来乍到
|
眼下,HTML5和CSS3基本已经到来,但到目前为止,这些新技术仍有待各位开发者在靠谱的项目中加以实践应用。作为开发者,我们不会做例如“哪个标签最好”这样没有意义的讨论,眼下重要的是为迎接新的技术而树立全新的思维形态,并修正一直以来的编码习惯,尤其是坏习惯。 虽然HTML5和CSS3仍处于规范工作进程中,并且这种状态还会持续不少时间,但已经没有理由不开始用它们了!...毕竟,时间证明了,对于那些尚未 完成的规范(这里用了W3C对CSS2的规范作为例子)的贯彻和使用是可行 的,尤其是在“渐进增强(Progressive Enhancement)”与“优雅降级(Graceful Degradation)”这两个概念参与进来之后。 时不我待,若待必败。今天开始,我们将使用这些新技术来做些小试验,最终,我们将共同学习到以下技能
通过优雅降级的理念和技术使试验页面在低级浏览器中保持可访问性和可用性。
通过渐进增强的理念和技术使试验页面符合“最新潮流”。
HTML5与微格式技术配合使用。
对HTML5与CSS3带来的新功能有明确清晰的认识。
本教程假设读者至少拥有基础的HTML与CSS的知识技能,包括对过去常规的元素标签、选择器及属性的理解。
在我们开始使用HTML5和CSS3进行实战之前,必需对当前这个时期的一些现实状况有清楚的认识。 眼下,HTML5技术仍不是给所有人准备的,我们一定要实战中对“何时”和“怎样”使用新技术做到心知肚明;要对各种标记元素的特性有所了解,将它 们当作手头的工具,在正确的地方使用。 一个会发生的状况是,使用HTML5编写的页面会使整个站点处于一种“过渡”状态;即使页面可以被正确的渲染显示,浏览器也未必能像对待已成熟的标记代码那样来正确的理解新的代码;对于某些屏幕阅读器和搜索引擎来说,这样的状况也可能发生。 另外我们还需要明白,HTML5仍处于开发状态,而且它很可能是W3C所进行过的最具开放性的项目;身处大量的意见建议反馈以及天花乱坠的宣传之 中,目前的定义规范草稿仍会不停的变动,并很难预料变动的程度。 所以,如果我们决定切换到HTML5与CSS3的状态,并且很清楚我们所要使用的新技术在将来会向更好更精确的方向进行发展和改变,而且在技术更新时可以尽力修改曾经写过的代码,那么就让我们继续学习吧。
渐进增强(Progressive Enhancement) 渐进增强的概念是指从最基本的可用性出发,在保证站点页面在低级浏览器中的可用性和可访问性的基础上,逐步增加功能及提高用户体验。本质上讲,我们 日常的一些开发习惯,例如首先使用标记语言编写页面,然后通过样式表来控制页面样式等,都属于渐进增强的概念;其他更为明显的行为包括使用HTML5、 CSS3等新技术,针对高级浏览器为页面提高用户体验的丰富程度。 平稳退化(Graceful Degradation) 平稳退化的概念是指首先使用最新的技术面向高级浏览器构建最强的功能及用户体验,然后针对低级浏览器的限制,逐步衰减那些无法被支持的功能及体验; 在我们日常的开发中,一个典型的平稳退化的例子就是首先针对FireFox编写页面代码,然后修复IE中的异常或针对IE去除那些无法被实现的功能特色。 所以,这两个概念方法其实早已并存在我们的日常开发工作中了,只是“渐进增强”与“平稳退化”这样的措辞是近些年才开始被普及。在我们眼下的HTML5与CSS3实战中,这两个概念就尤其重要了,怎样保证使用不断变化的新技术来构建在主流浏览器下都具有基本可用性的站点,并针对高级浏览器进行体验提升,这些是我们在开发过程中需要明确的思路。 预热就到这里;在今天教程的最后,我们来看看接下来即将进行实战的页面设计缩略图:

我们可以看到,这是一个很基本的页面布局,几乎所有元素都可以使用HTML5来编写,例如页面标题、导航菜单、特色图文、文章列表、附加信息及外部链接 等。明天开始我们将针对这些部分来逐一学习。
|
|