クロスブラウザ開発体験のまとめ(I)HTMLタグ

クロスブラウザ開発体験のまとめ(I)HTMLタグ

ページにDOCTYPEを追加する
ブラウザによってタグやスタイルシートの解釈が異なるため、さまざまなブラウザが統一された HTML 標準に従ってページを解析およびレンダリングできるように、HTML ファイルの標準ドキュメント タイプを定義する必要があります。

!DOCTYPE 宣言は、次のようにドキュメントが準拠する DTD を指定します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

標準 HTML タグの正しい使用: レイアウトにはテーブルではなく div+css レイアウトを使用するようにしてください。
レイアウトにテーブルを使用すると、コードが冗長になりやすく、<div></div> を使用して記述するよりもコードが複雑になります。さらに、テーブルでは、表示する前にすべての要素をダウンロードする必要があり、対応する Web ページの開きが遅くなります。

標準化されたページ構造 (DIV + CSS) を使用する必要があります。このレイアウト方法は、コードが簡潔で、ページの閲覧速度が速く、ページレイアウトが柔軟です。ページを修正するときは、プログラムを変更せずに CSS スタイルを変更するだけでページを再レイアウトできるため、Web サイトの修正コストが削減されます。

特にフォーム タグ内に div などの他のタグをネストする場合は、タグの閉じ関係に注意してください。
場合によっては、余白をリセットしても避けられない余分な空白がページに表示されることがあります。これは、ページ要素の終了タグが一致していないことが原因である可能性があります。たとえば、次のようになります。

<div class="outer">
<フォーム名=”testForm”>
<div class="inner">
<入力名=”タイトル” タイプ=”テキスト” />
</フォーム>
</div>
</div>

テーブルを定義するときに tbody 要素を使用すると、IE を含むすべてのブラウザーで正しく使用できるようになります。テーブルで tbody 要素が明示的に定義されていない場合でも、ブラウザーは tr ノードの親ノードが自動的に追加されたデフォルトの tbody ノードであると想定します。JavaScript を使用して tr ノードを操作するときに誤解を避けるために、次のように手動で追加することをお勧めします。

<テーブルid=”myTable”>
<tbody id=”myTableBody”>
<tr>
<td>
</td>
</tr>
</tbody>
</テーブル>

タグと属性の大文字/小文字に注意してください。<br />要素にバインドされた一部のイベントは、IE ブラウザーでは応答しますが、Safari や他のブラウザーでは応答しないことがあります。このとき、イベント バインディング メソッドの正確性を確認する必要があります。高度なイベントのバインディングでは、IE と他のブラウザーを区別するために 2 セットの JavaScript を記述する必要がありますが、シンプルなイベント モデルでは、バインドされたイベント名の大文字と小文字に注意する必要があります。のように:

<input type=”text” name=”keywordSearch” onFocus=”clearValue()” >

ここでは小文字の onfocus を使用し、標準的な書き方としてタグ終了記号を明示的に追加する必要があります。

<input type=”text” name=”keywordSearch” onfocus=”clearValue()” />



タグの属性値の設定に注意してください
<script>タグの言語属性とタイプ属性
<script> タグの language 属性は、スクリプト言語のバージョンを定義するために使用されます。正しい割り当ては <script> の形式です。これは、ブラウザ (主に IE) に JavaScript 構文の 1.2 バージョンを使用して解釈するように指示するために使用されます。type 属性は、スクリプトの種類を定義するために使用されます。これは W3C の標準属性であり、小文字の属性を使用することは標準に準拠しています。ブラウザに JavaScript 言語の下位バージョンに従って解釈するように指示する必要がある特別な状況がない場合は (ほとんどのブラウザは現在 JavaScript バージョン 1.5 をサポートしています)、通常、language 属性を定義する必要はありませんが、type 属性は定義する必要があります。だからコードを

<SCRIPT Language="JavaScript">を<script>に変更します

<a>タグのalt属性とtitle属性<br />IEでは要素にマウスを合わせると、alt属性とtitle属性の値がツールチップとして表示されますが、両者の間にはまだ違いがあります。 alt は画像が表示されていないときの代替表示であり、title はマウスを画像の上に置いたときのプロンプトです。

<input> タグの checked 属性と readonly 属性<br />HTML の初期のバージョンでは、すべての属性に値を割り当てることが必須ではありませんでした。選択されたチェックボックスを表す場合、<input selected > が認識されました。ただし、XHTML 標準によれば、このような文法は厳密な XML 形式ではありません。属性の割り当てとタグの閉じに注意して、HTML 標準の開発動向に準拠し、次のように記述する必要があります。

<input チェック済み="チェック済み" />

<input readonly="読み取り専用" />

<option>タグの選択された属性

前と同じ理由で、<select> オプション内の <option> タグの selected 属性にも値を割り当てる必要があります。

<オプションが選択されました="選択されました" />

<img> タグの align="absmiddle" 属性<br />XHTML 標準によれば、HTML タグはスタイルの制御よりもコンテンツの表示に重点を置く必要があり、スタイルは CSS によって調整する必要があります。そのため、古いタグや属性の一部は廃止されました。たとえば、<em> タグと <i> タグを使用すると、タグ コンテンツ内のテキストが斜体で表示されます。ただし、単にスタイルにちなんで名付けられた <i> タグは廃止された標準になりました。強調を意味する <em> タグに置き換えられました。同様に、<img> タグの align="absmiddle" 属性は、画像と隣接するテキストが中央に垂直に配置されていることを示します。これもスタイルを表す属性です。2 つのスタイル コントロールの相互影響を避けるために、画像の配置スタイルを制御するには、この属性の代わりに CSS を使用する必要があります。

<iframe> タグの frameborder 属性<br />iframe を使用する場合、IE で iframe の境界を非表示にするには border="0" を設定するだけでよいかもしれませんが、フレーム ウィンドウの境界を制御する標準属性は frameborder です。IE 以外のブラウザーでフレームの境界を非表示にするには、frameborder="0" を設定する必要があります。

<iframe フレームボーダー="0" />

<table> タグの cellpadding 属性<br />この属性は、<img> タグの align 属性と同様に、コンテンツを表現し、スタイルを制御するという HTML 自身の役割を超えた属性です。セル間のスペースを指定します。実用的な観点からは、セルパディングを指定するのではなく、CSS を使用してセルのパディングを制御する方が適切です。

<td> タグの nowrap 属性

Nowrap はコンテンツが自動的に折り返されないことを示す属性ですが、上記の属性と同様にスタイルを制御する属性です。 HTML 4.01 では、<td> タグの「bgcolor」、「height」、「width」、および「nowrap」は非推奨です。 XHTML 1.0 Strict DTD では、<td> タグの「bgcolor」、「height」、「width」、および「nowrap」はサポートされていません。

<<:  Vueのwatch、computed、methodsの違いのまとめ

>>:  CSS でハートを描く 3 つの方法

推薦する

反応自動構築ルーティングの実装

目次順序1. 集中ルーティング2. ファイルディレクトリ3. CompileRouterを作成する4...

ウェブページを作るときに知っておくべきいくつかのスキル

1. IE6 では z-index が無効です。 CSS では、階層を変更するために z-index...

JavaScript でシンプルなタイマーを実装する

この記事では、参考までに簡単なタイマーを実装するためのJavaScriptの具体的なコードを紹介しま...

MySQL の遅いクエリとクエリ再構築方法の記録

序文スロークエリとは何か、またスロークエリを最適化するにはどうすればよいか。以下では、これら 2 つ...

Linux で crond ツールを使用してスケジュールされたタスクを作成する方法

序文Crond は Linux のスケジュール実行ツール (Windows のスケジュールされたタス...

MySQL の遅いクエリの例

導入スロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメントを記録で...

初心者でもjsのtypeofとinstanceofの違いを理解できます

目次1. 型2. インスタンス3. 違い1. 型typeof 演算子は、評価されていないオペランドの...

測定画像HTTPリクエスト

一般的なブラウザでテスト ページを開き、Fiddler で http リクエストを表示してください。...

CentOS7におけるKVM仮想化の基本管理の詳しい説明

1. kvm仮想化をインストールする : : : : : : : : : : : : : : : :...

MySql インデックスはクエリ速度を向上させる一般的な方法のコード例

インデックスを使用してクエリを高速化する1. はじめにWeb 開発には、ビジネス テンプレート、ビジ...

Ubuntu 20.04 オペレーティング システムの VMware インストール チュートリアル図

メモ: とにかく体験してみましょう。記録: NO.209この例の環境:仮想マシン: vmwareオペ...

Mac インストール mysqlclient プロセス分析

仮想環境で pip 経由でインストールしてみてください: pip で mysqlclient をイン...

Linux サーバーのグラフィック カードのクラッシュの解決策

ログインインターフェースの解像度が特に大きい場合、グラフィカルインターフェース全体が特に大きくなり、...

mysqlにコメント情報を追加する実装

序文最近、MySQL に関するメモをいくつか尋ねる人がいたので、ブログ記事を書かなければなりません。...

JavaScript キャンバスで動的な点と線の効果を実現

この記事では、動的な点と線の効果を実現するためのJavaScriptキャンバスの具体的なコードを参考...