html5 head 标签

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

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

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

html5 head 标签

二、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" />
    <!-- 表示页面同时适合在移动设备和PC上进行浏览 -->
    <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">
    复制代码
    html5 head 标签
  • 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 全屏模式打开页面时出现黑边

    html5 head 标签

    注意: 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">
    复制代码

    注意:部分机型可能去除不了,如果是按钮,可以避免使用 ainput ,使用 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 作用:

    html5 head 标签
    <!-- 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=/"
    >
    复制代码

三、参考链接


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

查看所有标签

猜你喜欢:

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

100个可操作的网络赚钱方法

100个可操作的网络赚钱方法

陶秋丰 / 云南科技 / 2009-12 / 29.80元

《100个可操作的网络赚钱方法》专为有志于网上创业的读者量身打造,作者是“实战型”的网赚高手,在17岁时就通过互联网创业“年人10万”,如今结合自身的亲身实战经验,与大家分享可以实实在在盈利的100个网络赚钱方法和技巧。内容包括:网站创建与推广、竞价广告、联盟赚钱、网站SEO优化、域名投资、广告投放盈利、威客、博客、淘客赚钱等多个方面。 本手册中作者结合自身的网络赚钱经历,通过具体的、可操作......一起来看看 《100个可操作的网络赚钱方法》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码