Web フロントエンドと HTML の意味の理解

1. Webフロントエンドとは何ですか?

WEBフロントエンドはWebデザインと制作から発展しました 仕事が高度化するにつれ、アートワークとWebページの制作を完了する人が必要になり、WEBフロントエンド開発という言葉が登場しました。 WEBフロントエンド開発では、主にHTML、CSS、JavaScriptの技術を利用して、アーティストから提供されたアートワークをWebページに変換します。同時に、SEO とバックエンド データを考慮する必要があります。 WEBフロントエンドはアーティスト、バックエンド、ユーザーをつなぐ中間プラットフォームに相当します。

2. HTML セマンティクスとは何ですか?

1.) 基本的には、タイトル(H1~H6)、リスト(li)、強調(strong em)などのいくつかの主要なタグを中心に展開します。

2.) コンテンツの構造に応じて（コンテンツセマンティクス) 化)、適切なタグ (コード セマンティクス) を選択すると、開発者はより洗練されたコードの読み書きが容易になり、同時にブラウザ クローラーやマシンがコードを適切に解析できるようになります。

3. なぜセマンティクスなのか?

1.) CSS を使用せずにページ上に適切なコンテンツ構造とコード構造を表示するため: 裸で実行したときに見栄えを良くするため;

2.) ユーザーエクスペリエンス: たとえば、タイトルと alt は名詞を説明するために使用されます。画像情報とラベルタグの柔軟な使用

3.) SEO に有利: 検索エンジンとの良好なコミュニケーションを確立することで、クローラーはより効果的な情報を取得できます: クローラーはタグに依存して各キーワードのコンテキストと重みを判断します。

4.) 他のデバイス (スクリーン リーダー、ブラインド リーダー、モバイル デバイスなど) が意味のある方法で Web ページをレンダリングするのに便利です。

5.) チームの開発とメンテナンスに便利で、セマンティクスはより読みやすく、次のステップは、Web ページの重要な傾向です。W3C 標準に従うチームはすべてこの標準に従うため、差別化が減少する可能性があります。

4. HTMLコードを書くときに注意すべきことは何ですか?

1.) 非セマンティックタグ div と span はできるだけ少なく使用します。

2.) セマンティクスが明確でない場合は、div または p を使用できます。p にはデフォルトで上下のスペースがあるため、p を使用してみてください。これは特殊な端末との互換性にとって有益です。

3.) b、font、u などの純粋なスタイル タグを使用せず、代わりに CSS 設定を使用します。

4.) 強調する必要があるテキストは、strong タグまたは em タグに含めることができます (ブラウザのデフォルトのスタイル。CSS で指定できる場合は必要ありません)。strong のデフォルトのスタイルは太字です (do)。 b) は使用せず、em は斜体 (No i);

5.) 表を使用する場合は、タイトルに caption、ヘッダーに thead、本文に tbody、尾部に tfoot を使用します。テーブルヘッダーは通常のセルと区別する必要があります。テーブルヘッダーには th を使用し、セルには td を使用します。6.) フォームフィールドは fieldset タグで囲み、フォームの目的を説明するには凡例タグを使用します。7.)各入力のラベルに対応する説明文はlabelタグを使用する必要があり、inputにid属性を設定し、labelタグにfor=someldを設定することで、対応する入力に説明文が関連付けられます。