PHP 中国語オンラインワークフロントエンド (HTML5/CSS3) テストの問題-見出し-php.cn

フロントエンドテスト問題(HTML5/CSS3)参考解答

● 各問5点、計20問、合計スコアは100

● 問題は自由に選択できます。間違えても減点はなく、10 点獲得できます。

どこまでできるか急いでみてください。

1. HTML5 の部分

1.1 HTML5 で一般的に使用される構造タグとは何ですか、またどのタグが前に置き換えられますか

● 、 、 、 、 、 、

##● , , ,...

1.2 HTML ドキュメントはエンコードされますUTF-8 セットの利点は何ですか

● utf-8: シンボルを表すために 3 バイトを使用し、基本的に世界中のすべての言語をカバーできます

● 従来の gb2312、gbk と比較して、より多くの文字セットが認識されており、業界からも推奨されています

1.3 タグで最もよく使用される 4 つの属性は何ですか

# id、class、title、style

# これら 4 つの属性は、ほぼすべての HTML タグに存在します。特に注意する必要があります。

1.4 違いは何ですかタグ内の title 属性と alt 属性の間

# title: ラベルの説明です マウスを移動するとすぐにこの説明情報が表示されます

● alt: 置換可能な要素で使用されます。外部リソースが正しく読み込めない場合、この情報が表示されます。プレースホルダーに表示されます。

1.5 の href 属性と src 属性の違いは何ですか?タグ ##両方とも外部リソースへの参照です

# href: ハイパーテキストまたはスタイルに使用され、 タグと タグで使用されます

● src: 、 、 、 などの外部リソースのプレースホルダー タグで使用されます...

1.6 置換要素と非置換要素? 各タイプのケースを少なくとも 2 つ挙げてください #● 置換要素のコンテンツは外部から取得されます。この要素は、 などの外部リソースのプレースホルダーにすぎません。 、 、 ...

● 非置換 要素のコンテンツは現在のドキュメントから取得され、 、 - &lt などの二重タグを使用する必要があります。 ;h6>、 ...

1.7 iframe タグの主な機能は何ですか?、利点と欠点は何ですか? ● 利点:現在のページは、ジャンプせずに他のページを直接読み込みます。

● 欠点: フレーム内のコンテンツは検索エンジンによって読み取られず、HTTP リクエストが増加しすぎるため、ページの読み込み速度に影響します。

1.8 タグの name 属性は、 などのフォーム コントロールの名前とどのように異なりますか ● の name 属性は次のとおりです。 ID と同じで、ラベルを一意に識別するために使用されます。

# フォーム コントロールの name 属性はサーバーに提供されます。 クライアント アプリケーションによって読み取られるフォーム データの変数名です。

#1.9 フォームにはボタンの種類が何種類あり、よく使用されるラベルは何ですか ##● ボタンには 3 つの種類があります: 通常ボタン、送信ボタン、リセット ボタン

# 、 、

1.10 できる順序なしリストと順序付きリストが相互に置き換えられ、どの属性が使用されるか

##● type

1.11 フォーム データ いくつかの送信方法があり、使用シナリオを分析します (オプション)

● POST: フォーム データはリクエスト本文を通じて送信されます。 ##● GET: フォーム データは URL アドレス バーを通じて送信されます

2 . CSS3 パート

2.1 外部スタイルシート、内部スタイルシート、インラインスタイル宣言の使用シナリオとは

● 外部スタイルシート: この CSS を参照するすべての HTML ドキュメントに適用されます #● 内部スタイル シート: 現在の HTML ドキュメントにのみ適用されます #● インライン スタイル シート: 現在の HTML 要素にのみ適用されます

2.1 @import ディレクティブの用途、どこで使用する必要があるか、および制限は何ですか

##● CSS ドキュメント内でのみ使用できます

● CSS ドキュメントの最初の行に配置する必要があります

2.3 ブロックレベル要素、インライン要素、インライン ブロック要素、および例とは

● ブロックレベル要素: デフォルトの垂直方向の配置 ( 、

、 ... ● インライン要素: デフォルトの水平方向の配置 ( など)、 、 ...

2.4 いくつかの単純なセレクターがあり、基本的な構文形式を記述します。

● 要素: body {... }

#● ID: #active {...} #● クラス: .red {...}

#● 属性: [title] ● グループ: h1,h2 ,h3 {...}

# ワイルドカード: div * {...}

2.5 構造 (コンテキスト) セレクターにはいくつかの種類がありますと例

#● 子孫: main div {...}

#● 子要素: セクション > スパン {...} #● 隣接する兄弟: div p { ...}

# すべて同じレベル: div ~ p {...}

2.6 :nth-child(n) および :nth-タイプ(n) #● :nth-child(n): 位置にのみ関連付けられます

● :nth-of-type(n): 位置とタイプの両方に関連付けられます

2.7: nth-child(n) および :nth-of-type(n) のパラメータ n の使用規則

#● :nth-child( 3) のように、1 から始まるリテラルで使用されます。

# 0 から始まる式で使用されます。例: :nth-child(2n 1)

# 負の値が許可されます

2.8 柔軟性 内容FlexBox は CSS レイアウトの問題を解決しますか?また、どこで使用するのが最適ですか? #● 従来のレイアウトとレスポンシブ レイアウトにおける要素の垂直方向の配置の問題を解決します

● 主に使用されますクロスデバイスのページ レイアウト、モバイル端末などのレスポンシブに特に適しています

2.9 elastic 要素の flex 属性の一般的な値と、対応する値の組み合わせを 1 つずつ説明します ●Initial、auto、content、value

#● デフォルト値: flex: 0 1 auto

#● flex: flex-grow flex-shrink flex-basis

● flex: 1 1 auto などのさまざまな組み合わせ、flex: auto,...

2.10 vh/vw ユニットと同等、auto と vw ユニットの違いは何ですか100% 差 ● vh/vw: ビューポート サイズ比率、デバイスに関連します

● auto: デフォルト値、通常はデバイスに依存しません

● 100 % : 親コンテナのサイズの自己認識

2.11 (オプション) align-content が複数行のフレキシブル コンテナでのみ使用できる理由 ● 単一行の場合コンテナ、交差軸上 align-items 属性を使用して設定できます。

面接の質問の詳細については、「

2019 年の主要なフロントエンド面接の質問の概要 (コレクション) 」を参照してください。

PHP 中国語オンライン ワーク フロントエンド (HTML5/CSS3) テストの問題

PHP 中国語オンラインワークフロントエンド (HTML5/CSS3) テストの問題