ホームページ >ウェブフロントエンド >H5 チュートリアル >html5のheadの詳細説明
html5のheadの詳細説明
- 零下一度オリジナル
- 2017-07-16 15:39:144318ブラウズ
モバイル端末の作業は、通常のプロジェクト開発に加えて、フロントエンド作業の重要な部分を増してきており、HTML ヘッダー タグ機能、特にメタ タグが非常に重要です。
HTML ドキュメント の head セクションには、通常、ページ タイトルの指定、検索エンジンへのページ自体に関する情報の提供、スタイル シートの読み込み、JavaScript ファイルの読み込み (パフォーマンス上の理由から、ほとんどの場合、はページの下部に配置されます0785754a6ebbc2ca427a6344e1fab4e1 タグの終わりの前に 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) キーワード: ページのコンテンツを説明します。
<meta name="robots" content="noindex"/>この属性には、ほとんどの検索エンジンが認識する 3 つの値があります。 1) noindex: このページにインデックスを付けません。
2) noarchive: このページをアーカイブまたはキャッシュしません。
3) nofollow: このページ内のリンクに沿った検索を続行しません。
文字エンコーディングの宣言
<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 サイトの他の関連記事を参照してください。