【Webプログラミング学習】230910 はじめてのフロントエンドプログラム

フロントエンド開発とは主に、Web ページやモバイルアプリケーションのユーザーインターフェイスの開発を指します。ユーザーインターフェイスを構築し、ページレイアウト、スタイルデザイン、インタラクティブ効果、データ表示などの機能を実装するための HTML、CSS、JavaScript などのテクノロジの使用について説明します。

フロントエンド開発の基本的なスキルには次のものが含まれます。

HTML (Hypertext Markup Language): Web ページの構造とコンテンツを定義するために使用されるマークアップ言語で、ページの骨格の構築を担当します。
CSS (Cascading Style Sheets): Web ページのスタイルとレイアウトを記述するために使用され、ページの外観を美しくする役割を果たします。
JavaScript (JS): ユーザー入力の検証、動的コンテンツ生成、イベント処理などを含む対話型機能を Web ページに実装するために使用されるスクリプト言語。

次のような他の関連テクノロジーやフレームワークもあります。

レスポンシブデザイン: さまざまなデバイスの画面サイズに応じて Web ページのレイアウトとスタイルを自動的に調整できるようにし、より良いユーザーエクスペリエンスを提供します。
jQuery: DOM 操作、イベント処理、アニメーション効果などのタスクを簡素化する一般的な JavaScript ライブラリ。
React、Angular、Vue.js などのフロントエンドフレームワーク: コンポーネント化のアイデアを使用して複雑なユーザーインターフェイスを構築し、開発効率と保守性を向上させます。
AJAX: Web ページ全体を更新せずにバックエンドサーバーとデータをやり取りするための非同期 JavaScript および XML。

一般に、フロントエンド開発はユーザーインターフェイスを構築する作業であり、HTML、CSS、JavaScript などのテクノロジや関連するフレームワークやツールを習得する必要があります。これらのスキルは、開発者が優れたユーザーエクスペリエンスを実現し、バックエンドでデータを操作するのに役立ちます。

上記の問題は、通常は検索エンジンとして使用される AI テキストツールに起因します。

この記事では、まず簡単なフロントエンドプログラムを作成することに主に焦点を当てます。
ステップ：

空のローカルフォルダ [...\230910\source code example] に新しいファイル [Welcome.txt] を作成します。
注: コードを記述するには、コンピュータのデフォルトのテキストエディタを使用します。後で専門的なソフトウェアをインストールすることもできます。
テキストには次の情報を書きます。

<html>
	<head>
		<title>我的网页</title>
	</head>
	<body>
		hello,我的第一个网页！！！！
	</body>
</html>

注記：

すべてのコードは英語の入力方法で記述する必要がありますが、最初の問題のほとんどは中国語と英語の記号が混在していることが原因です。
HTML: HTML マークアップ言語の 2 つのタグで、HTML ドキュメントの始まりと終わりを示します。これは、HTML ドキュメント全体のコンテンツを含む HTML ドキュメントのルート要素を定義するために使用されます。タグ内には、と 2 つのサブタグを含めることができます。
head: このタグは、ドキュメントのヘッドを定義するために使用されます。このタグには、タイトル、文字エンコーディングなど、ドキュメントに関する説明情報が含まれており、外部スタイルシート (CSS ファイル) およびスクリプトファイル (JavaScript ファイル) を参照できます。。
本文: このタグは、テキスト、画像、リンク、フォームなど、ユーザーに表示されるページコンテンツを含むドキュメントの主要なコンテンツを定義するために使用されます。

ファイルのサフィックスを .html に変更し、ブラウザで開くことを選択します:

注: ここでは、実行中のフロントエンドプログラムがどのように見えるかを確認できます。非常に単純です。表示されるのは、HTML に書かれたタイトルです。ファイル (私の Web ページ) とページの body タグに表示されるコンテンツ (こんにちは、私の最初の Web ページ!!!!)

それはそれで、また会いましょう。

【Webプログラミング学習】230910 はじめてのフロントエンドプログラム

おすすめ