ホームページ >ウェブフロントエンド >htmlチュートリアル >DIV+CSS_html/css_WEB-ITnoseの30の高度なスキル

DIV+CSS_html/css_WEB-ITnoseの30の高度なスキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
2016-06-24 12:27:371359ブラウズ

DIV+CSS の 30 の高度なスキル Web ページの初心者の多くは、プロのコーディングの敷居に達しており、インターネット上のチュートリアルは不均一で混在しているため、初心者は簡単に混乱する可能性があります。 Webページコーディングの30の「秘技」をまとめましたので、コーディングの際に意識して柔軟に活用すれば、きっと美しいコードが書けて、すぐにプロの開発者の仲間入りができるでしょう。

1. 前のページのソース コードでは、次のようなステートメントがよく見られました。しかし、今日の基準からすると、これは非常に望ましくないことであり、100% 回避する必要があります。タグは必ず閉じてください。閉じないと検証に失敗し、予期せぬ問題が発生する可能性があります。

次のフォームを使用するのが最適です:

  • ここに新しいテキストが入ります。
  • idea .

2. 正しいドキュメント タイプ (DocType) を宣言します

作者は以前から多くの CSS フォーラムに参加しており、ユーザーが問題に遭遇した場合は、そうするようアドバイスします。最初に 2 つのこと:

1. CSS ファイルを確認し、表示されるエラーをすべて解決します

2. ドキュメント タイプを追加します

DOCTYPE は HTML タグが表示される前に定義され、このページに HTML、XHTML、

が含まれていることをブラウザーに伝えます。

ブラウザがマークアップを正しく解析できるように、2 つを混合することをお勧めします。

通常、次の 4 つのドキュメント タイプから選択できます:

-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict” .dtd”>

-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

この使用についてどのような文書タイプの宣言を使用すべきかについては、さまざまな意見があります。一般に、最も厳密な宣言を使用することが最良の選択であると考えられていますが、調査によると、ほとんどのブラウザはこの宣言を解析するために通常の方法を使用するため、多くの人が HTML4.01 標準の使用を選択します。ステートメントを選択する際の重要な点は、それが本当に自分に適しているかどうかです。そのため、プロジェクトに適したステートメントを選択するには、それを総合的に考慮する必要があります。

3. コードの作成に没頭していると、次のような小さな埋め込み CSS コードを頻繁に追加することがあります。 Oncoding コーディング キャンプ

これは便利で問題がないようですが、コードに問題が発生します。

コードを書き始めるときは、コンテンツ構造が完成してからスタイル コードの追加を開始するのが最善です。

このコーディング方法はゲリラ戦のようなもので、非常に模倣的なアプローチです。 ??Chris Coyier

より良い方法は、スタイル シート ファイルで P スタイルを定義することです。

#someElement > p { color: red; }

理論的には、すべてのスタイルをページ ヘッド タグ テーブル ファイルに導入します。 CSS スタイル シートはどこにでも導入できますが、HTML 仕様では Web ページの head タグに CSS スタイル シートを導入することを推奨しています。これにより、ページのレンダリング速度が向上します。

Yahoo の開発プロセス中に、head タグにスタイル シートを導入すると、Web ページの読み込み速度が向上することがわかりました。これにより、ページが徐々にレンダリングされるため、

です。 ?? ySlow チーム

私のお気に入りのトウモロコシの種類<link rel="stylesheet" type="text/css" media="screen" href="path/to/%20file.css"> <link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css"> <p> </p>5.ページの下部に JavaScript ファイルを導入します <p> </p> 覚えておくべき原則の 1 つは、ページをできるだけ早くユーザーの目の前に表示することです。スクリプトをロードすると、スクリプトが完全にロードされるまでページのロードが一時停止されます。そのため、ユーザーの時間をさらに無駄にすることになります。 <p> </p> JS ファイルに特定の機能 (ボタンのクリック イベントなど) のみを実装する必要がある場合は、本文の下部に自由に導入してください。これは間違いなく最良の方法です。 <p> </p>例: <p> </p> <p></p> <p>And now you know my favorite kinds of corn. </p>   <script type="“text/javascript”" src="%E2%80%9Cpath/to/file.js%E2%80%9D"></script>   <script type="“text/javascript”" src="%E2%80%9Cpath/to/anotherFile.js%E2%80%9D"></script>  
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。