html5のheadの詳細説明-H5 チュートリアル-php.cn

モバイル端末の作業は、通常のプロジェクト開発に加えて、フロントエンド作業の重要な部分を増してきており、HTML ヘッダータグ機能、特にメタタグが非常に重要です。

HTML ドキュメントの head セクションには、通常、ページタイトルの指定、検索エンジンへのページ自体に関する情報の提供、スタイルシートの読み込み、JavaScript ファイルの読み込み (パフォーマンス上の理由から、ほとんどの場合、はページの下部に配置されます< /body> タグの終わりの前に JavaScript が読み込まれます。タイトルを除いて、head のコンテンツはページ訪問者には見えません

以下は HTML ドキュメントの head 部分の例です:

<head>  
    <meta charset="utf-8" />  
    <meta name="author" content="Adam Freeman"/>  
    <title>Your page title</title>  
    <base href="http://titan/listings/" target="_blank"/>  
    <style type="text/css">  
        a{  
            background-color: grey;  
            color: white;  
            padding: 0.5em;  
        }  
    </style>  
</head>

ログイン後にコピー

DOCTYPE (Document Type)、この宣言は最前部にあります。 document の html タグの前にあるこのタグは、ドキュメントが使用する HTML または XHTML 仕様をブラウザーに伝えます。

大文字と小文字を区別しない HTML5 doctype を使用します。

title 要素

head 要素には、title 要素が含まれている必要があります。この要素のコンテンツは、Web ページのタイトルとしてブラウザのタブまたはブラウザウィンドウの上部に表示され、ブラウザ。

base 要素

Base 要素は、HTML ドキュメント内の相対リンクが解析されるベース URL を設定するために使用されます。指定しない場合は、現在ロードされているドキュメントの URL が使用されます。基本要素では、ユーザーがリンクをクリックしたときにリンクがどのように開くか、フォームが送信されたときにブラウザがどのように反応するかを設定することもできます。

<base href="http://bjpowernode/listings/" target="_blank"/>

ログイン後にコピー

1) href は指定されたベース URL です。

2) target 属性は、ページ上のすべてのリンクを開く場所を次の値を含めて指定します:

1) _blank: 接続されているドキュメントを新しいウィンドウで開きます
2) _self: デフォルトでは、リンクされたドキュメントを同じウィンドウで開きます。 Frame Document;
3) _parent: 親フレームでリンクされたドキュメントを開きます。
4) _top: リンクされたドキュメントをウィンドウ全体で開きます。
5) Framename: 指定されたフレームでリンクされたドキュメントを開きます。

meta 要素

meta 要素は、ドキュメントのさまざまなメタデータを定義するために使用されますが、複数のメタ要素を使用する必要がある場合、各メタ要素は 1 つの目的にのみ使用できます。 head要素に複数のmeta要素を追加します。

名前と値のメタデータのペアを指定します

<meta name="author" content="Adam Freeman"/>

ログイン後にコピー

name 属性はメタデータのタイプを示すために使用され、content 属性は値を提供します。 name 属性には次の値が含まれます:

1) アプリケーション名: 現在のページが属する Web アプリケーションシステムの名前

2) author: 現在のページの作成者の名前
3) description: 説明。現在のページの名前。
4) ジェネレーター: HTML を生成するソフトウェアの名前。
5) キーワード: ページのコンテンツを説明します。

上記の 5 つの事前定義されたメタデータ名に加えて、メタデータ拡張子も使用できます。ここ (http://wiki.whatwg.org/wiki/MetaExtensions) には、これらの拡張子の頻繁に更新されるリストがあります。ロボットメタデータなど、一部の拡張機能はより頻繁に使用されます。HTML ドキュメントの作成者は、これを使用して検索エンジンにドキュメントの処理方法を指示できます:

<meta name="robots" content="noindex"/>

ログイン後にコピー

この属性には、ほとんどの検索エンジンが認識する 3 つの値があります。

1) noindex: このページにインデックスを付けません。

2) noarchive: このページをアーカイブまたはキャッシュしません。
3) nofollow: このページ内のリンクに沿った検索を続行しません。

ほとんどの検索エンジンは Web の最適化を提供します。ページまたは Web サイト全体に関するガイダンスについては、対応する検索エンジンによって提供されるページまたは Web サイトの最適化ガイドを表示できます。

文字エンコーディングの宣言

<meta charset="utf-8" />

ログイン後にコピー

head要素内のmeta要素は、ドキュメントの文字エンコーディングがUTF-8(デフォルト)であることを宣言します。

HTTP ヘッダーフィールドをシミュレートする

meta 要素を使用して、3 つの HTTP ヘッダーフィールドの値をシミュレートまたは置き換えることができます。

<meta http-equiv="refresh" content="5"/>

ログイン後にコピー

http-equiv 属性の目的は、シミュレートするヘッダーフィールドの名前を指定することであり、フィールドの値は content 属性で指定されます。 http-equiv 属性のオプションの値は次のとおりです:

1) 更新: 現在のページがサーバーから再ロードされるまでの時間間隔を秒単位で指定します。

<meta http-equiv="refresh" content="5;http://www.apress.com"/>

ログイン後にコピー

のように、ブラウザがロードする URL を指定することもできます。 2)default-style: ページで最初に使用されるスタイルシートを指定します。 content 属性の値は、style 要素である必要があります。同じドキュメント内の title 属性値

3) content-type: HTML ページで使用される文字エンコーディングを宣言する別の方法 (例:

<meta http-equiv="content-type" content="text/html charset=UTF-8"/>

ログイン後にコピー

style 要素

) HTML ドキュメントに埋め込まれた CSS スタイル。

<style type="text/css">  
    a{  
        background-color: grey;  
        color: white;  
        padding: 0.5em;  
    }  
</style>

ログイン後にコピー

上記の a 要素用に新しいスタイルが設計されています。 style 要素は、HTML ドキュメントのさまざまな部分に表示できます。この要素は、テンプレートで定義されたスタイルを補足するために使用できます (リンク要素のインポート)。

可以为style元素指定样式适用的媒体：

<style media="screen AND (min-width:500px)" type="text/css">  
    ......   
</style>

ログイン後にコピー

media属性中的screen是设备类型，可选值的范围包括：

1）all：将样式用于所有设备（默认值）；
2）aural：将样式用于语音合成器；
3）braille：将样式用于忙问设备；
4）handheld：将样式用于手持设备；
5）projection：将样式用于投影机；
6）print：将样式用于打印预览和打印页面时；
7）screen：将样式用于计算机显示器屏幕；
8）tty：将样式用于电传打字机之类的等宽设备；
9）tv：将样式用于电视机。

media属性中的(min-width:500px)指定特性，包括：

1）width height：指定浏览器窗口的宽度和高度，单位px，例如：width:200px
2）device-width device-height：指定整个设备（而不仅仅是浏览器窗口）的宽度和高度，单位px，例如：min-device-height:200px
3）resolution：指定设备的像素密度，单位dpi（点/英寸）或dpcm（点/厘米），例如：max-resolution:600dpi
4）orientation：指定设备的较长边朝向，可选值为portrait和landscape
5）aspect-ratio device-aspect-ratio：指定浏览器窗口或整个设备的像素宽高比，例如：min-aspect-ratio:16/9
6）color monochrome：指定彩色或黑白设备上每个像素占用的二进制位数，例如：min-monochrome:2
7）color-index：指定设备所能显示的颜色数目，例如：max-color-index:256
8）scan：指定电视的扫描模式，包括值progressive和interlace
9）grid：指定设备的类型，支持的值为0和1（1代表网格型设备，使用固定的网格显示内容）

link元素

用来在HTML文档和外部资源（如CSS样式表）之间建立联系。link元素包含6个局部属性，如下：

1）href：指定link元素指向的资源的URL；
2）hreflang：说明所关联资源使用的语言；
3）media：说明所关联的内容用于哪种设备，同style中的media属性；
4）rel：说明文档与所关联资源的关系类型，值的范围如下：
---alternate：链接到文档的替代版本，比如另一种语言的译本；
---author：链接到文档的作者；
---help：连接到当前文档的说明文档；
---icon：指定图标资源；
---license：链接到当前文档的相关许可证；
---pingback：指定一个回探（pingback）服务器，从其他网站链接到博客的时候它能自动得到通知；
---prefetch：预先获取一个资源；
---stylesheet：载入外部样式表。
5）sizes：指定图标的大小；
6）type：指定所关联资源的MIME类型，如text/css、image/x-icon。

载入外部样式表

<link rel="stylesheet" type="text/css" href="styles.css"/>

ログイン後にコピー

可以使用多个link元素载入多个外部资源。

为页面定义网站标志

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

ログイン後にコピー

浏览器载入HTML页面时，会加载并显示网站标志。

注：如果网站标志文件位于/favicon.ico（即Web服务器的根目录），那就不必用到link元素，大多数浏览器在载入页面时都会自动请求这个文件，就算没有link元素也是如此。
预先获取资源

可以要求浏览器预先获取预计很快就要用到的资源。

<link rel="prefetch" href="/page2.html"/>

ログイン後にコピー

注：目前不是所有浏览器都支持该功能。

script元素

用于在页面中加入脚本，可以直接在文档中定义脚本和引用外部文件中的脚本。该元素支持的局部属性如下：

1）type：表示所引用或定义的脚本的类型，对于JavaScript脚本这个属性可以省略
2）src：指定外部脚本文件的URL
3）defer async（HTML5新增）：设定脚本的执行方式，这两个属性只能与src属性一同使用
4）charset：说明外部脚本文件所用字符编码，该属性只能与src属性一同使用

定义文档内嵌脚本

<script>  
    document.write("This is from the script");  
</script>

ログイン後にコピー

默认情况下，浏览器在页面中一遇到脚本就会执行。

载入外部脚本库

可以将脚本放到单独的文件中，然后用script元素载入HTML文档。

<script src="simple.js"></script>

ログイン後にコピー

推迟脚本的执行

使用async和defer属性可以对脚本的执行方式加以控制，defer属性告诉浏览器要等页面载入和解析完成后才能执行脚本：

<script defer src="simple2.js"></script>

ログイン後にコピー

由于html遇到脚本就会执行，如果你的脚本需要使用到html脚本中的内容，通常你需要将脚本放到相应的html脚本后，但在html5中，使用defer属性就能达到同样的目的。

浏览器遇到script元素时的默认行为是在加载和执行脚本的同时暂停处理页面，各个script元素依次同步执行。async属性可以在浏览器解析HTML文档时异步加载和执行脚本，如果运用得当，可以大大提高整体加载性能。

<script async src="simple2.js"></script>

ログイン後にコピー

noscript元素

noscript元素用来向禁用了JavaScript或浏览器不支持JavaScript的用户显示一些内容。

<noscript>  
    <h1>JavaScript is required!</h1>  
    <p>You cannot use this page without JavaScript</p>  
</noscript>

ログイン後にコピー

还有一种选择是在浏览器不支持JavaScript时将其引至另一个URL。

<noscript>  
    <meta http-equiv="refresh" content="0;www.apress.com"/>  
</noscript>

ログイン後にコピー

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