目次
無駄な努力より正しい方向のほうが良いです
第一段階: HTML 学習
第二段階:CSS学習
第 3 段階: JavaScript の学習
第 4 段階: jQUery の学習
記事の内容の一部はインターネットから得たものです。何かが間違っていると感じた場合は、無視していただいてかまいません。 -終わりの道。
ホームページ ウェブフロントエンド htmlチュートリアル Web に関する誤解を学ぶfront-end_html/css_WEB-ITnose

Web に関する誤解を学ぶfront-end_html/css_WEB-ITnose

Jun 24, 2016 am 11:31 AM

Web フロントエンド学習における誤解


Web ページ制作は、コンピュータ専攻の学生が大学在学中に触れるコースであり、ほとんどの学生が学習するために最初に使用する統合開発環境 (IDE) です。 Web ページの制作には Dreamweaver を使用する必要があります。Web ページの作成に非常に便利な WYSIWYG の「爆発的な」IDE です。

すぐに始められ、すぐに結果が得られるため、私たちは気づかぬうちに Web ページ制作に夢中になってしまいました。このとき、多くの人が誤解に陥るでしょう。つまり、このような優れた IDE の助けを借りて、マウスでメニューをクリックするだけで Web ページを迅速かつ便利に作成できるのです。

それでは、なぜ私たちは html、CSS、JavaScript、jQuery などの難しいコードを学習する必要があるのでしょうか? これは、複雑さのために単純さを放棄していることではないでしょうか?

しかし、研究が深まるにつれて、私たちは次のことに気づくでしょう。 IDE に過度に依存すると、その実装の本質が分からなくなるというジレンマに陥っています。それはわかっていますが、その理由はわかりません。

そのため、ページのパフォーマンスに問題があると、ページを最適化してより高度なアプリケーションを完成させる方法はおろか、途方に暮れてしまいます。理由は明白です。スマート IDE は私たちの怠惰を満たし、豪華な Web ページの背後にある最も重要なコンテンツであるコードを無視させます。

無駄な努力より正しい方向のほうが良いです

壁の向こう側に食べ物を見つけるために壁の一部を乗り越えようとしている2匹のアリがいます。アリは壁の根元まで来ると躊躇なく登っていきますが、途中まで登るたびに疲労と疲労で倒れてしまいます。くじけなかったものの、何度も転んで、すぐに調子を整えて、また登り始めました。

もう一匹のアリはそれを観察し、壁の周りを回ることにしました。すぐに、アリは壁の周りを歩き回って餌を食べ始めましたが、もう一方のアリは落ちてまた歩き始めました。

多くの場合、成功には勇気と忍耐に加えて、方向性が必要です。おそらく方向性が良ければ、想像よりも早く成功が訪れるでしょう。間違った道を走ってしまうと、どんなに頑張っても無駄になってしまいます。 Web フロントエンドの学習にも同じことが当てはまります。まず、正しい学習ルートを選択する必要があります。

私の学習経験、近年の学生指導の経験、および社内の実際のプロジェクトのニーズを組み合わせました

第一段階: HTML 学習

ハイパーテキスト マークアップ言語 (略して HTML) は Web の骨格ですpage は、静的 Web ページであっても動的 Web ページであっても、最終的にブラウザーに返されるのは HTML コードです。ブラウザーは HTML コードを解釈してレンダリングし、ユーザーに表示します。したがって、HTML の基本構造と共通のタグと属性を習得する必要があります。

HTML の学習は暗記と理解のプロセスです。学習プロセス中に、Dreamweaver の「分割」ビューを使用して学習を支援できます。 「デザイン」ビューで効果を確認し、「コード」ビューで本質を学び、さまざまなビューの利点を最大限に活用するこの比較学習方法は、HTMLのタグと属性をただ覚えるだけの退屈さを補ってくれるはずです。初心者の皆さんへ

HTML を学んだ後、建物を建てたい場合は、これらの「原材料」を使用する必要があります。デザインスキームがまとめられ、いくつかの美化が実行されます。

第二段階:CSS学習

CSSとは英語のCascading Style Sheetsの略で、Webページのパフォーマンスとコンテンツを真に分離できるスタイルデザイン言語です。従来の HTML のパフォーマンスと比較して、スタイルを再利用できるため、開発速度が大幅に向上し、メンテナンス コストが削減されます。

同時に、CSS のボックスモデル、相対レイアウト、絶対レイアウトなどにより、Web ページ内の各オブジェクトの位置とレイアウトをピクセルレベルで正確に制御できます。この学習段階を通じて、私たちは「建物」の建設を無事に完了することができます。

「建物」の建設が完了したら、ユーザーに引き渡して使用することができますが、ユーザーにより良い体験を提供したい場合は、「建物」をさらに「装飾」して、より見栄えを良くすることもできます「贅沢」なところもある。

第 3 段階: JavaScript の学習

JavaScript はクライアント側で広く使用されているスクリプト言語であり、これらのコンテンツを利用して、いくつかの組み込み関数、オブジェクト、および DOM 操作を実装できます。終末期の特殊効果、検証、インタラクションなどにより、ページの退屈さが軽減され、diaosi はすぐに金持ちやハンサムに反撃できるようになります。それは可能ですか?

現時点では、おそらくあなたはまだ驚きに浸っているでしょう。 JavaScript を導入しましたが、プロジェクト マネージャーが突然あなたに怒鳴りました

「このエフェクトは ×× ブラウザでは互換性がありません。もう一度試してください...」

「互換性がありませんでしたか?」拭いてください、何というチートだ! 完成させるのに何百行ものコードを書くのに一晩かかりました!」

JavaScript の互換性と複雑さは、時々頭を悩ませることもありますが、幸いなことに、JavaScript のカプセル化を手伝ってくれる「マスター」がいます。

第 4 段階: jQUery の学習

jQuery は無料のオープンソースの軽量 JavaScript ライブラリであり、さまざまなブラウザーと互換性があります (jQuery2.0 以降のバージョンは IE6/7/8 ブラウザーのサポートを放棄しています)。現在では、多くの jQuery ベースのプラグインから選択できます。これらは、豊富な動的効果を実装するときに、より便利で高速になり、開発時間を大幅に節約し、開発速度を向上させます。これは、do の中心的な目的である書き込みレス機能も完全に反映しています。もっと。これはとても気持ちいいことですよね?建物を建てる必要があるとき、それは実現できるでしょうか?

このような考え方は Web フロントエンド開発にも適しているため、さまざまなフロントエンド フレームワークが登場しています。ここで皆さんにお勧めするのは Bootstrap です。

Bootstrap は、Twitter によって開始されたフロントエンド開発用のオープンソース ツールキットであり、レスポンシブ レイアウトをサポートしています。これは開始されると非常に人気があり、GitHub で人気のオープンソース プロジェクトになりました。

プロジェクト開発プロセス中、Bootstrap が提供する CSS スタイル、コンポーネント、JavaScript プラグインなどを利用して、ページ レイアウトとスタイル設定を迅速に完了し、目的を絞った方法でスタイルを微調整できます。このフレームワークベースの開発により、開発サイクルが大幅に短縮されます。巨人の肩の上に立つのはクールです!

Web フロントエンドを学習するための提案

最後に、Web フロントエンドを学習する際のいくつかの提案と方法について話しましょう。

CSS をレイアウトするときに注意する必要がある問題は、多くの学生がページ レイアウトの全体的な分析が不足しており、マクロの観点からページ上のボックス間の入れ子関係を把握できないため、それを行うことに熱心であることです。その結果、ページ上にさまざまな要素間の関係が非常にわかりにくくなり、フローティング時にボックスの位置がずれやすくなります。レイアウトする際には、まずいくつかのボックスを使用してページ全体を分割し、徐々にボックス内にボックスを入れ子にしていくという考え方を採用することをお勧めします。

「紳士は他の人と変わらない、偽物が得意である。」 学習の過程で、より優れたウェブサイトを閲覧し、そのデザインのアイデアやレイアウト方法を分析して学ぶのが得意であり、できるようになるべきです。もっと見ることでより多くのことを学び、それを統合し、他の人の長所を自分用に活用することができます。

同時に、Firebug をツールとして使いこなせる必要があります。一方では、Firebug は学習プロセス中に自分のページをデバッグするのに役立ちますが、他方では、Firebug を使用して他の人の Web サイトのソース コードを簡単に表示および分析することもできます

。成長や基盤は人それぞれ異なりますので、実情に応じて実践してください。繰り返しますが、フロントエンドの中核は js です。 CSSは難しいものではありませんが、積み重ねが必要です。私はフロントエンドについて次のように考えています:

CSS はワインのボトルのようなもので、優れています。

HTML と CSS にはタグとセレクター属性しかありませんが、スケーラブルで堅牢、または保守しやすいページを作成するのは簡単ではありません。ここで、ページの基本的な条件付きリフレクションを作成するときに重要なのは、それを迅速に完了する方法ではなく、インターフェースを変更する必要がある場合に、最小限のコード変更で必要なタスクを迅速に完了する方法を考えることです。これは、フロントエンドの持久力、体力、知性の三重テストです。

js は剣のようなもので、研ぐ必要があります。

js は最初は単なる実験用でしたが、テクノロジーと社会の発展に伴い、その役割はますます重要になってきました。私が初めて jQuery を使い始めたとき、私はすでに js を知っているように感じましたが、実際には単なる実験でした。氷山の一角。 js について学ぶほど、それは倒錯的であり、かわいらしく、楽しく、そして制御が難しいものでもありますが、互換性を解決することが私たちが生き残るための基本的な方法です。 ajax から jsmvc までずっと見てみると、成功の潮流はますます高くなっています

人生は夢です、それをやらなければなりません。

テクノロジーは人生の一部にすぎません。以前は野心的でしたが、今はただ頭を下げてコードを書いています。変えられるものは変え、変えられないものは受け入れる。命には限りがあり、兄弟は昼も夜も戦います。人生学習に対する態度は、せっかちでもせっかちでもなく、速くも遅くもなくです。耐えて自分を信じてください。世界を変えようとするのではなく、自分自身の人生を変えようと努めてください。飛躍的な歩幅を求めるのではなく、一度に一歩ずつ求めてください。苦しみのおかげで、私たちは内面的に強くなります。挫折のおかげで、私たちは成長し続けます。バグのおかげで、私たちの思考は深まります。フロントエンドのおかげで、彼は私たちに、空を支えるには 18 種類の武道が必要であることをさらに信じさせました。

記事の内容の一部はインターネットから得たものです。何かが間違っていると感じた場合は、無視していただいてかまいません。 -終わりの道。


このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? 公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか?この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース(写真、CSS、JSなど)やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

WebページのPNG画像にストローク効果を効率的に追加する方法は? WebページのPNG画像にストローク効果を効率的に追加する方法は? Mar 04, 2025 pm 02:39 PM

この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています

< datalist>の目的は何ですか 要素? < datalist>の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

この記事では、HTML< Datalist>について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

< Progress>の目的は何ですか 要素? < Progress>の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

この記事では、HTML< Progress>について説明します。要素、その目的、スタイリング、および< meter>との違い要素。主な焦点は、< Progress>を使用することです。タスクの完了と< Meter> statiの場合

HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

この記事では、html5< time>について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

< meter>の目的は何ですか 要素? < meter>の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

この記事では、html< meter>について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化< Meter> < Progress>およびex

See all articles