クロスブラウザ開発体験まとめ(1) HTMLマークアップ_HTML/Xhtml_Webページ制作

为页面添加DOCTYPE
由于不同浏览器对标签,样式表的解释不尽相同,所以需要为html文件定义一个标准的文档类型,使不同浏览器尽量按照一个统一的html标准来解析渲染页面。

!DOCTYPE 声明指定文档遵从的 DTD，如：






标准HTML标签的正确使用
尽量使用div+css布局,不用table做布局。
使用table做布局容易造成代码冗余，相对

编写来说，代码繁多。并且，table需要将元素都下载后进行显示，相应的网页打开速度也较慢。

应该使用标准化的页面结构：DIV+CSS。这种布局方式代码简洁，页面浏览速度较快，页面布局灵活，改版时只需改CSS样式即可实现页面重新布局，而不用改动程序，从而降低了网站改版的成本。

注意标签的闭合关系,尤其是在form标签中嵌套div等其他标签时。
有的时候页面上会出现多余的空白，即使重新设置了margin也无法避免，这个时候有可能是页面元素标签闭合出现了不配对的情况，如：

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


;/tr>




一部のイベントは、要素は IE ブラウザでは応答しますが、safari や他のブラウザでは応答しません。このとき、イベント バインディング メソッドが正しいかどうかを確認する必要があります。高度なイベント バインディングの場合は、IE と他のブラウザーを区別するために 2 つの JavaScript を記述する必要があります。単純なイベント モデルの場合は、大文字と小文字の区別に注意する必要があります。バインドされたイベント名の。例:


ここでは小文字の onfocus を使用し、ラベル終了記号を追加する必要があります。と表示されるのが標準的な書き方です。





属性値に注意してくださいラベルの設定

<script> タグの language 属性と type 属性 <br /> <script> タグの language 属性は、スクリプト言語のバージョンを定義するために使用されます。 <script> の形式でブラウザに通知します。ブラウザ (主に IE) は JavaScript 構文のバージョン 1.2 を使用して解釈します。type 属性は、w3c の標準属性であり、小文字の属性を使用します。標準的な習慣。 JavaScript 言語の下位バージョン (現在ほとんどのブラウザでサポートされている JavaScript バージョンは 1.5) に従って解釈するようにブラウザーに指示する必要がある特別な状況がない場合、通常は language 属性を定義する必要はありませんが、 type 属性を定義する必要があります。したがって、コード内の <br /><br /><strong><SCRIPT Language="JavaScript"> を <script> <br /><br /><br />< に変更する必要があります。 a> タグと title 属性 <br /> <strong>IE の下にマウスを置くと、alt と title の 2 つの属性の値がツールチップの形式で表示されますが、この 2 つの属性には依然として違いがあります。 alt は画像が表示されていないときの代替表示、title はマウスを置いたときのプロンプトです。 <br /><br /><input> <strong> タグの selected 属性と readonly 属性 HTML の初期バージョンでは、選択されたチェックを示すときにすべての属性に値を割り当てる必要はありませんでした。ボックスで、<入力チェック> が受け入れられます。ただし、XHTML 標準によれば、このような文法は厳密な XML 形式ではなく、HTML 標準の開発傾向に準拠するために、属性の割り当てとタグの閉じ方に注意を払う必要があります。 ><br /><br /><input selected="checked" /><br /> <strong><br /><input readonly="readonly" /><br /> <br /><strong> <option> タグの selected 属性 <br /> <br /><strong> 前と同じ理由で、<select> タグの selected 属性も割り当てる必要があります。値: <br />< option selected="selected " /> <br /><strong><img alt="クロスブラウザ開発体験まとめ(1) HTMLマークアップ_HTML/Xhtml_Webページ制作" > タグの align="absmiddle" 属性 <br /> <br /> , HTML タグは、スタイルの制御ではなくコンテンツの表示に重点を置く必要があり、スタイルは CSS によって調整する必要があります。したがって、一部の古いタグと属性は廃止されました。たとえば、<em> タグと <i> タグの内容は斜体で表示されます。単にスタイルにちなんで命名された Standard は廃止され、強調を表す <em> タグに置き換えられました。同様に、<img alt="クロスブラウザ開発体験まとめ(1) HTMLマークアップ_HTML/Xhtml_Webページ制作" > タグの align="absmiddle" 属性は、画像と隣接するテキストが中央に配置されることを示します。これも、この属性の代わりに CSS を使用する必要があることを示します。画像の配置スタイルを制御して、スタイル コントロールの 2 つの相互作用を回避します。 <br /><br /><br /><iframe> タグの Frameborder 属性<br /> <strong>iframe を使用する場合、IE で border="0" を設定するだけで、iframe の境界線が表示されなくなります。フレーム ウィンドウの境界を制御する属性は、frameborder="0" を設定して、IE 以外のブラウザでフレームの境界を非表示にする必要があります。<br /><iframe Frameborder="0" /> <br /><br /><table> タグの cellpadding 属性<strong> この属性は、<img alt="クロスブラウザ開発体験まとめ(1) HTMLマークアップ_HTML/Xhtml_Webページ制作" > タグの align 属性と同様に、HTML 自体のコンテンツを表現する責任をオーバーライドし、ユニット間のスペースを指定します。実用的な観点からは、cellpadding を指定せず、CSS を使用してセルのパディングを制御することをお勧めします。 <br /><br /><strong><td> <br /><br />nowrap タグの nowrap 属性は、コンテンツが自動的に折り返されないことを示す属性ですが、上記の属性と同様に、スタイルを制御する属性。 HTML 4.01 では、<td> タグの「bgcolor」、「height」、「width」、「nowrap」タグは非推奨になりました。 XHTML 1.0 Strict DTD では、<td> タグの「bgcolor」、「height」、「width」、「nowrap」はサポートされていません。 </script>