HTML head 头标签详细介绍

2020-04-15 21:45:17易采站长站整理

页面描述内容 description

XML/HTML Code复制内容到剪贴板

<meta name="description" content="your description">  

定义网页作者 author

XML/HTML Code复制内容到剪贴板

<meta name="author" content="author,email address">  

定义网页搜索引擎索引方式,robotterms 是一组使用英文逗号「,」分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。

XML/HTML Code复制内容到剪贴板

<meta name="robots" content="index,follow">  

相关链接:WEB1038 – 标记包含无效的值

viewport

  viewport 可以让布局在移动浏览器上显示的更好。 通常会写

XML/HTML Code复制内容到剪贴板

<meta name="viewport" content="width=device-width, initial-scale=1.0">  

width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://bigc.at/ios-webapp-viewport-meta.orz)

content 参数:

width viewport 宽度(数值/device-width)
height viewport 高度(数值/device-height)
initial-scale 初始缩放比例
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户缩放(yes/no)
minimal-ui iOS 7.1 beta 2 中新增属性,可以在页面加载时最小化上下状态栏。这是一个布尔值,可以直接这样写:

XML/HTML Code复制内容到剪贴板

<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">  

而如果你的网站不是响应式的,请不要使用 initial-scale 或者禁用缩放。

XML/HTML Code复制内容到剪贴板

<meta name="viewport" content="width=device-width,user-scalable=yes">  

相关链接:非响应式设计的viewport

  适配 iPhone 6 和 iPhone 6plus 则需要写:

XML/HTML Code复制内容到剪贴板

<meta name="viewport" content="width=375">  
<meta name="viewport" content="width=414">  

大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px,iPhone 6 上却是 375px,大部分 5.5 寸安卓机器(比如说三星 Note)的 viewport 宽为 400,iPhone 6 plus 上是 414px。

  ios 设备

  添加到主屏后的标题(iOS 6 新增)

XML/HTML Code复制内容到剪贴板

<meta name="apple-mobile-web-app-title" content="标题"> <!– 添加到主屏后的标题(iOS 6 新增) –>  

是否启用 WebApp 全屏模式