天天看点

《jQuery Mobile入门经典》—— 2.1 使用HTML创建内容

本节书摘来异步社区《jquery mobile入门经典》一书中的第2章,第2.1节,作者:【美】phil dutson,更多章节内容可以访问云栖社区“异步社区”公众号查看。

jquery mobile入门经典

html是web的基本构件。它是支撑整个网站的框架结构,也是让您随意扩展网站的基础。html自诞生以来已经取得长足的进步,并将继续演进和发展。

在层叠样式表单(css)引入之前,html标记处理所有东西。图像、文本、布局以及滚动的文本,几乎所有东西都由html标记来表示。您可能还记得在浏览器中查看源代码时,看到许多用于布局用途的   字符实体。

随着开发者热切期望探索新的领域并推动语言的发展,事情不断变得更加复杂。基于表格的布局出现了,使得在如何显示一个网站方面更具灵活性和操控性。表格布局广泛地流行开来。它使得能够设计灵活的、自动调整大小的版块以及更加动态的网页流。当时css还是新事物,它在浏览器中获得的支持还比较有限。这使得给容器和表单添加样式还比较困难。然后一些轻量的css开始引入,但还不能完全取代表格布局的容器、标记以及其他一些只用于样式的标记。

web开发者们不断地探寻浏览器渲染html的方式。这个进程以及开发社区采纳的标准帮助推动了各类可用的网络浏览器的进步。很快,大部分浏览器已经至少基本支持css 2。这很快引起了有关应该如何真正地在网站开发中使用html的大讨论。

在介绍了html发展历程之后,继续讨论doctype(文档类型)。这是一个有趣的标记,添加它的目的是让浏览器知道如何渲染页面。

尽管它实际上不是html标记,不过它是为了正确渲染和处理网站所需的组成部分。

对于那些仍然乐意使用不被推荐的html标记,但希望转到html 4的开发者,可以使用transitional文档类型。

《jQuery Mobile入门经典》—— 2.1 使用HTML创建内容

transitional文档类型允许浏览器解析不被推荐的标记并显示它们,不会抛出任何 错误。

对于那些不想支持不推荐的标记,也不想在使用“兼容”模式时产生潜在格式错误的开发者,可以使用strict文档类型

《jQuery Mobile入门经典》—— 2.1 使用HTML创建内容

使用strict文档类型会告诉浏览器,当它尝试载入的html文件中包含不被推荐的标记时,将抛出错误信息。这很有用,因为它保证网站至少适合html 4标准。

《jQuery Mobile入门经典》—— 2.1 使用HTML创建内容

有些javascript库的插件对网站是使用transitional文档类型还是strict文档类型比较敏感。如果在使用的javascript库或插件没有像与演示网站一样的方式运行,那么尝试改变doctype,看看它是否神奇地如预期一样开始工作。

对于当前希望迎合现代浏览器和移动浏览器的开发者来说,html5文档类型是理所当然的选择。

使用html5文档类型可以运行在几乎所有的老式浏览器上,而且现在的许多网站已经在使用了。

要在html文件中使用html5文档类型,可使用如下代码段。

《jQuery Mobile入门经典》—— 2.1 使用HTML创建内容

是的,这真的就是在网站使用html5文档类型所需的所有东西。没有什么疯狂的、冗长的或复杂的东西。

更惊喜的是,老式浏览器对此也有基本的支持。它不会把浏览器置于完全的怪异模式中,而是更多地使用部分怪异模式,通常不会打乱网站的格式。

在已将文档类型添加到页面之后,可以开始建立一个html文档的基本结构。程序清单2.1是一个使用html5文档类型的html文档所需的元素。

《jQuery Mobile入门经典》—— 2.1 使用HTML创建内容

如程序清单2.1所示,一个html文档的基本结构确实很简单。在第1行声明html5文档类型,使查看此文档的浏览器知道如何解析文档的其余部分。在第2行,以html元素开头。所有需要使用的有效的html标记都必须包含在此元素中。第3行包含了head元素的开始标记和结束标记。通常,head元素可包含title元素、meta标记、css文件的链接、javascript文件的链接和一些其他自定义的或特有的标记。第4行包含了body元素的开始标记和结束标记。body元素包含所有的结构,或者说网站的骨架。除了标准的html元素,如p、div和ul之外,body元素还可以包含内联的javascript和外部javascript的链接。第5行关闭了html元素且结束了html文档。

《jQuery Mobile入门经典》—— 2.1 使用HTML创建内容

直到所有在head元素调用的文件都下载完毕并放入内存,网页才会停止加载。如果在head元素中包含了大文件或加载缓慢的脚本,可能会给用户造成加载缓慢或无法加载的感觉。除非这些文件对网页的功能来说是必需的,否则最好把大的javascript文件放于body的结束标记之前。

当前对于正确地使用html与css的观点是采用内容与表现分离的形式。这是一个好主意,因为你可以轻松地创建主题,然后只需改变样式而不是内容,就可以改变网站的整体外观。一些网站遵循此模型,并且有多个不同的样式表,从而可以让用户切换网站的“主题”。

内容完全地(或者尽可能近乎完全地)由html进行处理,而任何影响数据显示或呈现给最终用户的方式的工作,则由css来处理。

曾经用于改变字体和文本显示方式的html标记在html 4中被弃用,现在将其替换为新标记,试图描述置于其中的内容。

下面是已被弃用但在html5中再次生效的元素。

继续阅读