HTML5/"> HTML5の時代が人気があります。ブラウザの互換性をまだ待っている場合、それはあなたがウェブと接触していないことを意味します。もちろん、これはモバイルクライアントの活況を呈している開発によるものです。信じないでください、私は言うことができます:信じられないかもしれません!
標準のHTML5タグ構造を見てみましょう:(ここでタグについて話しているだけで、他に何も関係ありません)
<!doctype html>
<html>
<head>
<メタcharset = "gb2312">
<title> html5 </title>
</head>
<body>
<ヘッダー>
<nav> </nav>
</header>
<記事>
<section>
<h2> </h2>
<p> </p>
</section>
</article>
<フッター> </footer>
</body>
</html>
HTML5タグの進歩はもちろん、そのセマンティクスがより直感的であるためです。もちろん、これはHTML5の進捗状況のヒントの1つにすぎません。一部の人々はそれを示唆しています:HTML5の進捗が革新的であると言わないでください、しかし発達的です!私はこの声明に反対していませんが、それは実際にいくつかの点で革命的です。ここで話題になりたくありません。ラベルについてのみ話します。
もちろん、このような素晴らしいセマンティックタグに興奮しているとき、私は尋ねる必要があるだけではありません:IEはそれをサポートしていますか?残念ながら、答えはノーです。あなたがすでにIEに怖がっているなら、あなたはその無限の拷問に耐え続けなければなりません。 (IE9とIE10はすでに互換性があり、HTML5とCSS3/"> CSS3.0をサポートしています)
しかし、あなたはあなたが住んでいるこの時代に多くの天才がいることを嬉しく思いなければなりません。誰かがあなたがこの問題を解決するのを助けました!しかし、それは完璧と呼ぶことはできません!
IE6/7/8と互換性のあるHTML5タグをサポートしないという問題を解決するために、いくつかのソリューションを見てみましょう。
1。JavaScript:document.createelenment(......) IE6/7/8がサポートされていない理由の一部は、フッターが有効なHTMLタグとは見なされないことです。だから、私たちはそれをラベルにするだけではありませんか?最も直接的な方法は、もちろんJavaScript:document.createelenment(......)を作成することです!(関数(){
var element = ['header'、 'footer'、 'article'、 'asper'、 'section'、 'nav'、 'menu'、 'hgroup'、 'detaily'、 'dialog'、 'fight'、 'figcaption']、
len = element.length;
while(len-){
document.createelement(要素[i])
}
})();
これは、IE6/7/8でタグになることができるように、いくつかの典型的なHTML5タグを作成するだけです。
誰かが完全なJSファイルを書いたので、このように紹介する必要があります。
<! - [lt ie 9]>
<スクリプトsrc = http://html5shim.googlecode.com/svn/trunk/html5.js> </script>
<![endif] - >執筆もあります
<! - [LTE IE 9]>
<スクリプトsrc = http://html5shiv.googlecode.com/svn/trunk/html5.js> </script>
<![endif] - > HTML5SHIVとHTML5SHIMの唯一の違いはMとVであり、他の違いはありません!もちろん、これは私が言ったことではありません。元のテキストは次のとおりです。...唯一の違いは、mがman、1つはavを持っていることです - それだけです。
ここで特別なメモを取りたい:つまり、つまり、ユニークな注釈判断:
LTE:等または等しいものの略語であり、それよりも低いことを意味します。
LT:略語は未満の略語です。つまり、より少ないことを意味します。
GTE:より大きいまたは等しいものの略語であり、これはより大きいまたは等しいことを意味します。
GT:より大きいことを意味します。
! :それは等しくないことを意味し、javascriptの非等しい判断記号と同じ
IE9はHTML5タグをサポートしていますが、サポートはそれほど完全ではないため、選択したLTEを書くこともできます。
もちろん、新しく作成されたタグの表示プロパティを指定することを忘れないでください。ほとんどの場合、タグをブロックしたい:
ヘッダー、フッター、記事、脇、セクション、ナビゲーション、メニュー、hgroup、詳細、ダイアログ、フィギュア、figcaption {display:block}
2。ネストタグの方法実際、それを率直に言うと、それはセマンティックHTML5タグNest Divやその他の利用可能なタグをタグ付けし、Divのスタイルのみを書くためです。この執筆方法には同意しません。これは、それを行うよりも優れています。タグにセマンティックIDまたはクラスを提供してください!
<! - [lt ie 9]>
<style>
body> * .section {
色:#ff0;
}
</style>
<![endif] - >
<style>
セクション.Section {color:#f00;
}
</style>
<section> <div>コンテンツテスト... </div> </section>
しかし、この構造に似ている場合、使用することは安全ではありません。<nav>
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
</nav>
3。つまり、条件付きコメント<! - [if lt ie 9]> <div> <![endif] - >
<! - [ie 9]> <section> <![endif] - >
<! - [if!ie]> <! - > <セクション> <! - <![endif] - >
......
<! - [if lt ie 9]> </div> <![endif] - >
<! - [ie 9]> </section> <![endif] - >
<! - [if!ie]> <! - > </section> <! - <![endif] - >
IEのユニークなコメント判断をもう一度見てください:
LTE:等または等しいものの略語であり、それよりも低いことを意味します。
LT:略語は未満の略語です。つまり、より少ないことを意味します。
GTE:より大きいまたは等しいものの略語であり、これはより大きいまたは等しいことを意味します。
GT:より大きいことを意味します。
! :それは等しくないことを意味し、javascriptの非等しい判断記号と同じ
誰もが何が起こっているのか理解していると思います!これはもっと痛い方法です!大量のHTMLコードにより、元々はさらに混乱を招くことを望んでいたコードが作成されます。そして、それはスタイルを書くのに役立ちません。
4. XMLNSを使用して、ドキュメントのライフスペースを定義しますXMLNSは、いわゆる名前空間であるXHTMLネームスペースの略語です。 Doctype宣言のように、XMLNSも宣言です。 Doctype宣言はまだHTMLドキュメントに存在するのとは異なり、XMLNSはHTMLドキュメントには存在しません。通常表示されるXMLNS XHTMLドキュメントに表示されます。
<html xmlns = http://www.w3.org/1999/xhtml lang = en>これはxhtmlの元の名前空間であり、HTML5の後に簡素化されました。
<html lang = en> Elco Klingenログからの方法は、最初に広範囲にわたる注目を集めました。この手法にはXML名空間が含まれており、次のような名前空間プレフィックスを持つ要素を使用します。
<!doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml" xmlns:html5 = "http://www.w3.org/html5/">
<body>
<HTML5:セクション>
<! - content->
</html5:セクション>
</body>
</html>
:HTML5のプレフィックスは標準的な書き方ではなく、代わりに他の文字を使用することもできます。HL5も問題ありません。プレフィックスを使用すると、つまり新しい要素を認識し、スタイルを適用できます。他のブラウザでも同様に機能するため、最終的には、各ブラウザで同じ要素と同じスタイルを正常に構築することができます。
この方法には明確な欠陥があります。HTMLドキュメントでXML形式の名前空間を使用する必要があります。また、CSSでもこれを行う必要があります。
HTML5/:セクション{
表示:ブロック;
}
では、JSとの互換性はどうですか?これがテストDEMLです
<!doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml" xmlns:html5 = "http://www.w3.org/html5/">
<head>
<title>; html5 </title>
<メタcharset = "gb2312">
<style>
HTML5/:セクション{展示:ブロック;幅:100px;高さ:50px;背景:#f00;ボーダー:1pxソリッドブルー;色:#ff0; }
</style>
<スクリプト>
window.onload = function(){
alert(document.getElementById( "test")。innerhtml + "--- id")
alert(document.getElementsByTagname( "section")[0] .innerhtml + "--- tagname")
alert(document.getElementsByTagname( "section")[0] .innerhtml + "---上級")
}
</script>
</head>
<body>
<HTML5:セクションID = "test">コンテンツ</html5:セクション>
</body>
</html>
テスト結果はIE6/7/8でテストされましたが、FixFoxとChromeで取得できるIDのみが取得できるため、この方法は許容可能な方法ではありません!