HTML 메타 백과사전

Guanhui앞으로: 2020-07-20 13:10:593164검색

HTML 메타 백과사전

Meta 태그는 HTML 언어의 head 영역에 있는 보조 태그로 HTML 문서의 head 태그와 title 태그 사이에 위치하여 사용자에게 보이지 않는 정보를 제공합니다.
메타: 메타데이터는 데이터 중의 데이터 정보입니다.

메타데이터는 브라우저(콘텐츠가 표시되거나 페이지가 다시 로드되는 방식), 검색 엔진(키워드) 또는 기타 웹 서비스를 사용하여 호출할 수 있습니다.

우리말로는 그 자체로는 쓸모없는 태그지만, 다른 속성을 통해 내부에 특정 효과를 설정하면 작동하므로 이를 "메타데이터"라고 부릅니다.

<!-- 定义文档的字符编码 -->
<meta charset="utf-8" /> 
<!-- 强制Chromium内核，作用于360浏览器、QQ浏览器等国产双核浏览器 -->
<meta name="renderer" content="webkit"/>
<!-- 强制Chromium内核，作用于其他双核浏览器 -->
<meta name="force-rendering" content="webkit"/>
<!-- 如果有安装 Google Chrome Frame 插件则强制为Chromium内核，否则强制本机支持的最高版本IE内核，作用于IE浏览器 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
<!-- 
    设置视窗大小
    width    设置layout viewport  的宽度，为一个正整数，或字符串"width-device"
    initial-scale    设置页面的初始缩放值，为一个数字，可以带小数
    minimum-scale    允许用户的最小缩放值，为一个数字，可以带小数
    maximum-scale    允许用户的最大缩放值，为一个数字，可以带小数
    shrink-to-fit=no IOS9中要想前面的属性起作用需要加上这个
    height    设置layout viewport  的高度，这个属性对我们并不重要，很少使用
    user-scalable    是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<!-- 页面描述 -->
<meta name="description" content="不超过150个字符"/>
<!-- 页面关键词 -->
<meta name="keywords" content=""/>
<!-- 网页作者 -->
<meta name="author" content="name, email@gmail.com"/>
<!-- 
    搜索引擎抓取
    all：文件将被检索，且页面上的链接可以被查询； 
    none：文件将不被检索，且页面上的链接不可以被查询；
    index：文件将被检索； 
    follow：页面上的链接可以被查询； 
    noindex：文件将不被检索； 
    nofollow：页面上的链接不可以被查询。 
-->
<meta name="robots" content="index,follow"/>
<!-- 忽略页面中的数字识别为电话，忽略email识别-->
<meta name="format-detection" content="telphone=no, email=no"/>

<!-- IOS begin -->
<!-- 添加到主屏后的标题（iOS 6 新增） -->
<meta name="apple-mobile-web-app-title" content="标题">
<!-- 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari (ios7.0版本以后，safari上已看不到效果) -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-touch-fullscreen" content="yes"/>
<!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- 设置苹果工具栏颜色:默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 不让百度转码 -->
<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 
    网站添加至ios桌面时的图标
-->
<!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="table_ico57.png">
<!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="table_ico72.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="table_ico114.png">
<!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="table_ico144.png">

<!-- iOS 启动画面 begin -->
<!-- iPad 竖屏 768 x 1004（标准分辨率） -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
<!-- iPad 横屏 1024x748（标准分辨率） -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
<!-- iPad 竖屏 1536x2008（Retina） -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
<!-- iPad 横屏 2048x1496（Retina） -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
<!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
<!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
<!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
<!-- IOS end -->

<!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileColor" content="#000"/>
<!-- Windows 8 磁贴图标 -->
<meta name="msapplication-TileImage" content="icon.png"/>
<!-- 添加 RSS 订阅 -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>

<!-- 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 -->

낮은 버전의 IE 브라우저 접속 문제

웹킷 커널을 강제하는 코드를 추가한 후에는 국내 브라우저를 사용하여 웹 사이트에 접속할 때 IE 호환성 문제가 없으며 IE 방문자 수가 대폭 증가할 것입니다. 줄인. 그러나 일부 오래된 컴퓨터가 낮은 버전의 IE 브라우저를 통해 액세스하는 것은 여전히 불가피합니다. 이 극소수의 사용자를 대상으로 CSS HACK을 특별히 수행한다면 작업량이 심각하게 증가할 것입니다.

게다가 Microsoft는 2016년 1월부터 IE11 미만 버전에 대한 지원 및 업데이트 제공을 중단했습니다. IE의 하위 버전은 CSS3 및 HTML5 지원에 문제가 있을 뿐만 아니라 보안 문제도 있습니다. .

그렇다면, 낮은 버전의 IE를 지원하지 않는다면 이 소규모 사용자 그룹은 무엇을 하게 될까요?

if IE 문을 사용하여 웹 사이트에 IE 업그레이드 프롬프트를 추가하고 사용자에게 브라우저를 업그레이드하거나 다시 방문하기 전에 고급 브라우저로 전환하라는 메시지를 표시할 수 있습니다.

지금은 메타 태그 아래 IE 업그레이드 프롬프트 페이지로 이동하는 코드를 추가할 수 있습니다(IE 버전이 IE11보다 낮은 경우 점프). 그러면 낮은 버전의 IE를 사용하는 사용자에게 업그레이드 또는 변경 메시지가 표시될 수 있습니다. 브라우저를 방문할 때

Webkit 커널을 강제하고 낮은 버전의 IE 액세스 권한을 가진 사용자에게 업그레이드하라는 메시지를 표시합니다. 전체 코드는 다음과 같습니다. 헤드 템플릿 파일의 93f0f5c25f18dab9d176bd4f6de5d30e IE 버전 고유의 조건부 컴파일 문을 사용하면 IE11이 아닌 다른 IE 버전인지 확인할 수 있습니다. )

IE의 하위 버전은 CSS3 및 HTML5와 호환되지 않아 웹 사이트에 액세스할 때 종종 잘못된 경우가 있기 때문에 위 코드는 낮은 버전의 IE를 사용하는 사용자는 액세스 시 업그레이드 프롬프트 페이지로 이동하여 불필요한 리소스 로딩을 방지하고 웹사이트 서버 오버헤드를 줄입니다.

테스트 코드

<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<script>/*@cc_on window.location.href="http://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/</script>

IE 11은 정상적으로 출력됩니다

IE 10에서는 다음 페이지가 표시됩니다

HTML 메타 백과사전

관련 기사