HTML5&CSS3 (第1版) Brian P Hogan PDF扫描

目录: Part I—Improving User Interfaces New Structural Tags and Attributes Tip 1 Redefining a Blog using Semantic Markup Tip 2 Creating Popup Windows with Custom Data Attributes Creating User-friendly Web Forms Tip 3 Describing Data with New Input Fields Tip 4 Jumping to the First Field with Autofocus excerpt Tip 5 Providing Hints with Placeholder Text Tip 6 In-Place Editing with ContentEditable Making Better User Interfaces with CSS3 Tip 7 Styling Tables With Pseudo Classes Tip 8 Making Links Printable with :after and content excerpt Tip 9 Creating Multi-Column Layouts Tip 10 Building Mobile Interfaces with Media Queries Improving Accessibility Tip 11 Providing Navigation Hints with ARIA Roles excerpt Tip 12 Creating An Accessible Updatable Region Part II—New Sights And Sounds Drawing on the Canvas Tip 13 Drawing a Logo Tip 14 Graphing Statistics with RGraph Embedding Audio and Video Tip 15 Working with Audio Tip 16 Embedding Video Eye Candy Tip 17 Rounding Rough Edges Tip 18 Working with Shadows, Gradients and Transformations Tip 19 Using Real Fonts Part III—Beyond HTML5 Working with Client-side Data Tip 20 Saving Preferences with LocalStorage Tip 21 Storing Data in Client-Side Relational Database Tip 22 Working Offline Playing Nicely With Other APIs Tip 23 Preserving History Tip 24 Talking Across Domains Tip 25 Getting Chatty with Websockets Tip 26 Finding Yourself: Geolocation Where To Go Next Features Quick Reference jQuery Primer Encoding Audio and Video Resources ### HTML5 & CSS3关键知识点解析#### Part I—改进用户界面#####新的结构标签与属性在HTML5中引入了许多新的结构标签和属性，以帮助开发者创建语义化更强、更具可读性的网页内容。这些标签包括``、``、``、``、``和``等，它们不仅增强了网页的结构性，还提高了可访问性。 **Tip 1：重新定义博客使用语义化标记**通过使用如``、``等标签来重新组织博客页面，可以提高页面的可读性和搜索引擎优化（SEO）的效果。 **Tip 2：利用自定义数据属性创建弹出窗口** HTML5中的`data-*`属性允许开发者添加任意的键值对到HTML元素中，这在创建弹出窗口时非常有用。 #####创建用户友好的Web表单HTML5为表单提供了许多新特性，如新的输入类型、验证功能等，使得表单的设计和使用更加便捷。 **Tip 3：使用新输入字段描述数据**例如，``和``等字段可以帮助用户更准确地输入数据，并自动进行初步验证。 **Tip 4：使用autofocus属性跳转至第一个字段**这个属性可以让表单的第一个输入框获得焦点，提升用户体验。 **Tip 5：使用占位符文本提供提示**通过`placeholder`属性可以在输入框中显示提示文字，帮助用户理解该输入框的用途。 **Tip 6：使用conteditable实现在位编辑**使任何HTML元素变得可编辑，从而实现富文本编辑器等功能。 #####使用CSS3改进用户界面CSS3引入了大量新特性和改进，使得样式设计更加灵活多变。 **Tip 7：使用伪类为表格添加样式**例如，`:nth-child(odd)`和`:nth-child(even)`可以用于交替行颜色。 **Tip 8：使用`:after`和`content`属性让链接可打印**通过这些属性可以添加额外的信息或图标到链接后面，使其在打印时仍然美观。 **Tip 9：创建多列布局** CSS3中的`column-count`属性可以轻松创建多列布局，无需复杂的表格或浮动技术。 **Tip 10：使用媒体查询构建移动界面**通过响应式设计原则，可以针对不同屏幕尺寸调整布局，实现更好的跨设备体验。 #####提高可访问性HTML5和CSS3中的一些特性能够帮助开发者创建对所有用户都友好的网站。 **Tip 11：使用ARIA角色提供导航提示** ARIA（Accessible Rich Internet Applications）属性可以帮助辅助技术更好地理解网页结构。 **Tip 12：创建可更新区域**通过使用ARIA的`role="region"`等属性，可以使动态内容更新更加无障碍友好。 #### Part II—新的视觉与声音#####在画布上绘制HTML5的``元素允许开发者直接在浏览器中绘制图形。 **Tip 13：绘制一个标志**使用JavaScript配合``元素可以轻松创建复杂图形。 **Tip 14：使用RGraph绘制统计数据** RGraph是一个开源库，可以用来在``上绘制各种图表。 #####嵌入音频和视频HTML5提供了内置的支持来嵌入音频和视频，而不再依赖于第三方插件如Flash。 **Tip 15：处理音频** ``标签使得添加音频文件变得简单，并且可以控制播放、暂停等功能。 **Tip 16：嵌入视频** ``标签同样提供了一种简便的方式来嵌入视频文件。 #####视觉效果CSS3带来了许多令人兴奋的新视觉效果。 **Tip 17：圆角边缘**通过`border-radius`属性可以轻松创建圆角效果。 **Tip 18：阴影、渐变和转换** CSS3的`box-shadow`、`linear-gradient`和`transform`属性可以创建丰富的视觉效果。 **Tip 19：使用真实字体** `@font-face`规则允许开发者在网页中使用自定义字体。 #### Part III—超越HTML5 #####处理客户端数据HTML5引入了一系列API来处理客户端数据。 **Tip 20：使用LocalStorage保存偏好设置** LocalStorage是HTML5提供的存储技术之一，可以永久存储数据。 **Tip 21：在客户端关系数据库中存储数据** `IndexedDB`是一种客户端数据库API，用于存储复杂的数据结构。 **Tip 22：离线工作** HTML5的`Application Cache`使得应用可以在离线状态下工作。 #####与其他API协同工作HTML5支持多种API之间的交互，以实现更强大的功能。 **Tip 23：保留历史记录** `History API`允许开发者修改URL并保留用户的浏览历史。 **Tip 24：跨域通信** `PostMessage API`使得不同源之间的窗口能够安全地进行通信。 **Tip 25：使用WebSockets进行实时通信** WebSockets提供了低延迟的双向通信通道，非常适合实时应用。 **Tip 26：定位服务** Geolocation API允许获取用户的位置信息。 ####总结《HTML5 & CSS3》这本书深入浅出地介绍了这些新技术的核心概念和实际应用场景，对于希望利用HTML5和CSS3开发现代网页的开发者来说，是一本不可或缺的参考书籍。通过本书的学习，读者不仅可以掌握最新的技术趋势，还能了解如何在不同的浏览器环境中高效地使用这些技术。