html5 head 标签

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

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

以前我们常用的是 <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=/"
>
复制代码

三、参考链接

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

查看所有标签

猜你喜欢:

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

码农书籍

Web Security Testing Cookbook

Paco Hope、Ben Walther / O'Reilly Media / 2008-10-24 / USD 39.99

Among the tests you perform on web applications, security testing is perhaps the most important, yet it's often the most neglected. The recipes in the Web Security Testing Cookbook demonstrate how dev......一起来看看《Web Security Testing Cookbook》这本书的介绍吧!

码农工具

URL 编码/解码

XML、JSON 在线转换

在线XML、JSON转换工具

XML 在线格式化

在线 XML 格式化压缩工具