top 35 html5 interview questions
回答とコード例を含む最もよくあるHTML5インタビューの質問:
HTML5はHTML言語の最新バージョンです。HTMLはHyperText Markup Languageの略で、インターネット上で表示するWebページを作成および設計できるユニバーサルワールドワイドウェブマークアップ言語です。
2012年に正式に公開されたHTML5は、既存のすべてのWebページをサポートしています。
この記事では、HTML5に関する基本的な面接の質問と高度な面接の質問を取り上げ、初心者や経験豊富なレベルの専門家向けの完璧な例を紹介します。
HTML5の機能
HTML5にはいくつかの注目すべき機能があり、その中のいくつかを参照用に以下に簡単に説明します。
HTML5の新機能は次のとおりです。
- ビデオやオーディオなどのメディア要素をサポートします。
- ローカルストレージ
- いくつかの新しい要素とカスタム属性をサポートします。
- URL、日付、範囲、時刻、色などの新しいフォーム要素。
推奨読書=> HTMLインタビューの質問トップ30
最も重要なHTML5インタビューの質問と回答
以下に参加するのは、最もよく聞かれる質問の一部です HTML5の質問 理解しやすいようにコーディング例を示します。
準備をしなさい!
Q#1)HTML5とは何ですか?
回答: HTML5は、WWW(World Wide Web)プライマリ言語を参照できるHyperTextマークアップ言語の最新バージョンです。このマークアップ言語は、テキストファイルをコードのビットで拡張し、「マークアップ」と呼ぶことができるこのコードは、ドキュメントの構造。
HTML5は、CSS、HTML、JavaScript、DOMなどのいくつかの標準機能を提供します。これにより、外部プラグインの要件が軽減されます。スクリプトの置き換え、エラー処理の改善など、より多くのマークアップがあります。HTML5はデバイスに依存しません。
HTML5には、次のようなドキュメントとのユーザー操作の方法を変更するために使用できるいくつかの新機能が導入されています。
- 柔軟性を高めるために新しい解析ルールを追加します。
- 新しい属性の追加。
- オフライン編集を許可します。
- サポート(Web SQL)、– SQLデータベースにデータを格納するための一般的な標準。
- プロトコルとMIMEハンドラーの登録をサポートします。
Q#2)HTMLとHTML5の違いは何ですか?
回答:HTMLとHTML5の違いを以下に示します。
HTML5 | HTML |
---|---|
ドラッグアンドドロップ効果を許可します。 | ドラッグアンドドロップ効果を許可しません。 |
HTML5は、高レベルのビデオとオーディオをサポートしています。 | 高レベルのビデオとオーディオのサポートは、以前のHTMLのバージョンと仕様の一部ではありません。 |
Canvas、SVG、その他の仮想ベクターグラフィックはHTML5でサポートされています。 | HTMLでは、ベクターグラフィックを実装する場合、VML、Silver-lightなどのサードパーティライブラリを使用することによってのみ可能でした。 |
SVGとMathMLはテキストで使用できます。 | これはHTMLでは不可能です。 |
Web SQLデータベース、アプリケーションキャッシュ、およびWebストレージは永続ストレージとして使用されます。 | ブラウザのキャッシュは一時的なストレージとして使用できます。 |
HTML5はよりモバイルフレンドリーです。 | HTMLはモバイルフレンドリーではありません。 |
Doctype宣言はシンプルで簡単です。 | Doctype宣言は長く複雑です。 |
Async、charset、およびpingの属性を使用できます。 | これらの属性はHTMLでは使用できません。 |
HTML5は、バックグラウンドで実行するjavascriptをサポートしています。 | Webブラウザ内で実行するJavaScriptをサポートしていません。 |
HTML5で長方形、円、三角形などの形を描くことができます。 | 長方形、円、三角形などの形を描くことはできません。 |
Q#3)とは何ですか?利用可能なさまざまなタイプは何ですか?
回答: 宣言は、表示する情報と宣言から始める必要性を理解するための指示をWebブラウザーに提供します。 HTML5では、DOCTYPE宣言は非常に短く、大文字と小文字を区別せず、すべてのHTML5ページの上部に記述されています。
次のDOCTYPEもHTML5でサポートされています。
以下に説明するように、DOCTYPEには3つのタイプがあります。
- 厳密なDoctype
- フレームセットDoctype
- 移行Doctype
Q#4)HTML5のメディア要素の新しいタグは何ですか?
回答:HTML5のMediaElementsの新しいタグを以下に示します。 :
- : サウンド、オーディオストリーム、音楽などのマルチメディアコンテンツに適用し、FlashPlayerなどの追加のプラグインを必要とせずにオーディオコンテンツを埋め込みます。
- : ビデオストリームやムービークリップなどのビデオコンテンツに適用し、ビデオコンテンツを埋め込みます。
- : オーディオ、ビデオ、画像などのメディア要素で複数のメディアリソースを申請します。
- :外部アプリケーションまたは埋め込みコンテンツ(プラグイン)を申請します。
- : ビデオやオーディオなどのメディア要素のテキストトラックに適用します。このタグは、ビデオメディアの再生中に字幕またはキャプションファイルに使用されます。
Q#5)HTML5のタグとは何ですか?
回答: タグはHTML5の特別なコンテンツであり、山かっこ()で囲まれています。スラッシュ(/)記号は、ブロックの完了後にタグを閉じるために使用されます。
例えば
This is my Browser
Html5タグは、Webページ用にフォーマットされたコマンドを開発する文字のセットです。これらのフォーマットされたコマンドは通信し、ブラウザに命令を送信します。
Q#6)とは Webページを作成するために必要なHTML5タグの最小数は?
回答: (、、、)などのWebページを作成するには、最低3つのHTML5タグが必要です。
Q#7)HTML5でのドラッグアンドドロップの重要性は何ですか?
回答: ドラッグアンドドロップは最も重要なユーザーインターフェイスの概念であり、マウスをクリックするだけでオブジェクトを簡単につかみ、目的の場所にドラッグできます。
ドラッグアンドドロップ操作で主に使用される一般的な機能には、移動、リンク、またはコピーが含まれます。
要素を使用して画像をドラッグできます。type= 、画像をドラッグ可能にし、ドラッグ可能な画像属性をtrueに設定します。
Q#8)HTML5の新しいフォーム入力タイプについて説明してください。
回答:HTML5には14の新しいフォーム入力タイプがあります。
- 日付: これは日付ピッカーです。type=を使用して日付を選択できます。 '日付'。
- 週間: これは週ピッカーです。type=を使用して週を選択できます。 '週間'。
- 月: これは月ピッカーです。type=を使用して月を選択できます。 '月'。
- 時間: これは時間ピッカーです。type=を使用して時間を選択できます。 '時間'。
- 日付時刻: これは日付と時刻の組み合わせです。type=を使用して日付と時刻の組み合わせを選択できます。 '日付時刻'。
- 日時-ローカル: 現地の日付と時刻の組み合わせ。type=を使用して現地の日付と時刻の組み合わせを選択できます。 「dateTime-local」。
- Eメール: 1つ以上のメールアドレスを許可します。type=を使用して複数のメールアドレスを入力できます 'Eメール'。
- 電話: 世界中のさまざまな電話番号を許可します。電話番号はクライアント側で検証されます。 type =を使用して電話番号を入力できます '電話'。
- 探す: 入力テキストでクエリを検索できます。 type =を使用して複数のクエリを入力できます '探す'。
- 数: 最小、最大などの追加属性を持つ数値を挿入できます。など、type =を使用して複数の数値を入力できます '数'。
- URL: Webアドレスに使用されるURL入力タイプ。単一のURLで、type =を使用して複数の属性を使用できます 「url」。
- 色: 複数の色を選択できます。type=を使用して複数の色を選択できます。 '色'。
- 範囲: 特定の範囲内に数値を挿入できます。範囲は数値に似ていますが、非常に具体的です。 type =を使用して、範囲内の数値を入力できます。 '範囲'。
- プレースホルダー: 値を入力する前に、入力フィールドに短いヒント(通常は明るい色)を表示できます。 type =を使用して、入力フィールドに短いヒントを書き込むことができます。 「プレースホルダー」。
Q#9)html5のイメージマップとは何ですか?
回答: イメージマップはURLと画像の組み合わせであり、これらの画像(画像のクリック可能な領域)をクリックすると、さまざまな新しいWebページが開きます。
HTML5では、クライアント側とサーバー側の2種類のイメージマップを使用できます。
クライアント側のイメージマップ は2つの要素を使用して作成されます。ここで、マップはマップ情報を保持し、area要素は属性を使用してマップの各セクションを定義します。 サーバー側のイメージマップ usingattributeによって作成されたusemap属性は、マップの名前です。
Q#10)Webブラウザページに著作権記号をどのように記述しますか?
回答: 著作権記号を書くには、HTML5ファイルに©または©と入力する必要があります。
Q#11)ウェブサイトのアセットを最適化する方法は?
回答: ウェブサイトのアセットを最適化するには、いくつかの基本的な最適化ルールを理解する必要があります。最初に、ダウンロードサイズを減らし、httpリクエストを少なくする必要があります。
ウェブサイトのアセットを最適化するために、以下のテクニックに従うことができます。
- ファイル圧縮
- ファイルの連結
- CDNホスティング
- 資産のオフロード
- 再編成
- コードの改良
Q#12)HTML5でのMathML要素の使用は何ですか?
回答: MathML(Mathematical Markup Language)という単語はマークアップ言語であり、Web上で科学的および数学的表現を示すために使用されます。 MathMLは、数学表記を記述するためのXML(拡張マークアップ言語)の形式です。
使用できます ..。 MathML要素を実装するためのHTML5ドキュメント内のタグ。
例: HTML5コードを使用してa²+ 2b + 5 = 0を出力します。
MathMl Example
注意: XML推奨の名前空間に準拠するアプリケーションでMathMLを使用する場合は、次の名前空間を使用する必要があります。
http://www.w3.org/1998/Math/MathML
Q#13)HTML5のさまざまなフォーマットタグは何ですか?
回答:HTML5には、以下に示すように、いくつかの新旧のフォーマットタグがあります。
- マークされたテキスト: 参照用に強調表示されたテキストを表します。使用できます
>テキストハイライトのタグ。 - 削除されたテキスト: 削除されたテキストのブロックを指定します。タグを使用して、削除されたテキストを実装できます。
- 強調されたテキスト: 強調されたテキストを定義します。使用できます 強調されたテキストを実装するためのタグ。
- 挿入されたテキスト: テキストのブロックをドキュメントに挿入します。タグを使用して、挿入されたテキストを実装できます。
- 小さなテキスト: 挿入したテキストを小さいサイズで表示します。タグを使用して小さなテキストを実装できます。
- 上付きテキスト: これは上付きのテキストです。使用できます 上付きテキストを実装するためのタグ。
- 下付きテキスト: これは下付きのテキストです。使用できます 上付きテキストを実装するためのタグ。
Q#14)なぜHTML5を使用するのですか?
回答: HTML5は、アニメーション、描画、オーディオ、ビデオなどをサポートしており、Webページにビデオを簡単に埋め込むことができます。ビデオを見るためにFlashのような追加のソフトウェアは必要ありません。
HTML5を使用する重要な理由のいくつかを以下に示します。
- レガシーおよびクロスブラウザのサポート
- より良い相互作用
- よりスマートなストレージ
- よりクリーンなコード
Q#15)ハイパーリンクとは何ですか?テキストにのみ適用されますか?
回答: ハイパーリンクは、ユーザーがクリックされたときに1つのWebページから別のWebページに移動できるようにするリンクです。ハイパーリンクの概念は、画像だけでなくテキストにも使用されており、画像をリンクに変換することができます。 >タグ。
例Cへ 画像(クリック可能な画像)でハイパーリンクを再作成する方法を以下に示します。
Image Hyperlink Example Click the following link
Q#16)HTML5でのWebストレージの概念を説明してください。
回答: Webストレージは、Webアプリケーションのデータをユーザーのブラウザにローカルに保存する機能を提供します。最大10MBのデータを保存できます。 Webストレージは、アプリケーションのパフォーマンスを向上させるのに役立ちます。
HTML5でローカルにデータを保存するために使用されるWebストレージには2つのタイプがあります。
- ローカルストレージ: これにより、ユーザーがブラウザを閉じたり再度開いたりしたときに自動的に期限切れになったりクリアされたりしないデータが保存されます。
- セッションストレージ: これにより、1つのセッション(つまり、インターネットまたはWebサイトを閲覧しているユーザー)のデータのみが保存されます。ブラウザを閉じると、セッションデータはWebブラウザから自動的に削除されます。
Q#17)HTML5のGeolocationAPIについて説明してください。
回答: Geolocation APIは、ユーザーの地理的位置を特定するために使用されます。
プライバシー上の理由から、ユーザーは位置情報を報告する許可を求められます。使用 navigator.geolocation.get current position() ユーザーの位置と地理座標(経度と緯度の数値)を取得する方法。
たとえば、ユーザーの緯度と経度の位置を返すには、以下に示します。
Click The My Location Button to get your Location.
My Location var x = document.getElementById('location'); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = 'Geolocation is not supported by this browser.'; } } function showPosition(position) { x.innerHTML = 'Latitude: ' + position.coords.latitude + '
Longitude: ' + position.coords.longitude; }
説明された例:
- ジオロケーションがサポートされているかどうかを確認します。
- ジオロケーションがサポートされている場合は、getCurrentPosition()メソッドを実行します。ジオロケーションがサポートされていない場合は、エラーメッセージをユーザーに表示します。
- getCurrentPosition()メソッドが成功すると、パラメーターで指定された座標と関数が返されます。
- showPosition()関数は、出力–経度と緯度を取得します。
Q#18)HTML5グラフィックについて説明してください。
回答: HTML5は、CanvasとSVGの2種類のグラフィックをサポートしています。
a)キャンバス: elementは、Webページ上のグラフィックをデザインするために使用され、円、ボックスの描画、画像およびテキストの追加に使用できるいくつかの方法があります。 300 px X 150 px(幅X高さ)は、キャンバスのデフォルトのピクセルサイズです。
例キャンバス要素を使用して正方形のボックスを描画する方法を以下に示します。
#mycanvas{border:2px solid pink;}
b)SVG: スケーラブルベクターグラフィックスは、主にグラフィカルアプリケーションや、X、Y座標系、2次元、円グラフなどのスケーラブルベクタータイプの図に使用されます。これにより、高速かつ軽量になります。 SVGはXML形式に従います。
例SVG要素を使用して長方形を描画する方法を以下に示します。
Q#19)HTML5を使用する利点は何ですか?
回答: HTML5は、HTMLの高度なバージョンです。 HTML5を使用すると、Webページにビデオ、オーディオ、およびグラフィックを埋め込むことにより、より簡単でインタラクティブなWebサイトを作成できます。
HTML5は、サードパーティのプラグインを使用せずに、マルチメディアテクノロジーとWebへのグラフィックコンテンツをサポートします。
HTML5によって追加された最も重要な機能のいくつかは次のとおりです。
- ジオロケーション
- オフラインアプリケーションキャッシュ
- クライアント側データベース
- エラー処理
- 新しい構造と新しいマルチメディア要素。
- ブラウザのサポートと互換性。
次のようないくつかの新しいアプリケーションプログラミングインターフェイス(API)をサポートします。
- ブラウザの履歴管理
- ドラッグアンドドロップ
- Webページ上の2D描画
- タイムメディア再生
サポートされているアプリケーションは次のとおりです。
- Webワーカー– JavaScript
- ローカルファイルアクセス
- アプリケーションキャッシュ
- ローカルデータストレージ
- ローカルSQLデータベース
Q#20)HTML5でクリックしたときに別のWebブラウザページに接続するリンクを作成するにはどうすればよいですか?
回答: タグを使用してハイパーリンクを作成し、これらを使用して別のWebページに接続します。 type =を使用してハイパーリンクを作成できます テキスト 鬼ごっこ。テキストをクリックすると、WebページのリンクされたURLが開きます。
例えば 、以下のコードは、アドレスhttps://in.yahoo.comにあるYahooホームページへのリンクです。
Yahoo link
Visit Yahoo Home Page
Q#21)HTML5はいくつのWebブラウザをサポートしていますか?
最高の無料のPCクリーナーは何ですか
回答: Apple Safari、Google Chrome、Opera、Internet Explorer、Mozilla Firefoxの最新バージョンのほとんどは、HTML5でサポートされています。
Q#22)HTML5で頻繁に役立つAPIは何ですか?
回答: HTML5で最も頻繁に役立つAPIのリストは次のとおりです。
- メディアAPI
- データ転送API
- アプリケーションキャッシュAPI
- ユーザーインタラクション
- 履歴API
- 制約検証API
- コマンドAPI
- テキストトラックAPI
Q#23)HTML5で削除されたタグの数はいくつですか?
回答: HTML5で完全に削除されるタグのリストは次のとおりです。
Q#24)Webページへの埋め込みに使用されるビデオおよびオーディオ形式はどれですか?
回答:Webページへの埋め込みに使用されるビデオとオーディオの形式は次のとおりです。
- ビデオ: MPEG4、Ogg、WebM。
- オーディオ: WAV、Ogg Vorbis、MP3。
Q#25)HTML5のページ構造要素をリストアップしてください。
回答:HTML5のページ構造要素を以下に示します。
- : ヘッダーセクションを表し、Webページに関する開始情報を格納します。
- : ページのフッターセクション(最後の部分)を表します。
- : HTMLページのナビゲーション要素を表します。
- : 情報のセットです。
- : これは、ページの基本構造を定義するために記事ブロック内で使用される一連の命令です。
- : ページのサイドバーコンテンツ。
Q#26)Webページをデザインするための一般的なリストのいくつかを説明してください。
回答:Webページを設計するための一般的なリストは次のとおりです。
- ディレクトリリスト
- 定義リスト
- 注文リスト
- メニューリスト
- 順不同リスト
異なる –各リストを構成するために異なるタグが使用されます。
Q#27)HTML5での出力タグの使用は何ですか?
回答: タグは、さまざまなタイプの出力と結果を表すために使用されます。
Q#28)テキストボックスのオートコンプリート機能を提供する要素はどれですか?
回答: HTML5elementで、テキストボックスにオートコンプリート機能を提供します。
Q#29)Html5にビデオとオーディオを埋め込む方法は?
回答:
ビデオ:
例 HTML5にビデオを埋め込むには:
オーディオ:
例 HTML5にオーディオを埋め込むには:
Q#30)HTML4からHTML5に移行されたタグは何ですか?
回答: HTML4からHTML5に移行されたタグのリストを以下に示します。
典型的なHTML4 典型的なHTML5
Q#31)HTML5テクノロジーの一部は何ですか?
回答:リストは以下のとおりです。
- Webワーカー
- Webストレージ
- SVG
- CSS3
- サーバー送信イベント(SSE)
- Microdata
- Webインテント
- Webソケット
- オフラインアプリケーション
- ジオロケーション
- APIファイル
- Webメッセージング
- ドラッグアンドドロップ
- Canvas 2D
Q#32)SVG要素とCanvas要素の違いは何ですか?
回答:
SVG | キャンバス要素 |
---|---|
SVGはゲームグラフィックスには適していません。 | Canvasはゲームグラフィックスに適しています。 |
これはオブジェクトモデルベースです。 | ピクセルベースです。 |
大きなレンダリング領域を使用するのに適しています。 | 小さなレンダリング領域を使用するのに適しています。 |
SVGは、イベントハンドラーのサポートを提供します。 | Canvasは、イベントハンドラーに頼ることはできません。 |
スクリプトとCSSを介して変更できます。 | 変更はスクリプトを介してのみ許可されます。 |
SVGのスケーラビリティが向上 | Canvasのスケーラビリティは不十分です。 |
SVGはベクターベースです(形状で構成されています)。 | Canvasはラスターベースです(ピクセルで構成されています)。 |
SVGは解像度に依存しません。 | Canvasは解像度に完全に依存しています。 |
SVGはAPIアニメーションに対応しています。 | Canvasにはアニメーション用のAPIはありません。 |
SVGは、高品質であらゆる解像度の印刷に適しています。 | Canvasは、高品質および高解像度の印刷には適していません。 |
Q#33)HTML5でのタグの使用は何ですか?
回答: figureタグは、Webページ上のドキュメントに画像を追加するために使用されます。
Q#34)HTML5のMicrodataとは何ですか?
回答: Microdataは、新しい単純なセマンティック構文であり、データの名前と値のペアのネストされたグループをドキュメントに追加するために使用されます。これらは通常、ページのコンテンツに基づいています。 Microdataは、新しいグローバル属性に使用されます。
Q#35)メタタグについて説明してください。
回答: メタタグは、当社のWebページに有用な情報を提供するために使用されます。
タグには次のものが含まれます。
- 題名: Webページにタイトルを付けます。
- スタイル: いくつかのスタイルとCSSの詳細をWebページに挿入します。
- リンク: あるページから別のページへの関係と外部ソースを定義します。
いくつかの便利な略語
- XML: 拡張マークアップ言語
- W3C: World WideWebコンソーシアム
- SQL: 構造化照会言語
- JPEG: 共同写真専門家グループ
- IP: インターネットプロトコル
- HTTP: ハイパーテキスト転送プロトコル
- href: ハイパーテキストリファレンス
- FTP: ファイル転送プロトコル
- 火: アプリケーションプログラミングインターフェイス
- ここに: 統合開発環境
- よこ糸: Web埋め込みフォントツール
- 判定: ドキュメントオブジェクトモデル
- URL: ユニフォームリソースロケータ
結論
HTML5は、Webテクノロジーの基盤と見なすことができます。これは、Webページの作成に使用される主要なテクノロジーです。
Webテクノロジーでキャリアを築こうとしている多くの専門家は、HTML5を学ぶ必要があります。 HTML5は、Webテクノロジーの下部構造であるだけでなく、モバイルアプリケーションの開発にも使用されます。用語的には、HTML5はプログラミング言語ではなく、マークアップ言語です。
この記事は、HTML5インタビューの基本的な質問と回答の両方をカバーしているため、HTML5インタビューの最上位の質問と回答のリストへのガイドになります。これらは、HTMl5インタビューの準備に役立つ優れたリソースであると確信しています。
この記事がHTML5インタビューをうまくクラックするのに役立つことを願っています。