フロントエンドの基本（HTML、CSS、JavaScript）の知識メモ、with：フロントエンドの基本的な面接の質問！？

前文

<ブロッククオート

HTML、CSS、JavaScriptは、フロントエンドを始めるために必ず学ぶべき基礎知識です。記事一覧 主にフロントエンドの基本（HTML、CSS、JS）の注意点、学習ロードマップ、最後にフロントエンドの基本的な面接の質問について共有します。

HTMLの知識ポイント

1. htmlの基本構造

• htmlタグは以下のように構成されています。 <> をキーワードで囲む。
• htmlのタグは通常、タグスターターとタグエンダーに分かれて対になって現れます。
• 終了タグがなく、1つのタグになっているものもあります。 / の終了を意味します。
• ページのすべての内容を、htmlタグの中に記述します。
• htmlタグは、タグ名、タグの内容、タグの属性の3つの部分に分かれています。
• htmlタグは、タグ名でタグの内容を判断できるように、意味的には、ページの役割
• 構造が明確で、検索エンジンにインデックスされやすく、スクリーンリーダーにも読みやすい。
• タグの中身は一組のタグの中にある。
• タグの内容は、他のタグになることができる。

2. タグ属性

• class属性: 要素のクラス名を定義するために使用されます。
• id属性：要素のユニークなidを指定するために使用されます。この属性の値は、html文書全体で一意です。
• style 属性： 要素のインライン・スタイルを指定するために使用され、使用されるとグローバルなスタイル設定が上書きされます。
• title 属性：要素に関する追加情報を指定するために使用します。
• accesskey属性：要素をアクティブにするためのショートカットを指定するために使用します。
• tabindex属性：タブキーの下にある要素の順序を指定するために使用します。
• dir属性：要素内のコンテンツのテキスト方向を指定するために使用されます、この属性は唯一の ltr または rtl 両方
• lang属性: 要素の内容の言語を指定するために使用します。

3. イベント属性

• window ウィンドウのイベントです。
  onload, ページの読み込みが完了した後に発生します。
  onunload：ユーザーがページから離れるときに発生する（クリックでジャンプ、ページの再読み込み、ブラウザウィンドウを閉じる、など）

• フォームのフォームイベントです。
  onblur: 要素のフォーカスが外れたときに発生します。
  onchange, 要素の値が変更されたときに起動されます。
  onfocus, 要素にフォーカスが当たったときに発生します。
  onreset, フォームのリセットボタンがクリックされたときに発生します。
  onselect, 要素内のテキストが選択されたときに発生します。
  onsubmit、フォームが送信されたときに起動される

• キーボードのキーボードイベントです。
  onkeydown, ユーザーがキーを押したときに発生する。
  onkeypress, あるキーを押した後、そのキーが押されたときに発生する。(このプロパティはすべてのキーで動作するわけではありません。動作しないキーは、alt, ctrl, shift, escです)

• mouseのマウスイベント。
  onclick, 要素上でマウスがクリックされたときに発生する。
  onblclick, 要素上でマウスのダブルクリックが発生したときに起動される
  onmousedown, 要素上でマウスボタンが押されたとき起動される
  onmousemove, マウスポインタが要素上に移動したときに発生します。
  onmouseout, 要素のポインタが要素の外に移動されたときに発生します。
  onmouseup, 要素上でマウスボタンが離されたときに発生する。

• メディア メディアイベント
  
  onabort, 終了時に発生します。
  onwaiting, メディアの再生が停止しているが継続する場合に発生します。

4. テキストタグ

• 段落タグです。 <p></p> 段落タグは、テキストの段落を記述するために使用されます
• タイトルタグです。 <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。
  <ul></ul> List は順序なしリストを定義する
  <li></li> リスト中の必須ではない各要素を表現する
• 順序付きリスト：ol,li
• 定義されたリスト。 <dl></dl> というように、定義リストは通常 <dt></dt> と <dd></dd> タグは

7. テーブルタグ

• テーブルタグ <table></table>
• テーブルの1行 <tr></tr>
• テーブルのヘッダー <th></th>
• セル <td></td>
• テーブルマージ、同じ行内で、列をマージcolspan="2"、同じ列内で、行をマージrowspan="3"。

8. フォームタグ

フォームタグ

<form>
<form></form>

フォームとは、閲覧者が入力したデータをサーバー側に送信し、サーバー側のプログラムがフォームから渡されたデータを処理できるようにするものである。

• アクションで、ビューワが入力したデータを
• メソッド、データの受け渡し方法

入力タグ <input/>

name: テキストボックスの名前。フォームを送信し、バックグラウンドでデータを受信するために使用されます。
value: テキスト入力ボックスのデフォルト値を設定します。
type：入力の種類を定義することで、入力の機能が異なる。

• text 一行テキスト入力ボックス
• パスワード入力欄（パスワードは***で表示されます。）
• radio ラジオボックス(checked属性でチェック状態を表示)
• checkbox チェックボックス（checked属性でチェック状態を表示します。）
• file ファイルのアップロード
• ボタン 通常ボタン
• リセットボタン (ボタンをクリックすると、フォームのリセットイベントが発生します)
• submit ボタン（ボタンをクリックすると、フォームの submit イベントが発生します。）
• email は電子メールの入力専用です
• url 具体的にはurlを入力する場合
• 数字 数字に特化したもの
• rangeは、範囲内の値を入力するためのスライダーとして表示されます
• dateは日付と時刻を選択します（月、週、時間、datetime、datetime-localも含む）。
• color 色を選択する

ボタンボタン、ドロップダウン選択ボックス

<select></select>
<option value="Submit value">

• オプション </option> はドロップダウン選択ボックス内の各オプションです。

テキストフィールドです。 <textarea></textarea>

ユーザーが大量のテキストを入力したい場合にテキストフィールドを使用します。 colsは複数行入力フィールドの列数、rowsは複数行入力フィールドの行数を指定します。

9. その他のセマンティックタグ

• ボックスです。 <div></div>
• ページのヘッダーです。 <header></header> html5の新しいセマンティックタグで、ウェブページのヘッダーを定義するもので、主にレイアウトやページの構造を分割するために使用されます
• 下部の情報です。 <footer></footer> html5に追加された新しいセマンティックタグで、主にレイアウトやページの構造を分割するために、ページの下部を定義します
• ナビゲーションです。 <nav></nav> html5の新しいセマンティックタグで、ナビゲーションを定義します。主にレイアウトのために、ページの構造を分割しています。
• 記事 <article></article> html5の新しいセマンティックタグで、記事を定義します。主にレイアウトのために、ページの構造を分割しています。
• サイドバーです。 <aside></aside> は、トピックの内容以外の情報を定義するセマンティックタグで、主にレイアウトやページの構造を分割するために使用されます。
• 時間タグです。 <time></time> を定義するセマンティックタグで、時間

10. ページ構成

• <!DOCTYPE html> HTMLを解釈するためにどの規格を使用するかをブラウザに伝えるドキュメントタイプを定義します。
• <html></html> HTML文書であることをブラウザに伝えることができます。
• <body></body> タグの間にあるコンテンツがページのメインコンテンツとなります
• <head></head> タグはドキュメントの head を定義するために使用され、すべての head 要素のコンテナとなります。
• <title></title> 要素でドキュメントのタイトルを定義することができます
• <link> タグは、HTMLファイル内のCSSスタイルファイルをリンクしています。
• <meta> ドキュメントのメタデータを定義する

CSSの知識ポイント

• CSSウェイトとその導入方法
• CSSで三角形を描画する
• 要素を水平・垂直方向にセンタリングするスキーム
• 要素の種類の分割
• ボックスモデルとその理解
• マージンの崩壊とマージン問題
• フロートモデルとフロートクリアの方法
• 聖杯レイアウトとダブルフライレイアウト
• フレックスレイアウト
• px,em,remの違い
• メディアクエリ
• HTML5新機能
• グリッドレイアウト
• インライン要素のスペーシングを解決するには
• 擬似クラスと擬似要素の違いについて

JavaScriptの知識ポイント

• プリミティブ値と参照値の型と違い
• データ型を決定するための一般的な方法
• クラス配列と配列の違いや変換について
• 配列の共通API
• bind、call、applyの違い
• 新規の原則
• 正しく判断する方法
• クロージャとその役割
• プロトタイプとプロトタイプチェーン
• 継承の実装方法と比較
• オブジェクトのディープコピーとシャローコピー
• アンチ・ジッターとスロットリング
• スコープとスコープチェーン、実行期間コンテキスト
• DOM操作の一般的なメソッド
• Ajaxリクエストの処理
• JSのガベージコレクション機構
• JSにおけるString, Array, Mathメソッド
• addEventListenerとonClick()の違いについて
• イベントデレゲーション
• BOMのロケーションオブジェクト
• 入力URLからページレンダリングまでのブラウザ全体の流れ
• クロスドメイン、セイムオリジンポリシー、クロスドメインでの実装と原則
• JavaScriptにおける引数
• EventLoop イベントループ
• Observer実装のPublish Subscriberパターン
• 関数巡回とその汎用ラッパー
• " <マーク "と"
• let、const、varの概念と違いについて
• シンボルの概念とその役割
• SetとMapのデータ構造
• XSSおよびCSRF攻撃
ブラウザプロセスと重要なスレッド JSエンジンがシングルスレッドである理由 GUIレンダリングスレッドとJSエンジンスレッドが相互に排他的である理由
• JSエンジンスレッドとイベントトリガースレッド、タイマートリガースレッド、非同期HTTPリクエストスレッドとの比較
• 一般的なフロントエンドのパフォーマンス最適化
• deferとasyncの違い
Object.definePropertyとProxyの違い
• シングルページ・アプリケーションの利点
• IntersectionObsever APIを使用して、ビューに現れる要素をリッスンする
• gitflow ワークフロー
• サーバーサイドレンダリングとブラウザレンダリングの比較
webpackのパッケージング原則
• CommonJSモジュールとES6モジュールの違い
• arrow関数とnon-arrow関数の違い
• 配列を平坦化するいくつかの方法
• 入力変更キーアップの違い

スペースに限りがあります。 ここをクリック "フロントエンド基礎ノート""フロントエンド基礎面接問題"の完全版PDF（問題・解説を含む）を無料プレゼント .

フロントエンドの基本的な面接の質問

<ブロッククオート

フロントエンドの基本的な面接の質問には、おそらく HTML、CSS、JavaScript、ブラウザー、パフォーマンスの最適化