: 文档标题标签</h1> <p class="page-updated">最后更新:2026-09-12</p> <h2><title>文档标题标签</h2> <p class="tutorial-intro">定义文档的标题,显示在浏览器标签页和搜索引擎结果中;每个 HTML 文档应且只能有一个 title,且必须放在 head 内。</p> <div class="tag-quickinfo"><table class="ref-detail-table"><tbody> <tr><th>分类</th><td><span class="tag-badge badge-cat">元数据</span></td></tr> <tr><th>内容模型</th><td>仅允许在 head 内</td></tr> <tr><th>允许的父元素</th><td>接受流式内容的元素</td></tr> <tr><th>闭合标签</th><td>需要 <code></title></code> 标签</td></tr> <tr><th>状态</th><td><span class="tag-badge badge-stable">标准</span></td></tr> </tbody></table></div> <h2 id="syntax">📝 语法</h2> <pre class="ref-syntax-block"><code class="language-html"><title>页面标题</title></code></pre> <div class="ref-attr-links"> <a href="/cn/html/reference/global-attributes.html" class="ref-attr-link">查看所有全局属性 →</a> <a href="/cn/html/reference/event-attributes.html" class="ref-attr-link">查看所有事件属性 →</a> </div> <h2 id="example" class="example-heading">▶ 示例</h2> <p class="tryit-intro">编辑下方代码,在 playground 中查看实时效果:</p> <div class="tryit-wrapper"><iframe class="tryit-iframe" src="/html/editor.html?lang=zh&mode=playground&embed=1&code=%7B%22html%22%3A%20%22%3C%21--%20%E6%96%87%E6%A1%A3%E6%A0%87%E9%A2%98%20--%3E%5Cn%3Chead%3E%5Cn%20%20%3Cmeta%20charset%3D%5C%22UTF-8%5C%22%3E%5Cn%20%20%3Ctitle%3E%E6%88%91%E7%9A%84%E7%AC%AC%E4%B8%80%E4%B8%AA%E7%BD%91%E9%A1%B5%3C%2Ftitle%3E%5Cn%3C%2Fhead%3E%22%2C%20%22css%22%3A%20%22%22%2C%20%22js%22%3A%20%22%22%7D" sandbox="allow-scripts allow-modals allow-same-origin allow-forms" title="Try It playground"></iframe></div> <div class="tryit-actions"><a href="javascript:void(0)" class="btn-try" onclick="openEditorModal(this)">▶ 试一试</a></div> <h2 id="browser-support">🌐 浏览器支持</h2> <div class="ref-browser-support"> <table class="ref-browser-table"> <thead><tr> <th class="ref-browser-el">浏览器</th> <th class="ref-browser-th"><img src="/assets/images/Browser/chrome.svg" alt="Chrome" class="ref-browser-icon"><span class="ref-browser-name">Chrome</span></th> <th class="ref-browser-th"><img src="/assets/images/Browser/edge.svg" alt="Edge" class="ref-browser-icon"><span class="ref-browser-name">Edge</span></th> <th class="ref-browser-th"><img src="/assets/images/Browser/firefox.svg" alt="Firefox" class="ref-browser-icon"><span class="ref-browser-name">Firefox</span></th> <th class="ref-browser-th"><img src="/assets/images/Browser/safari-.svg" alt="Safari" class="ref-browser-icon"><span class="ref-browser-name">Safari</span></th> <th class="ref-browser-th"><img src="/assets/images/Browser/opera.svg" alt="Opera" class="ref-browser-icon"><span class="ref-browser-name">Opera</span></th> </tr></thead> <tbody><tr> <td class="ref-browser-el"><title></td> <td class="ref-browser-yes"><span class="ref-check">✓</span> <span class="ref-ver">v1</span></td> <td class="ref-browser-yes"><span class="ref-check">✓</span> <span class="ref-ver">v12</span></td> <td class="ref-browser-yes"><span class="ref-check">✓</span> <span class="ref-ver">v1</span></td> <td class="ref-browser-yes"><span class="ref-check">✓</span> <span class="ref-ver">v1</span></td> <td class="ref-browser-yes"><span class="ref-check">✓</span> <span class="ref-ver">v1</span></td> </tr> <tr><td colspan="6" class="ref-browser-all">所有主流浏览器均支持</td></tr> </tbody></table> </div> <div class="note-box tip"><strong>提示:</strong> title 文字会作为浏览器标签和 SEO 标题,务必简明并含关键词;不能包含其他标签。</div> <h2 id="related-tags">🏷️ 相关标签</h2> <div class="related-tags ref-tag-grid"> <a class="ref-tag-card" href="head.html" title="head 元素"><head></a> <a class="ref-tag-card" href="meta.html" title="meta 元素"><meta></a> </div> <h2 id="related-cases">💡 相关案例</h2> <div class="ref-case-empty">更多案例即将上线,敬请期待。</div> <h2 id="see-also">📚 相关教程</h2> <div class="ref-tag-grid"> <a class="ref-tag-card" href="/cn/html/index.html" title="HTML Introduction">HTML Introduction</a> <a class="ref-tag-card" href="/cn/html/basics.html" title="HTML Basics">HTML Basics</a> <a class="ref-tag-card" href="/cn/html/elements.html" title="HTML Elements">HTML Elements</a> </div> <div class="ref-tutorial-grid"> <a class="ref-tutorial-card" href="/cn/html/reference/"> <div class="ref-tutorial-card-title">HTML 标签参考手册</div> <div class="ref-tutorial-card-desc">查看全部 HTML 标签的语法、属性与示例。</div> </a> </div> <!-- Page navigation --> <nav class="page-nav"> </nav> <div class="author-bio" itemscope itemtype="https://schema.org/Organization"> <div class="author-avatar"> <img src="/assets/images/logo.png" alt="Web-Tutorial.com" width="48" height="48" loading="lazy" itemprop="logo"> </div> <div class="author-info"> <p class="author-name"><strong itemprop="name">Web-Tutorial 技术团队</strong></p> <p class="author-desc" itemprop="description">由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核,确保内容准确可靠。如发现任何问题,欢迎向我们反馈。</p> <p class="author-links"> <a href="/cn/about/" itemprop="url">关于我们</a> </p> </div> </div> </main> <!-- Right sidebar --> <aside class="tutorial-sidebar" id="tutorialSidebar"> <button class="sidebar-toggle" id="sidebarToggle" aria-label="Toggle sidebar">◀</button> <div class="sidebar-scroll"> <div class="sidebar-toc-title"><span class="toc-icon">📄</span> 本页目录</div> <div class="sidebar-toc" id="sidebarToc"></div> <div class="sidebar-ads" data-ad-zone="sidebar"> <div id="ad-slot-b1" class="ad-widget" data-ad-slot="sidebar-top" data-ad-format="rectangle" aria-hidden="true"></div> </div> </div> </aside> </div> <div class="font-toolbar" id="fontToolbar"> <button class="ft-btn" onclick="changeFontSize(-1)" aria-label="Decrease font size" title="Decrease font size">A−</button> <span class="ft-label" id="ftLabel">100%</span> <button class="ft-btn" onclick="changeFontSize(1)" aria-label="Increase font size" title="Increase font size">A+</button> </div> <button id="backTop" onclick="window.scrollTo({top:0,behavior:'smooth'})" aria-label="Back to top">↑</button> <script src="/assets/js/tutorial.js" defer></script> <!-- Editor modal --> <div class="editor-modal" id="editorModal" onclick="if(event.target===this)closeEditorModal()"> <div class="editor-modal-box"> <iframe id="editorIframe" src="about:blank" sandbox="allow-scripts allow-modals allow-same-origin allow-forms"></iframe> </div> </div> <footer class="footer"> <div class="footer-inner"> <div class="footer-col"> <h4>关于我们</h4> <a href="/cn/about/" class="footer-sm-link">关于我们</a> <a href="/cn/about/privacy.html" class="footer-sm-link">隐私政策</a> <a href="/cn/about/disclaimer.html" class="footer-sm-link">免责说明</a> <a href="javascript:void(0)" onclick="openReportModal()" class="footer-sm-link">纠错</a> </div> <div class="footer-col"> <h4>最近更新</h4> <p class="footer-sm"> 2026-09-07 Java 学习路线上线(5 种语言)<br> 2026-09-05 前端开发工程师能力图谱上线<br> 2026-09-03 JavaScript 学习路线上线<br> 2026-08-31 Vibe Coding 系列课程上线(7 门)<br> <a href="/cn/updates.html">查看所有更新 →</a> </p> </div> <div class="footer-col"> <h4>在线工具</h4> <a href="/cn/tools/code-highlighter.html">代码高亮</a> <a href="/cn/tools/json-formatter.html">JSON 格式化</a> <a href="/cn/tools/color-converter.html">颜色转换器</a> <a href="/cn/tools/regex-tester.html">正则测试</a> <a href="/cn/tools/base64.html">Base64 编解码</a> </div> <div class="footer-col"> <h4>联系我们</h4> <a href="mailto:postmaster@web-tutorial.com">📧 postmaster@web-tutorial.com</a> <a href="https://github.com/webtutorialcom">🐙 GitHub</a> <a href="https://x.com/webtutorialcom">🐦 Twitter</a> </div> </div> <div class="footer-bottom"> <p>© 2026 Web-Tutorial.com — 代码无国界</p> </div> </footer> <!-- 纠错反馈按钮 + 模态窗 --> <style> /* ── 浮动按钮 ── */ #report-float-btn { position: fixed; bottom: 24px; right: 80px; z-index: 9999; width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--color-primary, #2563eb); color: #fff; font-size: 20px; cursor: pointer; box-shadow: 0 3px 12px rgba(37,99,235,0.35); transition: transform 0.2s, box-shadow 0.2s; display: flex; align-items: center; justify-content: center; line-height: 1; } #report-float-btn:hover { transform: scale(1.1); box-shadow: 0 4px 16px rgba(37,99,235,0.5); } /* ── 模态窗遮罩 ── */ #report-modal-overlay { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.45); backdrop-filter: blur(2px); align-items: center; justify-content: center; } #report-modal-overlay.open { display: flex; } /* ── 模态窗卡片 ── */ .report-modal-box { background: #fff; border-radius: 14px; padding: 28px 32px 24px; max-width: 640px; width: 90%; max-height: 85vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,0.2); position: relative; } .report-modal-box h3 { margin: 0 0 12px 0; font-size: 18px; font-weight: 700; color: #1a1a2e; display: flex; align-items: center; gap: 8px; } .report-modal-box .close-x { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 22px; cursor: pointer; color: #999; line-height: 1; padding: 4px; } .report-modal-box .close-x:hover { color: #333; } .report-modal-box label { display: block; font-size: 13px; font-weight: 600; color: #555; margin-bottom: 6px; } .report-page-url { font-size: 12px; color: #888; margin-bottom: 16px; word-break: break-all; padding: 6px 10px; background: #f5f5f5; border-radius: 6px; } /* ── 顶部暖文区 ── */ .report-welcome { font-size: 14px; line-height: 1.7; color: #555; margin-bottom: 20px; padding: 14px 16px; background: #f0f7ff; border-radius: 10px; border-left: 3px solid var(--color-primary, #2563eb); } /* ── 类型标签 ── */ .report-types { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .report-type-tag { padding: 6px 14px; border-radius: 20px; border: 1.5px solid #ddd; background: #fafafa; font-size: 13px; cursor: pointer; transition: all 0.15s; color: #444; user-select: none; } .report-type-tag:hover { border-color: var(--color-primary, #2563eb); color: var(--color-primary, #2563eb); } .report-type-tag.active { background: var(--color-primary, #2563eb); border-color: var(--color-primary, #2563eb); color: #fff; } /* ── 描述文本框 ── */ .report-desc { width: 100%; height: 140px; padding: 10px 12px; border: 1.5px solid #ddd; border-radius: 8px; font-size: 14px; font-family: inherit; resize: none; box-sizing: border-box; transition: border-color 0.15s; } .report-desc:focus { outline: none; border-color: var(--color-primary, #2563eb); } /* ── 提交按钮 ── */ .report-submit { display: block; width: 100%; padding: 11px 0; margin-top: 16px; border: none; border-radius: 8px; background: var(--color-primary, #2563eb); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity 0.15s; } .report-submit:hover { opacity: 0.9; } .report-submit:disabled { opacity: 0.5; cursor: not-allowed; } /* ── 成功/失败消息 ── */ .report-msg { display: none; text-align: center; padding: 32px 16px; font-size: 15px; font-weight: 500; line-height: 1.7; } .report-msg.show { display: block; } .report-msg.success { color: #2563eb; } .report-msg.error { color: #e74c3c; } .report-msg .report-msg-icon { font-size: 40px; display: block; margin-bottom: 12px; } /* ── 蜜罐(对用户不可见) ── */ .report-honeypot { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; overflow: hidden; } /* ── RTL 适配 ── */ [dir="rtl"] #report-float-btn { right: auto; left: 24px; } [dir="rtl"] .report-modal-box .close-x { right: auto; left: 16px; } [dir="rtl"] .report-welcome { border-left: none; border-right: 3px solid var(--color-primary, #2563eb); } </style> <div id="report-bug-root"> <!-- 浮动按钮 --> <button id="report-float-btn" onclick="openReportModal()" aria-label="Report issue" title="Report issue">📝</button> <!-- 模态窗 --> <div id="report-modal-overlay" onclick="closeReportModal(event)"> <div class="report-modal-box" onclick="event.stopPropagation()"> <button class="close-x" onclick="closeReportModal()" aria-label="Close">×</button> <!-- 表单区 --> <div id="report-form-area"> <h3 id="report-title">🙏 帮我们做得更好</h3> <!-- 暖文区 --> <div class="report-welcome" id="report-welcome"> 我们是刚上线的编程教程站,几个人的小团队,精力有限。页面虽经检查,难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……<br><br> 如果您发现了,麻烦告诉我们,我们会在收到反馈后第一时间进行修复,再次感谢您的光临 🙏 </div> <!-- URL(对用户隐藏,随表单一起提交) --> <div class="report-page-url" id="report-url-display" style="display:none"></div> <label id="report-type-label">问题类型</label> <div class="report-types" id="report-type-tags"></div> <label id="report-desc-label">问题描述</label> <textarea class="report-desc" id="report-desc" rows="4" placeholder="请描述一下您遇到的问题……"></textarea> <!-- 蜜罐 --> <div class="report-honeypot"> <input type="text" name="website" id="report-honeypot" tabindex="-1" autocomplete="off"> </div> <button class="report-submit" id="report-submit-btn" onclick="submitReport()">好的,这就提交 🙏</button> </div> <!-- 结果区 --> <div class="report-msg" id="report-msg-area"> <span class="report-msg-icon" id="report-msg-icon"></span> <span id="report-msg-text"></span> </div> </div> </div> </div> <script> /* ── 多语言字典 ── */ var REPORT_LANG = { 'zh-CN': { welcome: '我们是刚上线的编程教程站,几个人的小团队,精力有限。页面虽经检查,难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……<br><br>如果您发现了,麻烦告诉我们,我们会在收到反馈后第一时间进行修复,再次感谢您的光临 🙏', title: '帮我们做得更好', typeLabel: '问题类型', descLabel: '问题描述', descPlaceholder: '请描述一下您遇到的问题……', submit: '好的,这就提交 🙏', success: '感谢您!您的反馈已经收到,我们会尽快处理。<br>有您帮忙,这个站一定会越来越好 ❤️', error: '提交失败了……能再试一次吗?', types: ['链接失效', '排版错乱', '内容错误', '本地化问题', '其他'] }, 'en': { welcome: 'We\'re a tiny team who just launched this tutorial site. We\'ve checked everything, but things still slip through — broken links, layout issues, wrong content, awkward wording…<br><br>If you spot something, let us know and we\'ll get it fixed right away. Thanks for stopping by! 🙏', title: 'Help Us Improve', typeLabel: 'Issue Type', descLabel: 'Description', descPlaceholder: 'Tell us what you found…', submit: 'Send it over 🙏', success: 'Got it! Thank you so much — we\'ll look into it right away.<br>With your help, this site keeps getting better ❤️', error: 'Something went wrong… Could you try again?', types: ['Broken Link', 'Layout Issue', 'Content Error', 'Translation', 'Other'] }, 'ar': { welcome: 'نحن فريق صغير أطلقنا هذا الموقع التعليمي حديثاً. راجعنا كل صفحة، لكن قد توجد بعض الأخطاء — روابط معطلة، تخطيط غير صحيح، محتوى خاطئ، ترجمة غير دقيقة…<br><br>إذا لاحظت أي خطأ، فأخبرنا وسنصلحه فوراً. شكراً جزيلاً لمساعدتك لنا! 🙏', title: 'ساعدنا على التحسين', typeLabel: 'نوع المشكلة', descLabel: 'الوصف', descPlaceholder: 'صِف ما وجدته…', submit: 'أرسل التقرير 🙏', success: 'وصلتنا ملاحظاتك! شكراً جزيلاً — سنقوم بمراجعتها فوراً.<br>بمساعدتك، سيصبح هذا الموقع أفضل ❤️', error: 'حدث خطأ… هل يمكنك المحاولة مرة أخرى؟', types: ['رابط معطل', 'مشكلة تخطيط', 'خطأ في المحتوى', 'خطأ في الترجمة', 'أخرى'] }, 'pt-BR': { welcome: 'Somos uma equipe pequena e acabamos de lançar este site de tutoriais. Revisamos tudo, mas sempre escapa alguma coisa — links quebrados, layout bagunçado, conteúdo errado, tradução estranha…<br><br>Se você encontrar algo, nos avise e vamos corrigir o mais rápido possível. Valeu pela ajuda! 🙏', title: 'Nos ajude a melhorar', typeLabel: 'Tipo de problema', descLabel: 'Descrição', descPlaceholder: 'Conte o que você encontrou…', submit: 'Enviar 🙏', success: 'Recebemos! Muito obrigado — vamos dar uma olhada.<br>Com sua ajuda, este site fica cada vez melhor ❤️', error: 'Algo deu errado… Pode tentar novamente?', types: ['Link quebrado', 'Problema de layout', 'Erro de conteúdo', 'Erro de tradução', 'Outros'] }, 'ja': { welcome: '私たちは少人数のチームで、このチュートリアルサイトを立ち上げたばかりです。念入りに確認していますが、それでも不具合が残っているかもしれません — リンク切れ、レイアウト崩れ、内容の誤り、不自然な翻訳…<br><br>お気づきの点がございましたら、ぜひお知らせください。いただいたご報告はすぐに確認し、修正いたします。どうぞよろしくお願いいたします🙏', title: 'みなさまのご意見をお聞かせください', typeLabel: '問題の種類', descLabel: '詳細', descPlaceholder: '不具合の内容を詳しく教えてください…', submit: '送信します 🙏', success: 'ご報告ありがとうございます!すぐに確認いたします。<br>みなさまのご協力で、このサイトはより良いものに成長していきます ❤️', error: 'エラーが発生しました…もう一度お試しいただけますか?', types: ['リンク切れ', 'レイアウト崩れ', '内容の誤り', '翻訳の問題', 'その他'] } }; function getReportLang() { var lang = (document.documentElement.lang || 'en').trim(); return REPORT_LANG[lang] || REPORT_LANG[lang.split('-')[0]] || REPORT_LANG['en']; } function openReportModal() { var texts = getReportLang(); var overlay = document.getElementById('report-modal-overlay'); var formArea = document.getElementById('report-form-area'); var msgArea = document.getElementById('report-msg-area'); // 重置表单 formArea.style.display = ''; msgArea.className = 'report-msg'; document.getElementById('report-desc').value = ''; document.getElementById('report-honeypot').value = ''; document.getElementById('report-submit-btn').disabled = false; // 设置文本 document.getElementById('report-title').innerHTML = '🙏 ' + texts.title; document.getElementById('report-welcome').innerHTML = texts.welcome; document.getElementById('report-type-label').textContent = texts.typeLabel; document.getElementById('report-desc-label').textContent = texts.descLabel; document.getElementById('report-desc').placeholder = texts.descPlaceholder; document.getElementById('report-submit-btn').textContent = texts.submit; // URL document.getElementById('report-url-display').textContent = window.location.pathname + window.location.search; // 类型标签 var tagsContainer = document.getElementById('report-type-tags'); tagsContainer.innerHTML = ''; texts.types.forEach(function(t, i) { var tag = document.createElement('span'); tag.className = 'report-type-tag' + (i === 0 ? ' active' : ''); tag.textContent = t; tag.dataset.index = i; tag.onclick = function() { tagsContainer.querySelectorAll('.report-type-tag').forEach(function(el) { el.classList.remove('active'); }); this.classList.add('active'); }; tagsContainer.appendChild(tag); }); overlay.classList.add('open'); setTimeout(function() { document.getElementById('report-desc').focus(); }, 300); } function closeReportModal(e) { if (e && e.target !== e.currentTarget && e.target.id !== 'report-modal-overlay' && e.target.className !== 'close-x') { return; } document.getElementById('report-modal-overlay').classList.remove('open'); } function submitReport() { var texts = getReportLang(); var btn = document.getElementById('report-submit-btn'); btn.disabled = true; btn.textContent = '…'; // 蜜罐检测:被机器人填了 → 静默丢弃 if (document.getElementById('report-honeypot').value.trim() !== '') { showReportResult(true, texts.success); return; } var activeTag = document.querySelector('#report-type-tags .report-type-tag.active'); var typeIndex = activeTag ? parseInt(activeTag.dataset.index) : 0; var typeText = activeTag ? activeTag.textContent : texts.types[0]; var payload = JSON.stringify({ url: window.location.pathname + window.location.search, page_lang: (document.documentElement.lang || 'en').trim(), type_index: typeIndex, type: typeText, desc: document.getElementById('report-desc').value.trim() }); var xhr = new XMLHttpRequest(); xhr.open('POST', '/api/report.php', true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.timeout = 10000; xhr.onload = function() { if (xhr.status === 200) { try { var resp = JSON.parse(xhr.responseText); showReportResult(resp.ok, resp.ok ? texts.success : (resp.msg || texts.error)); } catch(e) { showReportResult(true, texts.success); } } else { showReportResult(true, texts.success); } }; xhr.onerror = function() { showReportResult(true, texts.success); }; xhr.ontimeout = function() { showReportResult(false, texts.error); }; xhr.send(payload); } function showReportResult(success, msg) { document.getElementById('report-form-area').style.display = 'none'; var msgArea = document.getElementById('report-msg-area'); msgArea.className = 'report-msg show ' + (success ? 'success' : 'error'); document.getElementById('report-msg-icon').textContent = success ? '🙏' : '😅'; document.getElementById('report-msg-text').innerHTML = msg; setTimeout(function() { document.getElementById('report-modal-overlay').classList.remove('open'); }, 4000); } // 点击遮罩关闭 document.addEventListener('click', function(e) { if (e.target.id === 'report-modal-overlay') { closeReportModal(e); } }); </script> <!-- Load mobile menu script for pages that don't already have it --> <script> (function() { function loadIfNeeded() { if (document.querySelector('script[src*="tutorial.js"]')) return; var s = document.createElement('script'); s.src = '/assets/js/tutorial.js'; s.defer = true; document.body.appendChild(s); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', loadIfNeeded); } else { loadIfNeeded(); } })(); </script> </body> </html>