Web フロントエンドをしっかり学びたいですか?他に何をマスターする必要がありますか?

Web フロントエンドを始める方法、まずジュニア Web フロントエンド エンジニアとは何なのかから始める必要があります:

私の考えによれば、フロントエンド エンジニアを初級、初級、中級、初級の 4 つのレベルに分けています。上級、

入門レベル フロントエンドとは何かを理解し（多くの人はまだフロントエンドが何なのかを知りません）、基本的な html、css、javascript 構文を理解することを指します（これらの言語には多くのことがあります）オンラインで検索すると、基本的な構文はすべて（技術体系で最も重要なこと、最先端の Web 技術チュートリアル）、互換性を考慮せずにデザイナーのデザインに従ってページを作成できること、およびについて学びました。いくつかのフレームワークの使用 (ひどいものですが、それでも素晴らしいものである jQuery、zepto、ブートストラップなど)。

入門レベルの段階を通過した後、フロントエンドが何をするのかをすでに理解しており、基本的な構文を学習し、いくつかの簡単なページを独立して作成できるようになりました。その後、ジュニアフロントのレベルに到達するために学習を続ける必要があります- 若手フロントエンド エンジニアの場合、フロントエンド全体を明確に理解し、さまざまなテクノロジーを使いこなす必要があります。

ジュニア フロントエンド エンジニア: まず知っておく必要があるのは、さまざまなブラウザーの互換性をどのように扱うかです (たとえば、IE ブラウザーの createElement との違いは何なのかなど)。現在、基本的にすべての企業が要求します。 html5、css3、javascriptに堪能な人材を採用する場合、この熟練度はすぐに採用できることを意味します。

以下では、若手フロントエンド エンジニアが学ぶべき具体的な知識について説明します。その後、さまざまな CSS プリプロセッサとポストプロセッサを理解し、一般的なフロントエンド MV* フレームワーク (angularjs、backbone、reactjs、など)、これらのフレームワークの原理を理解している必要があります。さらに、nodejs の使用に習熟し、node に基づくさまざまなフロントエンド構築ツール (grunt、gulp など) を使用できること、github の使用に習熟している必要があります。 gitlab を使い、モジュール化、コンポーネント化、エンジニアリングなどに精通している必要があります。最後に、モバイル ページを開発する方法とページのパフォーマンスを最適化する方法を知る必要があります。

ジュニア Web フロントエンド エンジニアの技術体系

1.HTML 部分

まず第一に、いくつかの一般的なタグとそのさまざまな属性の使用をマスターする必要があります。これらの一般的なタグを次のようにまとめました。

html: ページのルート要素。 head: ページの head タグ。すべての head 要素のコンテナーです。 body: ページのメインタグ。ページに表示されるコンテンツが配置されます。 title: ページのタイトル。 meta: ドキュメントの先頭に位置し、キーワードや説明など、ページに関するメタ情報を提供します。リンク: ドキュメントと外部リソースの間の関係を定義します。最も一般的な使用法は、スタイル シートを導入することです。 script:script タグ。このタグに js スクリプト コードを配置することも、このタグの src 属性を使用して外部タグを導入することもできます。 style:styleタグ、このタグ内にCSSコードを記述できます。 a: ハイパーリンク。href 属性はリンク先の場所を表し、target 属性は開き方を表します。 img: 画像タグ、src 属性は画像の場所を示します。 form: form 要素、その内部入力、select、textarea、およびその他のタグは比較的重要です。 div: ドキュメント内のパーティションまたはセクションを定義します。div を使用して、ページ レイアウトやその他の操作を実行できます。さらに、ul、li、p、button、iframe、p、table などのタグ、nav、section、article、header、side、footer などのセマンティック タグも理解する必要があります。

上記のタグを理解することに加えて、いくつかの新しい HTML5 API、

audio タグと video タグについてもある程度理解する必要があります。

キャンバス: グラフやその他の画像などのグラフィックを定義します。

input タグ、電子メール、電話、URL およびその他のタイプの accept 属性。

getElementByClassName はクラス名に基づいて要素ノードを取得します。

複数のファイル選択 複数のファイル選択の属性。

htmlインポート、テンプレート

プロセスタグ、WebGLおよびその他のコンテンツ。

知っておくべき知識ポイントもいくつかあります:

1. doctype の役割。 2. Unicode、utf8、および他のエンコーディングの原則と違い。 3. ページのパフォーマンスを最適化する方法。 4. png、jpg、webp、gif などの画像形式のさまざまな利点。 5.HTMLのインライン要素とブロックレベル要素の違い。 6. モバイル Web 開発で一般的に使用される head タグ。 7. Web セマンティクス。 8. ブラウザのキャッシュの原則。

2. CSS部分

cssに関しては、ネット上でchm形式のcssリファレンスマニュアルをダウンロードして、マニュアルに書かれている内容に従って一つずつ入力するのが私の意見です。

CSSは大きく以下の知識に分かれます:

① レイアウトの配置

1.position属性の7つの値(static |relative |absolute |fixed |center |ページ | スティッキー)?

2. グリフレイアウトまたは 3 列レイアウトを実装します (左右の幅は固定され、中央は画面に適応します)。

3. フロートおよびクリアフロートメソッド、フレックスレイアウト、グリッドレイアウト。

②ボックスモデル

1. Margin、padding、borderの3つの属性です。

2. 格納式ボックス関連のコンテンツ。

3.複数列レイアウトモジュール複数列レイアウトモデル。

③ テキストフォント

1. 強制改行または改行なし、空白の削除。

2. テキストの配置、サイズ (Chrome フォントを 12 ピクセル未満に設定する方法)、インデント、変換。

3. 単位 (em、rem、px など)、色 (rgb、rgba、hls)。

④ 変形、トランジション、アニメーション

1. 変形のさまざまな値の役割と互換性。

2.トランジションアニメーションタイプ、ベジェ曲線の原理。

3.アニメーションのさまざまな設定、@keyframes ルール。

4. ブラウザの再描画とリフロー。

⑤ セレクター

1. セレクターの分類、重み、および優先度。

2. 継承できる属性と継承できない属性。

3. 疑似クラスと疑似要素とは何か、またその機能は何ですか。

上記はすべて基本的な内容に加えて、CSS 開発効率を大幅に向上させる Sass、スタイラス、その他の CSS プリプロセッサについても理解する必要があります。 CSSポストプロセッサ。

3. JavaScript 部分

ここでは js の基礎知識については触れません。js を構文のレベルと使用レベルに応じて 2 つの部分に分けます。

構文レベルによると:

1 つ目は、JavaScript のオブジェクト指向の側面です。つまり、JavaScript でのカプセル化、継承、ポリモーフィズムの実装です。

① カプセル化: js では、ES6 の const と let の機能であるクロージャ、スコープ、スコープ チェーンを通じてカプセル化を実現できます。 ② 継承: プロトタイプチェーンベースの継承、コンストラクターベースの継承、結合継承、寄生継承などに加え、ES6 クラスのキーワードであるプロトタイプと __proto__ 。 ③ ポリモーフィズム: JavaScript では、引数を使用してポリモーフィズムが実装されます。 1. 呼び出し元、呼び出し先、および引数のその他のメソッドの役割。 2. apply メソッドと call メソッドの機能は異なります。 3. Array.prototype.slice.call を使用して、配列オブジェクトを配列に変換します。 4. シフト、スプライス、プッシュ、フィルター、マップ、リデュース、forEach などの配列のさまざまなメソッド。

次に、3 つのファクトリー パターン、ビルダー パターンなどの JS デザイン パターンがあります。

最後に、これはさまざまな状況で何を意味しますか。

使用レベルに応じて:

まず最も重要なことは、ajax、ajaxの原理、ajaxのクロスドメインメソッド: jsonp、iframeを使用したlocation.hash、postMessageAPI、WebSocket、サーバープロキシなどです。

次に、tcp プロトコル、udt プロトコル、http プロトコルのプロトコル ヘッダー、ステータス コード、その他の内容があります。ブラウザ キャッシュ、クライアント ストレージ コンテンツ: localstorage、sessionstorage、indexDB、cookie など。

最後に、ファイル読み取り (fileReader)、fetch、Promise、Web Sockets などの新しい js API がいくつかあります。そこにどんな新しいものがあるのか​​を確認するには、caniuse にアクセスしてください。

上記で述べたことは、フロントエンドの HTML、CSS、JavaScript で習得する必要のあるいくつかの一般的な概念をリストしたものです。フロントエンドでは、まだ多くの知識が必要です。最後のフィールドでは、その過程で全員が自分で勉強して作業する必要があります。

学習プロセス中に問題が発生した場合、または学習リソースを入手したい場合は、学習交換グループに参加することを歓迎します

以上がWeb フロントエンドをしっかり学びたいですか?他に何をマスターする必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。