移动端必知的html5 head标签

Html5
Html5

DOCTYPE

DOCTYPE声明位于文档中最前面的位置，处于html标签之前，此标签告知浏览器文档应使用哪种HTML或者XHTML规范解析页面
DTD声明以<!DOCTYPE>开始，不区分大小写，前面没有任何内容，如果有其他内容(空格除外)会使浏览器在IE下开启怪异模式渲染网页
公共DTD，名称格式为注册//组织//类型 标签//语言

注册指组织是否由国际标准化组织ISO注册，+表示是，-表示不是
组织即组织名称，如：W3C
类型一般是DTD
标签是指定公开文本描述，即对所引用的公开文本的唯一描述性名称，后面可附带版本号
最后语言是DTD 语言的ISO 639语言标识符，如：EN表示英文，ZH表示中文

XHTML 1.0可声明三种DTD类型。分别表示严格版本、过渡版本、以及基于框架的HTML文档

  • HTML 4.01 strict

    1
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  • HTML 4.01 Transitional

    1
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  • HTML 4.01 Frameset

    1
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

  • HTML5推出更加简洁的书写，它向前向后兼容，推荐使用

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

在HTML中doctype有两个主要目的:

  • 对文档进行有效性验证
    它告诉用户代理和校验器这个文档是按照什么DTD写的。这个动作是被动的，每次页面加载时，浏览器并不会下载DTD并检查合法性，只有当手动校验页面时才启用
  • 决定浏览器的呈现模式
    对于实际操作，通知浏览器读取文档时用哪种解析算法。如果没有写，则浏览器则根据自身的规则对代码进行解析，可能会严重影响html排版布局
    浏览器有三种方式解析HTML文档，非怪异(标准)模式-怪异模式-部分怪异（近乎标准）模式

charset

声明文档使用的字符编码

1
<meta charset="utf-8">

lang属性

简体中文

1
<html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 -->

繁体中文

1
<html lang="zh-cmn-Hant"> <!-- 更加标准的 lang 属性写法  -->

优先使用 IE 最新版本和 Chrome

1
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

360 使用Google Chrome Frame

1
<meta name="renderer" content="webkit">

360 浏览器就会在读取到这个标签后，立即切换对应的极速核。 另外为了保险起见再加入

1
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

这样写可以达到的效果是如果安装了 Google Chrome Frame，则使用 GCF 来渲染页面，如果没有安装 GCF，则使用最高版本的 IE 内核进行渲染

百度禁止转码

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

1
<meta http-equiv="Cache-Control" content="no-siteapp" />

SEO 优化

  • 页面标题<title>标签

    1
    <title>your title</title>

  • 页面关键词keywords

    1
    <meta name="keywords" content="your keywords">

  • 页面描述内容description

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

  • 定义网页作者author

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

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

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

为移动设备添加 viewport

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

1
<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 宽度
  • height 高度
  • initial-scale 初始缩放比例
  • maximum-scale 最大缩放比例
  • minimum-scale 最小缩放比例
  • user-scalable 是否允许用户缩放(yes/no)

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

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

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

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

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

ios 设备

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

1
<meta name="apple-mobile-web-app-title" content="标题">

是否启用WebApp全屏模式

1
<meta name="apple-mobile-web-app-capable" content="yes" />

设置状态栏的背景颜色

1
<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,网页内容充满整个屏幕，顶部会被状态栏遮挡

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

1
<meta name="format-detection" content="telephone=no" />

禁止自动识别地址

1
<meta name="format-detection" content="address=no">

禁止自动识别日期

1
<meta name="format-detection" content="date=no">

禁止自动识别Email

1
<meta name="format-detection" content="email=no">

favicon icon

1
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- 添加 favicon icon -->

关闭chrome浏览器下翻译插件

有些时候感觉chrome浏览器下翻译插件很烦人，可以通过下面的代码禁用它

1
<meta name="google" value="notranslate" />

移动端的头部标签和meta

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->
<html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
<head>
    <!-- 声明文档使用的字符编码 -->
    <meta charset='utf-8'>
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 页面描述 -->
    <meta name="description" content="不超过150个字符"/>
    <!-- 页面关键词 -->
    <meta name="keywords" content=""/>
    <!-- 网页作者 -->
    <meta name="author" content="name, email@gmail.com"/>
    <!-- 搜索引擎抓取 -->
    <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 -->
 
    <!-- iOS 设备 begin -->
    <meta name="apple-mobile-web-app-title" content="标题">
    <!-- 添加到主屏后的标题（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
 
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!-- 设置苹果工具栏颜色 -->
    <meta name="format-detection" content="telphone=no, email=no"/>
    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <!-- iOS 图标 begin -->
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
    <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
    <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
    <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
    <!-- iOS 图标 end -->
    <!-- iOS 启动画面 begin -->
    <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
    <!-- iPad 竖屏 768 x 1004（标准分辨率） -->
    <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
    <!-- iPad 竖屏 1536x2008（Retina） -->
    <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
    <!-- iPad 横屏 1024x748（标准分辨率） -->
    <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
    <!-- iPad 横屏 2048x1496（Retina） -->
    <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
    <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
    <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
    <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
    <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
    <!-- iOS 启动画面 end -->
    <!-- iOS 设备 end -->
    <meta name="msapplication-TileColor" content="#000"/>
    <!-- Windows 8 磁贴颜色 -->
    <meta name="msapplication-TileImage" content="icon.png"/>
    <!-- Windows 8 磁贴图标 -->
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
    <!-- 添加 RSS 订阅 -->
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
    <!-- 添加 favicon icon -->
    <title>标题</title>
</head>

参考文章：

如果您觉得我的文章对您有用，请随意打赏。

您的支持将鼓励我继续创作！

¥ 打赏支持

版权声明:本文由Leo Angel创作和发表,采用署名-非商业性使用-禁止演绎3.0进行许可

转载请注明作者及出处,本文作者为:Leo Angel

本文标题:移动端必知的html5 head标签

本文链接:https://blog.luckyw.cn/2015/09/13/html5-head/

文章导航

目录

×
  1. 1. DOCTYPE
  2. 2. charset
  3. 3. lang属性
  4. 4. 优先使用 IE 最新版本和 Chrome
  5. 5. 360 使用Google Chrome Frame
  6. 6. 百度禁止转码
  7. 7. SEO 优化
  8. 8. 为移动设备添加 viewport
  9. 9. ios 设备
  10. 10. favicon icon
  11. 11. 关闭chrome浏览器下翻译插件
  12. 12. 移动端的头部标签和meta
  13. 13. 参考文章：