本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.3节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
一个HTML文件只能包含一个title元素。当你在一个HTML文件中准备了多张页面时，会导致不想要的行为。在一个HTML文件中的页面可能需要它们各自的HTML标题。
代码清单9-3演示了如何在一个HTML文件中为不同的页面提供不同的标题。
代码清单9-3 为每张页面提供各自的标题
00 <!DOCTYPE html> 01 <html> 02 <head> 03 <title>Page Title</title> 04 <meta name="viewport" 05 content="width=device-width, initial-scale=1"> 06 <link rel="stylesheet" href= 07 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"> 08 <script type="text/javascript" 09 src="http://code.jquery.com/jquery-1.7.1.min.js"> 10 </script> 11 <script type="text/javascript" src= 12 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"> 13 </script> 14 </head> 15 <body> 16 17 <div data-role="page" id="first" data-title="My First Title"> 18 <!-- Title not set at first loading! If left out: original 19 title, otherwise the specified--> 20 21 <div data-role="header"> 22 <h1>First</h1> 23 </div> 24 25 <div data-role="content"> 26 <p><a href="#second">and go to the second</a></p> 27 </div> 28 29 </div> 30 31 <div data-role="page" id="second" data-title="My Second Title"> 32 33 <div data-role="header"> 34 <h1>Second</h1> 35 </div> 36 37 <div data-role="content"> 38 <p><a href="#first">and go to the first</a></p> 39 </div> 40 <!-- how about a back button?? --> 41 </div> 42 43 </body> 44 </html>在第3行，你看见了默认的title元素。该标题默认就会加载。在第17行和第31行，你发现每张页面都有特定的标题。一旦导航至第二张页面，浏览器的标题就会更改为第31行指定的data-title属性值。
当按下回退按钮时，标题会重新回到第3行的默认标题。如果想得到第17行的data-title属性指定的标题，需要创建一个链接来指向第一张页面。这由第38行完成了。你可以测试一下这个示例，看看会发生什么。
相关资源：敏捷开发V1.0.pptx