files/zh-cn/web/html/element/title/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

---
title: <title>
slug: Web/HTML/Element/title
tags:
  - HTML
  - HTML 文档元数据
  - Web
  - 元素
  - 参考
  - 窗口名称
  - 窗口标题
  - 页面名称
  - 页面标题
translation_of: Web/HTML/Element/title
---
<p id="Summary">{{HTMLRef}}</p>

<p><strong>HTML <code>&lt;title&gt;</code> 元素 </strong>定义文档的标题，显示在{{glossary("Browser", "浏览器")}}的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。</p>

<pre>&lt;title&gt;第十五届秋季运动会&lt;/title&gt;</pre>

<table class="properties">
 <tbody>
  <tr>
   <th><a href="/en-US/docs/Web/HTML/Content_categories">内容分类</a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">元数据内容。</a></td>
  </tr>
  <tr>
   <th>允许内容</th>
   <td>非空字符或特殊字符（{{glossary("whitespace")}}）的文本</td>
  </tr>
  <tr>
   <th>标签遗漏</th>
   <td>同时需要开标签和闭标签。注意：遗漏<code> &lt;/title&gt;</code> 标签会导致浏览器忽略掉页面的剩余部分。</td>
  </tr>
  <tr>
   <th>允许的父标签</th>
   <td>一个 {{ HTMLElement("head") }} 元素只能包含一个 {{ HTMLElement("title") }} 元素</td>
  </tr>
  <tr>
   <th>允许的无障碍角色</th>
   <td>无</td>
  </tr>
  <tr>
   <th>DOM 接口</th>
   <td>{{domxref("HTMLTitleElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="属性">属性</h2>

<p><span style="line-height: 21px;">这个元素只拥有</span><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">全局属性。</a></p>

<h2 id="使用说明">使用说明</h2>

<p>&lt;title&gt;元素始终在页面的 {{HTMLElement("head")}} 块内使用。</p>

<h3 id="页面标题和SEO">页面标题和SEO</h3>

<p>页面标题的内容可能对搜索引擎优化（{{glossary("SEO")}}）具有重要意义。 通常，较长的描述性标题要比简短或一般性标题更好。 标题的内容是搜索引擎算法用来确定在搜索结果中列出页面顺序的组件之一。 同样，标题是初始的“挂钩”，您可以通过它吸引浏览浏览结果页面的读者的注意力。</p>

<p>撰写好标题的一些准则和技巧：</p>

<ul>
 <li>避免使用一两个单词的标题。 对于词汇表或参考样式的页面，请使用描述性短语或术语-定义对。</li>
 <li>搜索引擎通常显示页面标题的前55至60个字符。 超出此范围的文本可能会丢失，因此请尽量不要使标题更长。 如果您必须使用较长的标题，请确保重要的部分出现在前面，并且标题中可能要删除的部分中没有关键内容。</li>
 <li>不要使用“关键字Blob”。 如果标题只是单词列表，则算法通常会降低页面在搜索结果中的位置。</li>
 <li>尝试确保您的标题在您自己的网站中尽可能唯一。 标题重复（或几乎重复）可能会导致搜索结果不准确。</li>
</ul>

<h2 id="示例">示例</h2>

<pre class="brush: html">&lt;title&gt;Amazing！&lt;/title&gt;
</pre>

<p>本示例建立一个页面，其标题（如显示在窗口顶部或在窗口的选项卡中）为“Amazing！”。</p>

<h2 id="无障碍问题">无障碍问题</h2>

<p>提供描述页面用途的标题值很重要。</p>

<p>辅助技术用户的常用导航技术是读取页面标题并推断页面包含的内容。 这是因为导航到页面以确定其内容可能是一个耗时且可能引起混乱的过程。</p>

<h3 id="示例_2">示例</h3>

<pre>&lt;title&gt;Menu - Blue House Chinese Food - FoodYum: Online takeout today!&lt;/title&gt;</pre>

<p>为了帮助用户，更新页面标题值以反映重大的页面状态更改（例如表单验证问题）。</p>

<h3 id="示例_3">示例</h3>

<pre>&lt;title&gt;2 errors - Your order - Blue House Chinese Food - FoodYum: Online takeout today!&lt;/title&gt;</pre>

<ul>
 <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html">Understanding Success Criterion 2.4.2 | W3C Understanding WCAG 2.0</a></li>
</ul>

<h2 id="Specifications" name="Specifications">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-title-element', '&lt;title&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-title-element', '&lt;title&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.2', '&lt;title&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>

<div class="hidden">
<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
</div>

<p>{{Compat("html.elements.title")}}</p>

<div id="compat-mobile"></div>