コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > HTML 初心者のための 15 のベスト プラクティス_HTML/Xhtml_Web ページ制作

HTML 初心者のための 15 のベスト プラクティス_HTML/Xhtml_Web ページ制作

WBOY
リリース： 2016-05-16 16:36:10
オリジナル
1628 人が閲覧しました

以下は HTML 初心者向けの 30 のベスト プラクティスです。参考までに全員に共有します。具体的な内容は次のとおりです

1. ラベルを閉じたままにしておきます

以前は、次のようなコードをよく見かけました (注釈: これは何年前のことですか...):

XML/HTML コードコンテンツをクリップボードにコピー
  1. <li>ここにテキストがあります。
  2. <li>ここに新しいテキストがあります。 <
  3. li>わかりますね 外装パッケージの UL/OL ラベルが欠落しており (意図的か非意図的かはわかりません)、LI ラベルも閉じ忘れられていることに注意してください。今日の基準からすると、これは明らかに悪い習慣であり、100% 避けるべきです。とにかくタグは閉じたままにしておきます。そうしないと、HTML タグを検証するときに問題が発生する可能性があります。
より良い方法

XML/HTML コード

コンテンツをクリップボードにコピー
<
    ul
  1. > <
  2. li>ここにテキストが入ります。リ> <
  3. li>ここに新しいテキストがあります リ> <
  4. li>わかりますね。リ>
  5. ul>
    6. 2. 正しいドキュメント タイプを宣言します
著者は以前から多くの CSS フォーラムに参加しており、ユーザーが問題に遭遇したときは、まず次の 2 つのことを行うようにアドバイスします。

1. CSS ファイルにエラーがないことを確認します。 2. 正しい doctype が追加されていることを確認します

DOCTYPE は HTML タグの前に表示され、ブラウザーがページを正しく解析できるように、ページに HTML、XHTML、または両方の混合が含まれているかどうかをブラウザーに伝えます。

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

XML/HTML コード

コンテンツをクリップボードにコピー

  1. >
  4. >
  7. >
  10. >

このような文書の種類の使用に関するアドバイスに関しては、これまでとは異なる法則が適用されます。多くの人が HTML4.01 標準の使用を選択しています。 選択マニュアルの基本は、これは真の適切なソフトウェアではないため、よく検討して目的のインストールを選択する必要があるということです。

3.永远不要使用内联样式

当你在埋头書代网時、常塺手または偷懒の加上点行内css代码を通過する可能性があります、就像蠷:

XML/HTML コード复制コンテンツ到剪贴板
  1. <p スタイル="color: red;" >このテキストを赤くして、本当に目立つようにし、人々に注目してもらいます。 p>

これは、依然として問題ではないと考えられますが、一般的なコードの実践では問題です。

コードを書き込む際、コンテンツ構造が完了する前に、形式のコードを追加する必要はありません。

このようなコード形式は、ネットワークの一種です。 — Chris Coyier

より良い方法は、ペイント部分を完了した後、この P の形式を外部形式のファイル内に置くことです。

建议

XML/HTML コード
复制コンテンツ到剪贴板
    #someElement
  1. > p { 色: 赤;     
  2. }
4.すべての外部cssファイルをhead标签内に配置します

プロセス上、CSS 形式のテーブルはどこにでも組み込むことができますが、HTML の構文はネットワークのヘッドマークに組み込まれるため、ページの埋め込み速度が速くなる可能性があります。 雅虎の公開過程で、ヘッドマークに式テーブルが挿入され、これによりトップページが徐々に汚染される可能性があるため、ネットワークの読み込み速度が速くなる可能性があることがわかりました。

XML/HTML コード

复制コンテンツ到剪贴板
  1. <頭>
  2. <タイトル>私の好きなトウモロコシの種類タイトル>
  3. <リンク rel="スタイルシート" タイプ="text/css" メディア ="画面" href="path/to/file.css" />
  4. <リンク rel="スタイルシート" タイプ="text/css" メディア ="画面" href="path/to/anotherFile.css" />
  5. 頭>

5.javascript文件を底部に放出

ルールに従ってください。つまり、ユーザーの画面に表示されるのが最も早い速度で表示されます。

普及している JS ファイルが特定の機能 (ポイント ボタン イベントなど) を実行するだけの場合は、それを本体の底部に取り込むのが最適な方法です。

建议

JavaScript コード复制コンテンツ到剪贴板

  1. これで、私の好きなトウモロコシの種類がわかりましたね。 

         
  2.      
  3.      
  4.      
  5.     

6.永続的に内部JavaScriptを使用する必要はありません。1996年終了ではありません！

何年も前から、JS コードを HTML ダイアログに直接追加するという方法もありました。過剰な認証は必要ありませんが、このような方法でコードを外部 JS ファイルに移し、「addEventListener /attachEvent」を使用してイベント プロバイダを追加することはあまり必要ありません。 jquery 等のフレームは、「クリック」メソッドを使用する必要があるだけです。

JavaScript コード复制コンテンツ到剪贴板
  1. $('a#moreCornInfoLink').click(function() {
  2. alert('トウモロコシについてもっと知りたいですか?');
    3. });
7. 開発中に検証する

Web ページ制作を始めたばかりの場合は、Web Developer Toolbar をダウンロードすることを強くお勧めします (Chrome ユーザーは自分で App Store を検索してください。つまり、ユーザーはそれを使用できない可能性があります)。コーディングプロセス中にいつでも「HTML 標準検証」と「CSS 標準検証」を使用します。 CSS を学ぶのがとても簡単な言語だと思っているなら、それはあなたを殺します。コードが甘いと、ページが抜け穴だらけになり、問題が絶えなくなります。検証、検証、再検証を繰り返すのが良い方法です。

8. ファイアバグをダウンロードします

Firebug は間違いなく Web 開発に最適なプラグインです。JavaScript をデバッグできるだけでなく、ページ タグの属性と位置を直感的に理解することもできます。さっそくダウンロードしてみましょう。

9. Firebug を使用します

著者の観察によると、ほとんどのユーザーは Firebug の機能の 20% しか使用していません。これは本当に無駄です。このツールを体系的に学ぶのに数時間費やしたほうがよいでしょう。半分の使用で 2 倍の結果が得られると思います。努力。

10. タグ名は小文字にしてください

理論的には、HTML では大文字と小文字が区別されません。たとえば、次のように何でも記述できます。

XML/HTML コード
コンテンツをクリップボードにコピー
    <
  1. DIV>
  2. <P>トウモロコシについての興味深い事実があります。< /P>
  3. DIV>
しかし、このように書かない方が良いです。大きな文字を入力しても意味がありません。コードが醜くなります。
提案

XML/HTML コード
コンテンツをクリップボードにコピー
    <
  1. div>
  2. <p>トウモロコシについての興味深い事実があります。< /p>
  3. div>
11. H1 ～ H6 タグを使用します

ウェブページでは 6 つのタグをすべて使用することをお勧めしますが、ほとんどの人は最初の 4 つだけを使用しますが、最もよく使用される H には、デバイスの使いやすさ、検索エンジンの使いやすさなど、多くの利点があります。すべての P タグを H6 に置き換えるのもよいでしょう。

XML/HTML コード
コンテンツをクリップボードにコピー
    <
  1. h1>これはトウモロコシに関する非常に重要な事実です。h1>
  2. <h6>小さいながらも重要なトウモロコシの事実がここにあります。h6>

    3. 12.順序なしリスト (UL) を使用してナビゲーション メニューをラップします

    通常、Web サイトにはナビゲーション メニューがあり、次のように定義できます:

    XML/HTML コードコンテンツをクリップボードにコピー
    1. <div id="nav" >
    2. <a href="#" >ホーム a>
    3. <a href="#" >a> >
    4. <a href="#" >連絡先 a>
    5. div>
    美しいコードを書きたい場合は、この方法を使用しないことをお勧めします。

    UL レイアウト ナビゲーション メニューを使用する理由? ——ULは定義リストのために生まれたからです

    次のように定義するのが最善です:

    XML/HTML コード
    コンテンツをクリップボードにコピー
    1. <ul id="nav" >
    2. <リ><a href="#">ホーム a>リ>
    3. <リ><a href="#">について a>リ>
    4. <リ><a href="#">連絡先 a>リ>
    5. ul>

    15. IE の対処方法を学ぶ

    IE はフロントエンド開発者にとって常に悪夢でした。

    CSS スタイル シートが基本的に完成している場合は、IE 用に別のスタイル シートを作成できます。これにより、これは IE でのみ有効になります。

    CSS コードコンテンツをクリップボードにコピーします

    これらのコードの意味は次のとおりです: このコードは、ユーザーのブラウザが IE6 以下の場合にのみ有効です。 IE7 を含める場合は、「[if lt IE 7]」を「[if lte IE 7]」に変更します。

    以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。

関連ラベル：
html 初心者 ベストプラクティス
ソース：php.cn
前の記事：HTML/XHTML_HTML/Xhtml_Webページ制作におけるimgイメージタグの基本的な使い方を詳しく解説 次の記事：HTML_HTML/Xhtml_Web ページ制作における水平線の注釈とコード コメントの使い方を簡単にマスターします。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
PX から REM への自動変換エラー <style>html { font-size: calc(100vw / 3.75); }body { font-size: 0.16rem; }</style...
から 2024-04-16 09:34:16
0
0
4687
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
CSSでページ下部の謎の空白を解決する方法 Bootstrap と D3 を使用して単純な Web ページを構築しようとしていますが、下部の空白をすべて削除する方法がわかりません。それをなくしたいのです。 bodyとhtml...
から 2024-04-06 20:22:15
0
1
454
livewire遅延プレースホルダーでlaravelコンポーネントを使用する方法 laravel コンポーネントのスケルトンを livewire3 プレースホルダー内に追加したい これまでに試したこと: Laravel コンポーネントを含めることによる Live...
から 2024-04-06 20:02:10
0
2
543
文字列を HTML コード (配列から生成) に置き換えるトップレベルのメソッド 次のような文字列があるとします... $htmlPattern="Usernameis:#name#andusercompanyis#company#"; 部分...
から 2024-04-06 17:40:41
0
2
410
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート