4、html 里的 meta 字段都有哪些内容？

目录一、先说面试标准回答二、meta 的基本写法1. charset作用2. name content3. http-equiv content三、常见 meta 字段1. 字符编码常见值2. 视口设置 viewport常见参数作用3. 页面描述 description作用4. 页面关键词 keywords作用5. 作者 author作用6. 页面刷新 / 跳转7. 浏览器兼容模式作用8. 缓存控制作用四、移动端常见 meta1. 视口2. 是否启用苹果手机全屏模式作用3. 状态栏样式常见值4. 忽略数字自动识别为电话作用五、SEO 相关常见 meta1. description2. keywords3. robots常见值六、社交分享常见 meta1. Open Graph作用2. Twitter Card七、实际开发里最常用的几个八、一个完整示例九、面试高分回答模板十、简洁背诵版十一、一句话总结meta标签主要用于描述网页的元信息这些信息通常不会直接显示在页面上但会被浏览器读取搜索引擎读取移动端设备读取社交平台读取它一般写在head里面。一、先说面试标准回答meta标签主要用于设置网页的元信息常见内容包括charset字符编码nameviewport移动端视口设置namedescription页面描述namekeywords关键词nameauthor作者http-equiv模拟 HTTP 响应头SEO / 浏览器兼容 / 页面刷新 / 缓存控制等配置如果面试官继续问再往下展开。二、meta的基本写法1.charset设置页面字符编码。meta charsetUTF-8 /这是最常见、最重要的一个。作用防止中文乱码指定文档编码方式2.name content通过name指定元信息名称content指定内容。meta namedescription content这是一个前端学习网站 /3.http-equiv content用于模拟 HTTP 响应头效果。meta http-equivrefresh content5 /表示 5 秒后刷新页面。三、常见meta字段1. 字符编码meta charsetUTF-8 /常见值UTF-8最常用推荐其他编码现在基本少用2. 视口设置viewport移动端开发中非常重要。meta nameviewport contentwidthdevice-width, initial-scale1.0 /常见参数widthdevice-width页面宽度等于设备宽度initial-scale1.0初始缩放比例为 1maximum-scale1.0最大缩放比例minimum-scale1.0最小缩放比例user-scalableno禁止用户缩放作用适配移动端页面控制页面缩放和布局3. 页面描述descriptionmeta namedescription content这是一个学习 HTML、CSS、JavaScript 的网站 /作用给搜索引擎提供页面摘要有利于 SEO4. 页面关键词keywordsmeta namekeywords contentHTML,CSS,JavaScript,前端 /作用提供页面关键词以前 SEO 用得多现在权重已经比较低5. 作者authormeta nameauthor contentXSimple /作用标明页面作者或开发者6. 页面刷新 / 跳转meta http-equivrefresh content5 /5 秒后刷新页面。也可以跳转meta http-equivrefresh content3;urlhttps://example.com /表示 3 秒后跳转到指定地址。7. 浏览器兼容模式meta http-equivX-UA-Compatible contentIEedge /作用让 IE 使用最新的渲染模式主要是兼容旧版 IE 浏览器时会见到8. 缓存控制有些老项目可能会写meta http-equivCache-Control contentno-cache / meta http-equivPragma contentno-cache / meta http-equivExpires content0 /作用控制页面缓存行为不过现在更推荐由服务器响应头控制缓存。四、移动端常见meta移动端项目里经常看到这些。1. 视口meta nameviewport contentwidthdevice-width, initial-scale1.0 /2. 是否启用苹果手机全屏模式meta nameapple-mobile-web-app-capable contentyes /作用在 iOS 中允许网页以类似 App 的全屏模式运行3. 状态栏样式meta nameapple-mobile-web-app-status-bar-style contentblack /常见值defaultblackblack-translucent4. 忽略数字自动识别为电话meta nameformat-detection contenttelephoneno /也可以控制邮箱识别meta nameformat-detection contenttelephoneno,emailno /作用防止 iPhone 自动把数字识别成电话号码五、SEO 相关常见meta1.descriptionmeta namedescription content页面描述 /2.keywordsmeta namekeywords content关键词1,关键词2 /3.robotsmeta namerobots contentindex,follow /常见值index允许索引noindex不允许索引follow允许跟踪链接nofollow不允许跟踪链接例如meta namerobots contentnoindex,nofollow /表示不允许搜索引擎收录也不跟踪链接。六、社交分享常见meta做分享卡片时很常见。1. Open Graph常用于微信、Facebook 等分享预览。meta propertyog:title content文章标题 / meta propertyog:description content文章描述 / meta propertyog:image contentcover.jpg / meta propertyog:url contenthttps://example.com /作用控制分享出去时的标题、描述、封面图2. Twitter Cardmeta nametwitter:card contentsummary_large_image / meta nametwitter:title content文章标题 / meta nametwitter:description content文章描述 / meta nametwitter:image contentcover.jpg /七、实际开发里最常用的几个如果面试官问“常用的有哪些”重点答这几个就够了meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / meta namedescription content页面描述 / meta namekeywords content关键词 / meta nameauthor content作者 / meta http-equivX-UA-Compatible contentIEedge /八、一个完整示例head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / meta namedescription content这是一个前端学习网站 / meta namekeywords contentHTML,CSS,JavaScript,前端 / meta nameauthor contentXSimple / meta http-equivX-UA-Compatible contentIEedge / title示例页面/title /head九、面试高分回答模板meta标签主要用来定义 HTML 文档的元信息通常写在head中。常见的内容包括charset设置字符编码比如UTF-8viewport控制移动端视口和缩放description页面描述利于 SEOkeywords页面关键词author作者信息http-equiv模拟 HTTP 头比如页面刷新、浏览器兼容模式实际开发中最常用的是charset和viewportSEO 场景下常配合description、keywords使用。十、简洁背诵版meta常见字段有charset字符编码viewport移动端适配description页面描述keywords关键词author作者http-equiv刷新、兼容模式、缓存控制等十一、一句话总结meta就是给浏览器、搜索引擎和设备看的网页说明信息。