フロントエンド開発における一般的なテクニックのまとめ

1. 記事タイトルリストの右側に日付を表示する方法:

コードをコピー

コードは次のとおりです。

<p><span>2010-10-10</span>@Mr.Thinkこれは記事のタイトルです</p>

次に、右にフロートする span を定義します。

p スパン{float:right}
実際、この方法は多くの状況に拡張することができ、非常に実用的な書き方です。
2. Web 標準によれば、ページには h1 タグを 1 つしか使用できません。この概念を知っている人はたくさんいますが、実際に実行している人はほとんどいません。
3. 空白の余白が重なる問題: 通常は透明な境界線または 1 ピクセルの内側の余白を追加することでこれを回避します。詳細な説明: https://www.jb51.net/css/28157.html
4. IE6 での最大/最小幅/高さの実装、_width: expression(this.width >600 ? "600px" : true);、高さは同じです。
5.html/class/id は、より厳密に小文字で記述するのが最適です (xhtml 標準に準拠)。
6. IE8 との互換性を保つために、次のコードを使用することはお勧めしません。

<meta http-equiv="X-UA-compatible" content="IE=7" />
非短期的なページの場合は、そのページの使用を避け、可能な限り下位互換性を確保する必要があります。
7. 空の div には IE ではデフォルトの高さがありますが (FF ではそうではありません)、次のように定義することでデフォルトの高さを削除できます: div { witdh:100%; background:#9c0; ling-height:0};
8. テーブルタグを使用する場合は、構造とスタイルを最大限に分離するために、独自のプロパティをできるだけ活用する必要があります。詳細説明: https://www.jb51.net/css/28158.html
9. フォームのラベルタグを最大限に活用して、ユーザーエクスペリエンスを向上させます。これは、ページ上の小さなオプションボックスや、障害を持つ人が Web サイトを読む場合に役立ちます。詳細は、ユーザーエクスペリエンスの第一歩です。
10.fieldset、凡例タグ、あまり知られていませんが非常に実用的なタグのセット。主にフォームで使用される、要素のグループを明確にフレーム化できます。
11. optgroup タグはあまり知られていませんが、選択フォームのユーザーエクスペリエンスを向上させるのに非常に役立ちます。これは何をするのでしょうか。オプションが多数ある場合にオプションをグループ化できます。

コードをコピー

コードは次のとおりです。

12. フォームには名前の値が必要です。名前の値はラベルであり、ID とは異なります。私が調べた限りでは、名前の値が定義されていない場合、IE 以外のブラウザーでは document.formid を通じてフォーム要素を取得できません。次のコードとコメントを参照してください。

コードをコピー

コードは次のとおりです。

<html>
<ヘッド>
<スクリプト>
window.onload = 関数(){
alert(document.mrform.length); //すべてのブラウザでフォーム要素の長さが表示されます
alert(document.thinkform.length); // IE のみフォーム要素の長さをポップアップ表示します
}
</スクリプト>
</head>
<本文>
<フォーム名="mrform" id="thinkform" アクション="#">
......
</フォーム>
</本文>
</html>

出典: http://mrthink.net/css-common-summary/

<<: CSSラベル表示モードについて1つの記事で学ぶ

>>: IDEA は Docker プラグインを使用します (初心者向けチュートリアル)