序文
HTML、CSS、JavaScriptはフロントエンドを始めるために必ず学ばなければならない知識であり、最も基礎的な知識でもあります。この記事では主にフロントエンドの基礎知識 (HTML、CSS、JS) と学習ロードマップについてのメモを共有し、最後にフロントエンドの基本的な面接の質問についても説明します。
HTMLの知識ポイント
1.htmlの基本構造
- HTMLタグは、
<>で囲まれたキーワードです。 - HTML タグは通常、開始タグと終了タグに分かれたペアで表示されます。
- 一部のタグには終了タグがなく、単一のタグです。単一のタグは
/で終わる必要があります。 - ページのコンテンツはすべて html タグ内にあります。
- HTML タグは、タグ名、タグの内容、タグ属性の 3 つの部分に分かれています。
- HTML タグはセマンティックであり、タグの内容はタグ名によって判断できます。セマンティクスの役割は、Web ページが確実に
- 構造レベルがより明確になり、検索エンジンによるインデックス作成が容易になり、スクリーン リーダーが Web ページのコンテンツを読みやすくなります。
- タグのコンテンツは、タグのペア内のコンテンツです。
- タグの内容は他のタグでもかまいません。
2. ラベルの属性
- class 属性: 要素のクラス名を定義するために使用されます。
- id 属性: 要素の一意の ID を指定するために使用されます。この属性の値は HTML ドキュメント全体で一意です。
- style 属性: 要素のインライン スタイルを指定するために使用されます。この属性を使用すると、グローバル スタイル設定がオーバーライドされます。
- title 属性: 要素を指定するために使用される追加情報
- accesskey 属性: 要素をアクティブにするショートカット キーを指定するために使用されます。
- tabindex 属性: タブキーの下の要素の順序を指定するために使用されます。
- dir 属性: 要素内のコンテンツのテキスト方向を指定するために使用されます。属性は2 つだけです
ltr: またはrtl - lang 属性: 要素コンテンツの言語を指定するために使用されます。
3. イベント属性
-
window window イベント:
onload、onunload は、Web ページが読み込まれた後にトリガーされ
、ユーザーが Web ページを離れたときに発生します (クリックしてジャンプ、ページをリロード、ブラウザー ウィンドウを閉じるなど)。 -
フォーム フォーム イベント:
onblur、onchange は要素がフォーカスを失ったときにトリガーされ
、onfocus は要素の値が変更されたときにトリガーされ
、onreset は要素がフォーカスを獲得したときにトリガーされ
、onselect はフォーム内のリセット ボタンがクリックされたときにトリガーされます
。要素内のテキストは Onsubmit です。選択する
とトリガーされ、フォームが送信されるとトリガーされます。 -
キーボード キーボード イベント:
onkeydown、onkeypress は、ユーザーが key を押したときにトリガーされ
、ユーザーがキーを押した後にキーが押されたときにトリガーされます。(この属性はすべてのキーに有効になるわけではありません。有効にならないのは、alt、ctrl、shift、esc です) -
Mouse マウス イベント:
onclick、onblclick は要素上でマウスのクリックが発生するとトリガーされ
、onmousedown は要素上でマウスのダブルクリックが発生するとトリガーされ
、onmousemove は要素上でマウス ボタンが押されたときにトリガーされ
、onmouseout は要素上でマウス ボタンが押されたときにトリガーされます。マウス ポインタが element に移動すると
、onmouseup は要素ポインタが element の外に移動するとトリガーされ
、要素上でマウス ボタンが放されるとトリガーされます。 -
メディア メディア イベント
onabort、終了時に onwaiting がトリガーされ
、メディアの再生が停止したが再生を継続する場合にトリガーされます。
4. テキストラベル
- 段落タグ:
<p></p>、段落タグはテキストの段落を説明するために使用されます。 - title タグ:
<hx></hx>title タグはタイトルを記述するために使用され、合計 6 つのレベルがあります。 - 強調タグ:
<em></em>、特定の単語の重要性を強調するために使用されます - より強調するタグ:タグ
<strong></strong>と同様、テキストを強調するために使用されますが、より強く強調されます。<em> - セマンティックフリータグ:
<span></span>、タグにはセマンティックな意味がありません - 短いテキストの引用タグ:
<q></q>、短いテキストの引用 - 長いテキスト参照タグ:
<blockquote></blockquote>、長いテキスト参照を定義します - 改行タグ:
<br/>
5. マルチメディアタグ
- リンクタグ:
<a></a> - 画像タグ:
<img/> - 動画タグ:
<video></video> - オーディオタグ:
<audio></audio>
6. タグをリストする
- 順序なしリストのタグ: ul、li、 list は、リスト内の各要素を表す
<ul></ul>順序なしリストを定義します。
<li></li> - 順序付きリスト: ol、li
- 定義リスト:
<dl></dl>、定義リストは通常、<dt></dt>およびタグ<dd></dd>とともに使用されます
7. テーブルのラベル
- テーブルラベル
<table></table> - テーブルの行
<tr></tr> - テーブルヘッダー
<th></th> - 細胞
<td></td> - テーブルのマージでは、同じ行内で、colspan="2" で複数の列をマージし、同じ列内で、rowspan="3" で複数の行をマージします。
8. フォームタグ
フォームタグ<form>
<form></form>フォームはビューアによって入力されたデータをサーバーに送信できるため、サーバー側プログラムはフォームから渡されたデータを処理できます。
<form method="传送方式" action="服务器文件">
- アクション。閲覧者が入力したデータが送信されます。
- 方法、データ送信の方法
タグを入力してください<input/>
name: フォームを送信し、バックグラウンドでデータを受信するために使用されるテキスト ボックスに名前を付けます。
value: テキスト入力ボックスのデフォルト値を設定します。
type: 異なる型 type を定義することにより、入力の機能が異なります。
- テキスト 単一行テキスト入力ボックス
- パスワード パスワード入力ボックス（パスワードは***と表示されます）
- radio ラジオボタン (checked 属性は選択状態を表示するために使用されます)
- checkbox チェックボックス (checked 属性はチェックされた状態を表示するために使用されます)
- ファイルアップロードファイル
- ボタン 通常のボタン
- リセット リセット ボタン (ボタンをクリックすると、フォームのリセット イベントがトリガーされます)
- submit 送信ボタン (ボタンをクリックするとフォームの送信イベントがトリガーされます)
- email は電子メールを入力するために特別に使用されます
- url は URL を入力するために特に使用されます
- 数値は特に数値に使用されます
- rangeは一定の範囲内の値を入力するためのスライダーとして表示されます
- date は日付と時刻を選択します (月、週、時刻、日時、ローカル日時も含まれます)
- カラー選択 カラー
ボタン ボタン、ドロップダウン選択ボックス<select></select>
<option value="提交值">オプションは</option>ドロップダウン選択ボックスの各オプションです
テキストフィールド：<textarea></textarea>
テキスト フィールドは、ユーザーが大量のテキストを入力する場合に使用します。cols、複数行入力フィールドの列数、rows、複数行入力フィールドの行数。
9. その他のセマンティックタグ
- 箱：
<div></div> - Web ページのヘッダー:
<header></header>HTML5 では、Web ページのヘッダーを定義する新しいセマンティック タグが追加され、主にページのレイアウトと構造の分割に使用されます。 - 下部情報:
<footer></footer>, HTML5 では、Web ページの下部を定義する新しいセマンティック タグが追加され、主にページのレイアウトと構造の分割に使用されます。 - ナビゲーション:
<nav></nav>HTML5 では、ナビゲーションを定義するための新しいセマンティック タグが追加されています。ナビゲーションは主にレイアウトとページの構造の分割に使用されます。 - 記事:
<article></article>、html5 では、記事を定義するための新しいセマンティック タグが追加され、主にページのレイアウトと構造の分割に使用されます。 - サイドバー:
<aside></aside>主題のコンテンツ以外の情報を定義するセマンティック タグ。主にページのレイアウトと構造の分割に使用されます。 - 時間タグ:
<time></time>、セマンティック タグ、時間を定義する
10. Webページの構造
<!DOCTYPE html>ドキュメント タイプを定義し、HTML の解釈にどの標準を使用するかをブラウザに指示します。<html></html>ブラウザにそれが HTML ドキュメントであることを伝えます<body></body>タグ間のコンテンツが Web ページのメインコンテンツです<head></head>このタグは、すべての head 要素のコンテナであるドキュメントの head を定義するために使用されます。<title></title>ドキュメントのタイトルを定義する要素<link>タグは HTML ファイル内の CSS スタイル ファイルをリンクします<meta>ドキュメントのメタデータを定義する
CSSの知識ポイント
- CSSの重みと導入方法
- CSSで三角形を描く
- 要素を水平方向および垂直方向に中央揃えするためのスキーム
- 要素の種類の分類
- ボックスモデルとその理解
- マージン崩壊とマージの問題
- フローティングモデルとフローティングを解除する方法
- 聖杯レイアウトと両翼レイアウト
- フレックスレイアウト
- px、em、remの違い
- メディアからのお問い合わせ
- HTML5の新機能
- グリッドレイアウト
- インライン要素間の間隔を解決する方法
- 疑似クラスと疑似要素の違いは何ですか?
JavaScript のナレッジポイント
- プリミティブ値とリファレンス値の種類とその違い
- データ型を決定する一般的な方法
- 配列状と配列の違いと変換
- 配列の共通 API
- バインド、呼び出し、適用の違い
- 新しい原理
- これを正しく判断する方法
- 閉鎖とその影響
- プロトタイプとプロトタイプチェーン
- 実装方法と継承の比較
- オブジェクトのディープコピーとシャローコピー
- 手ぶれ補正とスロットリング
- スコープとスコープチェーン、実行コンテキスト
- 一般的な DOM 操作方法
- Ajaxリクエストプロセス
- JS ガベージ コレクション メカニズム
- JS の文字列、配列、および数学メソッド
- addEventListener と onClick() の違い
- イベントの代表団
- BOM 位置オブジェクト
- URLの入力からページのレンダリングまでのブラウザの全プロセス
- クロスドメイン、同一オリジン戦略とクロスドメインの実装方法と原則
- JavaScript の引数
- EventLoop イベントループ
- パブリッシュ/サブスクライバー パターンとオブザーバーの実装
- 関数のカリー化とその汎用カプセル化
- 「"そして"=” と Object.is() の違い
- let、const、var の概念と違い
- シンボルの概念とその機能
- データ構造の設定とマップ
- XSS および CSRF 攻撃
- ブラウザのプロセスと重要なスレッド
- JS エンジンがシングルスレッドなのはなぜですか?
- GUI レンダリング スレッドと JS エンジン スレッドが相互に排他的であるのはなぜですか?
- JSエンジンスレッドとイベントトリガースレッド、タイマートリガースレッド、非同期HTTPリクエストスレッド
- 共通のフロントエンドパフォーマンスの最適化
- 遅延と非同期の違い
- Object.defineProperty と Proxy の違い
- シングルページアプリケーションの利点
- IntersectionObserver API を使用してビューに表示される要素をリッスンする
- gitflow ワークフロー
- サーバーサイドレンダリングとブラウザレンダリング
- webpackのパッケージ化原理
- CommonJS モジュールと ES6 モジュールの違い
- アロー関数と非アロー関数の違い
- 配列をフラット化するいくつかの方法
- 入力変更キーアップの違い
スペースに限りがございますので、フロントエンドの学習資料が必要な場合は、[ここをクリック] して「フロントエンドの基礎知識ノート」と「フロントエンドの基本的な面接の質問」の完全版 PDF を無料で入手できます (質問と回答を含む)分析）。
フロントエンドの基本的な面接の質問:
「基本的なフロントエンド面接の質問」の内容には、おそらくHTML、CSS、JavaScript、ブラウザ、パフォーマンスの最適化が含まれます。
