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

実際には、大学 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

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

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

例：

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

説明：グローバル変数 num が存在しますが、ブロックスコープ内で let が num 変数を宣言するため、後者はこのブロックスコープにバインドされます。そのため、let 変数を宣言する前に 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
}