title 标签必须且只能在 head 中出现一次，决定浏览器标签页标题、影响 SEO 和书签；meta charset="utf-8" 必须置于 head 最前以避免乱码；viewport meta 对移动端显示至关重要；description 仍有摘要作用但 keywords 已基本无效。
title 标签必须放在 head 里，且只写一次
浏览器
标签页上显示的标题就来自
</code></div>
，它不参与页面渲染，但影响 SEO 和书签识别。位置必须在
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><head></code></div>
内部，且整个 HTML 中只能有一个——重复写会被忽略，只取第一个。
常见错误是把
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><title></code></div>
放到
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><body></code></div>
里，或在模板中被多次 include 导致嵌套出两个。检查方法：右键“查看网页源代码”，确认
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><title></code></div>
出现在
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><head></code></div>
和
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"></head></code></div>
之间，且无重复。
meta charset 必须设为 utf-8，且放在 head 最前面
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><meta charset="utf-8"></code></div>
告诉浏览器用 UTF-8 解码页面，否则中文可能乱码。它必须是
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><head></code></div>
中第一个标签（或至少在任何
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><title></code></div>
或外部资源前），因为浏览器一读到非 ASCII 字符就立即按当前
编码
解析，晚了就来不及纠正。
不要写成
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></code></div>
，那是旧写法，兼容性差且更易出错。现代 HTML5 只认
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">charset</code></div>
属性。
立即学习
“
前端免费学习笔记（深入）
”；
viewport meta 影响移动端显示，不加会默认缩放
没有
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><meta name="viewport" content="width=device-width, initial-scale=1"></code></div>
，手机浏览器会以桌面宽度（通常是 980px）渲染页面，然后整体缩小显示，导致文字小、点击困难。这个 meta 不影响 PC 端，但对所有移动设备是刚需。
SEO GPT
免费的白帽SEO，PPC和网站经销商平台
下载
常见误配：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">user-scalable=no</code></div>
—— 禁止缩放，对可访问性不友好，多数场景不该加
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">maximum-scale=1</code></div>
—— 同样限制用户操作，iOS 13+ 已部分忽略
漏掉
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">initial-scale=1</code></div>
—— 可能触发双击放大逻辑，造成意外跳转
description 和 key
word
s meta 对 SEO 的实际作用已很弱
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><meta name="description" content="..."></code></div>
仍会被
搜索引擎
用作搜索结果摘要（如果匹配），但不会影响排名；
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><meta name="keywords" content="..."></code></div>
几乎被所有主流引擎忽略，写了也没用，还占
字节
。
真正该关注的是语义化结构：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><h1></code></div>
标题、图片的
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">alt</code></div>
属性、合理的 heading 层级。如果真要优化搜索露出，优先确保
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><title></code></div>
和正文首段含关键词，而不是堆砌 meta。
个人页面不用硬凑 keywords，description 控制在 155 字符内即可，避免被截断。
</div>
<!-- 文章导航 -->
<nav class="cxy-article-nav" aria-label="文章导航">
<a href="https://www.vqhf.com/article/4952.html" class="cxy-article-nav-link cxy-article-nav-prev">
<span>‹</span>
<div>
<div class="cxy-article-nav-label">上一篇</div>
<div class="cxy-article-nav-title">js实现将选中值累加到文本框的方法_javascript技巧</div>
</div>
</a>
<a href="https://www.vqhf.com/article/4968.html" class="cxy-article-nav-link cxy-article-nav-next">
<div>
<div class="cxy-article-nav-label">下一篇</div>
<div class="cxy-article-nav-title">css background 属性包含哪些内容_背景相关属性基础说明</div>
</div>
<span>›</span>
</a>
</nav>
</div>
</article>
<!-- 相关文章列表 -->
<section class="cxy-content-section" style="margin-top: 20px;">
<h2 class="cxy-widget-title" style="margin-bottom: 20px;">相关文章</h2>
<ul class="cxy-article-list">
<li class="cxy-article-item">
<a href="https://www.vqhf.com/article/4952.html" class="cxy-article-link">js实现将选中值累加到文本框的方法_javascript技巧</a>
<div class="cxy-article-meta">2026-09-11</div>
</li>
<li class="cxy-article-item">
<a href="https://www.vqhf.com/article/4934.html" class="cxy-article-link">网页常用的防复制代码</a>
<div class="cxy-article-meta">2026-09-11</div>
</li>
<li class="cxy-article-item">
<a href="https://www.vqhf.com/article/4933.html" class="cxy-article-link">doctype后如何获得body.clientHeight的方法_javascript技巧</a>
<div class="cxy-article-meta">2026-09-11</div>
</li>
<li class="cxy-article-item">
<a href="https://www.vqhf.com/article/4880.html" class="cxy-article-link">详解Angular调试技巧之报错404(not found)</a>
<div class="cxy-article-meta">2026-09-11</div>
</li>
<li class="cxy-article-item">
<a href="https://www.vqhf.com/article/4863.html" class="cxy-article-link">如何在td中控制字体右对齐 且加粗_html/css_WEB-ITnose</a>
<div class="cxy-article-meta">2026-09-11</div>
</li>
<li class="cxy-article-item">
<a href="https://www.vqhf.com/article/4766.html" class="cxy-article-link">HTML中实现Markdown实时预览编辑器的基本结构与思路</a>
<div class="cxy-article-meta">2026-09-11</div>
</li>
<li class="cxy-article-item">
<a href="https://www.vqhf.com/article/4759.html" class="cxy-article-link">如何为响应式下拉菜单添加可点击关闭的“X”按钮</a>
<div class="cxy-article-meta">2026-09-11</div>
</li>
<li class="cxy-article-item">
<a href="https://www.vqhf.com/article/4750.html" class="cxy-article-link">如何在HTML5中利用Worker执行高性能的SHA-256算法验证文件完整性</a>
<div class="cxy-article-meta">2026-09-11</div>
</li>
<li class="cxy-article-item">
<a href="https://www.vqhf.com/article/4740.html" class="cxy-article-link">JavaScript 的数组方法 map、filter 和 reduce 在函数式编程中有何重要意义？</a>
<div class="cxy-article-meta">2026-09-11</div>
</li>
<li class="cxy-article-item">
<a href="https://www.vqhf.com/article/4968.html" class="cxy-article-link">css background 属性包含哪些内容_背景相关属性基础说明</a>
<div class="cxy-article-meta">2026-09-11</div>
</li>
</ul>
</section>
</div>
<!-- 右侧边栏 -->
<aside class="cxy-sidebar cxy-sidebar-right" aria-label="侧边栏">
<!-- 推荐阅读 -->
<div class="cxy-widget">
<h3 class="cxy-widget-title">推荐阅读</h3>
<div class="cxy-recommend-grid">
<a href="https://www.vqhf.com/article/4968.html" class="cxy-recommend-item">
<div class="cxy-recommend-thumb">
<img src="https://www.vqhf.com/static/v0/images/article-6.jpg" alt="css background 属性包含哪些内容_背景相关属性基础说明">
</div>
<div class="cxy-recommend-title">css background 属性包含哪些内容_背景相关属性基础说明</div>
</a>
<a href="https://www.vqhf.com/article/4963.html" class="cxy-recommend-item">
<div class="cxy-recommend-thumb">
<img src="https://www.vqhf.com/static/v0/images/article-6.jpg" alt="html个人页面头部怎么写_html头部meta与title设置【标签】">
</div>
<div class="cxy-recommend-title">html个人页面头部怎么写_html头部meta与title设置【标签】</div>
</a>
<a href="https://www.vqhf.com/article/4952.html" class="cxy-recommend-item">
<div class="cxy-recommend-thumb">
<img src="https://www.vqhf.com/static/v0/images/article-6.jpg" alt="js实现将选中值累加到文本框的方法_javascript技巧">
</div>
<div class="cxy-recommend-title">js实现将选中值累加到文本框的方法_javascript技巧</div>
</a>
<a href="https://www.vqhf.com/article/4934.html" class="cxy-recommend-item">
<div class="cxy-recommend-thumb">
<img src="https://www.vqhf.com/static/v0/images/article-6.jpg" alt="网页常用的防复制代码">
</div>
<div class="cxy-recommend-title">网页常用的防复制代码</div>
</a>
</div>
</div>
<!-- 最新文章 -->
<div class="cxy-widget">
<h3 class="cxy-widget-title">最新文章</h3>
<ul class="cxy-article-list">
<li class="cxy-article-item">
<a href="https://www.vqhf.com/article/4968.html" class="cxy-article-link">css background 属性包含哪些内容_背景相关属性基础说明</a>
<div class="cxy-article-meta">2026-09-11</div>
</li>
<li class="cxy-article-item">
<a href="https://www.vqhf.com/article/4963.html" class="cxy-article-link">html个人页面头部怎么写_html头部meta与title设置【标签】</a>
<div class="cxy-article-meta">2026-09-11</div>
</li>
<li class="cxy-article-item">
<a href="https://www.vqhf.com/article/4952.html" class="cxy-article-link">js实现将选中值累加到文本框的方法_javascript技巧</a>
<div class="cxy-article-meta">2026-09-11</div>
</li>
<li class="cxy-article-item">
<a href="https://www.vqhf.com/article/4934.html" class="cxy-article-link">网页常用的防复制代码</a>
<div class="cxy-article-meta">2026-09-11</div>
</li>
<li class="cxy-article-item">
<a href="https://www.vqhf.com/article/4933.html" class="cxy-article-link">doctype后如何获得body.clientHeight的方法_javascript技巧</a>
<div class="cxy-article-meta">2026-09-11</div>
</li>
<li class="cxy-article-item">
<a href="https://www.vqhf.com/article/4880.html" class="cxy-article-link">详解Angular调试技巧之报错404(not found)</a>
<div class="cxy-article-meta">2026-09-11</div>
</li>
</ul>
</div>
<!-- 热门标签 -->
<div class="cxy-widget">
<h3 class="cxy-widget-title">热门标签</h3>
<div class="cxy-article-tag-list">
<a href="https://www.vqhf.com/tag/2642" class="cxy-article-tag-item">编码</a>
<a href="https://www.vqhf.com/tag/2030" class="cxy-article-tag-item">搜索引擎</a>
<a href="https://www.vqhf.com/tag/1932" class="cxy-article-tag-item">字节</a>
<a href="https://www.vqhf.com/tag/1915" class="cxy-article-tag-item">seo</a>
<a href="https://www.vqhf.com/tag/1833" class="cxy-article-tag-item">html5</a>
<a href="https://www.vqhf.com/tag/1823" class="cxy-article-tag-item">ios</a>
<a href="https://www.vqhf.com/tag/1727" class="cxy-article-tag-item">word</a>
<a href="https://www.vqhf.com/tag/1719" class="cxy-article-tag-item">浏览器</a>
<a href="https://www.vqhf.com/tag/961" class="cxy-article-tag-item">html</a>
</div>
</div>
</aside>
</div>
</div>
</main>
<!-- 页脚 -->
<footer class="cxy-footer">
<div class="cxy-container">
<div class="cxy-footer-links" style="justify-content: center;">
<a href="https://www.vqhf.com/22.html" class="cxy-footer-link">免责声明</a>
<a href="https://www.vqhf.com/23.html" class="cxy-footer-link">关于我们</a>
<a href="https://www.vqhf.com/24.html" class="cxy-footer-link">联系我们</a>
<a href="https://www.vqhf.com/25.html" class="cxy-footer-link">投诉删除</a>
<a href="https://www.vqhf.com/26.html" class="cxy-footer-link">投稿须知</a>
</div>
<div class="cxy-footer-copyright" style="text-align: center; margin-top: 20px;">
Copyright 2026
趣航编程网
版权所有
<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank" style="color: inherit;">黔ICP备2025063733号</a>
</div>
<div style="text-align: center; margin-top: 10px; font-size: 12px; color: #999;">免责声明：本站信息来源于网络，仅供学习使用，版权归原作者所有，如有不愿意被转载的情况，请联系QQ：182111886，通知我们删除已转载的信息。</div>
</div>
</footer>
<!-- 返回顶部按钮 -->
<button class="cxy-back-to-top" id="backToTop" aria-label="返回顶部">⇧</button>
<!-- 公共脚本 -->
<script src="https://www.vqhf.com/static/v0/js/common.js"></script>
<div class="hide">
</div>
</body>
<script>
(function() {
var al = document.createElement("script");
al.src = "/api/log?action=views&code=200&id=4963&path=http%3A%2F%2Fwww.vqhf.com%2Farticle%2F4963.html&type=archive&nonce="+Date.now();
document.body.appendChild(al);
})();
</script>
</html>