移动前端不得不了解的HTML5 head 头标签

栏目: Html5 · 发布时间: 5年前

内容简介：HTML的头部内容特别多，有针对SEO的头部信息，也有针对移动设备的头部信息。而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性。移动端的工作已经越来越成为前端工作的重要内容，除了平常的项目开发，HTML 头部标签功能，特别是meta，link等标签的功能属性显得非常重要。这里整理了一份<!doctype html><html>

HTML的头部内容特别多，有针对SEO的头部信息，也有针对移动设备的头部信息。而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性。移动端的工作已经越来越成为前端工作的重要内容，除了平常的项目开发，HTML 头部标签功能，特别是meta，link等标签的功能属性显得非常重要。这里整理了一份 <head> 部分的清单，让大家了解每个标签及相应属性的意义，写出满足自己需求的 <head> 头部标签，可以很有效的增强页面的可用性。

<!doctype html>

<html>

<head>

<!–移动端的页面这个可以忽略，具体可以查看本文Internet Explorer浏览器部分–>

<!–具体可以查看本文为移动设备添加 viewport 部分–>

<!– 以上 3 个 meta 标签 *必须* 放在 head 的最前面；其他任何的 head 内容必须在这些标签的 *后面* –>

…

</head>

在桌面开发的时候可以让IE浏览器以最新的模式渲染页面，具体可以查看本文Internet Explorer浏览器部分。

如果你的页面确定只在桌面浏览器中运行，那么

html 代码:

也可以省略。

DOCTYPE

DOCTYPE(Document Type)，该声明位于文档中最前面的位置，处于 html 标签之前，此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。

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

html 代码:

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

charset

声明文档使用的字符编码，

html 代码:

html5 之前网页中会这样写：

html 代码:

这两个是等效的，具体可移步阅读：<meta charset=’utf-8′> vs <meta http-equiv=’Content-Type’>，所以建议使用较短的，易于记忆。

lang属性

更加标准的 lang 属性写法 http://zhi.hu/XyIa

简体中文

html 代码:

繁体中文

html 代码:

很少情况才需要加地区代码，通常是为了强调不同地区汉语使用差异，例如：

html 代码:

菠萝和鳳梨其实是同一种水果。只是大陆和台湾称谓不同，且新加坡、马来西亚一带的称谓也是不同的，称之为黄梨。

为什么 lang=”zh-cmn-Hans” 而不是我们通常写的 lang=”zh-CN” 呢，请移步阅读: 页头部的声明应该是用 lang=”zh” 还是 lang=”zh-cn”。

Meta 标签

meta标签是HTML中head头部的一个辅助性标签，它位于HTML文档头部的 <head> 和 <title> 标记之间，它提供用户不可见的信息。虽然这部分信息用户不可见，但是其作用非常强大，特别是当今的前端开发工作中，设置合适的meta标签可以大大提升网站页面的可用性。

桌面端开发中，meta标签通常用来为搜索引擎优化（SEO）及 robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面使其可以根据你定义的时间间隔刷新自己，以及设置RASC内容等级，等等。

移动端开发中，meta标签除了桌面端中的功能设置外，还包括，比如viewport设置，添加到主屏幕图标，标签页颜色等等实用设置。具体可以看后面详细的介绍。

meta标签分类

meta标签根据属性的不同，可分为两大部分：http-equiv 和 name 属性。

http-equiv：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助浏览器正确地显示网页内容。

name属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于浏览器，搜索引擎等机器人识别，等等。

为移动设备添加 viewport

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

<!– `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 中已经删除），可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：

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

html 代码:

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

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

html 代码:

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

不推荐的 meta 属性

<!– 用于声明文档语言，但支持得不是很好。最好使用 <html lang=””> –>

<!– Google 无视 & Bing 认为垃圾的指示器 –>

<!– 目前没有在任何搜索引擎中使用过的声明 –>

<!– 为垃圾邮件机器人收获 email 地址提供了一种简单的方式 –>

<!– 最好使用 <link rel=”author”> 或 humans.txt 文件 –>

<!– 告诉搜索机器人一段时间后重新访问该网页。这不支持，因为大多数搜索引擎使用随机时间间隔来重新抓取网页 –>

<!– 在一段时间后将用户重定向到新的 URL –>

<!– W3C 建议不要使用该标签。Google 建议使用服务器端的 301 重定向。–>

<!– 描述网站的主题 –>

<!– 公司概要或网站目的 –>

<!– 一个已废弃的标签，和关键词 meta 标签的作用相同 –>

<!– 是否是相同的 URL，年代久远且不支持 –>

<!– 和关键词标签类似的功能 –>

<!– 确保你的网站在所有国家和语言中都能显示 –>

<!– 和 coverage 标签相同 –>

<!– 控制在互联网上哪些用户可以访问 –>

<!– 缓存控制 –>

<!– 最好在服务器端配置缓存控制 –>

SEO 优化部分

页面标题<title>标签(head 头部必须)

<title>your title</title>

页面关键词 keywords

页面描述内容 description

定义网页作者 author

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

百度禁止转码

通过百度手机打开网页时，百度可能会对你的网页进行转码，往你的身上贴狗皮膏药的广告，为此可在 head 内添加

link 标签

说到 link 标签，估计大家的第一反应和我一样，就是引入外部CSS样式文件的，不错，这是 link 标签最最常用的功能。不过它还有很多别的用处，比如这是浏览器 favicon 图标，touch图标等等。

<!– 有助于防止出现内容重复的问题 –>

<!– 之前用于包含 icon 链接，但已被废弃并不再使用 –>

<!– 链接到当前文档的一个 AMP HTML 版本 –>

<!– 表明一个 CSS 样式表 –>

<!– 链接到一个指定 Web 应用程序“安装”证书的 JSON 文件 –>

<!– 链接到文档的作者 –>

<!– 指向一个适用于链接内容的版权申明 –>

<!– 给出可能的你的另一种语言的文档位置参考 –>

<!– 提供了关于作者或其他人的信息 –>

<!– 链接到一个文档，包含当前文档的一个归档链接 –>

<!– 链接到层次结构中的顶级资源 –>

<!– 给出该文档的起点 –>

<!– 引导当前文档的前述资源序列 –>

<!– 给出一个自我参考 – 当文档有多个可能的参考时非常有用 –>

<!– 分别是在一系列文件中的第一个、下一个、上一个和最后一个 –>

<!– 当使用第三方服务来维护 blog 时使用 –>

<!– 当另一个 WordPress 博客链接到你的 WordPress 博客或文章时形成一个自动化的评论 –>

<!– 当你在自己的页面上链接到一个 url 时通知它 –>

<!– 加载一个外部的 HTML 文件到当前 HTML 文件中 –>

<!– 打开搜索 –>

<!– Feeds –>

<!– 预取，预载，预浏览 –>

<!– 更多信息：https://css-tricks.com/prefetching-preloading-prebrowsing/ –>

不推荐的link标签

<!– 没有用的, 专有的和错误的, 详见 https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/Y_2eFRh9BOs/gULYapoRBwAJ –>

rss订阅

<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />

 <!-- 添加 RSS 订阅 -->

favicon 图标

IE 11, Chrome, Firefox, Safari, Opera支持<link>形式设置：
<link rel="icon" href="path/to/favicon-16.png" sizes="16x16" type="image/png">
<link rel="icon" href="path/to/favicon-32.png" sizes="32x32" type="image/png">
<link rel="icon" href="path/to/favicon-48.png" sizes="48x48" type="image/png">
<link rel="icon" href="path/to/favicon-62.png" sizes="62x62" type="image/png">
<link rel="icon" href="path/to/favicon-192.png" sizes="192x192" type="image/png">

注意：对于IE 10及以下版本不支持 <link> 形式设置，只通过将命名为 favicon.ico 的文件放置在网站根目录中实现。

比较详细的 favicon 介绍可参考：

以上所述就是小编给大家介绍的《移动前端不得不了解的HTML5 head 头标签》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

赢在设计

[美] 洛芙迪 (Lance Loveday)、[美] 尼豪斯 (Sandra Niehaus) / 刘淼、枊靖、王卓昊 / 人民邮电出版社 / 2010-8 / 55.00

企业总是面临在网站设计和改进方面进行投资的抉择。怎样才能让有限的资金发挥出最大的效益呢？网站设计不应只是把网站做得赏心悦目，它更应该是提高经济收益和获得竞争优势的战略利器。是时候让网站发挥其潜能，以业务指标为导向来做设计决策，为提升网站收益而设计了。作者凭借多年为众多网站做咨询工作的经验，为我们揭示了赢在设计的奥秘。它针对目前网站设计中存在的典型问题，先从宏观上探讨解决问题的战略手段，围绕......一起来看看《赢在设计》这本书的介绍吧!

码农工具

移动前端不得不了解的HTML5 head 头标签

Meta 标签

meta标签分类

推荐使用的meta标签

为移动设备添加 viewport

不推荐的 meta 属性

SEO 优化部分

百度禁止转码

link 标签

不推荐的link标签

rss订阅

favicon 图标

赢在设计

JSON 在线解析

Base64 编码/解码

MD5 加密