HTMLドキュメントにコンテンツを埋め込むと、ページが豊富になります。
埋め込まれた画像IMG要素を使用すると、HTMLドキュメントの画像に埋め込まれます。
1)SRC:画像のURLを表示します。
2)ALT:機器テキスト。
3)高さ:画像の高さ。
4)幅:画像の幅。
5)USEMAP:画像をクライアント画像マッピングとして定義します。
6)ISMAP:画像は、サーバー画像マッピングとして定義されます。
以下は、画像の操作を具体的に紹介します。
埋め込まれた画像画像には、SRCおよびALTプロパティを埋め込むことができます。
<img src = triathlon.png <img src = triathlon.png </a>
このようにして、画像をクリックした後、ブラウザは親要素AのHREFプロパティによって指定されたURLに移動します。 IMG要素へのISMAP属性は、サーバー側のパーティション応答図を作成します。
<a href = otherpage.html> <img src = triathlon.png </a>
このようにして、たとえば、画像のクリックの位置がURLに添付されます。クリック位置が画像の上部から4ピクセル、左側の10ピクセルの場合、ブラウザはURLに移動します。
http://bjpowernode/listings/otherpage.html?
サーバーパーティションの応答図は、通常、サーバーがユーザーの画像の異なるクリックに応答することを意味します。
クライアントパーティション応答図クライアントパーティションの応答図は、特定の図のさまざまな領域を使用する必要がある場合、ユーザーが異なるURLに移動することをサポートしますエリア要素。
マップ要素マップ要素の役割は、クライアントの画像マッピングを定義することです。マップ要素には通常、属性が含まれています。
1)ID:マップラベルの一意のロゴを定義する必要があります。
2)名前:オプション、名前。
エリア要素エリア要素は、常にマップ要素にネストされている画像マッピング内の領域を定義します。エリア要素の属性は、2つのカテゴリに分かれています。
1)HREF:この領域をクリックした後にブラウザをロードする必要があるというURL。
2)ALT:IMG要素に対応する属性、代替コンテンツ。
3)ターゲット:URLのブラウジングコンテキスト、ベース要素の対応する属性を表示します。
4)REL:現在のドキュメントとターゲットドキュメントの関係、およびリンク要素の対応する属性を説明します。
5)メディア:スタイル要素の中程度の対応する属性。
6)hreflang:ターゲットドキュメントの言語。
7)タイプ:MIMEタイプのターゲットドキュメント。
2番目のカテゴリには、属性が含まれています。形状と座標属性。ユーザーがクリックできる各画像領域を示すために使用されます。形状属性の値は次のとおりです。
1)長方形の領域を表します。対応する座標属性は、コンマで分離された4つの整数分離(a、b、c、d)で構成されている必要があります。長方形のdは、画像の長方形の下側を表します。
2)円:円形の領域を表します。座標属性は、コンマ(a、b、c)で区切られた3つの整数で構成されている必要があります。aは、画像の左端から丸い心臓までの距離を表します。
3)ポリ:ポリゴンを表します。座標属性には、コンマで区切られた少なくとも6つの整数が含まれている必要があります。各ペアのペアは、ポリゴンの頂点の1つを表します。
4)デフォルト:全体の画像をカバーするデフォルトの領域。座標値を提供する必要はありません。
以下は例です。
<p> <img src = triathlon.png usemap =#mymap <map name = mymap> <rea href = swimpage.html shape = rect coords = 3,5,68,62 ml shape = rect coords = 70,5,130,62 <rea href = otherpage.html shape = default </map>
上記のスクリプトは、ユーザーが写真の水泳部分をクリックすると、ブラウザがイメージのサイクリング部分をクリックすると、cyclepage.htmlに移動することを定義しています
HTMLドキュメントに組み込まれていますiframe要素は、既存のHTMLドキュメントの別のドキュメントに埋め込むことができます。この要素でサポートされる属性は次のとおりです。
1)SRC:iframeで表示されたドキュメントのURL。
2)SRCDOC:iframeで表示されているページに表示されるページのHTMLコンテンツを指定します。
3)名前:iframeの名前は、コンテキストおよびその他の要素のターゲット(A、フォーム、ボタン、入力、ベースなど)で使用できます。
4)幅:iframeの幅を定義します。
5)高さ:標準iframeの高さ。
6)サンドボックス:iframeのコンテンツの追加の制限、サポートの値には以下が含まれます。
----:以下のすべての制限を適用します。
--- Allow-Same-Orgin:IFRAMEコンテンツを許可することは、ドキュメントの残りの部分と同じソースと見なされます。
--- Allow-Top-Navigation:トップレベルのブラウジングコンテキストへのリンクを許可して、現在のドキュメント全体を別のドキュメントに置き換えるか、新しいラベルとウィンドウを作成します。
7)シームレス:メインのHTMLドキュメントの全体的なコンポーネントのように、ブラウザに指示しました。この属性の使用は次のとおりです(この属性のほとんどのブラウザはまだサポートされていません):
<iframe src = demo_iframe.htm seamless> </iframe>
以下は、iframeの完全な例です。
<header> <h1>私が好きなもの</h1> <nav> <ul> <li> <a href = fruits.htmlターゲット= myframe> fruits ilike </a> </li> <li> <a href = a href = Activity.html Target = myframe> activity ilike </a> </li> </ul> </nav> </header> <iframe name = myframe width = 300 height = 100/>プラグインを介して埋め込まれています
オブジェクト要素と埋め込み要素は、ブラウザの容量を拡張し、プラグインサポートを追加するために使用されます。
埋め込まれた要素埋め込まれた要素は、埋め込まれたコンテンツを定義し、サポート属性は次のとおりです。
1)高さ:埋め込みコンテンツの高さを設定します。
2)SRC:コンテンツのURL。
3)タイプ:ブラウザがそれを処理する方法を知っているように、埋め込まれたコンテンツのMIMEタイプを定義します。
4)幅:埋め込みコンテンツの幅を設定します。
適用する他の属性は、プラグインまたはコンテンツのパラメーターと見なされます。以下の例をご覧ください。
<埋め込みsrc = http://www.youtube.com/v/qza60hca9s?
Allowfullscreen属性は、上画面の表示機能を有効にするかどうかを設定するために上記で使用されます。
オブジェクト要素オブジェクト要素は、画像、オーディオ、ビデオ、PDF、フラッシュなどの埋め込みオブジェクトを定義するためにも使用されます。オブジェクト要素には、指定されたコンテンツが使用できないときに表示される予備コンテンツを含めることができます。
<Object width = 560 height = 349 data = http:// titan/myiimaginaryfile> <param name = applagfulscreen value = true/> </b>
データ属性によって参照されるリソースが存在しない場合、オブジェクト要素のコンテンツが表示されます。
進捗バーProgress ElementはProgress Barを表します。サポート属性は次のとおりです。
1)最大:タスクの最大値を示します。
2)値:0の属性と最大属性の値の間の現在の進捗を定義します。
3)フォーム:属する1つ以上のフォーム。
MAX属性が省略されると、範囲は0〜1で、値属性はFloat -Point数値を使用して、0.3などの進捗を表します。30%を示します。
<進行状況ID = myProgress値= 10 max = 100> </progress> <p> <ボタンタイプ=ボタン値= 30> 30%</button> <ボタンタイプ= 60> 60%</butt on> <ボタンタイプ= 90> 90%</button> </p> <scripton = document.getelementsbytagname( 'button'); .length; i ++){buttons [i] .onclick = function {progress.value = e.target.value;} </script>上記の例は、異なる値を表示する異なる値を示しています。異なる値は次のとおりです。
ディスプレイ範囲の値メーター要素は、特定の範囲内で特定の値を示します。サポート属性は次のとおりです。
1)min and Max:スコープのみの範囲を指定して、フローティングポイントを使用できます。
2)低:低価値範囲を指定し、その下の所有権は低すぎると見なされます。
3)高:高い値範囲を指定し、その上のすべての値は高すぎると見なされます。
4)最適:最適な値を指定します。
5)値:測定の現在の値。
6)フォーム:属する1つ以上のフォーム。
<メーターID = MyMeter値= 90分= 10 max = 100 low = 40 high = 80optimum = 60> </meter> <p> <ボタンタイプ= 30> 30%</button> utton値= 60> 60%< /button> <ボタンタイプ= 90> 90%</button> </p> <script> document.getElementsbytagname); = 0; i <xttons.length;
メーター要素の値が低すぎて高すぎ、最良の値がある場合、ブラウザはそれらをさまざまな方法で提示します