html5 head 标签

一、html lang 属性

以前我们常用的是 或简写的 ，但实际上 W3 language tags 推荐使用 zh-Hans 简体中文、zh-Hant 繁体中文，可以提高一致性和准确。

二、meta 标签

• 1.声明文档使用的字符编码

  • 用于 HTML5
  • 用于 HTML4 或者 XHTML 或用于过时的 dom 解析器

通常我们会使用短的。实际上，在 `HTML5` 中，以上两种是等价的，只是短的更容易被记住。更多对比见 [stackoverflow](https://stackoverflow.com/questions/4696499/meta-charset-utf-8-vs-meta-http-equiv-content-type)

• 2.优先使用 IE 最新版本和 Chrome

• 3.360 使用 Google Chrome Frame

  具体详情见 360 浏览器内核控制

• 4.百度禁止转码
  在使用百度移动搜索时，百度会自动将网站进行转码，添加一些烦人的广告，如果我们不做百度广告，是可以通过 meta 标签禁止网站被转码

  相关网站:

  • 百度移动搜索
  • 起飞页网站
  • 博客

• 5.SEO 优化

  • 页面标题 title
  • 页面关键词 keywords
  • 页面描述内容 description
  • 定义网页作者 author
  • 定义网页搜索引擎索引方式 SEO--Robots

![](https://user-gold-cdn.xitu.io/2019/5/23/16ae459c9036a639?w=1029&h=326&f=png&s=28100)

• 6.为移动设备添加 viewport,可以让布局在移动浏览器上显示的更好

  width=device-width 会导致 iPhone5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边

  注意： minimal-ui iOS8 中已经删除

• 7.ios 设备

  • 添加到主屏后的标题（iOS 6 新增）
  • 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏
  • 设置状态栏的背景颜色

[content 参数](http://blog.jayself.com/2014/03/22/meta/)
```
default 默认值。
black 状态栏背景是黑色。
black-translucent 状态栏背景是黑色半透明。
    如果设置为 default 或 black ,网页内容从状态栏底部开始。
    如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。
```

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



```

- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
```html
 
```
content 属性可以传三个参数，以逗号隔开:
```
app-id(必选) 填写应用在APPStrore的ID 
affiliate-data(可选) 是iTunes 分销联盟计划的ID 一般用不到。
app-argument（可选）点击『打开』给APP传参数
```

• 8.关闭 chrome 浏览器下翻译插件

• 9.去除手机半透明背景

  • ios 点击链接，会出现一个半透明灰色遮罩

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  • android 点击链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可以做一下设置去除部分机器自带的效果

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  • windows phone 系统，点击标签产生的灰色半透明背景，添加 meta 标签去除

注意：部分机型可能去除不了，如果是按钮，可以避免使用 `a`、`input`，使用 `div` 代替

• 10.刷新浏览器
  content -- 时间;网址

• 11.强制竖屏与全屏
  landscape -- 横屏;portrait -- 竖屏

• 12.应用模式

  browsermode 作用：
  

• 13.UC排版模式

  UC 浏览器提供两种排版模式，分别是适屏模式（fitscreen）及标准模式（standard），其中适屏模式简化了一些页面的处理，使得页面内容更适合进行页面阅读、节省流量及响应更快，而标准模式则能按照标准规范对页面进行排版及渲染。

• 14.cookie 设定指定时间后删除

三、参考链接

• SEO--Robots
• 移动端头部 meta 大全