首页vns威尼斯城官网登入 › 有一个新的 charset 属性,-- 更加标准的 lang 属性写法...

有一个新的 charset 属性,-- 更加标准的 lang 属性写法...

meta 详解,html5 meta 标签平常设置,metahtml5

<!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 protected]"/>
    <!-- 搜索引擎抓取 -->
    <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">
    <!-- 针对手持设备优化,主要是针对一些老的不识别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 -->

    <title>标题</title>
</head>
  

  

详解,html5 meta 标签平常设置,metahtml5
!DOCTYPE html !-- 使用 HTML5 doctype,不区分轻重缓急写 --html
lang="zh-cmn-汉斯" !-- 越发专门的工作的 lang 属性写法...

<!--[if IE 6]> 仅IE6可识别 <![endif]-->

实例讲解HTML5的meta标签的有的施用,实例疏解html5meta

那篇小说重要介绍了HTML5下meta标签的一对使用措施实例,富含在移动前端页面上的一个应用例子,须要的仇人能够参照下

HTML 4.01 与 HTML 5 之间meta标签用法的要紧差别:

在 HTML 5 中,不再扶助 scheme 属性。

在 HTML 5 中,有一个新的 charset 属性,它使字符集的概念特别便于。

在 HTML 4.01 中,不得不那样写:

XML/HTML Code复制内容到剪贴板

  1. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  

在 HTML 5 中,那样就够了:

XML/HTML Code复制内容到剪贴板

  1. <meta charset="ISO-8859-1">  

例子

概念针对查找引擎的首要词:

XML/HTML Code复制内容到剪贴板

  1. <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />  

概念对页面包车型地铁汇报:

XML/HTML Code复制内容到剪贴板

  1. <meta name="description" content="无偿的 web 才能教程。" />  

概念页面包车型客车流行版本:

XML/HTML Code复制内容到剪贴板

  1. <meta name="revised" content="David, 2008/8/8/" />  

每 5 秒刷新二次页面:

XML/HTML Code复制内容到剪贴板

  1. <meta http-equiv="refresh" content="5" />  

属性
图片 1

标准属性

class, contenteditable, contextmenu, dir, draggable, id, irrelevant,
lang, ref, registrationmark, tabindex, template,
title如需完整的叙说,请访谈 HTML 5 中规范属性。

事件性质

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu,
ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover,
ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup,
onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout,
onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit,
onunload如需完整的叙说,请访问 HTML 5 中事件性质。

 实例

文书档案描述

XML/HTML Code复制内容到剪贴板

  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  4. <meta name="author" content="w3school.com.cn">  
  5. <meta name="revised" content="David Yang,8/1/07">  
  6. <meta name="generator" content="Dreamweaver 8.0en">  
  7. </head>  
  8. <body>  
  9. <p>本文书档案的 meta 属性标志了创我和编辑软件。</p>  
  10. </body>  
  11. </html>  

Meta 元素中的音信能够描述 HTML 文书档案。

文书档案关键字

XML/HTML Code复制内容到剪贴板

  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  4. <meta name="description" content="HTML examples">  
  5. <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">  
  6. </head>  
  7. <body>  
  8. <p>本文书档案的 meta 属性描述了该文书档案和它的首要词。</p>  
  9. </body>  
  10. </html>  

Meta 成分中的新闻能够描述文书档案的重大词。

重定向

XML/HTML Code复制内容到剪贴板

  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  4. <meta http-equiv="Refresh" content="5;url=;  
  5. </head>  
  6. <body>  
  7. <p>  
  8. 对不起。我们早已搬家了。您的 U汉兰达L 是 <a href=";  </a>  
  9. </p>  
  10. <p>您将要 5 秒内被重定向到新的地址。</p>  
  11. <p>倘诺超越 5 秒后您依旧看到本音讯,请点击上边的的链接。</p>  
  12. </body>  
  13. </html>  

本条例子演示:在网站已经济体制改进变的状态下,将用户重定向到另外贰个地点。

挪动前端开辟中增加一些webkit专门项指标HTML5底部标签,帮忙浏览器越来越好分析html代码,越来越好地将移步web前端页面表现出来。本文整理一些常用的meta标签。

XML/HTML Code复制内容到剪贴板

  1. <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分轻重缓急写 -->  
  2. <html lang="zh-cmn-Hans"> <!-- 特别正规化的 lang 属性写法  -->  
  3. <head>  
  4.     <!-- 表明文书档案使用的字符编码 -->  
  5.     <meta charset='utf-8'>  
  6.     <!-- 优先利用 IE 最新版本和 Chrome -->  
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>  
  8.     <!-- 页面描述 -->  
  9.     <meta name="description" content="不超过150个字符"/>  
  10.     <!-- 页面关键词 -->  
  11.     <meta name="keywords" content=""/>  
  12.     <!-- 网页小编 -->  
  13.     <meta name="author" content="name, [email protected]"/>  
  14.     <!-- 搜索引擎抓取 -->  
  15.     <meta name="robots" content="index,follow"/>  
  16.     <!-- 为活动道具增添 viewport -->  
  17.     <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">  
  18.     <!-- `width=device-width` 会导致 金立 5 增加到主屏后以 WebApp 全屏形式张开页面时出现黑边  -->  
  19.     
  20.     <!-- iOS 设备 begin -->  
  21.     <meta name="apple-mobile-web-app-title" content="标题">  
  22.     <!-- 增多到主屏后的标题(iOS 6 新添) -->  
  23.     <meta name="apple-mobile-web-app-capable" content="yes"/>  
  24.     <!-- 是不是启用 WebApp 全屏格局,删除苹果默许的工具栏和菜单栏 -->  
  25.     
  26.     <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">  
  27.     <!-- 加多智能 App 广告条 斯马特 App Banner(iOS 6+ Safari) -->  
  28.     <meta name="apple-mobile-web-app-status-bar-style" content="black"/>  
  29.     <!-- 设置苹果工具栏颜色 -->  
  30.     <meta name="format-detection" content="telphone=no, email=no"/>  
  31.     <!-- 忽略页面中的数字识别为电话,忽略email识别 -->  
  32.     <!-- 启用360浏览器的极速格局(webkit) -->  
  33.     <meta name="renderer" content="webkit">  
  34.     <!-- 制止IE使用卓殊情势 -->  
  35.     <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  36.     <!-- 不让百度转码 -->  
  37.     <meta http-equiv="Cache-Control" content="no-siteapp" />  
  38.     <!-- 针对手持设备优化,主若是针对有的老的不识别viewport的浏览器,比如Motorola -->  
  39.     <meta name="HandheldFriendly" content="true">  
  40.     <!-- 微软的过时浏览器 -->  
  41.     <meta name="MobileOptimized" content="320">  
  42.     <!-- uc强制竖屏 -->  
  43.     <meta name="screen-orientation" content="portrait">  
  44.     <!-- QQ强制竖屏 -->  
  45.     <meta name="x5-orientation" content="portrait">  
  46.     <!-- UC强制全屏 -->  
  47.     <meta name="full-screen" content="yes">  
  48.     <!-- QQ强制全屏 -->  
  49.     <meta name="x5-fullscreen" content="true">  
  50.     <!-- UC应用情势 -->  
  51.     <meta name="browsermode" content="application">  
  52.     <!-- QQ应用情势 -->  
  53.     <meta name="x5-page-mode" content="app">  
  54.     <!-- windows phone 点击无强光 -->  
  55.     <meta name="msapplication-tap-highlight" content="no">  
  56.     <!-- iOS 图标 begin -->  
  57.     <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>  
  58.     <!-- iPhone 和 iTouch,默认 57x57 像素,必须有 -->  
  59.     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>  
  60.     <!-- Retina 小米 和 Retina iTouch,114x114 像素,能够未有,但推荐有 -->  
  61.     <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>  
  62.     <!-- Retina 三星GALAXY Tab,144x144 像素,能够未有,但推荐有 -->  
  63.     <!-- iOS 图标 end -->  
  64.     
  65.     <!-- iOS 运维画面 begin -->  
  66.     <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>  
  67.     <!-- 平板电脑 竖屏 768 x 1004(标准分辨率) -->  
  68.     <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>  
  69.     <!-- iPad 竖屏 1536x2008(Retina) -->  
  70.     <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>  
  71.     <!-- 华为平板 横屏 1024x748(标准分辨率) -->  
  72.     <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>  
  73.     <!-- iPad 横屏 2048x1496(Retina) -->  
  74.     
  75.     <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>  
  76.     <!-- 一加/iPod Touch 竖屏 320x480 (标准分辨率) -->  
  77.     <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>  
  78.     <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->  
  79.     <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>  
  80.     <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->  
  81.     <!-- iOS 运转画面 end -->  
  82.     
  83.     <!-- iOS 设备 end -->  
  84.     <meta name="msapplication-TileColor" content="#000"/>  
  85.     <!-- Windows 8 磁贴颜色 -->  
  86.     <meta name="msapplication-TileImage" content="icon.png"/>  
  87.     <!-- Windows 8 磁贴Logo -->  
  88.     
  89.     <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>  
  90.     <!-- 添加 RSS 订阅 -->  
  91.     <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>  
  92.     <!-- 添加 favicon icon -->  
  93.   
  94.     <!-- sns 社交标签 begin -->  
  95.     <!-- 参谋和讯API -->  
  96.     <meta property="og:type" content="类型" />  
  97.     <meta property="og:url" content="URL地址" />  
  98.     <meta property="og:title" content="标题" />  
  99.     <meta property="og:image" content="图片" />  
  100.     <meta property="og:description" content="描述" />  
  101.     <!-- sns 社交标签 end -->  
  102.     
  103.     <title>标题</title>  
  104. </head>  

这篇文章主要介绍了HTML5下meta标签的某些接纳措施实例,蕴涵在移动前端页面上的一个...

<!--[if IE]> 所有的IE可识别 <![endif]-->

<!--[if gte IE 7]> IE7以及IE7以上版本可甄别 <![endif]-->

<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->

 

 

<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->

转载本站文章请注明出处:vns威尼斯城官网登入 http://www.tiec-ccpittj.com/?p=626

上一篇:

下一篇:

相关文章