HTMLのheadタグについて

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 移行

  nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

• 
  

• HTML 4.01 フレームセット

  nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

• 
  

• 最新の HTML5 では、より簡潔な記述が導入されており、前方互換性および後方互換性があり、使用することが推奨されています。

  りー

HTML における doctype には 2 つの主な目的があります。

• 文書を検証します。

これは、このドキュメントがどの DTD に従って記述されているかをユーザー エージェントとバリデータに伝えます。このアクションは、ページが読み込まれるたびに、ブラウザーによって DTD がダウンロードされず、ページが手動で検証された場合にのみ有効になります。

• ブラウザのレンダリングモードを決定します
  実際の操作では、ドキュメントを読み取るときにどの解析アルゴリズムを使用するかをブラウザーに通知します。これが記述されていない場合、ブラウザは独自のルールに従ってコードを解析し、HTML レイアウトに重大な影響を与える可能性があります。ブラウザには HTML ドキュメントを解析する 3 つの方法があります。

• 変ではない（標準）モード

• 
  

• 奇妙なモード

• 
  

• いくつかの奇妙な（ほぼ標準）モード IE ブラウザのドキュメント モード、ブラウザ モード、厳密モード、奇妙なモード、DOCTYPE タグ、詳細読み取りモードについて。標準！コンテンツ。

• 
  

文字セット

ドキュメントで使用される文字エンコーディングを宣言します、

nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML5 が登場する前は、Web ページは次のように記述されていました:

nbsp;html>

これら 2 つは同等です。 と を順に読んでください。そのため、短い方を使用することをお勧めします。メモリが使いやすくなります。

言語属性

簡体字中国語

<meta>

繁体字中国語

<meta>

通常書く lang="zh-CN" ではなく、lang="zh-cmn-Hans" であるのはなぜですか? さらに読んでください: ページの先頭の宣言は lang="zh" または lang="zh- である必要があります。 CN」。

IEとChromeの最新バージョンを優先してご利用ください

360 Google Chrome フレームを使用する

360 ブラウザは、このタグを読み取った後、対応するスピード コアにすぐに切り替わります。 また、念のため、

<meta>

にご参加ください このように記述することで得られる効果は、Google Chrome Frame がインストールされている場合、GCF がページのレンダリングに使用されます。GCF がインストールされていない場合、IE カーネルの最新バージョンがレンダリングに使用されます。

関連リンク: ブラウザー カーネル コントロール メタ タグのドキュメント

Baidu はトランスコーディングを禁止しています

Baidu 携帯電話で Web ページを開くと、Baidu は Web ページをトランスコードし、服を脱ぎ、犬の皮膚絆創膏の広告を体に貼り付けることがあります。これを行うには、頭に

<meta>

を追加します。 関連リンク: SiteApp のトランスコーディング ステートメント

SEO最適化パート

• ページタイトル

• 
  

• ページキーワードキーワード

  <meta>

• 
  

• ページ説明コンテンツ説明

  <title>your title</title>

• 
  

• Web 作者の定義

  <meta>

• 
  

• 定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。

  <meta>

　　相关链接：WEB1038 -

　　标记包含无效的值

　　viewport

　　viewport 可以让布局在移动浏览器上显示的更好。 通常会写

<meta>

　　width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://bigc.at/ios-webapp-viewport-meta.orz)

　　content 参数：

• width viewport 宽度(数值/device-width)

• 
  

• height viewport 高度(数值/device-height)

• 
  

• initial-scale 初始缩放比例

• 
  

• maximum-scale 最大缩放比例

• 
  

• minimum-scale 最小缩放比例

• 
  

• user-scalable 是否允许用户缩放(yes/no)

• 
  

• minimal-ui iOS 7.1 beta 2 中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：

  <meta>

　　而如果你的网站不是响应式的，请不要使用 initial-scale 或者禁用缩放。

<meta>

　　相关链接：非响应式设计的viewport

　　适配 iPhone 6 和 iPhone 6plus 则需要写：

<meta>
<meta>

　　大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iPhone 6 上却是 375px，大部分 5.5 寸安卓机器（比如说三星 Note）的 viewport 宽为 400，iPhone 6 plus 上是 414px。

　　ios 设备

　　添加到主屏后的标题（iOS 6 新增）

<meta> 

　　是否启用 WebApp 全屏模式

<meta> 

　　设置状态栏的背景颜色

<meta> 

　　只有在 "apple-mobile-web-app-capable" content="yes" 时生效

　　content 参数：

• default 默认值。

• 
  

• black 状态栏背景是黑色。

• 
  

• black-translucent 状态栏背景是黑色半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

　　禁止数字识自动别为电话号码

<meta> 

　　iOS 图标

　　rel 参数： apple-touch-icon 图片自动处理成圆角和高光等效果。 apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。 iPhone 和 iTouch，默认 57x57 像素，必须有

<link> <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->

　　iPad，72x72 像素，可以没有，但推荐有

<link> <!-- iPad，72x72 像素，可以没有，但推荐有 -->

　　Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有

<link> <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->

　　Retina iPad，144x144 像素，可以没有，但推荐有

<link> <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->

　　IOS 图标大小在iPhone 6 plus上是180×180，iPhone 6 是120x120。 适配iPhone 6 plus，则需要在中加上这段

<link>

　　iOS 启动画面

　　官方文档：https://developer.apple.com/library/ios/qa/qa1686/_index.html 参考文章：http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

　　iPad 的启动画面是不包括状态栏区域的。

　　iPad 竖屏 768 x 1004（标准分辨率）

<link> 

　　iPad 竖屏 1536x2008（Retina）

<link> 

　　iPad 横屏 1024x748（标准分辨率）

<link> 

　　iPad 横屏 2048x1496（Retina）

<link> 

　　iPhone 和 iPod touch 的启动画面是包含状态栏区域的。

　　iPhone/iPod Touch 竖屏 320x480 (标准分辨率)

<link> 

　　iPhone/iPod Touch 竖屏 640x960 (Retina)

<link> 

　　iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)

<link> 

　　添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）

<meta> 

　　iPhone 6对应的图片大小是750×1294，iPhone 6 Plus 对应的是1242×2148 。

<link>

<link>

　　Windows 8

　　Windows 8 磁贴颜色

<meta> 

　　Windows 8 磁贴图标

<meta> 

　　rss订阅

<link> 

　　favicon icon

<link> 

　　比较详细的 favicon 介绍可参考https://github.com/audreyr/favicon-cheat-sheet

　　移动端的meta

<meta>
<meta>
<meta>
<meta>
<meta>
<meta>
<meta>
<meta>

<meta>

<meta>

<meta>

<meta>

<meta>

<meta>

<meta>

<meta>

<meta>

<meta>

<meta>

　　这是来自 toobug 的分享总结。

　　更多的 meta 标签参考

• COMPLETE LIST OF HTML META TAGS

• 
  

• 18 Meta Tags Every Webpage Should Have in 2013

　　参考文章：

• 常用的 HTML 头部标签

• 
  

• html5_header

• 
  

• あまぜういCSS

• 
  

• ドキュメントタイプ

• 
  

• WEB エンジニアとデザイナーが学ぶべき IOS 8 の 10 の新しい変更点

以上がHTMLのheadタグについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。