HTML5 開発学習の基礎_html/css_WEB-ITnose

フロントエンド開発エンジニアは、実際にITシステムエンジニアリングを担当し、機器やシステム、データベース、アプリケーションシステムの構築など、情報システムの設計・構築を担当します。率直に言って、あなたは初期段階では単なる Web ページ開発者ですが、後の段階では、自分の Web サイトを作成したり、さまざまなアニメーション ゲームを作成したりするだけではなくなります。あなたのお気に入りが数分でウェブページに描かれます。こんなこと知ってると女の子を捕まえられなくなるのではないか？

​​

入社後の役割分担は大体こんな感じです

1. 製品要件:

プロダクト マネージャーが要件ドキュメントを提供します

2. プロジェクト設計:

ビジュアル デザイナー --> PSD 設計図

インタラクション デザイナー --> Web サイトのインタラクションをデザインします

3. フロントエンド開発:

HTML

iOS

Android

Unity-3D

4. バックエンド開発:

バックエンドスタッフの協力

5. オンライン運用

実際に多くの企業が取り組んでいることに注意してください。 Web サイトのプランニング作業を製品に直接引き渡す、実際はそうではありません。また、Web サイトのインタラクション デザイナーと同様に、多くの企業は直接省略されており、最終的なオンライン操作は通常、私たちとは何の関係もありません。

それでは、次に何を学べばよいでしょうか?

最初に行うことは、さまざまなブラウザの使用、さまざまなブラウザ プラグインの使用、およびクリアなど、さまざまな開発ツールの使用方法を学ぶことです。さまざまなブラウザの違い、そして伝説的な「四亜邪術」における中国の PS テクニックを習得する必要もあります。また、HTML、CSS、JS、DOM、BOM、PHP、Ajax、Node.js などのさまざまな言語を習得する必要もあります。

今日はまずフロントエンド開発のコア言語について話します。

フロントエンド開発のコア言語:

HTML: ハイパーテキスト マークアップ言語の構造

CSS: カスケード スタイル シートのパフォーマンス

JS: スクリプト言語の動作

まだ理解できない場合は、例を挙げてみましょう。

HTML、CSS、JS が実際に連携していることがわかりましたか? HTML は構造を担当し、CSS はスタイルを担当し、JS は動作を担当します。たとえば、クリックしたときのカラー ブロックです。長くなりました。

ところで、この中でこの 3 つが使われていると言いましたが、HTML とは何ですか?"

HTML は実際にはハイパーテキスト マークアップ言語です。

テキストを超えて、あなたは

マークは、特定の場所に特定の内容を書くことを意味します (手紙はすべて書きました。郵便番号を記入できる封筒のボックスはマークです) );

マークアップの作り方

<> ダブルマークアップ

単一マークアップ

マークアップ言語は「特定の」英語の単語を書くことです

HTML とは何かを理解した後、心配しないで、まず HTML の基本構造を理解しましょう。

ご覧のとおり、このように書かれたコンテンツはまったく見栄えがよくありません。当然、これをより美しくするには、強力な CSS、つまり Cascading スタイル シートを使用する必要があります。 .

では、CSS をページに適用するにはどうすればよいでしょうか? もちろん、CSS を導入する方法は 3 つあります。インラインスタイルシートの書き方：

タグ内に記述する メリット：最優先

デメリット：冗長コードが多すぎて使いにくい。メンテナンス

使用シナリオ: 個別の特殊効果の設定、通常の使用には推奨されません

「内部スタイルシート」と「外部スタイルシート」の両方を「

次に、CSS セレクターについて説明する必要があります。何かを変更したい場合は、まず変更する必要があることを通知する必要があります。

CSS セレクターには 3 つの選択方法があります:

1. タグ名セレクター

3. ID セレクター

これで、CSS セレクターの使用方法が理解できたはずです。

次に、いくつかの基本的なスタイルを制御する方法を学びましょう。まずは背景。

背景の設定を学んだ後は、枠線の設定を学びましょう。

その後、パディング、つまりパディングを学習する必要があります。

内側と外側、そして外側の余白----余白があります。

パディング、ボーダー、マージンを学習すると、フロントエンド開発に最適な「ボックス モデル」を形成できます。とても満足していますか?

ボックス モデル

ボックスが占めるスペース領域

幅: width + border-left + border-right + padding-left + padding-right ;

高さ: 高さ + border-top + border-bottom + padding-top + padding-bottom;

テキスト スタイルを制御するさまざまなメソッド。 ”