PHP基礎学習ノート(1)

フォームとは何ですか? - 形式は形式ではありません。

ユーザーが特定のデータ、情報、またはオプションを提供できる一部の HTML 要素。通常、フォームには「送信」ボタンがあり、このボタンにより、このデータ/情報/オプションがサーバー上のプログラムに提供されて使用されます (データ処理)。

—フォームの中核はデータです。

フォームタグの構成と形式:

最初のフォーム項目

2番目のフォームアイテム

。 。 。 。 。 。 。

フォーム項目とは何ですか?

単一行のテキスト ボックス:

その他の属性:

値: 初期テキストを設定します

size: 入力ボックスの幅を設定します (単位は「文字幅」) - この数の文字を入力ボックスに配置できます

maxlength: この入力ボックスに入力できる最大文字数を設定します

readonly: これは「valueless」属性であり、「読み取り専用」を意味します。書き込み方法は次のとおりです: readonly="readonly"

disable: 入力ボックスを「無効」に設定します。つまり、データは無効です。

パスワードボックス:

その他の属性:

値: 初期テキストを設定します

size: 入力ボックスの幅を設定します (単位は「文字幅」) - この数の文字を入力ボックスに配置できます

maxlength: この入力ボックスに入力できる最大文字数を設定します

単一オプション:

その他の属性:

可能性があります。それは「価値のない属性」でもあります

名前の特別な指示：単一のオプションのグループでは、名前の値が同じでなければならないことが必要です。

複数のオプション:

通 説明: 通常、複数のオプションには値

が必要です。

その他の属性:

可能性があります。それは「価値のない属性」でもあります

送信ボタン:

説明: 送信ボタンをクリックすると、フォームが「送信」されます。つまり、フォームのフォームで設定されたファイルにデータが送信されます。

画像ボタン:

️の機能画像ボタンは実際には「送信」ですが、表示される効果は画像です。これはページを美しくするのに役立ちます。

リセット ボタン:

单 説明: フォームのすべてのユーザーが初期状態に入力または選択するデータ

通常のボタン:

説明: フォームには影響しませんが、他の要件 (JS プログラム) を達成するためにフォームから「アクション」を生成できます

& ファイルドメイン: & lt; 入力タイプ = "ファイル" 名前 = "n9" /& gt; 説明: ユーザーがローカル ファイルを選択 (およびサーバーに送信) できるようにします。ファイルもデータです。

隠しフィールド:

送信済みプログラミングに必要な「隠しデータ」としてサーバーに送信します。

E 選択を引き出す: Select タグと Option タグを連携させます。ただし、これを「フォーム項目」として扱います

～ ～ ～ ～

️ with

selected 属性をオプション タグで使用して、select 要素のデフォルトの選択項目 (デフォルトでは最初の項目が選択されます) を示すことができます。

️複数の属性を使用できます。 select タグで使用すると、select 要素が「複数選択」できるようになります (つまり、デフォルトでは 1 つだけ選択できます)

複数行オプション (リスト オプションとも呼ばれます): 複数行オプションは、実際にはドロップダウン選択の「変形」にすぎません。サイズ値をそれ以上に設定すると、複数行になります。

～ ～

_

️

複数行のテキスト ボックス:

with ROWSで設定する行数は数値であり、複数行のテキストボックスで表示できるテキストの数を示します

COLSで設定する列数は数値であり、複数行のテキストボックスで表示できるテキストの数を示します

このタグには value 属性がありません。ただし、実際の「値」は、このタグの中央に配置されるものです。

サーバーによって取得されます。

フレームタグ

最初のコンセプト: 開いている「ウィンドウ」には常に 1 つの Web ページのみが表示されます。

しかし:

実際、本質は依然として 1 つのウィンドウに Web ページを表示することですが、特定のタグ (フレームセット) を使用して「大きなウィンドウ」をいくつかの「」に分割します。小さな窓「」。

まず最初に明確にしておきます:

1. フレームタグ(frameset)を使用する場合、bodyタグは使用できません。つまり、bodyタグの代わりにframesetタグを使用します

2. フレームセットタグを使用するには、フレームセットドキュメントタイプを使用する必要があります

具体的なセグメンテーション コードは次のとおりです:

F & lt; Frameset Cols = "現在のウィンドウを列で分割して設定します" rows = "行に従って現在のウィンドウを設定します" & gt; ～ ～

。 。 。 。 。 。 。 。 。 。 。 。

COL の値は、連続的に表す列の幅の数またはパーセンテージであり、互いに区切られています (,)。ここで、「*」は「残り」の幅を示します。例:

” Cols = 100,800 ": 大きなウィンドウが列に従って 2 つの小さなウィンドウに分割されていることを示します。1 つ目は幅 100、2 つ目は幅 800 to’s's s s s s s s s n d - 1 ft 〜3 dを使用し、残りは3番目から3番目のものを使用しています。

cols=”15%, *”

ROWS の値は、互いに分離された連続指数線 (,) の幅の数値またはパーセンテージです。「*」は「残り」の幅を示します。例:

rows=”100,200,*”

row=”20%, *”

CSSの紹介

CSS: カスケード スタイル シート

CSS を使用すると、次の 2 つの側面から Web ページの外観を制御できます:

1. Web ページの外観をバッチで制御し、労力を節約できます。

2. Web ページの外観をピクセルレベルまで正確に制御します。

CSSの基本構文形式:

セレクター { css 属性名 1: 値 1; css 属性名 2: 値 2;

例:

フォント{色:赤; フォントサイズ:18px;}

dt{

font-size:14px;

️フォントの太さ: 太字。

🌜

}

2 つの属性を区別する方法

html 属性: タグ内に次の形式で記述されます: 属性名 = "属性値" - この引用符は省略できますが、壁の亀裂の場合は省略しないことをお勧めします

—「ラベル属性」とも呼ばれます

—HTML 属性は通常「各タグの独自の属性であり、通常は異なります」

——同じ HTML 属性を使用するタグはほとんどありません

css 属性: セレクターの中括弧内に次の形式で記述されます: 属性名: 属性値 - 特に注意してください。値は引用符で囲むことができません

—「スタイル属性」とも呼ばれます

—CSS プロパティは通常「すべてのタグで利用可能」であり、一般的には同じです

——同じ CSS 属性を使用しないタグはほとんどありません

セレクターの分類

タグセレクター:

形式: タグ名 { …….. }

（意味: (対応する) Web ページ内のすべてのラベルの属性設定を指します。

クラスセレクター:

形式: .クラス名 { …… }

（意味: (対応する) Web ページのクラスの値は、このタイプの名前のすべてのラベルに属性設定が適用されます。

例:

～

IDセレクター:

形式: #idname{…… （：該当する）WebページのIDの値が、その名前を表すラベルが属性設定に設定されることを意味します。

注: ID 自体は「のみ」を意味するため、通常、Web ページ内の ID 名は同じであってはなりません。

例:

～

ユニバーサルセレクター:

形式: *{ ….. } ——ユニバーサルセレクターはこの形式(記号)のみを持ちます

意味: 自動的に「すべてのタグ」を参照します。つまり、すべてのタグがこの属性設定を適用します

器 注: 一般的な選択デバイスは注意して使用されます。通常は、テキストの色、テキスト サイズ、パディング、マージンなどのいくつかの基本的な属性を設定するためにのみ使用されます

疑似クラスセレクター:

形式: :疑似クラス名 {……}

注: 実際には、システム内で規定されている疑似クラス名はいくつかしかありません。リンク、訪問済み、ホバー、アクティブなどです。それらの意味も固有です。通常、上記の疑似クラスはタグにのみ使用され、その形式と意味は通常次のとおりです:

{A: Link {...}: Webページが初期のときのリンクラベルの状態(初期リンク状態)を意味します

         a:visited{…..}       ：表示一个a链接标签在点击（访问）过之后的时候的状态（访问后状态）

         a:hover{….}          ：表示一个a链接标签在鼠标放上去的时候的状态（悬停状态）

         a:active{….}         ：表示一个a链接标签在鼠标摁住但还没有抬起的状态（活动状态）。

不过，最新的浏览器中，出于安全考虑，a的hover和visited效果有些属性不能用了。

复合选择器之：层级选择器

         形式： 选择器1  选择器2 { ……… }

         含义： 在选择器1所对应的标签中由选择器2所对应的那些标签。。。。。其中，选择器1和选择器2可以是前面所学的任意某种选择器，而且这种层级关系还可以多层次，比如：

#d1  div{…}

.cc1  p  span{…..}

p  .cc2  img{…..}

#d1  p  a:hover{….}

         举例：

                  

div p{ color: red;}

                  

                  

                           

段落1

                  

複合セレクター: グループセレクター

フォーム: セレクター 1、セレクター 2 {………… }

意味: これは、両方のセレクターが同じ属性設定を使用することを意味します。実際には、これは単純化されたコードを記述する方法にすぎません。そうでない場合は、2 つのセレクターを使用して記述する必要があります。

.a {color:red; font-size:15px;}

.b{ color:red; font-size:15px;}

è

.a, .b{ color:red;}

その他の複合形式 (例):

div.cc1{…} : クラス値 cc1 を持つ div タグを表します。これは div .cc1{…} とはまったく異なります。

p

フレーム:

フレームタグは、「現在のウィンドウ」を小さなウィンドウに分割するために使用される技術です。 framseset は body タグを置き換えて、フレーム ドキュメント タイプを使用します。

F & lt; Frame SRC = "最初の小さなウィンドウの URL の Web アドレス" border = "0" スクロール = "いいえ" /& gt; F & lt; フレーム src = "2 番目の小さなウィンドウの URL" /& gt;

。 。 。 。 。 。 。

CSSの基本概念:

このような CSS は、Web ページのラベル (要素) 内の特定の (一部の) 文字の特性を (一部の) 値に設定するために使用されます。

CSS の基本的な構文パターンは次のとおりです:

CSS属性1：値1;値2;…………} ━ いわゆるセレクターは、実際には、Web ページ上の (一部の) ラベルに対応できる構文形式です。

CSSセレクター分類:

タグセレクター:

いわゆる英語の単語は実際には存在するはずのタグ名です

クラスセレクター(クラスセレクター)

クラス名 {…}

～ ～ ～

ID セレクター:

～

特記事項: title、class、id はいわゆる「ユニバーサル属性」です。つまり、誰でも使用できます。

ユニバーサルセレクター:

*{….}

疑似クラスセレクター:

a:link{…}

a:訪問済み{…}

a:hover{. 。 。 }

a:アクティブ{….}

aタグで使用します。

さらに、実際のアプリケーションでは、次のように単純化されることがよくあります:

a:ホバー{….}

「连」の意味: 接続ラベルは「マウスが置かれた状態」と「その他の状態」にのみ分けられます

レベルセレクター:

２ セレクター１ セレクター２ １． 。 。 。 。 ｝

グループセレクター:

セレクター 1、セレクター 2｛。 。 。 。 。 ｝

テキスト段落のスタイル属性

color: ラベル内のテキストの色を設定します。色の値には英語の単語、16 進数構文、RGB 構文を使用できます。 色: 赤;

font-size: テキスト サイズを通常はピクセル (px) 単位で設定します。一般的な商用 Web サイトのテキスト サイズは通常 12 ピクセルです。

font-weight: テキストを太字 (太字) または太字でない (標準) に設定します。

font-style: テキストを斜体 (イタリック) または非斜体 (標準) に設定します

font-family: テキストのフォント名を設定します。カンマで区切って複数のフォント名を使用できます。つまり、ユーザーのコンピュータに最初のフォントがない場合は、2 番目のフォントを使用します。 、 等々。例:

フォントファミリー: 宋代、宋代、Microsoft Yahei、arial、「Times New roman」;

line-height: テキストの行の高さを設定します。単位は通常、テキストの行が占めるスペースの高さです。行の高さはテキストの高さではありません。

letter-spacing: 中国語では実際には「単語」の間隔を設定します。

word-spacing: 単語間の間隔を設定します。通常は西欧ラテン文字にのみ有効です。

text-align: テキストの水平方向の配置を設定します。その機能は、label 属性の align 属性と同等です。ただし、注意してください: HTML 属性としての align は、実際には特定のタグでのみ使用されますが、text-align はほぼすべてのタグで使用できます。

text-indent: 段落の最初の行のインデント距離を設定します。単位は通常 px です。

text-decoration: テキストの「変更線」を設定します: 下線、上線、上線、なし

vertical-align: 表ボックス (セル) 内のテキストの垂直方向の配置を設定します: top (上配置)、middle (中央配置)、bottom (下配置)

暫定ボックスモデル

ボックスは CSS で最も重要な概念です。

ボックス

まず第一に、コンセプトを確立します。ほとんどすべてのラベルは実際にはボックスです。いわゆるボックスは「長方形の領域」にすぎません。実際、いわゆる Web ページは、箱の中の箱にすぎません。

ボックスは次のエリア (構造) で構成されます:

境界線: 線は実線、点線、またはその他の形状にすることができます。

Ar 外側の距離 (マージン): 「境界」とも呼ばれ、枠線の外側の空白領域。意味は「オブジェクト上に配置できない」

パディング: 「パディング」とも呼ばれ、境界線内の空白領域。「オブジェクトを配置できない」という意味もあります

コンテンツ領域 (対応する CSS 属性名なし): 「オブジェクト」を配置できるボックス内の領域、つまりボックスのメイン領域を指します。そこに配置されるオブジェクトは、通常のテキストまたは他のタグであり、前に学習した HTML の「コンテンツ部分」に相当します。コンテンツ領域は通常、幅と高さの属性 (幅、高さ) のみを設定できます。

ボックスのさまざまなコンポーネントを以下の図に示します。

Webデザインにおける「コンテンツとパフォーマンスの分離」の考え方

以前htmlについて学び、タグには「意味を表現する」機能があると言いました。実際、内容とパフォーマンスが混在しているとも言えます。

現在:

css テクノロジーは、Web ページ内の各タグのパフォーマンスを実際に「引き出し」、それを特別な場所 (スタイル タグなど) に配置し、残りの部分 (タグやテキスト コンテンツなど) をまとめて保存することができます。 「構造/コンテンツ」と呼ばれます。このアプローチを「コンテンツとパフォーマンスの分離の考え方」と呼びます

ボックスの 2 つの初期状態 (基本パフォーマンス):

div に似たボックス: ボックスは自動的に「1 行を占有」します (内部コンテンツに関係なく): これは「ブロック ボックス」 (ブロック要素) です。よく使用されるブロック ボックス:

p、hr、h1~h6、テーブル、フォーム、ul、li、ol、dl、dt、dd、blockquote、pre、

機能: 固定の幅と高さ、マージン、パディングを設定できます。

スパンボックスと同様: ボックス内のコンテンツは、テキストのパフォーマンス特性と同様に、同様のボックスと並んで列に表示されます。行がいっぱいでない限り、自然に次の行に移動します。 ：インラインボックス（インライン要素）です。インライン ボックスには通常、テキストや画像などの「最終的なデータ コンテンツ」が含まれます。その他のインラインボックス:

b、strong、フォント、i、u、a、img、入力、テキストエリア、選択、

特徴: 幅と高さは設定できませんが、マージンとパディングには上限と下限のパフォーマンスがありません。

。

暫定レイアウト（原則）

いわゆるレイアウトとは、実際には、Web コンテンツを特定の方法で適切な位置に配置することを指します。

レイアウトの基本手順:

1. 「現在のレイアウト」を視覚的に明確な境界を持って複数のブロックに分割します:

分割する方法は 2 つだけです。

a) 上下構造: 現時点では、いくつかのボックスを使用する限り、他の設定は必要なく、自然に上下構造になります。

b) 左右の構造: この時点で、いくつかのボックスが使用され、それに応じて浮動します。 通常のモード:

️ i.
1. 3 つのボックス: 左 2 つと右 1 つ、または右 2 つと左 1 つ、または片側。
フローティング説明:

浮遊は水の中の泡のようなもので、「オンラインで浮遊」します

： イメージの比喩：全員（すべてのタグ）は「地面に覆われ」、それぞれが一定の領域を占めますが、浮遊要素は天井まで「浮遊」し、通常の「地面の領域」を占めます。

他の要素でスペースを占有しないことに加えて、その主な特徴 (つまり、破壊効果) は、実際には、親ボックスが適切な高さを失うことです。親ボックスは、浮いている内部ボックスを覆うことができなくなります。 ！これは基本的にレイアウトでは許可されません。次に、親ボックスが子ボックスをラップするという、合理的な包含を実現するために補足的な方法を使用する必要があります。親ボックスの正しい有効高さを取得するには 3 つの方法があります:

1. 親ボックスの固定の高さを設定します。通常、高さは設計中に既知であり、変更されません。

２. 次のように、親ボックスの末尾に空のボックスを追加してフロートをクリアします:

３、親ボックスのCSS属性を設定します: overflow:hidden;

最も分かりやすい要約は、次のとおりです。レイアウトは左右に配置する必要があり、左右の配置はフローティングにする必要があり、フローティング効果を修正する必要があります。親ボックスが子ボックスを適切にラップできるようにします。

以上、PHPの基礎学習ノート(1)を内容も含めて紹介しましたが、PHPチュートリアルに興味のある友人の参考になれば幸いです。