常用的 HTML 头部标签

曾几何时，我们已经不再手写 HTML 标签。Emmet、Markdown 等工具让我们「健步如飞」，但是我们真的了解这些标签了吗？

基本标签

使用 HTML5 doctype，不区分大小写。

<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->

声明文档使用的字符编码

<meta charset='utf-8'> <!-- 声明文档使用的字符编码 -->

优先使用 IE 最新版本和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 优先使用 IE 最新版本和 Chrome -->

SEO 优化

每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。详细介绍

<meta name="description" content="不超过150个字符" /> <!-- 页面描述 -->

页面关键词

<meta name="keywords" content=""/> <!-- 页面关键词 -->

定义页面标题

<title>标题</title>

定义网页作者

<meta name="author" content="name, email@gmail.com" /> <!-- 网页作者 -->

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

<meta name="robots" content="index,follow" /> <!-- 搜索引擎抓取 -->

可选标签

为移动设备添加 viewport

<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">

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 中新增属性（注意：iOS8 中已经删除），可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

iOS 设备

1.添加到主屏后的标题（iOS 6 新增）

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

2.是否启用 WebApp 全屏模式

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否启用 WebApp 全屏模式 -->

3.设置状态栏的背景颜色

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

只有在设置 "apple-mobile-web-app-capable" content="yes" 时生效

content 参数：

  • default 默认值。
  • black 状态栏背景是黑色。
  • black-translucent 状态栏背景是黑色半透明。

如果设置为 default 或 black ,网页内容从状态栏底部开始。

如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

4.禁止数字识自动别为电话号码

<meta name="format-detection" content="telephone=no" /> <!-- 禁止数字识自动别为电话号码 -->

Android

Android Lollipop 中的 Chrome 39 增加 theme-color meta 标签，用来控制选项卡颜色。

http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android

<meta name="theme-color" content="#db5945">

Windows 8

  • Windows 8 磁贴颜色 
    <meta name="msapplication-TileColor" content="#000"/>
  • Windows 8 磁贴图标 
    <meta name="msapplication-TileImage" content="icon.png"/>

其他

  • 添加 RSS 订阅 
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
  • 添加 favicon icon 
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
  • 禁止 Chrome 浏览器中自动提示翻译 
    <meta name="google" value="notranslate">

原文见：https://github.com/yisibl/blog/issues/1

 

posted @ 2015-01-27 15:02  ！win ！  阅读(633)  评论(0)    收藏  举报