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

本节书摘来异步社区《jQuery Mobile入门经典》一书中的第2章，第2.1节，作者：【美】Phil Dutson，更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.1　使用HTML创建内容

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

2.1.1 HTML的作用

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

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

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

2.1.2 DOCTYPE

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

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

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

a0ac969a50c37c09f72df43ec167629f7ff7b1cc

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

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

5976d914efa4594c33774a83f6e9df4b4188f88a

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

1886323184845e0edf541d45c6b17772271a4420

有些JavaScript库的插件对网站是使用Transitional文档类型还是strict文档类型比较敏感。如果在使用的JavaScript库或插件没有像与演示网站一样的方式运行，那么尝试改变DOCTYPE，看看它是否神奇地如预期一样开始工作。
对于当前希望迎合现代浏览器和移动浏览器的开发者来说，HTML5文档类型是理所当然的选择。

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

要在HTML文件中使用HTML5文档类型，可使用如下代码段。

b605de8d296827d07697f0e70d82aea9198c5d13

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

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

2.1.3 基本结构

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

462002a19dc83d3ec34cdb56d62a34ee5da5ee46

如程序清单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文档。

20c58a9af005b7c9a5725372533df2726ca8047f

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

2.1.4 内容与表现的分离

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

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

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

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

<b> 用于吸引注意。
<i> 用于声明一种可替代的语态或语气。
<s> 用于显示不再有效或有关的信息。```
通常使用div标记把代码分为多个部分。在这些标记内部是子部分，通常包含文本。文本通常组合成段落，包含在p标记中。HTML5还引入了许多新的标记，例如article和section元素，它们与div元素的作用类似。多个部分还可以使用新的header和footer元素进行分隔。

如果有多个项目需要在代码中列中，可以使用ol标记，把它们放入一个排序列表中，或者可以使用ul标记，放入无序列表中。显示在列表中的项目使用<li>标记作为列表项目添加。

HTML 4已经形成一种趋势，就是使用无序列表来创建导航部分。尽管这种方法在今天仍然在使用，但包括在HTML5中的内建导航标记将很快使得这种做法过时。

下面来复习一下刚刚学到的关于HTML的知识并把一些内容放入基本的HTML结构。程序清单2.2展示了一个包含内容但没有任何样式的HTML文档。

程序清单2.2 nostyles.html的全部文本
<div style="text-align: center"><img src="https://yqfile.alicdn.com/2df4434172089a03514e6da3601221547bfd8e67.png" width="" height="">
</div>

可以看到，在网页中添加了一些内容，下面来看看具体添加了哪些内容。

在第4行，添加了一个title元素，置于其中的值正好描述了title元素应当包含的内容。

下一个有添加的地方是第8行，添加了一个div的开始标记。常常会发现div标记用来包含网站的不同部分，就像我们在这里做的一样。

在第9行，放入了一个h1元素。这个元素用来标记网页中最重要的内容。正因为如此，任何置于h1元素中的文本大小通常是标准文字大小的2倍。

在第10行，在一个p元素中设置了一些文本。这会使用默认的外边距与内边距来显示文本。每一款浏览器应用其默认的外边距与内边距大小，因此如果想实现相同的、跨浏览器的显示效果，需要在CSS中覆盖默认的样式。

第11行展示了一个无序列表的开始部分，使用ul开始标记。第12行是一个li元素。li元素代表的是列表项目，是ul元素的子元素。这意味着，如果没有ul元素的包围，li元素是无效的。

第15行是另一个p元素的例子，第16行关闭了div元素。

我们知道代码会做什么，但还是让我们看看实际看起来什么样。图2.1展示了渲染后的HTML看起来的样子。
<div style="text-align: center"><img src="https://yqfile.alicdn.com/1590e384e4d97806cfad99c67feee9d570d31524.png" width="" height="">
</div>

您可能已经听说过“浏览器重置”或“CSS重置”样式。这很常见，因为每一款浏览器都有其应用到每一个HTML元素的默认的规则或样式。为了理解这个问题，可以在多个浏览器中查看H1标记。应该会注意到每一款浏览器在渲染此标记时，文字大小有细微的差别，而且可能有或可能没有加粗显示。