以下では、よく使われるヘッド構造と、各タグや要素の意味や使用シーンを紹介します(この記事は、Yisi Da Shenの記事を基にして、拡張要約したものです)。 padding.me のヘッド構造 コードをコピー コードは次のとおりです。<!DOCTYPE HTML> <html lang="zh-cmn-Hans"> <ヘッド> <メタ文字セット="utf-8"> <meta name="viewport" content="width=デバイス幅、user-scalable=yes"> <meta name="keywords" content="PaddingMe、フロントエンド、フロントエンド、フロントエンド エンジニア、Web 開発エンジニア、HTML、CSS、JavaScript、HTML5、CSS3、git、Github"> <meta name="description" content="PaddingMe - 彼はフロントエンド開発者です。"> <meta name="ロボット" content="インデックス、フォロー"> <meta name="author" content="PaddingMe,[email protected]"></p> <p> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-compatible" content="IE=Edge,chrome=1"> <meta></p> <p> <meta http-equiv="Cache-Control" content="no-siteapp"></p> <p> <title>PaddingMe</title> <link rel="ショートカットアイコン" type="image/x-icon" href="../favicon.ico"></p> <p> <link rel="author" href="<a href="https://plus.google.com/u/1/105241873904238310190/?rel=author">https://plus.google.com/u/1/105241873904238310190/?rel=author</a>"> <link type="text/plain" rel="author" href="<a href="http://padding.me/humans.txt">http://padding.me/humans.txt</a>" /></p> <p> <link rel="stylesheet" href="/css/screen.css"> <link rel="スタイルシート" href="/css/font.css"> <link rel="スタイルシート" href="/css/social.css"> <link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="<a href="http://feeds.feedburner.com/paddingme">http://feeds.feedburner.com/paddingme</a>" /> </head> 文書タイプ DOCTYPE (ドキュメント タイプ) の宣言は、ドキュメントの先頭、HTML タグの前にあります。このタグは、ドキュメントがどの HTML または XHTML 仕様を使用しているかをブラウザーに伝えます。 DTD (文書型定義) 宣言は <!DOCTYPE> で始まります。大文字と小文字は区別されません。その前には何もありません。他のコンテンツ (スペースを除く) がある場合、ブラウザーは Quirks モードをオンにして、IE で Web ページをレンダリングします。パブリック DTD、名前の形式は「registered//organization//type tag//language」です。「registered」は組織が国際標準化機構 (ISO) に登録されているかどうかを示します。+ は登録されている、- は登録されていないことを示します。 「組織」は W3C などの組織の名前です。「タイプ」は通常 DTD です。「タグ」は指定されたパブリック テキストの説明、つまり参照されるパブリック テキストの一意の説明名であり、その後にバージョン番号が続く場合があります。最後に、「language」は、英語の場合は EN、中国語の場合は ZH など、DTD 言語の ISO 639 言語識別子です。 XHTML 1.0 では 3 種類の DTD を宣言できます。それぞれ、厳密バージョン、移行バージョン、フレームベースの HTML ドキュメントを表します。 HTML の doctype には主に 2 つの目的があります。 ◦非癖(標準)モード 文字セット 文書で使用される文字エンコーディングを宣言します。 コードをコピー コードは次のとおりです。<メタ文字セット='utf-8'> HTML5 以前は、Web ページは次のように記述されていました。 コードをコピー コードは次のとおりです。<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8"> これら 2 つは同等です。詳細は http://stackoverflow.com/questions/4696499/meta-charset-utf-8-vs-meta-http-equiv-content-type で説明されているので、覚えやすい短い方を使用することをお勧めします。 lang属性 中国語(簡体字) 繁体字中国語 地域コードが必要になることはめったにありませんが、通常は地域によって中国語の使用法が異なることを強調するために使用されます。次に例を示します。 コードをコピー コードは次のとおりです。<p lang="zh-cmn-Hans"> <strong lang="zh-cmn-Hans-CN">パイナップル</strong>と<strong lang="zh-cmn-Hant-TW">パイナップル</strong>は実際には同じ果物です。中国本土と台湾では名前が異なり、シンガポールとマレーシアでも名前が異なります。<strong lang="zh-cmn-Hans-SG">パイナップル</strong>と呼ばれています。 </p> 詳細については、http://zhi.hu/XyIa をご覧ください。 IEとChromeの最新バージョンを優先する コードをコピー コードは次のとおりです。<meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1" /> 360 Google Chrome Frame の使用 コードをコピー コードは次のとおりです。<meta name="レンダラー" content="webkit"> このタグを読み取った後、360 Browser はすぐに対応する高速コアに切り替わります。 コードをコピー コードは次のとおりです。<meta http-equiv="X-UA-compatible" content="IE=Edge,chrome=1"> このように記述することで得られる効果は、Google Chrome Frame がインストールされている場合は、ページのレンダリングに GCF が使用されることです。GCF がインストールされていない場合は、IE カーネルの最高バージョンがレンダリングに使用されます。 Baiduはトランスコーディングを禁止 Baidu Mobileでウェブページを開くと、Baiduはウェブページをトランスコードし、あなたの服を脱がせて犬の皮の絆創膏の広告をあなたに貼り付けることがあります。これを行うには、 関連リンク: SiteApp トランスコーディング ステートメント SEO最適化セクション 関連リンク: WEB1038 - タグに無効な値が含まれています ビューポート ビューポートを使用すると、モバイル ブラウザーでレイアウトをより適切に表示できます。 width=device-width を指定すると、iPhone 5 のホーム画面にページを追加した後、WebApp のフルスクリーン モードでページを開くと、黒い縁が表示されます (http://bigc.at/ios-webapp-viewport-meta.orz) コンテンツパラメータ: ウェブサイトがレスポンシブでない場合は、initial-scale を使用しないか、スケーリングを無効にしてください。 関連リンク: レスポンシブでないビューポート iOSデバイス ホーム画面に追加した後のタイトル(iOS 6 の新機能) コードをコピー コードは次のとおりです。<meta name="apple-mobile-web-app-title" content="タイトル"> <!-- ホーム画面に追加した後のタイトル (iOS 6 の新機能) --> WebApp フルスクリーンモードを有効にするかどうか コードをコピー コードは次のとおりです。<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- WebApp フルスクリーン モードを有効にするかどうか --> ステータスバーの背景色を設定する コードをコピー コードは次のとおりです。<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- ステータスバーの背景色を設定します。`"apple-mobile-web-app-capable" content="yes"` の場合にのみ有効です --> 「apple-mobile-web-app-capable」コンテンツが「yes」の場合にのみ機能します コンテンツパラメータ: iOSアイコン relパラメータ: iPad、72x72ピクセル、オプションだが推奨 Retina iPhone および Retina iTouch、114 x 114 ピクセル、オプションだが推奨 Retina iPad、144x144 ピクセル、オプションだが推奨 iOS スプラッシュスクリーン 公式ドキュメント: https://developer.apple.com/library/ios/qa/qa1686/_index.html iPad の起動画面にはステータス バー領域が含まれません。 iPad 縦画面 768 x 1004 (標準解像度) コードをコピー コードは次のとおりです。<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> <!-- iPad 縦画面 768 x 1004 (標準解像度) --> iPad 縦画面 1536x2008 (Retina) コードをコピー コードは次のとおりです。<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad 縦画面 1536x2008 (Retina) --> iPad 横向き 1024x748 (標準解像度) コードをコピー コードは次のとおりです。<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad 横向き 1024x748 (標準解像度) --> iPad 横向き 2048x1496 (Retina) コードをコピー コードは次のとおりです。<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad 横長 2048x1496 (Retina) --> iPhone および iPod touch の起動画面にはステータスバー領域が含まれます。 iPhone/iPod Touch 縦画面 320x480 (標準解像度) iPhone/iPod Touch ポートレート 640x960 (Retina) iPhone 5/iPod Touch 5 ポートレート 640x1136 (Retina) スマート アプリ バナーの追加 (iOS 6 以降 Safari) ウィンドウズ8 Windows 8 のタイルの色 コードをコピー コードは次のとおりです。<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 タイルの色 --> Windows 8 タイルアイコン コードをコピー コードは次のとおりです。<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 タイル アイコン --> RSS購読 ファビコンアイコン ファビコンの詳しい紹介については、https://github.com/audreyr/favicon-cheat-sheet を参照してください。 モバイルメタ コードをコピー コードは次のとおりです。<meta name="viewport" content="width=デバイス幅、初期スケール=1、ユーザースケーラブル=いいえ" /> <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="電話番号=いいえ、メールアドレス=いいえ" /> <meta name="viewport" content="width=デバイス幅、初期スケール=1、ユーザースケーラブル=いいえ" /> <meta name="apple-mobile-web-app-capable" content="yes" /><!-- Apple のデフォルトのツールバーとメニューバーを削除します--> <meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- Apple ツールバーの色を設定します --> <meta name="format-detection" content="telphone=no, email=no" /><!-- ページ内の数字を電話番号として無視し、メールの認識も無視します--> <!-- 360 ブラウザの超高速モードを有効にする (Webkit) --> <meta name="レンダラー" content="webkit"> <!-- 互換モードを使用して IE を回避する --> <meta http-equiv="X-UA-compatible" content="IE=edge"> <!-- ハンドヘルド デバイス向けに最適化されています。主に、BlackBerry などのビューポートを認識しない古いブラウザー向けです --> <meta name="HandheldFriendly" content="true"> <!-- Microsoft の古いブラウザ --> <meta name="モバイル最適化" content="320"> <!-- uc は垂直画面を強制します --> <meta name="画面の向き" content="縦向き"> <!-- QQ 強制縦画面 --> <meta name="x5-orientation" content="縦向き"> <!-- UC 強制フルスクリーン --> <meta name="フルスクリーン" content="はい"> <!-- QQ は全画面を強制します --> <メタ名="x5-フルスクリーン" コンテンツ="true"> <!-- UC アプリケーション モード --> <meta name="ブラウザモード" content="アプリケーション"> <!-- QQ アプリケーション モード --> <meta name="x5-page-mode" content="app"> <!-- Windows Phone をクリックしてもハイライトされない --> <meta name="msapplication-tap-highlight" content="いいえ"> <!-- モバイル端末に適応 --> toobug によって共有されました。 その他のメタタグ参照 |
<<: Nginx ルーティング転送とリバースプロキシロケーション構成の実装
>>: CSS の位置属性 (absolute|relative|static|fixed) の概要と応用
当社には、外部ネットワークからの干渉を受けることが多いサーバーが多数あります。侵入者はポート 338...
MySql データベース システムをインストールして構成します。 1. ダウンロード http://...
誰でも時々データをコピーして貼り付ける必要があると思います。コピーして貼り付けるためにファイルを開く...
次のスクリプトは、MySQLデータベース全体のスケジュールされたバックアップに使用されます。 mys...
序文Linux で最も広く使用されているデータベースは MySQL です。この記事では、Linux ...
データベースのパフォーマンスに関する話面接では、「データベースにどのくらい精通していますか?」など、...
CentOS の紹介CentOS は、Red Hat Linux が提供する無料で利用できるソースコ...
1. MS SQL Server 2005 --1. ログをクリアするexec('DUMP...
JSON (JavaScript Object Notation、JS Object Notatio...
CentOS 7にPostgreSQL 11をインストールする PostgreSQL: 世界で最も先...
<br />まず最初に、私はこのグループの中では完全な新人だということを述べなければなり...
導入同時接続数を制限するモジュールは http_limit_conn_module です。アドレス:...
この記事では、MySQL 8.0のインストールと設定方法を参考までに紹介します。具体的な内容は以下の...
目次序文フラグメントの動機React Fragment の紹介と使用<React.Fragme...
この記事では、MySQL Workbenchのインストールと設定のチュートリアルを参考までに紹介しま...