HTMLでヘッダー構造を使用する方法-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTMLでヘッダー構造を使用する方法

php中世界最好的语言

Jan 26, 2018 am 10:23 AM

headhtmlどうやって

今回は、HTMLでヘッダー構造を使用する方法と、HTMLでヘッダー構造を使用する際の注意事項について説明します。実際のケースを見てみましょう。

以下では、一般的に使用される head 構造と、各タグと要素の意味と使用シナリオを紹介します (この記事はマスターの記事を元に、拡張してまとめたものです)。

padding.me のヘッド構造

次のようにコードをコピーします:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=yes">
    <meta name="keywords" content="PaddingMe,front-end,前端,前端工程师,web开发工程师,HTML,CSS,JavaScript,HTML5,CSS3,git,Github">
    <meta name="description" content="PaddingMe - he is a front-end developer.">
    <meta name="robots" content="index,follow">
    <meta name="author" content="PaddingMe,padding4me@gmail.com"></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="shortcut icon" 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="stylesheet" href="/css/font.css">
    <link rel="stylesheet" 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 (Document Type Definition) 宣言はで始まり、大文字と小文字が区別されず、先頭にコンテンツがありません (スペースを除く) 他のコンテンツがある場合、ブラウザーは IE での Quirks モードのレンダリングを有効にします。ウェブページ。パブリック DTD、名前の形式は「登録 // 組織 // タイプタグ // 言語」です。「登録」は組織が国際標準化機構 (ISO) に登録されているかどうかを示します。+ ははい、- はいいえを意味します。「組織」は組織の名前 (W3C など)、「タイプ」は通常 DTD、「ラベル」は指定されたパブリックテキストの説明、つまり参照されるパブリックテキストの一意の説明名です。その後にバージョン番号が続きます。最後の「言語」は、DTD 言語の ISO 639 言語識別子です。たとえば、EN は英語、ZH は中国語を意味します。 XHTML 1.0 では 3 つの DTD タイプを宣言できます。厳密バージョン、暫定バージョン、フレームワークベースの

HTMLドキュメントをそれぞれ表します。 HTML 4.01 strict

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

HTML 4.01 Transitional

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

HTML 4.01 Frameset

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

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

<!doctype html>

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

•書類の有効性を確認します。
このドキュメントがどの DTD に従って記述されているかをユーザーエージェントとバリデーターに伝えます。このアクションは受動的であり、ページがロードされるたびにブラウザは DTD をダウンロードせず、ページが手動で検証される場合にのみ有効になります。
•ブラウザのレンダリングモードを決定します
実際の操作では、ドキュメントを読み取るときに使用する解析アルゴリズムをブラウザに通知します。これが記述されていない場合、ブラウザは独自のルールに従ってコードを解析し、HTML レイアウトに重大な影響を与える可能性があります。ブラウザには HTML ドキュメントを解析する 3 つの方法があります。

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

◦ 変なモード
◦ 一部変な（ほぼ標準）モード

IEブラウザのドキュメントモード、ブラウザモード、厳密モード、変モード、DOCTYPEタグ、詳細閲覧モードについて？標準！、そしてボックスモデル。

charset

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

次のようにコードをコピーします:

<meta charset=&#39;utf-8&#39;>

HTML5 より前の Web ページは次のように記述されます:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

これら 2 つは同等です。ステップバイステップ: http://stackoverflow.com/questions/4696499/meta-charset-utf-8-vs-meta-http-equiv-content-type なので、簡単な短いものを使用することをお勧めします。覚えて。

lang 属性

簡体字中国語

<html> <!-- 更加标准的 lang 属性写法 <http://zhi.hu/XyIa> -->

繁体字中国語

<html> <!-- 更加标准的 lang 属性写法 <http://zhi.hu/XyIa> -->

通常、地域ごとの中国語の使用法の違いを強調するために、市外局番を追加する必要はほとんどありません。例:

<p>
    <strong>菠萝</strong>和<strong>鳳梨</strong>其实是同一种水果。只是大陆和台湾称谓不同，且新加坡、马来西亚一带的称谓也是不同的，称之为<strong>黄梨</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="renderer" content="webkit">

360 ブラウザは、このタグを読み取った後、対応する超高速コアにすぐに切り替わります。

なお、念のため

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

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

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

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

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

<meta http-equiv="Cache-Control" content="no-siteapp" />

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

SEO 最適化部分

ページタイトル

タグ (head ヘッダーが必要です) <pre class='brush:php;toolbar:false;'><title>your title</title></pre> ページキーワードキーワード <pre class='brush:php;toolbar:false;'><meta name="keywords" content="your keywords"></pre> ページの説明コンテンツの説明 <pre class='brush:php;toolbar:false;'><meta name="description" content="your description"></pre>Web ページの作成者 author を定義する <pre class='brush:php;toolbar:false;'><meta name="author" content="author,email address"></pre><pre class='brush:php;toolbar:false;'><meta name="robots" content="index,follow"></pre>関連リンク: WEB1038 - タグに無効な値が含まれていますviewportviewport を使用すると、モバイルブラウザーでのレイアウト表示を改善できます。 通常、 <pre class='brush:php;toolbar:false;'><meta name="viewport" content="width=device-width, initial-scale=1.0"></pre>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 中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写： <pre class='brush:php;toolbar:false;'><meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui"></pre>而如果你的网站不是响应式的，请不要使用initial-scale或者禁用缩放。 <pre class='brush:php;toolbar:false;'><meta name="viewport" content="width=device-width,user-scalable=yes"></pre>相关链接：非响应式设计的viewport ios 设备 添加到主屏后的标题（iOS 6 新增） 复制代码代码如下: <pre class='brush:php;toolbar:false;'><meta name="apple-mobile-web-app-title" content="标题"> </pre>是否启用 WebApp 全屏模式 <pre class='brush:php;toolbar:false;'><meta name="apple-mobile-web-app-capable" content="yes" /> </pre> 设置状态栏的背景颜色 <pre class='brush:php;toolbar:false;'><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> </pre> 只有在 "apple-mobile-web-app-capable" content="yes" 时生效 content 参数： •default 默认值。 •black 状态栏背景是黑色。 •black-translucent 状态栏背景是黑色半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。 禁止数字识自动别为电话号码<pre class='brush:php;toolbar:false;'><meta name="format-detection" content="telephone=no" /> </pre>相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！ 相关阅读： <a href="http://www.php.cn/div-tutorial-385687.html" target="_blank">在HTML的列表中，dl(dt,dd)、ul(li)、ol(li) 有什么不同</a> <a href="http://www.php.cn/div-tutorial-385625.html" target="_blank">html怎样使用超链接打开新窗口并且控制该窗口属性</a> <a href="http://www.php.cn/div-tutorial-385684.html" target="_blank">HTML的head头标签有哪些用法</a>

以上がHTMLでヘッダー構造を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

メモ帳++7.3.1

使いやすく無料のコードエディター

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。