前端基礎には、さまざまな知識が含まれています。

実際には、大学 1 年生の時からフロントエンドの学習をすることを考えていました。HTML と CSS については少し理解していましたが、当時は Android の方向に身を置いていたため、主に Android に集中していましたし、続けることもありませんでした。
エンジニアは、どのエンジニアであっても、学んだことは必ず限られているということです。IT の世界は広大ですから、他の場所も見ておかなければなりません。
もし私がどのようなエンジニアになりたいのかを強制的に言わなければならないなら、私はフルスタックエンジニアになりたいと思っています（能力があればですが）。

いろいろなポイント#

ここでは、理解する必要があるか、忘れやすい知識をメモしています。固定された論理的な順序はありません。

ポジショニングの問題#

最もよく使用される 2 つ：absolute と relative

absolute：元の位置から位置を解除します。最も近い親要素に対して位置を指定し、親要素がない場合はドキュメントに対して位置を指定します。
relative：元の位置を保持して位置を指定します。自身の元の位置に対して位置を指定します。

z-index：要素のレイヤーを変更し、その要素の Z 軸を表します。デフォルトは 0 です。

要素が float プロパティを使用してどの方向に浮動するかを定義する場合、後続の要素が浮動を続けないようにするには、次のようにします：

.nav::after{
    content:"";
    display:block;
    clear:both;
}

フォント#

テキストが長すぎる場合、ページを整理し美しくするために、余分なテキストは「...」で表示されます：

.product-buyer-name {
overflow: hidden; /*セルの外部を隠す。*/
text-overflow: ellipsis; /*テキストがはみ出た部分は省略記号で表示*/
white-space: nowrap;  /*セル（TD）内のテキストの内容がどれだけあっても自動的に改行されないようにする。そのため、余分な内容は水平方向にセルを広げる。*/
}

ウェブページ上のいくつかの小さなアイコン
私は常に、ウェブページ上のいくつかの小さなアイコンが img を挿入して表示されると思っていましたが、もう少し深く理解すると、例えば、タブバーの小さなアイコンはカスタムで表示されることがわかりました。
ここで、私がフォントクラスに計画した理由は、一部のテキストを表示する必要がありますが、コンピュータにそのフォントがない場合は表示できないため、同じ方法でこのフォントのリソースをロードして、他の人のコンピュータにフォントが存在しなくてもそのフォントの効果を見ることができます。

では、このようなフォントリソースやアイコンリソースはどのように取得するのでしょうか、もちろん、
Google や Baidu です
Alibaba Vector Icon Library には多くのリソースがあります。必要なリソースを選択し、カートに追加してソースコードをダウンロードします。

ダウンロードしたソースコードには、リソースファイルとデモの CSS が含まれています。使用する場合は、まずリソースファイルをコピーします。

プロジェクトの下に生成された font-face をコピーします。

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?##iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg##iconfont') format('svg');
}

使用する iconfont のスタイルを定義します。

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}

対応するアイコンを選択し、フォントコードを取得し、ページに適用します。

<i class="iconfont">&##x33;</i>

JavaScript の var、let、const の違い#

const：読み取り専用の定数を宣言します。一度宣言されると、定数の値は変更できません。
let：宣言された変数は、let 命令があるコードブロック内でのみ有効です。

変数の巻き上げ

概要：変数は宣言より前に使用できます。

var：可能
let：不可能
const：不可能

console.log(a);//正常に実行され、コンソールにはundefinedが表示されます
var a = 1;
console.log(b);//エラー、Uncaught ReferenceError: b is not defined
let b = 1;

console.log(c);//エラー、Uncaught ReferenceError: c is not defined
const c = 1;

主な目的は、実行時エラーを減らし、変数が宣言前に使用されることによる予期しない動作を防ぐことです。

Temporal Dead Zone（TDZ）

概要：コードブロック内に let または const 命令が存在する場合、このブロック内のこれらの命令で宣言された変数に対して、最初から閉じたスコープが形成されます。変数を宣言する前にこれらの変数を使用すると、エラーが発生します。

var：存在
let：存在しない
const：存在しない

例：

var num = 123;
if (true) {
	num = 'abc';//エラー
	let num;
}

説明：グローバル変数 num が存在しますが、ブロックスコープ内の let で num 変数が宣言され、後者がこのブロックスコープにバインドされるため、num に値を割り当てる前にエラーが発生します。

重複宣言

概要：同じスコープ内で同じ変数を複数回宣言することを指します。

var：可能
let：不可能
const：不可能

var による重複定義の結果：

var i = 10;
for(var i = 0;i < 5;i++){
  console.log(i);
}
console.log(i);// 5が出力されます

var 命令にはブロックスコープがないため、for ループ内の i が外側の i を置き換えます。

初期値#

var：不要
let：不要
const：必要

スコープ#

var：ブロックスコープを除く
let：ブロックスコープ
const：ブロックスコープ

ブロックスコープ：

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
    console.log(n); // 10 内側のn
  }
  console.log(n); // 5 現在のn
}