以下列举一些前端开发中最常用的 meta 标签，以及它们的写法和作用：

字符集:

声明文档的字符编码为 UTF-8，这几乎是所有网页都应该使用的。它确保文本能够正确显示，避免乱码。

视口设置 (Viewport):

这是移动端开发的必备标签。width=device-width 将视口宽度设置为设备宽度，initial-scale=1.0 设置初始缩放比例为 1。 这使得网页在不同尺寸的设备上都能正确显示。 其他常用的 viewport 属性包括 maximum-scale、minimum-scale 和 user-scalable。

SEO 优化:

提供网页的简短描述，用于在搜索引擎结果页面 (SERP) 中显示。

指定网页的关键词，虽然现代搜索引擎对 keywords 的重视程度降低，但仍有一些搜索引擎会参考。

指定网页的作者。

控制搜索引擎爬虫的行为。index 允许索引该页面，follow 允许跟随页面上的链接。其他值包括 noindex、nofollow、none 等。

Open Graph 协议 (社交媒体分享):

指定分享到社交媒体时的标题。

指定分享到社交媒体时的描述。

指定分享到社交媒体时显示的图片。

指定分享到社交媒体时的链接。

指定分享内容的类型，例如 website、article、video 等。

Twitter Cards (Twitter 分享):

指定 Twitter 卡片类型，例如 summary、summary_large_image、app 等。

指定分享到 Twitter 时的标题。

指定分享到 Twitter 时的描述。

指定分享到 Twitter 时显示的图片。

HTTP 头部控制:

在 5 秒后跳转到指定的 URL。

强制 Internet Explorer 使用最新的渲染模式。

其他:

指定浏览器 UI 的主题颜色，例如在移动设备上的地址栏颜色。

这只是一些常用的 meta 标签，还有其他一些不太常用的 meta 标签，可以根据具体需求使用。 记住，meta 标签位于 HTML 文档的 部分。 正确使用 meta 标签可以提升网页的 SEO、可访问性和用户体验。