ホームページ > 記事 > ウェブフロントエンド > HTMLのheadタグについて
HTMLのheadタグについて
- 巴扎黑オリジナル
- 2017-03-19 17:28:201299ブラウズ
HTML ヘッドには、ブラウザによる Web ページのレンダリングや SEO などに関係するタグや要素が多数あります。各ブラウザ コアおよび国内ブラウザ メーカーごとに独自のタグ要素があり、そのため多くの違いが生じます。モバイルインターネットの時代では、モバイル端末のヘッド構造とメタ要素がさらに重要になります。各タグの意味を理解し、自分のニーズに合った head タグを作成することがこの記事の目的です。この記事は Yishi の記事に基づいており、一般的に使用される head 内の各タグと要素の意味と使用シナリオを紹介するために拡張された概要を提供します。
ドキュメントタイプ
DOCTYPE (ドキュメント タイプ)、この宣言はドキュメントの先頭、html タグの前に配置され、このタグはドキュメントで使用される HTML または XHTML 仕様をブラウザに伝えます。
DTD (Document Type Definition) 宣言は で始まり、その前にコンテンツがない場合 (スペースを除く)、ブラウザは IE で quirks モードをオンにします。 Web ページをレンダリングします。パブリック DTD、名前の形式は、registration //organization // type tag // language です。登録は、組織が国際標準化機構 (ISO) によって登録されているかどうかを指します。+ ははい、- はいいえを意味します。 「組織」は、W3C などの組織の名前です。通常、タイプは DTD です。タグは、指定されたパブリック テキストの説明、つまり、参照されるパブリック テキストの一意の記述名であり、その後にバージョン番号を続けることができます。最終言語は、英語の場合は EN、中国語の場合は ZH など、DTD 言語の ISO 639 言語識別子です。 XHTML 1.0 では 3 つの DTD タイプを宣言できます。それぞれ厳密バージョン、移行バージョン、フレームベースの HTML ドキュメントを表します。
HTML 4.01 は厳しい
-
HTML 4.01 移行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-
HTML 4.01 フレームセット
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-
最新の HTML5 では、より簡潔な記述が導入されており、前方互換性および後方互換性があり、使用することが推奨されています。
りー
- 文書を検証します。
- ブラウザのレンダリングモードを決定します 実際の操作では、ドキュメントを読み取るときにどの解析アルゴリズムを使用するかをブラウザーに通知します。これが記述されていない場合、ブラウザは独自のルールに従ってコードを解析し、HTML レイアウトに重大な影響を与える可能性があります。ブラウザには HTML ドキュメントを解析する 3 つの方法があります。
- 変ではない（標準）モード
- 奇妙なモード
- いくつかの奇妙な（ほぼ標準）モード IE ブラウザのドキュメント モード、ブラウザ モード、厳密モード、奇妙なモード、DOCTYPE タグ、詳細読み取りモードについて。標準！コンテンツ。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">HTML5 が登場する前は、Web ページは次のように記述されていました:
<!doctype html>これら 2 つは同等です。 と を順に読んでください。そのため、短い方を使用することをお勧めします。メモリが使いやすくなります。 言語属性 簡体字中国語
<meta charset="utf-8">繁体字中国語
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">通常書く lang="zh-CN" ではなく、lang="zh-cmn-Hans" であるのはなぜですか? さらに読んでください: ページの先頭の宣言は lang="zh" または lang="zh- である必要があります。 CN」。 IEとChromeの最新バージョンを優先してご利用ください
<html lang="zh-cmn-Hans">
360 Google Chrome フレームを使用する<html lang="zh-cmn-Hant">
360 ブラウザは、このタグを読み取った後、対応するスピード コアにすぐに切り替わります。 また、念のため、
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />にご参加ください このように記述することで得られる効果は、Google Chrome Frame がインストールされている場合、GCF がページのレンダリングに使用されます。GCF がインストールされていない場合、IE カーネルの最新バージョンがレンダリングに使用されます。 関連リンク: ブラウザー カーネル コントロール メタ タグのドキュメント Baidu はトランスコーディングを禁止しています Baidu 携帯電話で Web ページを開くと、Baidu は Web ページをトランスコードし、服を脱ぎ、犬の皮膚絆創膏の広告を体に貼り付けることがあります。これを行うには、頭に
<meta name="renderer" content="webkit">を追加します。 関連リンク: SiteApp のトランスコーディング ステートメント SEO最適化パート
-
ページタイトル
タグ (head ヘッダーは必須)<p></p> <pre class="brush:php;toolbar:false"><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"></pre> </li> <li><p><br></p></li> <li> ページキーワードキーワード<p></p> <pre class="brush:php;toolbar:false"><meta http-equiv="Cache-Control" content="no-siteapp" /></pre> </li> <li><p><br></p></li> <li> ページ説明コンテンツ説明<p></p> <pre class="brush:php;toolbar:false"><title>your title</title></pre> </li> <li><p><br></p></li> <li> Web 作者の定義<p></p> <pre class="brush:php;toolbar:false"><meta name="keywords" content="your keywords"></pre> </li> <li><p><br></p></li> <li> <p> 定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。</p> <pre class="brush:php;toolbar:false"><meta name="robots" content="index,follow"></pre> </li> </ul> <p> 相关链接：WEB1038 -</p> <p> 标记包含无效的值</p> <h3> viewport</h3> <p> viewport 可以让布局在移动浏览器上显示的更好。 通常会写</p> <pre class="brush:php;toolbar:false"><meta name="viewport" content="width=device-width, initial-scale=1.0"></pre> <p> width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://bigc.at/ios-webapp-viewport-meta.orz)</p> <p> content 参数：</p> <ul class=" list-paddingleft-2"> <li><p> width viewport 宽度(数值/device-width)</p></li> <li><p><br></p></li> <li><p> height viewport 高度(数值/device-height)</p></li> <li><p><br></p></li> <li><p> initial-scale 初始缩放比例</p></li> <li><p><br></p></li> <li><p> maximum-scale 最大缩放比例</p></li> <li><p><br></p></li> <li><p> minimum-scale 最小缩放比例</p></li> <li><p><br></p></li> <li><p> user-scalable 是否允许用户缩放(yes/no)</p></li> <li><p><br></p></li> <li> <p> minimal-ui iOS 7.1 beta 2 中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：</p> <pre class="brush:php;toolbar:false"><meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui"></pre> </li> </ul> <p> 而如果你的网站不是响应式的，请不要使用 initial-scale 或者禁用缩放。</p> <pre class="brush:php;toolbar:false"><meta name="viewport" content="width=device-width,user-scalable=yes"></pre> <p> 相关链接：非响应式设计的viewport</p> <p> 适配 iPhone 6 和 iPhone 6plus 则需要写：</p> <pre class="brush:php;toolbar:false"><meta name="viewport" content="width=375"> <meta name="viewport" content="width=414"></pre> <p> 大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iPhone 6 上却是 375px，大部分 5.5 寸安卓机器（比如说三星 Note）的 viewport 宽为 400，iPhone 6 plus 上是 414px。</p> <h3> ios 设备</h3> <p> 添加到主屏后的标题（iOS 6 新增）</p> <pre class="brush:php;toolbar:false"><meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏后的标题（iOS 6 新增） --></pre> <p> 是否启用 WebApp 全屏模式</p> <pre class="brush:php;toolbar:false"><meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否启用 WebApp 全屏模式 --></pre> <p> 设置状态栏的背景颜色</p> <pre class="brush:php;toolbar:false"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- 设置状态栏的背景颜色，只有在 `"apple-mobile-web-app-capable" content="yes"` 时生效 --></pre> <p> 只有在 "apple-mobile-web-app-capable" content="yes" 时生效</p> <p> content 参数：</p> <ul class=" list-paddingleft-2"> <li><p> default 默认值。</p></li> <li><p><br></p></li> <li><p> black 状态栏背景是黑色。</p></li> <li><p><br></p></li> <li><p> black-translucent 状态栏背景是黑色半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。</p></li> </ul> <p> 禁止数字识自动别为电话号码</p> <pre class="brush:php;toolbar:false"><meta name="format-detection" content="telephone=no" /> <!-- 禁止数字识自动别为电话号码 --></pre> <h3> iOS 图标</h3> <p> rel 参数： apple-touch-icon 图片自动处理成圆角和高光等效果。 apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。 iPhone 和 iTouch，默认 57x57 像素，必须有</p> <pre class="brush:php;toolbar:false"><link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 --></pre> <p> iPad，72x72 像素，可以没有，但推荐有</p> <pre class="brush:php;toolbar:false"><link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> <!-- iPad，72x72 像素，可以没有，但推荐有 --></pre> <p> Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有</p> <pre class="brush:php;toolbar:false"><link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 --></pre> <p> Retina iPad，144x144 像素，可以没有，但推荐有</p> <pre class="brush:php;toolbar:false"><link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- Retina iPad，144x144 像素，可以没有，但推荐有 --></pre> <p> IOS 图标大小在iPhone 6 plus上是180×180，iPhone 6 是120x120。 适配iPhone 6 plus，则需要在中加上这段</p> <pre class="brush:php;toolbar:false"><link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png"></pre> <h3> iOS 启动画面</h3> <p> 官方文档：https://developer.apple.com/library/ios/qa/qa1686/_index.html 参考文章：http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/</p> <p> iPad 的启动画面是不包括状态栏区域的。</p> <p> iPad 竖屏 768 x 1004（标准分辨率）</p> <pre class="brush:php;toolbar:false"><link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> <!-- iPad 竖屏 768 x 1004（标准分辨率） --></pre> <p> iPad 竖屏 1536x2008（Retina）</p> <pre class="brush:php;toolbar:false"><link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad 竖屏 1536x2008（Retina） --></pre> <p> iPad 横屏 1024x748（标准分辨率）</p> <pre class="brush:php;toolbar:false"><link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad 横屏 1024x748（标准分辨率） --></pre> <p> iPad 横屏 2048x1496（Retina）</p> <pre class="brush:php;toolbar:false"><link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad 横屏 2048x1496（Retina） --></pre> <p> iPhone 和 iPod touch 的启动画面是包含状态栏区域的。</p> <p> iPhone/iPod Touch 竖屏 320x480 (标准分辨率)</p> <pre class="brush:php;toolbar:false"><link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) --></pre> <p> iPhone/iPod Touch 竖屏 640x960 (Retina)</p> <pre class="brush:php;toolbar:false"><link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) --></pre> <p> iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)</p> <pre class="brush:php;toolbar:false"><link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) --></pre> <p> 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）</p> <pre class="brush:php;toolbar:false"><meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） --></pre> <p> iPhone 6对应的图片大小是750×1294，iPhone 6 Plus 对应的是1242×2148 。</p> <pre class="brush:php;toolbar:false"><link rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)"> <link rel="apple-touch-startup-image" href="launch6plus.png" media="(device-width: 414px)"></pre> <h3> Windows 8</h3> <p> Windows 8 磁贴颜色</p> <pre class="brush:php;toolbar:false"><meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 --></pre> <p> Windows 8 磁贴图标</p> <pre class="brush:php;toolbar:false"><meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 --></pre> <h3> rss订阅</h3> <pre class="brush:php;toolbar:false"><link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- 添加 RSS 订阅 --></pre> <h3> favicon icon</h3> <pre class="brush:php;toolbar:false"><link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- 添加 favicon icon --></pre> <p> 比较详细的 favicon 介绍可参考https://github.com/audreyr/favicon-cheat-sheet</p> <h3> 移动端的meta</h3> <pre class="brush:php;toolbar:false"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection"content="telephone=no, email=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 --> <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"> <!-- 适应移动端end --></pre> <p> 这是来自 toobug 的分享总结。</p> <p> 更多的 meta 标签参考</p> <ul class=" list-paddingleft-2"> <li><p> COMPLETE LIST OF HTML META TAGS</p></li> <li><p><br></p></li> <li><p> 18 Meta Tags Every Webpage Should Have in 2013</p></li> </ul> <p> 参考文章：</p> <ul class=" list-paddingleft-2"> <li><p> 常用的 HTML 头部标签</p></li> <li><p><br></p></li> <li><p> html5_header</p></li> <li><p><br></p></li> <li><p> あまぜういCSS</p></li> <li><p><br></p></li> <li><p> ドキュメントタイプ</p></li> <li><p><br></p></li> <li><p> WEB エンジニアとデザイナーが学ぶべき IOS 8 の 10 の新しい変更点</p></li> </ul><p>以上がHTMLのheadタグについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事：<a class="dBlack" title="よく使用されるメタの概要" href="http://m.php.cn/ja/faq/357337.html">よく使用されるメタの概要</a></span><span>次の記事：<a class="dBlack" title="よく使用されるメタの概要" href="http://m.php.cn/ja/faq/357339.html">よく使用されるメタの概要</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="http://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ja/faq/348757.html" title="HTMLの知識のまとめ" class="aBlack">HTMLの知識のまとめ</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348804.html" title="HTMLを早く学ぶ方法" class="aBlack">HTMLを早く学ぶ方法</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348873.html" title="html xhtml xml の違い" class="aBlack">html xhtml xml の違い</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348884.html" title="src 属性と href 属性の違い" class="aBlack">src 属性と href 属性の違い</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348902.html" title="HTML5とCSSの置き換え利用について" class="aBlack">HTML5とCSSの置き換え利用について</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p></div><div class="footermid"><a href="http://m.php.cn/ja/about/us.html">私たちについて</a><a href="http://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="http://m.php.cn/ja/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>