html5 head 标签

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

内容简介：以前我们常用的是

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

二、meta 标签

1.声明文档使用的字符编码
- <meta charset="utf-8"> 用于 HTML5
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 用于 HTML4 或者 XHTML 或用于过时的 dom 解析器
通常我们会使用短的。实际上，在 HTML5 中，以上两种是等价的，只是短的更容易被记住。更多对比见stackoverflow

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

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

3.360 使用 Google Chrome Frame

<!-- 如果没有安装 GCF(Google Chrome Frame)，使用最高版本的IE内核渲染 -->
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
复制代码

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

<!-- 强制使用webkit渲染 -->
<meta name="renderer" content="webkit"> 
<meta name="force-rendering" content="webkit">
复制代码

4.百度禁止转码在使用百度移动搜索时，百度会自动将网站进行转码，添加一些烦人的广告，如果我们不做百度广告，是可以通过 meta 标签禁止网站被转码
```
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<meta name="applicable-device" content="pc,mobile">
复制代码
```
相关网站:

5.SEO 优化

页面标题 title

<title>your title</title>
复制代码

页面关键词 keywords

<meta name="keywords" content="your keywords">
复制代码

页面描述内容 description

<meta name="description" content="your description">
复制代码

定义网页作者 author

<meta name="author" content="author,email address">
复制代码

定义网页搜索引擎索引方式SEO--Robots

<meta name="robots" content="index,follow">
复制代码

6.为移动设备添加 viewport ,可以让布局在移动浏览器上显示的更好
```
<meta
    name ="viewport"
    content ="
        width=device-width,
        initial-scale=1.0,
        maximum-scale=3.0,
        minimum-scale=1.0,
        user-scalable=no
    "
>
复制代码
```
width=device-width 会导致 iPhone5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边

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

7.ios 设备

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

<meta name="apple-mobile-web-app-title" content="标题">
复制代码

是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏

<meta name="apple-mobile-web-app-capable" content="yes"/>
复制代码

设置状态栏的背景颜色

<!-- 在 "apple-mobile-web-app-capable" content="yes" 时生效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
复制代码

content 参数

default 默认值。
black 状态栏背景是黑色。
black-translucent 状态栏背景是黑色半透明。
    如果设置为 default 或 black ,网页内容从状态栏底部开始。
    如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。
复制代码

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

<meta name="format-detection" content="telephone=no" />
<!-- 电话号码、邮箱 -->
<meta name="format-detection" content="telephone=no,email=no" />
复制代码

添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）

<meta
    name="apple-itunes-app"
    content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"
> 
复制代码

content 属性可以传三个参数，以逗号隔开:

app-id(必选) 填写应用在APPStrore的ID 
affiliate-data(可选) 是iTunes 分销联盟计划的ID 一般用不到。
app-argument（可选）点击『打开』给APP传参数
复制代码

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

<meta name="google" value="notranslate" />
复制代码

9.去除手机半透明背景
- ios 点击链接，会出现一个半透明灰色遮罩
```
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
复制代码
```
- android 点击链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可以做一下设置去除部分机器自带的效果
```
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
复制代码
```
- windows phone 系统，点击标签产生的灰色半透明背景，添加 meta 标签去除
```
<meta name="msapplication-tap-highlight" content="no">
复制代码
```
注意：部分机型可能去除不了，如果是按钮，可以避免使用 a 、 input ，使用 div 代替

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

<meta http-equiv="Refresh" content="2;URL=http://www.baidu.com">
复制代码

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

<!-- 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">
复制代码

12.应用模式

<!-- UC应用模式:默认全屏，禁止长按菜单，禁止手势，标准排版，强制图片显示 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
复制代码

browsermode 作用：

<!-- UC使用适屏模式显示 -->
<meta name="layoutmode" content="fitscreen">
<!-- UC强制图片显示 -->
<meta name="imagemode" content="force">
<!-- UC禁止夜间模式显示 enable|disable -->
<meta name="nightmode" content="disable">
<!-- UC当页面有太多文字时禁止缩放 -->
<meta name="wap-font-scale" content="no">  
复制代码

13.UC排版模式

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

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

<!-- Set-Cookie(cookie设定):如果网页过期，那么存盘的cookie将被删除 GMT格式 -->
<meta
    http-equiv="Set-Cookie"
    content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT;path=/"
>
复制代码

三、参考链接

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

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

码农书籍

数据压缩导论（第4版）

[美] Khalid Sayood / 贾洪峰 / 人民邮电出版社 / 2014-1 / 129.00

数据压缩已经成为信息革命的一门支撑技术，这场革命已经改变了我们的生活，而在此过程中，数据压缩也变得几乎无处不在。从MP3播放器到智能手机，再到数字电视和数字电影，数据压缩几乎成了所有信息技术的必备要素。近年来，以大数据为标志的互联网技术高歌猛进。数据规模大、产生速度快、来源多样等特性，导致数据存储和处理都前所未有地复杂。《数据压缩导论（第4版）》作为迄今为止数据压缩领域最全面而深入的著作，......一起来看看《数据压缩导论（第4版）》这本书的介绍吧!

码农工具

html5 head 标签

二、meta 标签

三、参考链接

数据压缩导论（第4版）

随机密码生成器

URL 编码/解码

RGB HSV 转换