HTML Academy · 课时

meta charset、viewport、author 和 description

Q: 「meta charset、viewport、author 和 description」这节课中我会学到什么？

添加用于正确渲染和提升可发现性的必要元标签 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

添加用于正确渲染和提升可发现性的必要元标签

第 2 / 4 课13 个步骤

meta charset、viewport、author 和 description 是 CoddyKit 上的免费 HTML Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

元数据元素

<meta> 元素提供页面的元数据。它是一个空元素，不需要结束标签：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Learn HTML5 from scratch.">
  <meta name="author" content="Jane Smith">
</head>

字符集元数据

声明字符编码：

<meta charset="UTF-8">
<!-- Must be:
  - Inside <head>
  - Within the first 1024 bytes of the file
  - Best: the first tag inside <head>
  - Always use UTF-8 for web pages
-->

视口元数据

视口元数据标签控制页面在移动设备上的渲染方式：

<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Without this, mobile browsers render at desktop width (900-980px)
     then scale down — everything looks tiny -->
<!-- width=device-width: viewport width = device width -->
<!-- initial-scale=1: start at 1:1 zoom -->
<!-- This is REQUIRED for responsive design to work -->

视口内容值

您可能会看到的其他视口值：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
<!-- maximum-scale: max zoom level users can reach -->
<!-- minimum-scale: min zoom level -->

<!-- AVOID: user-scalable=no
  It prevents users from zooming, which is a WCAG 1.4.4 violation -->
<!-- <meta name="viewport" content="user-scalable=no"> BAD -->

描述元数据

描述元数据标签提供用于搜索结果的摘要：

<meta name="description" content="
  Learn HTML5 semantic elements, forms, accessibility,
  and modern web APIs. Practical lessons for real-world developers.
">
<!-- Recommended: 150-160 characters -->
<!-- Google may show this in the SERP snippet -->
<!-- Not a direct ranking factor, but affects click-through rate -->
<!-- Make every page's description unique and compelling -->

作者元数据

作者元数据标签用于标识页面作者：

<meta name="author" content="Jane Smith">
<!-- Rarely used by search engines today -->
<!-- Schema.org Person is more semantic for author attribution -->
<!-- Still good practice for internal content management -->

关键词元数据（已弃用）

关键词元数据标签曾经很重要，但现在已被忽略：

<!-- Old and ignored by Google since 2009: -->
<meta name="keywords" content="html5, web development, tutorial">
<!-- Don't waste time on this -->
<!-- Focus on quality content and real on-page keywords instead -->

http-equiv 元数据

http-equiv 属性可以模拟 HTTP 响应标头：

<!-- Redirect after 5 seconds: -->
<meta http-equiv="refresh" content="5; url=/new-page">

<!-- Set Content Security Policy: -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

<!-- Cache control (mostly superseded by real HTTP headers): -->
<meta http-equiv="cache-control" content="no-cache">

robots 元数据

robots 元数据标签控制搜索引擎的抓取行为：

<meta name="robots" content="index, follow">
<!-- index: allow indexing (default) -->
<!-- follow: follow links (default) -->
<!-- noindex: don't add to search index -->
<!-- nofollow: don't follow links -->
<!-- noarchive: don't show cached version -->

<!-- Page you don't want indexed: -->
<meta name="robots" content="noindex">

开放图谱元数据预览

配置完善的 head 部分：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Forms Guide — CoddyKit</title>
  <meta name="description" content="Master HTML5 forms: inputs, validation, and accessibility.">
  <meta name="author" content="CoddyKit Team">
  <link rel="canonical" href="https://coddykit.com/html/forms">
</head>

生成器元数据

生成器元数据标签用于标识创建页面的工具：

<!-- WordPress adds: -->
<meta name="generator" content="WordPress 6.4">
<!-- Jekyll adds: -->
<meta name="generator" content="Jekyll v4.3.2">
<!-- You can add your own: -->
<meta name="generator" content="MySSG v1.0">
<!-- Security note: this reveals your CMS version to attackers
     Some recommend removing it -->

快速检查

哪种元数据标签对于移动设备上的响应式设计至关重要？

在交互式课程中回答

回顾：元数据标签

必备元数据标签：

<meta charset="UTF-8"> — 始终位于 head 的最前面
<meta name="viewport" ...> — 响应式设计所必需
<meta name="description"> — 150 至 160 个字符的 SERP 摘要
<meta name="author"> — 内容作者信息
keywords 已过时；robots 用于控制抓取器

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 40
课程: 159

免费开始学习查看完整课程

常见问题解答

「meta charset、viewport、author 和 description」课时是免费的吗？

是的 — 「meta charset、viewport、author 和 description」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「meta charset、viewport、author 和 description」这节课中我会学到什么？

添加用于正确渲染和提升可发现性的必要元标签你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「meta charset、viewport、author 和 description」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

title 及其在 SEO 中的作用
meta charset、viewport、author 和 description
规范 URL 与 robots 元标签
网站图标和 Apple Touch 图标

← 返回 HTML Academy