マインドマップギャラリー html
これは HTML に関するマインド マップです。HTML とは何ですか? 一般的に使用されるタグには、画像、ハイパーリンク、リスト、表、メディア要素、フォーム、テキスト タグ、およびタグ分類が含まれます。
2022-12-02 19:20:23 に編集されましたHTML
Enter キーを押してトピックを追加します
HTMLとは
それは何ですか
Webページの開発を実現できるハイパーテキストマークアップ言語です。 タグ(タグ)を使用して、Web ページにハイパーテキストを実装します(テキストだけでなく、画像、音声なども含めます) Web ページのコンテンツはタグによって実装されます
HTM Lの基本構造
<html> <頭> <タイトル>タイトル</タイトル> </head> <本文> HTMLタグはすべてbody内に記述します </body> </html>
よく使われるタグ
ラベルの分類
シングルラベル ラベルは 1 つだけあります
通常、これは設定のみに使用されます。例:<br/><hr/>
終了/省略可能
ダブルラベル ラベルには 2 つのコンポーネントがあります
一般に、これには包含の機能があります。例: <p></p> p タグには段落全体が含まれます。
終了/省略不可
列を占有するかどうか
インライン要素 (インライン要素): コンテンツによってラベルの幅が決まり、他のインライン要素と同じ行に表示できます。
ブロックレベルの要素: デフォルトの幅はウィンドウと同じ幅であり、コンテンツが独占的な行をどれだけ占めていても、他のタグと同じ行に表示することはできません。
注: 含める場合: ブロック レベルの要素にはインライン要素が含まれます (同じレベルの要素は相互に含めることもできます)。 例: 段落内のタグが太字である場合、それは p タグに強力なタグが含まれていることを意味しますが、その逆は意味しません。
テキストクラスのタグ
<p></p> 段落タグ
効果: 行の折り返し、間隔の拡大、ブロックレベルの要素
<h1-h6><h1-h6> タイトルタグ
効果: 改行、太字フォント、ブロックレベル要素
<strong></strong> 太字
効果: 改行なし、太字フォント、インライン要素
<em></em> 斜体
効果: 改行なし、斜体フォント、インライン要素
<br/>
効果: 行の折り返し、間隔は変更されません
<hr/>
効果: 水平線を生成します。
特殊記号: HTML で直接認識できない記号、または特殊な機能を持つ記号。 例: HTML ではスペースを直接使用できないため、  を使用します。 <>html を直接記述するとタグとして認識されます。> 以下の名前を使用する場合は & gt と & lt を使用する必要があります。
スペースと注記
より大きい>
未満(<)
著作権とコピー
写真
ラベル
<img 属性 1 = "属性値 1" 属性 2 = "属性値 2" /> インライン要素
属性: ラベルの効果を強化します。
src: 画像のパスを設定します (Web ページの同じフォルダーに画像を保存する新しいフォルダーを作成することをお勧めします)
1. パスの簡略化
2.移動に便利
width: 画像の幅を設定します。
高さ: 画像の高さを設定します
alt: 画像が表示されない場合のテキスト説明
title: マウスが画像上を通過したときに表示されるテキストを設定します
注: 画像に幅または高さが 1 つだけ設定されている場合、画像は同じ比率で拡大縮小されます。両方を設定すると、画像の比率が崩れる可能性があります。
ハイパーリンク
機能: コンテンツの一部をクリックすると、別のページ (ハイパーリンク) にジャンプできます。 <a href=""target="">クリックされたコンテンツ</a>
href: ジャンプ先のページのパスを設定します。例: フォルダー名/ファイル名 shouye/goods.html
target: ページジャンプ時の開き方を設定します。 _blank: 新しいウィンドウを開いて新しいページを表示します。
クリック可能なコンテンツ: HTML 内のすべてのコンテンツはクリック可能なオブジェクトとして使用できます。
機能:コンテンツの一部をクリックすると、指定した場所へジャンプできます(アンカーリンク)
ステップ 1: 最初にアンカー ポイントを設定します: ジャンプ先の固定位置にアンカー ポイントを設定します <a name="#アンカー名"></a>
ステップ 2: アンカーポイント 1 にジャンプします。同じページ 2.<a href="アンカーが配置されているページのパス#アンカー名">コンテンツ</a>
a. 同じページ内の指定された場所にジャンプします。 b. 別のページの指定した場所にジャンプします。
注: # を追加しないと、デフォルトは page になります。
リスト
順序なしリスト .<ul type=""> .<li></li> .</ul>
順序付きリスト 1.ol type="" 2.<li></li> 3.</ol>
定義リスト: 1.<!--定義リスト レベル 1 レベル 2--> 2.<dl> 3. <dt>オラクル (66.300、-0.730、-1.09%) アカデミー</dt> 4. <dd>ビッグデータのアプリケーションとテクノロジー</dd> 5. <dd>ソフトウェアテクノロジー</dd> 6. <dt>美術アカデミー</dt> 7. <dd>学術研究</dd> 8. <dd>庭園のデザイン</dd> 9.</dl>
シート
基本構造 1.<テーブル>->テーブル 2. <tr>->行 3. <td>通常の列/セル</td> 4. <th>太字の td</th> 5.</tr> 6.</テーブル>
行全体(垂直方向) 1.<table border="1"width="500"> 2. <tr> 3 <td rowspan="2">張三</td> 4. <td>言語</td> 5 <td>98</td> .6.</tr> 7. <tr> 8. <td rowspan="2">ジョン・ドゥ</td> 9. <td>中国語</td> 10. <td>100</td> 11.</tr> 12.</テーブル>
列全体(水平方向) 1.<table border="1"cellspacing="0"cellpadding="0"> 2. <tr> 3. <tdcolspan="2">検査結果</td> 4.</tr> 5. <tr> 6. <td>言語</td> 7. <td>129</td> 8.</tr> 9.</テーブル>
行間および列間の説明: 列間:colspan 行間: rowspann 横は行、縦は列
メディア要素
オーディオ オーディオ
属性 1.コントロール: 一時停止ボタンや再生ボタンなどのディスプレイ コントロール 2.ループ:ループ再生 3. autoplay: 自動再生
コード 1.<!-- 2. ビデオでも音楽でも、デフォルトではコントロールは表示されません。 3.--> 4. <オーディオ コントロール = "true" ループ = "true" autoplay = "true"> 5.<!-- 6.ビデオと同様に、できるだけ多くの音楽ファイル形式を提供します 7. ブラウザは、ロードできる音楽形式を自動的に認識します。 8.--> 9. <ソース src="ビデオ/サウンド.mp3"> 10. <ソース src="video/sound.ogg"> 11. </オーディオ>
ビデオビデオ 1.<!-- 2. 同じビデオに対してできるだけ多くのビデオ形式を提供します 3.. ビデオを可能な限りすべてのブラウザで利用できるようにする 4. --> 5. <video width="400"controls="true"loop="true"autoplay=""true> 6.<!-- 7.source を使用して、video タグが複数のビデオのパスをロードできるようにします。 8. ブラウザは、ロードできるビデオ形式を自動的に認識します。 9. --> 10. <ソース src="video/for.mp4"/> 11. </ビデオ>
形状
フォームフォーム: ページ上でデータを入力または送信できるものはすべてフォームです。 注: すべてのフォーム要素はこのタグ内に記述する必要があります。そうしないと、入力されたコンテンツを送信できません。
フォーム要素
入力方式: 1. type="text" テキストボックス 2. type="password" パスワードボックス 3. type="file" ファイルフィールド、ファイルのアップロードに使用されます 4. type="number" ナンバーボックス 5. type="hidder" 非表示フィールドにはデータを送信する必要がありますが、ユーザーが見る必要がない場合は一部のデータを非表示にすることができます。 6. type="radio" ラジオ ボタン。同じグループ内のラジオ ボタンの name 属性値は一貫している必要があることに注意してください。 属性:checked:デフォルトでチェックされるように設定されます 7. type="checkbox" チェックボックス 同じグループ内のチェックボタンの name 属性値は一貫している必要があることに注意してください。 8. type="submit" 値の設定により、テキストの内容に応じて送信ボタンを設定できます 9. type="reset" リセット ボタン。フォーム内の要素を初期の内容に復元します。 10. type="image" 送信ボタン (ピクチャタイプ) は、src="" を通じてボタン画像を設定できます。 無入力タイプ: ドロップダウン ボックス: テキスト エリアを選択: textarea 1.<!--ドロップダウン ボックス (ドロップダウン リスト): 1.<!-- を選択します。 2. オプション: リスト内のオプション 2. テキストフィールド 3. selected:デフォルトの選択項目を設定します。 3.cols:テキストフィールドに表示される列数を設定します。 4. --> 4. row: テキストフィールドに表示される行数を設定します。 5. <select name="nian"> 5.--> 6. <オプション> 6. <textarea name="beizhu"cols="20" row="6"> 7. <オプション> 7. 8.<! -- この項目をデフォルト項目として設定します --> 8.</textarea> 9. <オプションが選択されました>2000</オプション> 10. <オプション>2001</オプション> 11. </選択>
1.
その他のプロパティ
readonly: 読み取り専用、表示のみ可能ですが変更はできません
必須: 必要に応じて設定します
プレースホルダー: テキスト ボックスのプロンプト テキストを設定します。
Tab キーを押してサブトピックを追加します
ダブルクリックしてテキストを編集します