HTML5+CSS3在触屏网站开发的实践与挑战

"本文主要探讨了HTML5和CSS3在构建触屏网站中的应用实践，作者在2011年进行了研究，分析了当时触屏设备的使用情况，并分享了在设计、架构以及前端开发中的一些关键技术和策略。文章提到了在触屏设备上如机票搜索、酒店搜索、团购、列车搜索、景点查询以及用户中心等功能的实现，同时讨论了整体架构和前端结构的选择。在前端技术方面，作者推荐采用混合方案，兼顾HTML5的语义化和性能优势，以及CSS3的视觉效果，同时也针对Nokia S60 V5等特定设备做了适配。此外，文章还涉及到了浏览器兼容性、屏幕自适应、事件响应、表单元素优化等问题，并分享了前端JavaScript的实践经验，包括对四大移动Web开发框架的评估以及基于jQuery的定制开发。" 在HTML5和CSS3的应用中，以下是一些重要的知识点： 1. **语义化HTML5**: HTML5引入了许多新的语义化标签，如`<header>`, `<nav>`, `<article>`, `<section>`, `<footer>`等，这有助于搜索引擎优化（SEO）和提高可访问性。 2. **CSS3选择器**: 使用`:first-child:last-child`, `:first-of-type`, `:last-of-type`等选择器可以更精确地控制元素样式，减少类的使用。`nth-child(n)`则用于创建斑马条纹效果。 3. **表单元素**: `type="tel"` 和 `type="search"` 提供了更好的输入体验，分别用于电话号码和搜索框，它们在支持的浏览器中会显示相应的键盘布局。 4. **屏幕自适应**: CSS3的媒体查询（Media Queries）是实现响应式设计的关键，可以根据设备视口宽度调整样式，以适应不同尺寸的屏幕。 5. **事件响应**: 触屏设备需要更大的点击区域来确保用户友好性。例如，按钮和链接的尺寸应适当增加，以便于触摸操作。 6. **浏览器兼容性**: 针对不完全支持新特性的老版浏览器，可能需要使用渐进增强或优雅降级策略，确保所有用户都能访问网站的基本功能。 7. **前端JavaScript框架**: 文章提到了iUI、jQTouch、Sencha Touch和jQuery Mobile等框架，它们各有优缺点。在实际项目中，需根据需求和UI风格选择合适框架，或自定义开发，例如，文中选择了jQuery作为基础，因为其相对成熟且易于定制。 8. **隐藏浏览器地址栏**: 在iOS和Android设备上，通过JavaScript可以实现自动隐藏地址栏，提升用户体验。但要注意不同平台可能有不同的限制和实现方法。 9. **日期选择和建议功能**: 对于移动设备，自定义日期选择器和建议输入（autocomplete）是常见需求，而现有的框架可能无法完全满足，因此可能需要进行额外的开发工作。 通过这些实践，开发者可以更好地理解如何利用HTML5和CSS3的优势来创建高性能、易用的触屏网站，同时处理好兼容性和用户体验的问题。虽然当时的技术环境与现在有所不同，但这些基本原理和实践经验依然具有很高的参考价值。