`
neeleon
  • 浏览: 185874 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

html一些常用的meta属性设置

 
阅读更多

<!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">
 <!-- 不让百度转码 -->
 <meta http-equiv="Cache-Control" content="no-siteapp" />
 <!-- 针对手持设备优化，主要是针对一些老的不识别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 -->
 <!-- sns 社交标签 begin -->
 <!-- 参考微博API -->
 <meta property="og:type" content="类型" />
 <meta property="og:url" content="URL地址" />
 <meta property="og:title" content="标题" />
 <meta property="og:image" content="图片" />
 <meta property="og:description" content="描述" />
 <!-- sns 社交标签 end -->
 
 <title>标题</title>
</head

分享到：
| Android开源git40个App源码
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    页面的缓存与不缓存设置及html页面中meta的作用

    例如，`meta`标签的`http-equiv`属性可以设置`Pragma`和`Cache-Control`的等效值： ```html &lt;meta http-equiv="Pragma" content="no-cache"&gt; &lt;meta http-equiv="Cache-Control" content="no-cache, no-store, must-...

    html meta viewport属性说明

    什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”...一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下： &lt;meta name=”viewport” content

    实例讲解HTML5的meta标签的一些应用

    本文档的meta属性标识了创作者和编辑软件。 &lt;/html&gt; ``` 在这个例子中，meta标签提供了文档的字符编码、作者、最后修订日期和生成器信息。 此外，meta元素还可以包含文档的描述信息，比如网页的主题或主要内容。...

    html meta metahtml

    #### 常用`&lt;meta&gt;`标签属性 - **`http-equiv`属性** - `http-equiv`属性通常与`content`属性一起使用，用于模拟HTTP头部信息。 - 示例：设置页面编码为GB2312 ```html &lt;meta ...

    Head内meta的参数设置

    ### HTML中的`&lt;meta&gt;`标签及其参数设置详解 在网页开发过程中，`&lt;meta&gt;`标签是一种非常重要的元素，它主要用于向浏览器提供元数据（metadata），这些元数据虽然不会直接显示在页面上，但对于页面的正确解析、SEO...

    meta属性 不下浪费你的时间

    ### Meta属性详解与SEO优化的重要性 #### 一、Meta属性概览 在网页开发与SEO（搜索引擎优化）领域，正确理解和应用`&lt;meta&gt;`标签至关重要。`&lt;meta&gt;`标签是HTML文档头部的一部分，用于提供关于网页的信息，这些信息...

    HTML5常用基础标签.docx

    下面将详细介绍 HTML5 的基本结构和一些常用的基础标签。 一、HTML 的基本结构 HTML 的基本结构主要由以下几部分组成： * `&lt;!DOCTYPE html&gt;`：文档类型声明，表明该文档是 HTML5 文档。 * `&lt;html&gt;`：root 元素，...

    HTML5中meta属性的使用方法

    meta属性在HTML中占据了很重要的位置。如：针对搜索引擎的SEO，文档的字符编码，设置刷新缓存等。虽然一些网页可能没有使用meta，但是作为正规军，我们还是有必要了解一些meta的属性，并且能够熟练使用它们。 1、...

    HTML常用标签和属性PPT

    这篇PPT "HTML常用标签和属性" 是为初学者设计的，旨在帮助他们快速掌握HTML的核心概念。 1. HTML标签： HTML标签是HTML中的基本元素，通常由尖括号包围，如`&lt;html&gt;`、`&lt;head&gt;`、`&lt;body&gt;`等。这些标签定义了网页的...

    meta标签中的

    #### 二、Meta标签的常用属性 1. **name属性** - **Keywords (关键词)**：指定了页面的关键字或短语列表，这有助于搜索引擎理解页面的主题。 ```html &lt;meta name="Keywords" content="science, education, ...

    htmlmeta信息介绍说明meta_intro.pdf

    `Content`属性定义了Cookie的值，以及一些附加信息，如过期时间（使用GMT时间格式）。如果页面过期，与该页面关联的Cookie也会被删除。这在管理用户会话或个性化体验时非常关键。 4. **Window-target** (显示窗口...

    html meta tags

    本文将详细解释Meta标签的概念、用途及其实现方式，并深入探讨其中的一些关键属性如`HTTP-EQUIV`与`NAME`。 #### Meta标签简介 Meta标签主要被用来提供关于HTML文档本身的元数据，这些信息不会显示在页面上，但对...

    html meta标签使用方法

    ### HTML Meta标签使用方法详解 #### 一、Meta标签简介 HTML中的`&lt;meta&gt;`标签是一种重要的元数据标记，它通常位于文档的`&lt;head&gt;`部分。Meta标签用于定义关于HTML文档的元信息，这些信息不会显示在页面上，但对...

    HtmlHead与HtmlMeta(2.0)

    这里，我们创建了一个新的`HtmlMeta`对象，设置了它的`HttpEquiv`属性为"Content-Type"，表示这是一个HTTP头部等效的元标签，然后设置`Content`属性为页面的字符集。 `HtmlMeta`类还可以用于SEO（搜索引擎优化），...

    HTML标签meta总结,HTML5 head meta 属性整理

    以上就是关于HTML5 head中的meta属性的常见用法和功能的总结。理解并恰当使用这些meta标签，可以帮助开发者优化网站性能，提高搜索引擎排名，提升移动端用户体验，同时也能确保在不同设备和浏览器上的良好展示。在...

    HTML5 常用语法一览(列举不支持的属性)

    在HTML5之前，`&lt;body&gt;`标签有一些特殊的属性，如`text`、`bgcolor`、`background`、`link`、`alink`、`vlink`等，用于设置文本颜色、背景颜色和链接颜色等。然而在HTML5中，这些属性已被废弃，建议使用CSS来替代，以...

    HTML中meta详解

    以下是对`meta`标签及其各种属性的详细解释： 1. **name属性**： - `Generator`: 用于标识创建网页的工具或软件，例如`&lt;meta name="Generator" content="Microsoft FrontPage4.0"&gt;`。 - `Keywords`: 描述网页的...

    HTML中小meta的大作用.txt

    除了上述属性之外，还有一些较少见但仍然有用的属性，例如： - **Pics-Label**：用于定义页面的评级信息，以支持IE的家长控制功能。 - 示例：`&lt;meta http-equiv="Pics-Label" content="..."&gt;` - **Windows-Target*...

    HTML5 对各个标签的定义与规定：meta

    3. **字符集设置**：一个文档中只能有一个`&lt;meta&gt;`标签来设置`charset`属性。这是因为字符集设置决定了整个文档的编码方式，过多的设置会导致不必要的混乱。 #### 四、`&lt;meta&gt;`标签的DOM接口 根据HTML5标准，`...

Magicbox
Global site tag (gtag.js) - Google Analytics