書かれたコードを直接レビューする
マークアップ言語、ロジック処理なし。
真ん中には、実際には意味のない埋め込みテキストがあり、レイアウトなどをテストするために使用されます。
表裏をタグと呼び、
HTML 要素リファレンス - HTML: HyperText マークアップ言語 | MDN (mozilla.org)
通常、一部のタイトル バーなど、Web ページの本体にはヘッドが表示されません。
ボディは実際にユーザーにレンダリングされ、
h1 は、ページのテーマの見出しです。
Web ページの記述基準はバージョンによって異なる場合があるため、説明する場合は型指定が必要です。
フォルダーを作成し、ファイルを作成すると、vscode が開きます。
1枚でも入ります！タブ、
本文を入力して直接タブで <> これらを書くのに役立ちます。
入力が完了したら、先ほどのファイルをブラウザで開くだけです。
h1からh6まで大丈夫です。
Alt + shift + ↓ は、vscode という行をコピーできます。
注釈の標準形式。
たとえば、lorem と入力してタブを押すと、多くのテキストを完成させるのに役立ちます。
これにより、10単語が生成されます。
p は段落用です。
段落間の余白については、開発者モードのインスペクターを右クリックし、行を選択して余白が余白を制御し、そのサイズが 16px 以下であることを確認します。
a は属性属性を表し、
上記は属性を追加した後です。つまり、次のテキストにハイパーリンクを追加します。
使い方は最初のタグに書いてあります。
この文をもう 1 文書くと、新しいページでリンクを開くことができます。
Tr テーブル行、th テーブル ヘッド、td テーブル データ。
まず、ここには name="firstname" という複数のタイプがあります。これは、入力後、送信がある可能性があることを意味します。送信はバックグラウンド サーバーと対話し、送信はこの firstname Interact に保存されます。背景と。
たとえば、ここにアクションを追加できます。つまり、送信後、アクションの背後にある対応するファイル名を見つけ、このファイルを使用して送信後にいくつかの論理的な問題を処理します。
ラインブレーカー，時水平線
これはただのボタンです。
これは常に下部に表示されます。ここで CSS コンテンツを追加できます。ここで余白を 1000 に変更します。つまり、次のステートメントと前のステートメントの間の間隔は 1000 であるため、ここには大きな空白があります。
[送信] をクリックすると、彼はここで form.js ファイルを見つけることができなくなります。
上のボタンはフォームの中にあり、ここにボタンを分けて書くこともできます。
ここでは、画像のソースを示す画像 src を取得します。これは、ネットワーク上またはローカル ファイル上にある可能性があります。alt は、画像が正常に表示されない場合に何を表示するかを示すテキストです。
これの前にスタイルの文が追加されていることに注意してください。これは CSS コンテンツです。これは、画像の幅が常にブラウザー ページの幅であることを意味します。
いくつかの言葉を引用すると、これは CSS を使用するとよりきれいになります。
HTML: ハイパーテキスト マークアップ言語 | MDN (mozilla.org)
================================================== ================================================== ================================================== =======================================
CSS
この後ろのセミコロン、最後のコンポーネントは省略できますが、追加するのが最善の方法です。
最初に基本的な HTML を準備します。ここで彼はそれを直接使用します。初期の骨組みの準備をしましょう. 頭の中は見たことのないものでいっぱいになるでしょう. 今は無視して, タイトルを見つけて修正を加えてから体を書きましょう.
最初の 2 つはより一般的に使用されます。
これは2番目のタイプです。
3番目のタイプ。
3 つ目は、CSS コードの保守がより面倒です。
最初は最高です。
ここでは、最初にリンクを作成する必要があります。
次に、処理するものを最初にボックスに入れます。
ここではクラスボックスを使用しています。
CSS 彼の最初のコンポーネントはセレクターだと言いました。次の 3 つの方法があります。
まず、色を変更します.誰の色を変更するかを明確にする必要があります.これはセレクタによって決定されます.
上記によると、セレクターには、タグの名前、またはタグのクラスの名前、または ID 名を直接書き込むことができます。
このように、CSS が機能すると、指定されたステートメントと同じ名前のすべてのステートメントに対して処理が実行されます。
同時に、id と class については、通常、id を現在の HTML ファイル内で一意にするクラス、通常は同じクラスがクラスです。
CSS セレクター - Web 開発を学ぶ | MDN (mozilla.org)
上記のウェブサイトには多くのセレクターがあります。
ここでは、彼に両端を持たせたくありません。
次に、外側にクラスを配置します。これは、クラスを中央に配置するためです。背景色も中央に配置して、両端が白になるようにします。
class div に入るときは、.class と tab を直接入力できます。
1文を短縮し、2回を中心に展開。
一般的に使用される組み込みの色文字列と色変換関連のものがあります。
フォントについて。
まず、セリフとサンセリフはフチの有無のことで、主にLの文字か、角の部分か両端かで決まりますが、セリフがないとL全体の太さが同じで、しかし、セリフのあるものは少し異なります。
また、最初のものは最後の3つとは異なります.最後のエッジ関連の指定に加えて、さらに2つあります.前面はフォントです.2つは優先順位があることを意味します.最初が見つからない場合1 つ目は、2 つ目を使用します。
彼には2つの単語があるため、引用符が付いているものと付いていないものがあるため、あいまいにならないように、全体を示すために引用符で囲みます。
後者の 2 つのモノスペースは等幅フォントを表し、各文字は同じ幅を占めます。
より多くのフォント。
ここで、ページ全体、つまり本文の色を変更すると、内部の背景色が指定した色に変更されます。次に、内部のすべてのテキストの色を表す色を変更することもできます。
なお、ここで優先度の問題があり、body に指定された優先度は比較的低く、つまり body を指定した後に特定のフォントを追加指定すると、追加で指定された色が使用されます。（本体は下のどこに書いても構いませんのでご注意ください！）
フォントを変更します。
フォント サイズを変更します。
フォントの太さは太字です。
一緒に短くすることができ、下の行は上の 3 つの行に等しくなります。
上と下が違う場合は、下が上を覆います。
このように h1 を box1 内に指定することもできます。
下線、大文字、文字間隔、単語間隔を変更します。
行間隔を変更します。
ここで、テキストの 2 つの段落が隣接している場合、それらの中間部分の幅を決定する方法として、2 つのテキストの段落の余白の大きい方を 2 つの境界線の間の距離とします。
それ以外の：
右の最初のものの順序: 右上、左下の順序、
2 つ目、上 = 下 5、左 = 右 10。上下左右が同じなら1つだけ書いてください。
3枚目は左上＝右下
背景色から、コンテンツ部分のみが追加されていることがわかります。
幅だけ変える
同族の。
上のボタンをクリックすると、Web ページをクリックして、対応する div などを選択できます。
したがって、以下のツールでこれらのボックスの幅を観察できます。
丸い角。
ここでドットを取り除きたい。
提供する必要がある画像は処理する必要があり、画像のサイズは小さく、ここに配置する必要があります。
中央などに表示できます。
自己完結型のものもあります。
ここでの最初のボタンは、いくつかの一般的なプロパティを変更することです。
次に、マウスが置かれたときの状態を示すホバーが 2 番目のホバーに追加されます。
ここでアクティブはクリックしたときの状態です。
もう 1 つボタンを追加すると、ボタンのタグ用に記述されているため、2 つのスタイルは同じになります。
これらを一覧表示するには、ハイパーリンクを追加します。
ハイパーリンクのデフォルト スタイルが青い下線であることがわかります。
ここでは、下線を変更およびキャンセルしたり、色を追加したりできます。また、マウスを上に置いたときの色と、ハイパーリンクをクリックした後の色も表示されます。
ここがすべて赤い理由は、上記を見ると、ハイパーリンクがすべて # にリンクされているためです。これは元の Web サイトに # を加えたものです。変更はありません。アクセスした後、すべてがこれを指しているため、すべて赤。
1 つを変更すると、もう赤くなりません。
次に、これら3つの配置を変更したい場合。左右、大小並べて。
ここで左に 1 つ追加しても意味がありません。これらは div であるため、デフォルトでは幅全体を占めます。最初のものは全幅を占め、次のものは左端から始まります。それが始まりです。
それらが占める幅を変更するだけです。
ここにフレームが追加されたため、右側が収まらないため、別のフレームを下に移動しました。彼の幅は境界線を計算していないため、境界線部分が 33.3% 外側になっています。
境界は 33.3% の内側にあると見なすことができます。
タブをクリックして完了、idは上記のmain-blovkのタグです。
さらに 2 つの段落を追加します。
各フロートを使い切った後、クリアを行い、上記のクラスを作成してから、次のようにします。
クリア:両方
ここでは、最初に .list2 li がすべてのリスト項目を対象とし、次に nth-child (パラメーター) がすべてのリスト項目に対して、それらの 1 つまたは一部、具体的には誰を選択するかを選択し、パラメーターを入力します。
次に、ここでの入力は偶数、つまりすべての偶数です。奇数の場合は奇数と書きます。
デフォルトは静的です。
絶対的な場合、上、左、これらはウィンドウ ページに対する相対的なオフセットを表します (Web ページ全体の左上隅が原点として上にスライドします)。つまり、この場合、彼は完全に浮いてしまいます。
相対的な場合、彼はもともとオフセットの前に位置を持っていたので、オフセットは元の位置に対して実行されます。
ここで、彼が移動した後、彼が最初に占めていた領域はまだ存在しています. 上の絶対的な状況では、彼は完全に浮いているので、元の領域を維持する必要はありません.
ここのボックスは相対的ですが、オフセットはしていません。
その中の h1 と h2 は絶対です. このとき、オフセットが実行され、絶対オフセットの原点としてボックスの左上隅が使用されます。
理由は、ボックスを相対に変更するためです。
ボックスを削除して相対に変更すると、現在の Web ページが一番上にスライドしたときの左上隅に絶対的に基づく絶対値になります。
実際には、上と左はオフセットではなく、上 30px は上方向から原点までの距離が 30 であることを意味します。
この固定は、ウィンドウに対して固定されています。
CSS コンテンツは HTML よりもはるかに優れています。
ビデオに表示されるリンクと推奨事項 (英語がわからない場合は、右上隅の [言語を変更] をクリックして言語を変更してください):
CSS セレクター
<色> - CSS: カスケード スタイル シート | MDN
色の値
HSL から RGB | RGB から HSL | カラー電卓 | 16 進カラー コンバーター
HSL、RGB、HEX相互変換
基本的なテキストとフォントのスタイリング - Web 開発を学ぶ | MDN
フォントの基本
CSS フォント スタック: HTML および CSS コードを含む Web セーフおよび Web フォント ファミリ。
Win/Mac でのさまざまなフォントの占有統計
フォント選択プラットフォーム
タイポグラフィ/タイプテクノロジー
Word Talk Word Smooth - タイポグラフィをテーマにしたポッドキャスト
3冊の本をお勧めします - 洋書、洋書2、洋書組
CSS を使用して HTML のスタイルを設定する方法を学ぶ - Web 開発を学ぶ | MDN
事例や練習問題が豊富なCSS学習サイト
================================================== ================================================== ================================================== ===========================================
最初にコンパイルしてから実行する C++ とは異なり、JS は実行中にコンパイルされます。
これはコンソールに書き込むこともできます。
クリック
空。
文字列に変換されます。
===の場合は型変換を行いません.型が異なる場合は等しくない必要があります.==は型変換を行ってから判定します.
変数は var と let で宣言できると前に言いました. 両者の違いはスコープです. var で宣言された変数にはスコープがありません. どこで宣言またはアクセスされても, それらはアクセスできます. Let は異なり、宣言のスコープを考慮し、現在のスコープで宣言されている場合にのみアクセスできます。
定数を宣言する const には、const にもスコープがあります。
ここでドットを使用してオブジェクトにアクセスできます。また、この [] も使用できます。
上記の名前は、オブジェクト内の属性名と見なされ、ある種の変数、「Simon」は変数に対応する値と見なされます。
Contact も似ています. これも属性名であり、特定の型の変数です. 唯一の違いは、その型がオブジェクト型であることです. 次に、このオブジェクトの値があります。
変数を作成する 2 つの方法に注意してください。
このように、存在しないメンバーに直接アクセスすると、新しいメンバーが作成されます。
真ん中の 3 つは直接空です。
出力に直接アクセスすると undefined が出力されますが、エラーはありません。
未定義の部分は無視されます。
pop は最後の要素を削除できます。shift は最初の要素を削除できます。push は追加できます。reverse は逆にすることができます。
最初の位置に unshift が追加されます。
ここでの戻り値は、関数を直接記述したものです。ここでの引数はパラメーターです。
これが返す関数です。
したがって、上記の受け入れに使用される x は関数です。
初心者向け: JavaScript クイック スタート_哔哩哔哩_bilibili
================================================== ================================================== ================================================== ======================================
ドム
初心者向け: DOM クイック スタート_哔哩哔哩_bilibili
DOM 構造でどのように見えるかを変更します。
このプラグインは、Web サイトの DOM 構造を見ることができます。
HTMLを書いた後
コンソールを開き、js コードを入力します。ここでドキュメントを取得できます。次に、ドキュメントの関数を使用して、ツリーの任意のノードを取得できます。
ここでは、見つけることができるすべてのボディ、つまりボディ配列を直接返すため、[0] でボディを取得できます。
これが tag.classname です。
実はセレクターの話で、これは外側から内側に向かってレイヤーバイレイヤー、つまりタグがliでクラスがリストだと言いました。
これを id で取得すると、返されるのはコレクション配列ではなく、単一の配列になります。通常、id が繰り返されないことが保証されているためです。
ここでは実際に CSS に似た方法を使用して、HTML 内の特定のステートメントを検索しています。
ALL がある場合とない場合の違いは、そうでない場合は最初の行から検索し、最初の行が見つかったときに戻り、すべてを All で検索することです。
このクエリが取得されると、より一般的ないくつかの他のインターフェイスのマージと見なすことができます。上記の最後の例では、タイプに 2 つのレイヤーがあり、より正確です。Get は以前は機能しませんでした。
それを取得したら、対応する属性を取得して、属性を変更できます。
つまり、このように再生するには、すべての CSS プロパティを変更できます。
変更する場合、命名規則が多少異なることに注意してください。
こんな遊びもできます。
次の文を追加します。
選択後、ここで変更することもできます。
HTML コードで h1 クラスを削除すると。
ここでは、コードで彼のクラスを指定できます。
追加もありますし、もちろん削除も可能です。
したがって、テキストのスタイルを変更する方法は 2 つあります。2 つ目は、それが含まれているクラスを変更することであり、CSS プロパティがクラスに従って記述されている場合は、それに応じてプロパティが自然に変更されます。
トグルはスイッチであり、クラス内でトグルされている場合、クラスから削除され、再度クラスに追加されます。
クリックすると赤くなる動作を実現したい場合は、イベントリスナーを追加する必要があります.ここの最初のパラメータは何を監視するか、ここは監視するクリックイベントで、クリックイベントが発生した後に関数が実行されます.
HTML のテキスト コンテンツを変更することもできます。
この物を直接返却することも可能です
ここで、textContent と innerHTML の違いに注意してください。
前者はテキスト コンテンツを返すだけですが、後者は <h1></h1> に含まれる実際のコンテンツを返し、ここに含まれるコンテンツには <em> が含まれており、これも一緒に返されます。
したがって、前者はテキストを変更することしかできませんが、後者は HTML ステートメントをテキストに直接割り当てることができます。
HTML の属性を取得します。
ここで取得した後に変更することができます。たとえば、それが属するクラスに変更が加えられます。
属性を追加します。
メソッドを書いた後、それを使用するときは、公開メンバーとして sitename を使用し、直接代入を直接取得します。
静的メソッドは、オブジェクトではなくクラス名を使用して呼び出されます。
============================================
HTML スクリプト defer 属性 | 新人チュートリアル (runoob.com)
webGL レンダリング、
WebGL チュートリアル (yanhuangxueyuan.com)
キャンバス canvas_WebGL コンテキスト (yanhuangxueyuan.com)
webGL はレンダリング用の API のセットですが、どのように使用しますか?
DX を学ぶと、描画操作の核となるのはコンテキストと呼ばれるものであり、すべての API 呼び出しはコンテキストから呼び出されることがわかります。
GLも同じで、HTMLやCSSの描画機能だけでは物足りなくなったら、Web GLのAPIを使えば思い通りの絵が実現できます。
では、どのように使用するのですか？要点は文脈だと言いましたのでここで文脈を取得します. 文脈を得るためには, まずキャンバスオブジェクトが必要です. キャンバスを取得した後, キャンバスの属性の一つが文脈です.
実際、コンテキストを取得した後、レンダリングは主に 3 つの部分で構成されます。カメラの準備、シーン内のオブジェクトの準備、レンダラーへの最初の 2 つの取得です。レンダリングするだけです。
テクニカル アートの成長への道 - Games202 の宿題 (Extra 2)、WebGL の基礎知識
以前に webGL ドキュメントで自分が書いた記事を読みましたが、基本的にはこれらで十分です。
基本的に大まかな理解をして、宿題をしながら探す。
.
202 宿題