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

フロントエンド開発における一般的なテクニックのまとめ
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 プラグインを使用します (初心者向けチュートリアル)

推薦する

Linux LVM 論理ボリューム構成プロセス (作成、増加、削減、削除、アンインストール) の詳細な説明

Linux LVM論理ボリューム構成プロセスの詳細な説明多くの Linux ユーザーは、オペレーティ...

vue構成ファイルはルーティングとメニューインスタンスコードを自動的に生成します

目次前面に書かれたルータ.jsonルート生成メニュー生成効果要約する前面に書かれたルートを繰り返し記...

Vue の v-model ディレクティブと .sync 修飾子の違いの詳細な説明

目次vモデル.sync微妙な違い機能シナリオを要約します。 vモデル <!--親コンポーネント...

nacos が mysql に接続できない場合の解決策

理由nacos の pom が依存する mysql バージョンが、mysql バージョンと一致してい...

LambdaProbe を使用して Tomcat を監視する方法

導入: Lambda Probe (旧称 Tomcat Probe) は、Apache Tomcat...

MySQL バッチ SQL 挿入パフォーマンス最適化の詳細な説明

大量のデータを扱うシステムの中には、クエリ効率の低さやデータの保存時間の長さといったデータベースの問...

Dockerデータストレージの概要

この記事を読む前に、ボリューム、バインドマウント、tmpfs マウントの基本を理解しておいてください...

dockerでデプロイされたjenkinsでgitプログラムを実行する際の問題について

1. まず、gitを関連付けるときにエラーメッセージが報告されます: エラー: ビルドするリビジョン...

MySQL で 2 つのセットの交差/差/和を取得する方法

MySQL の一般的なシナリオ: 2 つのデータ セットの交差と差を取得するステップ1. 2つのコレ...

シンプルなカルーセル チャートを実装するための JavaScript の最も完全なコード分析 (ES5)

この記事では、シンプルなカルーセル効果を実現するためのJavaScriptの具体的なコードを参考まで...

Vueリスナーの使用例の詳細な説明

1つ目はjQueryのajaxを使用してリクエストを送信することです ユーザーが登録するときに、リス...

Linux で固定 IP を設定する方法 (テスト済みで効果的)

まず、仮想マシンを開きます xshell5 を開いて仮想マシンに接続します (より便利です。Linu...

Uniapp WeChatアプレット: キー障害の解決策

ユニアプリコード <テンプレート> <表示> <image v-for...

MySQLはテーブル内のフィールドを別のテーブル内のフィールドの値と等しくなるように更新します

以下のように表示されます。 table1 を z として更新し、table2 を zb として結合し...

docker と docker-compose による eureka の高可用性の実現の詳細な説明

最近、新しいプロジェクトでは springcloud と docker が使用されています。この 2...