マインドマップギャラリー HTML
この HTML に関するマインド マップでは、Web ページのスタイル、タグ、属性に関する知識が共有されています。興味があればご覧ください。
2023-05-27 23:46:10 に編集されましたHTML
ウェブスタイル<br>
セレクタ
タグセレクター<br>
タグ名 {属性名: 属性名: 属性}<br>
クラスセレクター<br>
.タグ名 {属性名: 属性; 属性名: 属性}<br>
IDセレクター<br>
#id{属性名: 属性; 属性名: 属性}<br>
<pre class="prettyprint linenums prettyprinted"><code class=" language-html"><span class="tag"><h1 style="font-size:18px">インライン形式の使用方法</h1>< /span></code></pre>
<span style="font-family: 'Wawati SC';">タグ名、.class 名、#ID</span><span style="font-family: 'Wawati SC';"><span style=" font-family:Wawati SC">{</span>ユニオンセレクター</span><span style="font-family:Wawati SC">}</span>
<span style="font-family:Wawati SC">タグ名.クラス名 {交差点セレクター}</span>
<span style="font-family: 'Wawati SC';">外部タグ名内部タグ名</span><span style="font-family: 'Wawati SC';"><span style="font-family : Wawati SC">{</span>子孫セレクター</span><span style="font-family:Wawati SC">}</span>
CSS スタイルを導入する方法<br>
インラインスタイル<br>
スタイルを埋め込む<br>
<pre class="prettyprint linenums prettyprinted"><code class="lang-html"><span class="tag"><head><style type="test/css"> h1{属性名: 属性;}< /style></head></span></code></pre>
スタイルをインポート<br>
<link href="スタイルファイル名" type="テキスト/CSSリンクファイルの形式" rel="スタイルシート" ドキュメントの外部スタイルシート/><br>
現在のドキュメントとリンクされたドキュメントの間の関係を指定します。スタイルシートのみがすべてのブラウザに適用されます。
サブトピック
CSS プロパティ<br>
タイプ
フォントの種類: フォントファミリー<br>
フォントのレンダリング: テキストシャドウ<br>
フォントサイズ: font-size<br>
フォントスタイル: フォントスタイル<br>
斜め少し傾いた<br>
イタリックティルト<br>
フォントの太さ: font-weight<br>
フォント大文字: font-variant<br>
フォント属性: フォント
フォント{スタイル ウェイト サイズ タイプ}<br>
テキスト装飾スタイル: テキスト装飾<br>
下線:下線<br>
取り消し線: 取り消し線<br>
色: カラー<br>
背景<br>
背景色: 背景色<br>
背景画像: 背景画像<br>
背景画像の繰り返し方法:bakeground-repeat<br>
背景画像のX、Y軸開始位置:background-position<br>
背景の関連付け:background-attachment:fixed (背景はテキストと一緒にスクロールしません)<br>
ブロック
単語間隔:単語間隔
文字間隔: 文字間隔<br>
テキストの垂直方向の配置:vertical-align、text-align<br>
1行目のインデント: text-indent<br>
表示モード: ディスプレイ<br>
行の高さ: 行の高さ
ボックスモデル<br>
幅と高さを定義します: 幅,高さ<br>
上下左右のパディング:padding-top,right,bottom,left<br>
外部マージンの上、下、左、右: margin-top、right、bottom、left<br>
マージン:0px 自動;Web ページを中央に配置<br>
ボーダー:ボーダー<br>
境界線のスタイル: 境界線の太さ: 上下左右の境界線の色<br>
<pre>境界線のスタイル: 点線、実線、二重、破線 </pre>
Display は要素の表示と非表示を制御します<br>
display:block は、前後に改行を入れて要素をブロックレベルの要素として表示します<br>
display:inline 要素を改行なしでトラック要素として表示します<br>
display:none 要素を非表示にします<br>
フロート<br>
フロート<br>
クリアクリアフロート<br>
左右両方のフロートをクリア<br>
オーバーフローボックスのオーバーフロー処理<br>
表示されているコンテンツが切り取られ、切り取られたコンテンツがボックスの外側に表示されます<br>
非表示のコンテンツは切り取られ、残りのコンテンツは非表示になります<br>
位置
位置
相対的な位置関係<br>
はその位置に表示され、要素がその原点に対して「相対的に」移動できるようになります。
絶対的な位置決め<br>
絶対配置に設定された要素ボックスはドキュメント フローから完全に削除され、その要素を含むブロック (ドキュメント内の別の要素または最初の要素を含むブロック) に対して相対的に配置されます。通常のドキュメント フローで要素が以前に占めていたスペースは、その要素が存在しないかのように閉じられます。この要素は、通常のフローで最初に生成されたボックスの種類に関係なく、配置後にブロック レベルのボックスを生成します。
z-index設定レベル<br>
リスト
項目番号タイプ: リストスタイルタイプ<br>
品番画像: list-style-image<br>
項目マークの位置: list-style-position<br>
inside タグは内側に表示されます<br>
内側のタグは外側に表示されます<br>
ハイパーリンク疑似クラス<br>
a:link をクリックせずにアクセスした場合のハイパーリンクのスタイル
クリックして a:visited にアクセスした後のハイパーリンクのスタイル
マウスがホバーしているハイパーリンクのスタイル a:hover
マウスクリックが放されていないときのハイパーリンクスタイル a:active
マウスの形状を設定: カーソル<br>
デフォルトのカーソル: デフォルト<br>
ハイパーリンク ポインタ: ポインタ<br>
スパン{カーソル:ポインタ;}
プログラムがビジー状態であることを示します: 待機<br>
利用可能なヘルプを示します: ヘルプ<br>
指示テキスト: テキスト
タグと属性<br>
<html> と </html> の間の Web ページを説明するテキスト
<head> と </head> の間のテキストは、Web ページの先頭に表示されるコンテンツです<br>
<title> と </title> の間のテキストは Web ページのタイトルです<br>
<body> と </body> の間のテキストは、表示されるページのコンテンツです
<h1> から </h6> までの文字がタイトルとして表示されます
<p> と </p> の間のテキストは段落として表示されます
<br/> 改行 <hr/> 水平線<br>
<em> と </em> <i> と </i> の間のテキストは斜体です<br>
<strong> と </strong> の間のテキストが強調されます<br>
<img/> および </img>HTML イメージは、<img> タグによって定義されます。
<pre><img src="画像アドレス" width="width" height="length" <code>alt="</code><code>画像用に準備された置換可能なテキストの文字列を定義するために使用されます"</ code > title="マウスオーバーしてテキストを表示します"/></pre>
<a> および </a> HTML リンクは、<a> タグを使用して定義されます。
・・・・・・
アンカーリンク(指定タグへジャンプ): <a href="#name"></a><p name="name"></p>
特殊記号
スペース<br>
> 大なり記号
<小なり記号
&コピー; 著作権記号 ©
www.w3school.com.cn
<meta> と </meta> はエンコード形式を定義します<br>
UTF-8、GB2312、GBK<br>
<meta charset="UTF-8"></meta><br>
<link> と </link> は CSS スタイルを導入するために使用されます<br>
リスト
<ul><li> </li></ul> 順序なしリスト<br>
属性タイプ: 円盤中実円、四角ボックス、円中空円<br>
<ol><li> と </li></ol> の順序付きリスト<br>
属性タイプ: 1aAIi<br>
<dl><dt><dd> および </dd>備考</dt></dl> 定義リスト<br>
<table> および </table> テーブル タグ。リストは内部にネストできます。<br>
<th> と </th> はヘッダーを定義します<br>
<tr> と </tr> はテーブルの行を定義します<br>
<td> と </td> はテーブルのセルを定義します<br>
<thead> と </thead> <tbody> と </tbody> <tfoot> と </tfoot>。 。 。
プロパティ (水平方向の配置 align: 左、中央、右、腹部画像の中心配置<br> 垂直方向の配置 valign: 上部上部の配置、中央中央の配置、下部下部の配置、ベースラインの配置)
<table border="1" cellpadding="セルとコンテンツの間の間隔" cellpacing="セル間の直接の間隔""></table>
列スパンを水平方向にマージし、行スパン リストをマージします<br>
<frameset> と </frameset> (本文の外側に記述)
属性 (フレームの水平方向の並べ替え、cols="200px,*,100px" の垂直方向の並べ替え行を定義)<br>
<frame src="他のWebページのアドレス" name="ジャンプしやすい名前"/>
<iframe> と </iframe>
<form> および </form> フォーム タグ。フォーム要素は内部にネストできます。<br>
<pre><form action="送信された Web サイト" method="GET または POST"></pre>
<p>フォームの送信が受動的(検索エンジンのクエリなど)であり、機密情報が含まれていない場合。 GET を使用すると、フォーム データがページのアドレス バーに表示されます。</p><p>フォームがデータを更新している場合、または機密情報 (パスワードなど) が含まれている場合。ページのアドレス バーに送信されたデータは表示されないため、POST の方が安全です。 </p>
<input name="要素名" type="タイプ" value="値" size="表示幅" maxlength="文字長"checked="選択状態かどうか"disabled="無効" readonly="readonly 読み取り専用" ><br>
<em><input type="text"></em> は、<em>テキスト入力</em>用の 1 行の入力フィールドを定義します。
<pre><input type="text" name="lastname"></pre>
<em><input type="password"></em> は<em>パスワード ボックス</em>を定義します。
<pre><input type="password" name="lastname"></pre>
<em><input type="radio"></em> は<em>ラジオ ボタン</em>を定義します。
<pre><input type="radio" name="sex" (同じラジオ ボタンの名前は一貫している必要があります) value="女性">女性</pre>
<em><input type="checkbox" name="チェックボックス間の名前は一貫している必要があります"></em><em>チェックボックス</em>を定義します。
<em><input type="submit"></em> は、 フォームを<em></em><em>送信</em>するためのボタンを定義します。
<em><input type="reset"></em> フォームを<em></em><em>リセット</em>するボタンを定義します。
<em><input type="button"></em> は、<em></em><em></em> フォームの通常のボタンを定義します。
<pre><button type="button" onclick="alert('Hello World!')">クリックしてください!</button></pre>
<em><input type="file"></em> は<em></em><em>ファイル選択ボックス</em>を定義します。
<input type="hidden">隠しフィールド<br>
<em><select></em> <em>ドロップダウン リスト</em>を定義します<em><em><option></em> 選択するオプションを定義します</option></select> </em>
<pre><select name="cars" size="各出現の長さ"><br><option value="volvo"<em></em> selected = "selected" (デフォルトで選択されています)>Volvo</オプション><br><option value="saab">サーブ</option><br><option value="fiat">フィアット</option><br><option value="audi">アウディ</option> <br></select></pre>
<em><textarea></em> 要素は、複数行の入力フィールド (<em>textarea</em>) を定義します。</textarea>
<pre><textarea name="message" rows="10"cols="30"><br>これは事前定義されたテキスト コンテンツです<br></textarea></pre>
<em><datalist></em> 要素は、事前定義されたオプションのリストを指定します。 <option value="事前定義されたコンテンツ"></datalist>
<datalist id="browsers"><br> <option value="Internet Explorer"><br> <option value="Firefox"><br> <option value="Chrome"><br> <option value=" Opera"><br> <option value="Safari"><br></datalist>
<fieldset フィールド><凡例フィールド タイトル>セマンティック形式</legend></fieldset><br>
関連フォーム<br>
<pre id="line1"><span><<span class="start-tag">ラベル</span> <span class="attribute-name">for</span>="<a class="attribute -value">男性</a>"></span><span>男性</span><span></<span class="end-tag">ラベル</span>></span><span ><br></span><span><<span class="start-tag">入力</span> <span class="attribute-name">タイプ</span>="<a class="attribute -value">ラジオ</a>" <span class="attribute-name">名前</span>="<a class="attribute-value">性別</a>" <span class="attribute- name">id</span>="<a class="attribute-value">男性</a>"<span>/</span>></span></pre>