クロスブラウザ開発体験のまとめ(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 つの方法

推薦する

MySQL でのテーブルの作成と削除の詳細な例

テーブル作成コマンドには以下が必要です。 テーブルの名前フィールド名各フィールドを定義します(タイ...

最新の超詳細な VMware 仮想マシンのダウンロードとインストールのグラフィック チュートリアル

目次1. 仮想マシンをダウンロードする2. 仮想マシンのインストールVMware のダウンロードとイ...

Nodejs 探索: シングルスレッドの高並行性の原理を深く理解する

目次序文一目でわかる建築オペレーティングシステムとの対話シングルスレッドイベント駆動/イベントループ...

一目でわかる$nextTickの説明

目次1. 機能説明2. 親コンポーネント3. サブコンポーネント NextTick.vue 4なぜ未...

MySQL 5.7.21 winx64 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 5.7.21のインストールに関する注意事項をまとめ、皆さんと共有します。 ...

HTMLのフォントがline-heightを指定しても垂直方向に中央揃えできない問題の解決方法を詳しく説明します

による写真に示されている効果を例に挙げてみましょう。明らかに、「次へ」というテキストを水平方向だけで...

CSS3 を使用して中心点の周りに要素を配置する方法の例

この記事では、CSS3 を使用して中心点を中心に要素をレイアウトする方法の例を紹介します。詳細は次の...

モバイル端末での Vue2.x Picker のグローバル呼び出し実装

目次ピッカーコンポーネントとはピッカーコンポーネントの問題解決オプションの説明解決ディレクトリ部門P...

エージェントを介したzabbix監視プロセスとポートの詳細なプロセス

環境の紹介オペレーティングシステム: Centos 7.4 Zabbix バージョン: zabbix...

MySQLのスイッチングデータ保存ディレクトリの実装方法

MySQLのスイッチングデータ保存ディレクトリの実装方法今日、仕事中に、mysql が保存されている...

HTML に画像が存在しない場合にデフォルトの画像を表示する方法の例

画像リンク <img src="" /> jsを使用してURLが有効...

高速レイアウトのための CSS ビューポート単位

CSS ビューポート ユニットはここ数年登場しており、時が経つにつれて、ますます多くの開発者が使用し...

CSS3 で transform を使用した場合のフォントぼかしの解決方法の詳細な説明

この質問は非常に奇妙なので、あまり多くを語らずにコードに直接進みます。 .g-ダイアログラッパー{ ...

JSは単純なフィルタリングから複数条件のフィルタリングまで配列フィルタリングを実装します

目次単一条件単一データフィルタリング単一条件複数データフィルタリング複数の条件付きデータフィルタリン...

テキストの円形スクロールアニメーションを実装するミニプログラム

この記事では、参考までに、テキストループスクロールを実現するアプレットの具体的なコードを例を挙げて紹...