本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.3节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
9.3 技巧：更改标题元素
一个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行完成了。你可以测试一下这个示例，看看会发生什么。
