《HTML5与CSS3实战指南》——第2章 HTML5样式的标记2.1 The HTML5 Herald简介

第2章 HTML5样式的标记

我们已经向您介绍了关于HTML5历史的一些基本知识,以及学习它的重要性。现在,我们将在您的项目中开始使用它。首先向您介绍我们将在本书中逐步创建的示例网站。

在简单介绍了我们将创建的示例网站之后,我们将讨论一些HTML5的基本语法知识,以及编码最佳实践的一些建议。我们将遵循浏览器兼容性及HTML5页面结构基本原理等一些重要原则。最后,我们向您介绍一些HTML5特有的元素,以及如何使它们适应布局。

现在开始吧!

2.1 The HTML5 Herald简介

我们首先从头开始创建一个示例网站项目。
这是一个老式的报纸风格的网站,名为The Html5 Herald。网站的主页包含一些以视频、图片、文章和广告形式呈现的媒体,而且在另一个页面上包含一个注册表。

我们来看一下源代码,如果愿意可以尝试一些功能。在我们学习本书时,我们将通过编写代码来制作网站。我们不可能涉及有关CSS的每一个细节,因为您可能已经熟悉了大部分内容:浮动布局、绝对和相对定位,以及基本字体样式等。我们将主要介绍HTML5的新增元素、API,以及所有用于为各种元素添加样式及互动的新CSS技术。

图2.1所示为已创建网站的外观示意。

构建网站时,我们会详细解释HTML5的新增元素、API以及CSS3的新功能,同时,我们也将向您推荐一些最佳实践。当然,其中的一些新技术还在开发中,所以我们不可能武断地告诉您这些技术可以做什么,以及不可以做什么。

时间: 2024-10-31 11:52:21

《HTML5与CSS3实战指南》——第2章 HTML5样式的标记2.1 The HTML5 Herald简介的相关文章

《HTML5与CSS3实战指南》——1.4 什么是CSS3

1.4 什么是CSS3 HTML5与CSS3实战指南创建网页的另一个独立的但并非不重要的一部分是层叠样式表(CSS).正如您所了解到的,CSS是一种样式语言,用来描述如何呈现或设置HTML标记样式.CSS3是CSS规范的最新版本.术语"CSS3"不仅是CSS新功能的参考文献,也是CSS规范发展进程的第三级1. CSS3包含CSS2.1(CSS规范的前一版本)的所有内容.它还添加了一些新功能来帮助开发人员解决一些问题,并不再需要非语义标记.复杂的脚本及其他图像.CSS3的新功能包括支持附

《HTML5与CSS3实战指南》——第1章 HTML5和CSS3简介1.1 什么是HTML5

第1章 HTML5和CSS3简介 本章将简要回顾HTML5和CSS3的发展历程,并介绍HTML5和CSS3对于现代网站及Web应用程序的重要性,以及如何应用这些技术. 当然,如果您希望直接进入创建项目的实质部分,并开始学习如何使用HTML5和CSS3的新技术及功能,您可以先跳到第2章,稍后再回到本章. 1.1 什么是HTML5 我们今天所理解的HTML5,它具有一段相对动荡的历史.您可能已经了解到HTML是万维网上用于描述网页内容及数据的主要标记语言.HTML5是此标记语言的最新版本,它包括新功

《HTML5与CSS3实战指南》——2.2 基本的HTML5模板

2.2 基本的HTML5模板 在您学习HTML5和新技术时,您可能想创建自己的蓝图或示例文件,并通过它们来构建基于HTML5的项目.实际上,您可能对已存在的XHTML或HTML4.0项目已经做了类似的事情.我们鼓励您这样做,当然您也可以考虑使用一些在线资源,从而为您提供一个HTML5的基本起点1. 在这个项目中,我们将从头开始,编写自己的代码,并对每一部分进行详细讲解.当然,即使是最好.最庞大的示例网站也不可能包含所有的新元素和技术.我们也会详细讲解一些未在我们所创建的示例网站中应用的新功能.这

《HTML5与CSS3实战指南》——2.3 HTML5常见问题

2.3 HTML5常见问题 在简要介绍了HTML5标记以后,您可能会有一些问题.以下是一些常见问题的答案. 2.3.1 为什么这些变更仍能够在旧版浏览器中工作 这是许多开发人员难于接受HTML5的地方.其实这根本不是问题,为了便于读者理解,我们会将HTML5和CSS3的一些新功能(后面章节将介绍)进行对比. 在CSS中,在添加新功能时(例如,border-radius属性将圆角添加到元素中),同时也需要将它添加到浏览器呈现引擎中,因此旧版浏览器无法识别它.所以,用户在使用不支持border-ra

《HTML5与CSS3实战指南》——1.6 在现实中,我们想做的是什么

1.6 在现实中,我们想做的是什么 在现实中,我们不会创建了一个网站后,然后去做另一个项目,而对前一个项目的工作置之不理.我们会创建Web应用程序,并对其进行更新.微调,对其潜在的性能问题进行测试,调整其设计.布局和内容. 换句话说,在现实中,我们都会再次访问我们所写的代码.所以我们编写代码时,会使用最可靠.易于维护并高效的方法,并便于以后访问代码对其进行必要的完善和修改.显然,这不仅对我们自己创建和维护的网站及Web应用程序十分重要,同样,也对为我们客户所创建和维护的网站及Web应用程序同等重

《HTML5与CSS3实战指南》——1.7 实际应用

1.7 实际应用 推出新技术并希望此技术只为某一级别的浏览器提供编写网页和应用程序的服务,这显然是不现实的.在现实世界中,我们希望HTML5和CSS3取得进一步的发展,所以我们要使它们能够在各种平台上开发网页.这种平台包括现代浏览器.Internet Explorer的早期版本以及正在蓬勃发展的移动设备市场. 在某些时候,可以为不同的用户代理提供不同的指令,但这类似于早期具有混乱的浏览器嗅探和代码分叉的Web.但是这一次不一样,新代码是面向未来的,所以当旧版浏览器不能正常使用时,您仅需删除回调和

《HTML5与CSS3实战指南》——2.6 小结

2.6 小结 这就是本章的内容.我们已经学习了HTML5的内容结构基础,并且开始用我们所学到的知识创建了我们的示例项目. 在下一章中,我们将详细介绍在HTML5中如何处理不同类型的文章.然后,在处理更多新HTML元素时,将继续在我们的网页上添加语义元素.

《HTML5与CSS3实战指南》——2.4 定义页面结构

2.4 定义页面结构 现在我们已经了解了模板的基础知识,下面将开始介绍详细信息,为网页指定一些基本结构. 在本书后面的章节中,我们将深入介绍添加CSS3功能和其他HTML5的精华.现在,我们将考虑在网站总体布局方面应使用哪些元素.我们将在本节以及后面的章节介绍语义.当使用这个术语时,我们指的是用指定的HTML元素名称来描述其内容的方式.由于HTML5包含一系列广泛的语义元素,因此您会发现,与过去使用HTML4或XHTML的时候相比,多花了一些时间思考内容结构及含义.非常好!理解了内容的意思才能够

《HTML5与CSS3实战指南》——2.5 构建The HTML5 Herald

2.5 构建The HTML5 Herald 我们已经介绍了页面结构的基础以及在此方面非常有帮助的HTML5元素.现在我们将开始创建有内容的网页部分. 使用header元素,从顶部开始.首先在此包含徽标.名称以及标语.我们还可以在网站导航中添加nav元素. 在添加header元素后,网站的内容被分为3列.在您使用section元素时,可以停下来思考其内容.如果每一部分包含一个独立的"部分"信息(比如体育部分和娱乐部分),那将非常有意义.因为,分成独立的栏目仅是一个可视化的安排-所以在每