前端 HTML 面试题, 常用的 HTML meta 标签有哪些?
前端 HTML 面试题, 常用的 HTML meta 标签有哪些?
QA
Step 1
Q:: 前端开发中常用的 HTML meta 标签有哪些？
A:: HTML 的 meta 标签用于指定与 HTML 文档相关的元数据，这些数据并不会直接显示在页面上，但对页面的表现有重要影响。常用的 meta 标签包括：
1. <meta charset='UTF-8'>：指定页面的字符编码，一般设为 UTF-8 以支持多种语言。
2. <meta name='viewport' content='width=device-width, initial-scale=1.0'>：控制页面在移动设备上的宽度和缩放。
3. <meta name='description' content=''>：为搜索引擎提供页面的简要描述，影响搜索结果的展示。
4. <meta name='keywords' content=''>：列出页面的关键词（现代 SEO 中影响较小）。
5. <meta http-equiv='X-UA-Compatible' content='IE=edge'>：强制 Internet Explorer 使用最新的渲染模式。
6. <meta name='author' content=''>：定义页面的作者。
7. <meta name='robots' content='index,follow'>：指导搜索引擎是否对该页面进行索引和跟踪。
Step 2
Q:: 如何使用 meta 标签优化页面的 SEO？
A:: Meta 标签对页面的 SEO 优化有一定影响，尤其是 <meta name='description'> 和 <meta name='keywords'>。
1. <meta name='description'>：为每个页面编写独特且相关的描述，有助于在搜索引擎结果页中吸引点击。
2. <meta name='keywords'>：虽然现代搜索引擎较少使用关键词标签，但填写与页面内容相关的关键词仍然是一个好习惯。
3. 使用 <meta name='robots'> 标签：可以设置页面是否允许搜索引擎索引或跟踪页面链接，适用于不希望被公开的页面。
Step 3
Q:: 如何利用 HTML meta 标签优化移动端页面？
A:: 通过以下 meta 标签，可以优化移动端页面的展示效果：
1. <meta name='viewport' content='width=device-width, initial-scale=1.0'>：这一标签是移动端优化的关键，设置页面宽度与设备屏幕宽度相同，并禁止初始缩放。
2. <meta name='apple-mobile-web-app-capable' content='yes'>：启用网页应用模式（Web App Mode），让页面在 iOS 设备上全屏显示。
3. <meta name='theme-color' content='#000000'>：为移动设备的浏览器窗口指定主题颜色。
Step 4
Q:: meta 标签中的 http-equiv 属性有何作用？
A:: http-equiv 属性相当于一个 HTTP 头部，它常用于设置文档的缓存策略、编码、重定向等。常见的用法包括：
1. <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>：定义文档类型和字符集，确保浏览器正确解析 HTML。
2. <meta http-equiv='refresh' content='30'>：每隔 30 秒刷新页面。
3. <meta http-equiv='Cache-Control' content='no-cache'>：禁止浏览器缓存页面内容。