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

フロントエンド開発における一般的なテクニックのまとめ
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 タグはあまり知られていませんが、選択フォームのユーザー エクスペリエンスを向上させるのに非常に役立ちます。これは何をするのでしょうか。オプションが多数ある場合にオプションをグループ化できます。

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

<select id="selectId">
<optgroup label="グループ 1">
<option value="1">1つ選択</option>
<option value="2">2つ選択</option>
</optgroup>
<optgroup label="グループ 2">
<option value="3">3つ選択</option>
<option value="4">4つ選択</option>
</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 プラグインを使用します (初心者向けチュートリアル)

推薦する

CSS の子要素を親要素と高い一貫性を持たせる方法

絶対位置決め方式: (1)親要素を相対配置に設定します。親要素の高さを指定しない場合は、左の子要素の...

Linux環境変数の設定戦略の詳細な説明

ソフトウェアのインストールをカスタマイズする場合、多くの場合、環境変数を設定する必要があります。以下...

MySQLデータベースはMMM高可用性クラスタアーキテクチャを実装します

コンセプトMMM (Mysql のマスター マスター レプリケーション マネージャー) は、Perl...

MySQLがlocalhost経由でデータベースに接続できない問題に対する完璧な解決策

問題:あるサーバー上の PHP プログラムは、localhost アドレス経由でデータベースに接続で...

MySQLプロセスを安全かつ適切にシャットダウンする方法

序文この記事では、mysqld プロセスをシャットダウンするプロセスと、MySQL インスタンスを安...

VUEウォッチリスナーの基本的な使い方の詳しい説明

目次1. 次のコードはwatchの簡単な使用法です2. 即時監視3. ハンドラメソッド4. 深い属性...

面接の質問: 3 行 3 列のレイアウト、表は結合され、ネストされた表は許可されません

面接の質問で、3 行 3 列のレイアウトが求められます。1 行目の 2 番目の列と 2 行目の 2 ...

Zabbix を使用して ogg プロセスを監視する (Windows プラットフォーム)

この記事では、Windows プラットフォームで ogg プログラムを監視する方法を紹介します。 (...

vscode dockerプラグインのdocker.socket権限問題を解決する

解決策: システム内のすべての .vscode 関連プロセスを終了します (または、remote-s...

APP (IOS、Android) を呼び出すモバイル H5 の記述例

iOS 1. URLスキームこのソリューションは基本的に、WeChat、QQ 組み込みブラウザ、QQ...

CSSアニメーション効果アニメーションの一般的なスタイル

アニメーションアニメーションを定義します。 /*アニメーションの各ステップで実行されるアクションを定...

CentOS7 systemdにカスタムシステムサービスを追加する方法

システムド: CentOS 7のサービスsystemctlスクリプトは、/usr/lib/syste...

React 星評価コンポーネントの実装

要件は、製品の評価データを渡すことであり、ページには対応する星の数が表示されます。 1. 異なる評価...

JavaScript で実装された 7 つのソート アルゴリズムの概要 (推奨!)

目次序文バブルソート基本アルゴリズム2 番目の書き方は、基本的なアルゴリズムに基づいて改良されていま...

Vueはvue-quill-editorリッチテキストエディタを使用し、画像をサーバーにアップロードします。

目次1. 準備2. グローバルコンポーネント quill-editor を定義する1. テンプレート...