マインドマップギャラリー HTMLフレームワークの概要
HTML 学習フレームワークは、基本的なタグ、テキスト、リスト、表、画像、ハイパーリンク、フォーム、およびフレームのコンテンツを編成します。
2023-03-03 21:47:02 に編集されましたHTML
1.基本タグ
1.1. ドキュメント宣言: <!DOCTYPE html>
1.2.<html></html>
1.3.<頭></頭>
1.3.1.<title></title>Web ページのタイトル
1.3.2.<meta> は検索エンジン スパイダーにこのページが何を行うかを伝えます
属性 1: 名前
名前="キーワード" コンテンツ=""
名前="説明" コンテンツ=""
属性 2: http-equiv
文字化けを防ぐためのcharset="utf-8"置換
http-equiv="リフレッシュ" content="6;url=http://www.baidu.com"
1.4.<ボディ></ボディ>
1.5. コメント
<!--内容-->
2.本文
2.1 はじめに
2.1.1 ページ要素
テキスト、画像、およびビデオ。
2.1.2 静的ページと動的ページの違い
サーバーデータを操作するかどうか
2.2HTMLテキスト
2.2.1 タイトルタグ
<h1></h1>~<h6></h6>
2.2.2 段落タグ
<p></p>テキストをギャップのある段落に分割する
<br/>テキストを隙間なく折り返す
2.2.3 テキストラベル
太字: 強い (もっと)、b
イタリック体: em (詳細)、i、cite
上付き文字: 上
下付き文字: サブ
2.2.4 横線ラベル
<hr/>
2.2.5divタグ
機能: 構造を分割し、CSSで特定のブロック全体のスタイルを制御します
2.2.6 自動閉鎖ラベル
<meta/>、<link/>、<br/>、<hr/>、<img/>、<input/>
2.2.7 ブロック要素とインライン要素
ブロック要素
h1~h6;p;div;hr;ol;ul
特徴: 他の要素を除き、行を排他的に占有します。要素は他のブロック要素やインライン要素を収容できます。
インライン要素
強い;em;a;スパン
特徴: 他のインライン要素と一緒に移動できます。他のインライン要素は要素内に収容できますが、ブロック要素は収容できません。
2.2.8 特殊記号 (必要に応じて直接検索)
スペース、漢字 1 文字はスペース 3 個にほぼ等しい
「」
3. リスト
3.1 順序付きリスト
<ol><li>リスト項目 1</li></ol>
3.2 順序なしリスト
<ul><li>リスト項目 1</li></ul>
4.表
4.1 基本構造
table: テーブル、tr: 行、td: セル、caption: テーブルのタイトル、th: テーブルのヘッダー、thead、tbody、tfoot: テーブルのセマンティクス。 <table><caption>表のタイトル</caption> <thead><tr><th>ヘッダー セル 1</th></tr></thead> <tbody><tr><td>セル 1 </td ></tr></tbody> <tfoot><tr><td>セル 1</td></tr></tfoot> </table>
4.2 行の結合: 行範囲
<td rowspan="スパン行数"></td>
4.3 列の結合:colspan
<tdcolspan="スパンする列の数"></td>
5.写真
5.1src属性(必須)
<img src="画像のパス。相対パスを使用してください" alt="画像が表示されない場合は、このテキストをプロンプトします" title="画像の上にマウスを移動すると、タイトルのプロンプト テキストが表示されます" / >
5.2alt属性(必須)
5.3title属性
5.4 画像フォーマット
5.4.1 ビットマップ (主に使用)
1.jpg: カラフルで高品質な画像を表示します。透明度はサポートされていません。
2.png: カラフルで高品質な画像を表示します。ページを開く速度を確保するために可逆圧縮できる可逆形式です。カラフルな画像の保存には適していません。
3.gif: アニメーション画像。写真は最悪です。
5.4.2 ベクタグラフィックス
1. カラフルな画像の表示には適していません。
2. 構成単位:「数学ベクトル」です
3. 解像度の影響を受けず、画像を拡大しても歪みがありません。
6.ハイパーリンク
6.1aタグ
6.1.1hrefリンクアドレス
外部/内部(相対)リンク可能。 <a href="リンク アドレス">テキストまたは画像</a>
6.1.2ターゲット属性
_blank: リンクを新しいウィンドウで開きます。 <a href="" target="_blank"></a>
6.2 アンカーリンク
# id の href: <a href="#article、任意の英語名を選択"></a> <div id="article"></div>
7. フォーム
7.1 フォームタグ
フォーム、入力、テキストエリア、選択、オプション
7.2フォームタグ
7.2.1<form>さまざまなフォームタグ</form>
7.2.2 プロパティ
名前は区別しやすいです: <form name="myForm"></form>
Method は、フォーム データに使用する http 送信メソッドを指定します。通常、セキュリティを強化するために Post が使用されます: <form method="post"></form>
action は、フォーム データが処理のために送信されるアドレスを指定します: <form action="index.php"></form>
target はウィンドウを開く方法を指定します (通常は _blank: <form target="_blank"></form>)
7.3入力タグ
テキストボックス
7.3.1 単一行のテキストボックス
<input type="テキスト" />
属性
値は値のテキスト ボックスに表示されます: <input type="text" value="helicopter"/>
maxlength テキスト ボックスに入力できる最大文字数: <input type="text" maxlength="5"/>
7.3.2 パスワードテキストボックス
<input type="パスワード" />
属性
価値
<input type="password" size="15" maxlength="10" />
サイズ
最大長
7.3.7 複数行のテキストボックス
<textarea rows="行数"cols="列数" value="値 (通常、表示テキストを設定する必要はありません)">デフォルトの内容</textarea>
7.3.3 ラジオボタン
<input type="radio" name="グループ名" value="値" />
属性
お名前(必須)
<input type="radio" name="gender" value="男性" />男性 <input type="radio" name="gender" value="女性" />女性
値(必須)
チェックが選択されました
<input type="radio" name="gender" value="男性" チェック済み />男性
7.3.4 チェックボックス
<input type="checkbox" name="グループ名" value="値" />
属性
お名前(必須)
<input type="checkbox" name="fruit" value="Apple"/>Apple <input type="checkbox" name="フルーツ" value="バナナ"/>バナナ
値(必須)
チェックが選択されました
<input type="checkbox" name="フルーツ" value="バナナ"/>バナナ
7.3.5 ボタン
7.3.5.1 通常のボタン(jsと連携して各種操作を行う)
<input type="button" value="値 (ボタン上のテキスト)" />
7.3.5.2 送信ボタン(サーバーにデータを送信)
<input type="submit" value="値 (ボタン上のテキスト)" />
7.3.5.3 リセットボタン(ユーザーがフォームに入力した内容をクリアします)
<input type="reset" value="値 (ボタン上のテキスト)" />
7.3.5.4ボタンのラベル(使いにくい)
7.3.6 ファイルのアップロード
<input type="ファイル" />
7.3.8 ドロップダウンリスト
<select> <option>オプション内容 1</option> </select>
属性を選択
Multiple では複数の項目を選択できます: <select multiple> </select>
size は複数のリスト項目を表示します。値は 4 以上の整数です: <select size="5"></select>
オプション属性
選択されているかどうか: <option selected>jQuery</option>
value オプション value、JavaScript とサーバーで操作
8.フレームワーク
8.1 インラインフレーム(現在のページに別のWebページを埋め込む)
<iframe src="リンクアドレス" width="数値" height="数値"></iframe>